@fluid-topics/ft-infinite-scroll 0.3.5 → 0.3.7
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,34 @@ 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;
|
|
32
40
|
appendItems(...items: Array<T>): void;
|
|
33
41
|
prependItems(...items: Array<T>): void;
|
|
34
42
|
private onVisibilityChange;
|
|
35
43
|
private intersectionObserver;
|
|
36
44
|
connectedCallback(): void;
|
|
45
|
+
private triggerFindScrollableParent;
|
|
46
|
+
private findScrollableParent;
|
|
37
47
|
private onResize;
|
|
38
48
|
private resizeObserver;
|
|
39
49
|
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,48 @@ 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;
|
|
47
55
|
for (const resizable of resizables) {
|
|
56
|
+
const index = +resizable.target.parentElement.getAttribute("data-item-index");
|
|
48
57
|
let currentHeight = resizable.target.parentElement.clientHeight;
|
|
49
58
|
let newHeight = resizable.contentRect.height;
|
|
50
|
-
if (
|
|
59
|
+
if (this.alreadyRenderedIndexes.has(index)) {
|
|
51
60
|
resizable.target.parentElement.style.height = newHeight + "px";
|
|
52
|
-
diff +=
|
|
61
|
+
diff += index < this.visibleItems[0] ? currentHeight - newHeight : 0;
|
|
53
62
|
}
|
|
54
63
|
}
|
|
55
|
-
if (isSafari) {
|
|
64
|
+
if (this.scrollable && isSafari) {
|
|
56
65
|
this.scrollable.scrollTop -= diff;
|
|
57
66
|
}
|
|
58
67
|
};
|
|
59
68
|
this.resizeObserver = new ResizeObserver(this.onResize);
|
|
60
69
|
this.onMutation = () => {
|
|
61
|
-
[...this.
|
|
70
|
+
[...this.itemsContainer.children].forEach((item) => {
|
|
62
71
|
this.intersectionObserver.observe(item);
|
|
63
72
|
this.resizeObserver.observe(item.children.item(0));
|
|
64
73
|
});
|
|
65
74
|
};
|
|
66
75
|
this.mutationObserver = new MutationObserver(this.onMutation);
|
|
67
76
|
}
|
|
77
|
+
get scrollable() {
|
|
78
|
+
return this.internalScroll ? this.internalScrollable : this.firstScrollableParent;
|
|
79
|
+
}
|
|
68
80
|
render() {
|
|
69
81
|
return html `
|
|
70
|
-
<div class="scrollable"
|
|
82
|
+
<div class="items-container ${this.internalScroll ? "scrollable" : ""}"
|
|
83
|
+
tabindex="-1"
|
|
84
|
+
@find-scrollable-parent=${this.findScrollableParent}>
|
|
71
85
|
${repeat(this.items, (item, index) => this.renderItemContainer(item, index))}
|
|
72
86
|
</div>
|
|
73
87
|
`;
|
|
74
88
|
}
|
|
75
89
|
renderItemContainer(item, index) {
|
|
76
|
-
const isVisible = this.scrolledToTarget &&
|
|
90
|
+
const isVisible = this.scrolledToTarget && this.visibleItems.includes(index);
|
|
91
|
+
const isRendered = this.alreadyRenderedIndexes.has(index) || (this.scrolledToTarget && (index >= this.visibleItems[0] - 1 && index <= last(this.visibleItems) + 1));
|
|
92
|
+
if (isRendered) {
|
|
93
|
+
this.alreadyRenderedIndexes.add(index);
|
|
94
|
+
}
|
|
77
95
|
const renderItem = () => {
|
|
78
96
|
const rendered = this.renderItem(item, index);
|
|
79
97
|
if (typeof rendered === "string") {
|
|
@@ -85,22 +103,32 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
85
103
|
<div id="item-${index}"
|
|
86
104
|
class="item-container"
|
|
87
105
|
data-item-index="${index}">
|
|
88
|
-
<div class="resizable ${isVisible ? "visible" : ""}">
|
|
89
|
-
${
|
|
106
|
+
<div class="resizable ${isVisible ? "visible" : ""} ${isRendered ? "rendered" : ""}">
|
|
107
|
+
${isRendered ? renderItem() : null}
|
|
90
108
|
</div>
|
|
91
109
|
</div>
|
|
92
110
|
`;
|
|
93
111
|
}
|
|
94
112
|
resetScroll() {
|
|
95
|
-
var _a;
|
|
96
113
|
this.intersectionObserver.disconnect();
|
|
97
114
|
this.resizeObserver.disconnect();
|
|
98
115
|
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
116
|
this.scrolledToTarget = false;
|
|
117
|
+
this.scrollDebouncer.run(() => {
|
|
118
|
+
var _a, _b;
|
|
119
|
+
let internalScrollToIndex = (_a = this.scrollToIndex) !== null && _a !== void 0 ? _a : (this.scrollToItem ? this.items.indexOf(this.scrollToItem) : -1);
|
|
120
|
+
if (internalScrollToIndex >= this.items.length) {
|
|
121
|
+
internalScrollToIndex = -1;
|
|
122
|
+
}
|
|
123
|
+
let target = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#item-${internalScrollToIndex}`);
|
|
124
|
+
if (target) {
|
|
125
|
+
target.scrollIntoView({ block: "start" });
|
|
126
|
+
}
|
|
127
|
+
this.onMutation();
|
|
128
|
+
setTimeout(() => {
|
|
129
|
+
this.scrolledToTarget = true;
|
|
130
|
+
}, 10);
|
|
131
|
+
});
|
|
104
132
|
}
|
|
105
133
|
appendItems(...items) {
|
|
106
134
|
this.items = [...this.items, ...items];
|
|
@@ -111,12 +139,29 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
111
139
|
connectedCallback() {
|
|
112
140
|
super.connectedCallback();
|
|
113
141
|
setTimeout(() => {
|
|
142
|
+
this.triggerFindScrollableParent();
|
|
114
143
|
this.intersectionObserver.disconnect();
|
|
115
|
-
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
|
|
144
|
+
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
|
|
145
|
+
rootMargin: "-2px",
|
|
146
|
+
threshold: [0, 0.01, 0.1]
|
|
147
|
+
});
|
|
116
148
|
this.mutationObserver.disconnect();
|
|
117
|
-
this.mutationObserver.observe(this.
|
|
149
|
+
this.mutationObserver.observe(this.itemsContainer, { childList: true });
|
|
118
150
|
}, 0);
|
|
119
151
|
}
|
|
152
|
+
triggerFindScrollableParent() {
|
|
153
|
+
this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent", { composed: true }));
|
|
154
|
+
}
|
|
155
|
+
findScrollableParent(e) {
|
|
156
|
+
e.stopPropagation();
|
|
157
|
+
for (let target of e.composedPath()) {
|
|
158
|
+
const element = target;
|
|
159
|
+
if (element.clientHeight && element.clientHeight < element.scrollHeight && ["auto", "scroll"].includes(getComputedStyle(element).overflowY)) {
|
|
160
|
+
this.firstScrollableParent = element;
|
|
161
|
+
break;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
120
165
|
disconnectedCallback() {
|
|
121
166
|
super.disconnectedCallback();
|
|
122
167
|
this.intersectionObserver.disconnect();
|
|
@@ -129,53 +174,56 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
129
174
|
}
|
|
130
175
|
update(props) {
|
|
131
176
|
super.update(props);
|
|
177
|
+
if (props.has("items")) {
|
|
178
|
+
this.alreadyRenderedIndexes = new Set();
|
|
179
|
+
}
|
|
132
180
|
if (props.has("scrollToItem") || props.has("scrollToIndex")) {
|
|
133
181
|
this.resetScroll();
|
|
134
182
|
}
|
|
135
183
|
}
|
|
136
184
|
updated(props) {
|
|
137
185
|
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
186
|
if (props.has("visibleItems") || props.has("items")) {
|
|
155
187
|
this.dispatchEvent(new VisibleItemsChangeEvent(this.visibleItems, this.visibleItems.map(index => this.items[index])));
|
|
156
188
|
}
|
|
189
|
+
if (props.has("scrolledToTarget") && this.scrolledToTarget) {
|
|
190
|
+
this.dispatchEvent(new ScrolledToTargetEvent());
|
|
191
|
+
}
|
|
157
192
|
}
|
|
158
193
|
}
|
|
159
194
|
// language=CSS
|
|
160
195
|
FtInfiniteScroll.styles = css `
|
|
161
|
-
.
|
|
162
|
-
height: 100%;
|
|
163
|
-
overflow-y: auto;
|
|
196
|
+
.items-container {
|
|
164
197
|
position: relative;
|
|
165
198
|
padding: ${FtInfiniteScrollCssVariables.padding};
|
|
166
199
|
outline: none;
|
|
167
200
|
}
|
|
168
201
|
|
|
169
|
-
.
|
|
202
|
+
.scrollable {
|
|
170
203
|
height: 100%;
|
|
204
|
+
overflow-y: auto;
|
|
171
205
|
}
|
|
172
206
|
|
|
173
|
-
.
|
|
174
|
-
|
|
207
|
+
.item-container {
|
|
208
|
+
height: 100vh;
|
|
175
209
|
}
|
|
176
210
|
|
|
177
|
-
.
|
|
178
|
-
|
|
211
|
+
.item-container + .item-container {
|
|
212
|
+
/*
|
|
213
|
+
We add a gap between items to be sure to hide the content above the targeted item
|
|
214
|
+
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
215
|
+
the browser will try to keep the scroll stable in relation to the first visible element
|
|
216
|
+
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
|
|
217
|
+
*/
|
|
218
|
+
margin-top: 4px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.scrollable .item-container {
|
|
222
|
+
height: 100%;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.resizable:not(.rendered) {
|
|
226
|
+
width: 0;
|
|
179
227
|
}
|
|
180
228
|
`;
|
|
181
229
|
__decorate([
|
|
@@ -191,11 +239,23 @@ __decorate([
|
|
|
191
239
|
property({ type: Number })
|
|
192
240
|
], FtInfiniteScroll.prototype, "scrollToIndex", void 0);
|
|
193
241
|
__decorate([
|
|
194
|
-
|
|
242
|
+
property({ type: Boolean })
|
|
243
|
+
], FtInfiniteScroll.prototype, "internalScroll", void 0);
|
|
244
|
+
__decorate([
|
|
245
|
+
state({
|
|
246
|
+
hasChanged(value, oldValue) {
|
|
247
|
+
return (value != null && oldValue == null)
|
|
248
|
+
|| value.length !== oldValue.length
|
|
249
|
+
|| value[0] !== oldValue[0];
|
|
250
|
+
}
|
|
251
|
+
})
|
|
195
252
|
], FtInfiniteScroll.prototype, "visibleItems", void 0);
|
|
196
253
|
__decorate([
|
|
197
254
|
query(".scrollable")
|
|
198
|
-
], FtInfiniteScroll.prototype, "
|
|
255
|
+
], FtInfiniteScroll.prototype, "internalScrollable", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
query(".items-container")
|
|
258
|
+
], FtInfiniteScroll.prototype, "itemsContainer", void 0);
|
|
199
259
|
__decorate([
|
|
200
260
|
state()
|
|
201
261
|
], 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;for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index");let s=e.target.parentElement.clientHeight,l=e.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(e.target.parentElement.style.height=l+"px",i+=t<this.visibleItems[0]?s-l: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}`);s&&s.scrollIntoView({block:"start"}),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}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,A=Array.isArray,F=t=>A(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),T=/<(?:(!--|\/[^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=T;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===T?"!--"===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:T,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=T:(r=j,n=void 0);const d=r===j&&t[e+1].startsWith("/>")?" ":"";o+=r===T?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):F(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){A(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:F,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 At extends Event{constructor(){super("scrolled-to-target")}}class Ft 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;for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index");let s=i.target.parentElement.clientHeight,n=i.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(i.target.parentElement.style.height=n+"px",e+=t<this.visibleItems[0]?s-n: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}`);s&&s.scrollIntoView({block:"start"}),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}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 At)}}var Tt;Ft.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})],Ft.prototype,"items",void 0),Mt([s({attribute:!1})],Ft.prototype,"renderItem",void 0),Mt([s({type:Object})],Ft.prototype,"scrollToItem",void 0),Mt([s({type:Number})],Ft.prototype,"scrollToIndex",void 0),Mt([s({type:Boolean})],Ft.prototype,"internalScroll",void 0),Mt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],Ft.prototype,"visibleItems",void 0),Mt([o(".scrollable")],Ft.prototype,"internalScrollable",void 0),Mt([o(".items-container")],Ft.prototype,"itemsContainer",void 0),Mt([n()],Ft.prototype,"scrolledToTarget",void 0),(Tt="ft-infinite-scroll",t=>{window.customElements.get(Tt)||window.customElements.define(Tt,t)})(Ft),t.FtInfiniteScroll=Ft,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=At,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.7",
|
|
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.7",
|
|
23
23
|
"lit": "2.2.8"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "fe65a046ba9d3df70aac994a4e0aac1b550df72f"
|
|
26
26
|
}
|