@aquera/nile-elements 0.1.36-beta-1.4 → 0.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/demo/index.html +9 -11
- package/demo/variables.css +13 -0
- package/dist/{fixture-d7bf42eb.cjs.js → fixture-161dee0b.cjs.js} +2 -2
- package/dist/{fixture-d7bf42eb.cjs.js.map → fixture-161dee0b.cjs.js.map} +1 -1
- package/dist/{fixture-178ed8d2.esm.js → fixture-372df3b0.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
- package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.test.esm.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.esm.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
- package/dist/nile-card/nile-card.test.cjs.js +1 -1
- package/dist/nile-card/nile-card.test.esm.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
- package/dist/nile-chip/nile-chip.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.esm.js +17 -8
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.cjs.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.cjs.js.map +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js.map +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.css.esm.js +40 -17
- package/dist/nile-filter-chip/nile-filter-chip.esm.js +24 -15
- package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js.map +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.test.esm.js +16 -16
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.esm.js +1 -1
- package/dist/nile-icon/icons/svg/accessreview.cjs.js +1 -1
- package/dist/nile-icon/icons/svg/accessreview.cjs.js.map +1 -1
- package/dist/nile-icon/icons/svg/accessreview.esm.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.esm.js +1 -1
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.esm.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.esm.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.esm.js +1 -1
- package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.test.esm.js +1 -1
- package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-popup/nile-popup.test.esm.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.esm.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.esm.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-chip/nile-chip.js +9 -0
- package/dist/src/nile-chip/nile-chip.js.map +1 -1
- package/dist/src/nile-filter-chip/nile-filter-chip.css.js +40 -17
- package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map +1 -1
- package/dist/src/nile-filter-chip/nile-filter-chip.d.ts +4 -3
- package/dist/src/nile-filter-chip/nile-filter-chip.js +25 -12
- package/dist/src/nile-filter-chip/nile-filter-chip.js.map +1 -1
- package/dist/src/nile-filter-chip/nile-filter-chip.test.js +12 -12
- package/dist/src/nile-filter-chip/nile-filter-chip.test.js.map +1 -1
- package/dist/src/nile-icon/icons/svg/accessreview.d.ts +1 -1
- package/dist/src/nile-icon/icons/svg/accessreview.js +1 -1
- package/dist/src/nile-icon/icons/svg/accessreview.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/index.ts +2 -1
- package/src/nile-chip/nile-chip.ts +9 -0
- package/src/nile-filter-chip/index.ts +1 -0
- package/src/nile-filter-chip/nile-filter-chip.css.ts +138 -0
- package/src/nile-filter-chip/nile-filter-chip.test.ts +92 -0
- package/src/nile-filter-chip/nile-filter-chip.ts +136 -0
- package/src/nile-icon/icons/svg/accessreview.ts +1 -1
- package/vscode-html-custom-data.json +49 -0
- package/dist/fixture-bb486165.cjs.js +0 -395
- package/dist/fixture-bb486165.cjs.js.map +0 -1
- package/dist/fixture-c4e75e04.esm.js +0 -569
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js +0 -2
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js.map +0 -1
- package/dist/nile-tooltip/nile-tooltip-utils.esm.js +0 -1
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js +0 -2
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js.map +0 -1
- package/dist/nile-tooltip/nile-tooltip.test.esm.js +0 -47
- package/dist/src/nile-new-error/index.d.ts +0 -1
- package/dist/src/nile-new-error/index.js +0 -2
- package/dist/src/nile-new-error/index.js.map +0 -1
- package/dist/src/nile-new-error/nile-new-error.css.d.ts +0 -12
- package/dist/src/nile-new-error/nile-new-error.css.js +0 -38
- package/dist/src/nile-new-error/nile-new-error.css.js.map +0 -1
- package/dist/src/nile-new-error/nile-new-error.d.ts +0 -36
- package/dist/src/nile-new-error/nile-new-error.js +0 -74
- package/dist/src/nile-new-error/nile-new-error.js.map +0 -1
- package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts +0 -18
- package/dist/src/nile-tooltip/nile-tooltip-utils.js +0 -216
- package/dist/src/nile-tooltip/nile-tooltip-utils.js.map +0 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.d.ts +0 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.js +0 -148
- package/dist/src/nile-tooltip/nile-tooltip.test.js.map +0 -1
- package/dist/src/nile-virtual-list/index.d.ts +0 -1
- package/dist/src/nile-virtual-list/index.js +0 -2
- package/dist/src/nile-virtual-list/index.js.map +0 -1
- package/dist/src/nile-virtual-list/nile-virtual-list.css.d.ts +0 -12
- package/dist/src/nile-virtual-list/nile-virtual-list.css.js +0 -25
- package/dist/src/nile-virtual-list/nile-virtual-list.css.js.map +0 -1
- package/dist/src/nile-virtual-list/nile-virtual-list.d.ts +0 -28
- package/dist/src/nile-virtual-list/nile-virtual-list.js +0 -69
- package/dist/src/nile-virtual-list/nile-virtual-list.js.map +0 -1
- package/dist/src/nile-virtual-scroll/index.d.ts +0 -1
- package/dist/src/nile-virtual-scroll/index.js +0 -2
- package/dist/src/nile-virtual-scroll/index.js.map +0 -1
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.css.d.ts +0 -12
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.css.js +0 -17
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.css.js.map +0 -1
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.d.ts +0 -54
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.js +0 -196
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.js.map +0 -1
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.d.ts +0 -23
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.js +0 -48
- package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.js.map +0 -1
- package/dist/src/nile-virtual-select/event-handlers.d.ts +0 -19
- package/dist/src/nile-virtual-select/event-handlers.js +0 -153
- package/dist/src/nile-virtual-select/event-handlers.js.map +0 -1
- package/dist/src/nile-virtual-select/index.d.ts +0 -1
- package/dist/src/nile-virtual-select/index.js +0 -2
- package/dist/src/nile-virtual-select/index.js.map +0 -1
- package/dist/src/nile-virtual-select/models.d.ts +0 -33
- package/dist/src/nile-virtual-select/models.js +0 -5
- package/dist/src/nile-virtual-select/models.js.map +0 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.css.d.ts +0 -12
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js +0 -463
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map +0 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.d.ts +0 -239
- package/dist/src/nile-virtual-select/nile-virtual-select.js +0 -1287
- package/dist/src/nile-virtual-select/nile-virtual-select.js.map +0 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.test.d.ts +0 -0
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js +0 -2
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js.map +0 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.utils.d.ts +0 -0
- package/dist/src/nile-virtual-select/nile-virtual-select.utils.js +0 -2
- package/dist/src/nile-virtual-select/nile-virtual-select.utils.js.map +0 -1
- package/dist/src/nile-virtual-select/option-utils.d.ts +0 -15
- package/dist/src/nile-virtual-select/option-utils.js +0 -59
- package/dist/src/nile-virtual-select/option-utils.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-virtual-scroll.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VirtualScroll CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}
|
@@ -1,54 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2023
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
import { CSSResultArray, TemplateResult } from 'lit';
|
8
|
-
import NileElement from '../internal/nile-element';
|
9
|
-
/**
|
10
|
-
* Nile virtual-scroll component.
|
11
|
-
*
|
12
|
-
* @tag nile-virtual-scroll
|
13
|
-
*
|
14
|
-
*/
|
15
|
-
export declare class NileVirtualScroll extends NileElement {
|
16
|
-
/**
|
17
|
-
* The styles for nile-virtual-scroll
|
18
|
-
* @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
|
19
|
-
*/
|
20
|
-
static get styles(): CSSResultArray;
|
21
|
-
templateContent: any;
|
22
|
-
scrollInProgress: boolean;
|
23
|
-
currentController: AbortController | null;
|
24
|
-
private observer;
|
25
|
-
itemHeight: number;
|
26
|
-
cachedElements: any;
|
27
|
-
height: number;
|
28
|
-
items: any[];
|
29
|
-
bufferSize: number;
|
30
|
-
showLoading: boolean;
|
31
|
-
scrollHeightAdjust: string;
|
32
|
-
startIndex: number;
|
33
|
-
endIndex: number;
|
34
|
-
currentScrollTop: number;
|
35
|
-
constructor();
|
36
|
-
protected firstUpdated(): void;
|
37
|
-
private handleScroll;
|
38
|
-
private showLoadingItemsScreen;
|
39
|
-
updateVisibleItems(): void;
|
40
|
-
connectedCallback(): void;
|
41
|
-
disconnectedCallback(): void;
|
42
|
-
handleItemChange(): void;
|
43
|
-
/**
|
44
|
-
* Render method
|
45
|
-
* @slot This is a slot test
|
46
|
-
*/
|
47
|
-
render(): TemplateResult;
|
48
|
-
}
|
49
|
-
export default NileVirtualScroll;
|
50
|
-
declare global {
|
51
|
-
interface HTMLElementTagNameMap {
|
52
|
-
'nile-virtual-scroll': NileVirtualScroll;
|
53
|
-
}
|
54
|
-
}
|
@@ -1,196 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2023
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
import { __decorate } from "tslib";
|
8
|
-
import { html } from 'lit';
|
9
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
10
|
-
import { styles } from './nile-virtual-scroll.css';
|
11
|
-
import NileElement from '../internal/nile-element';
|
12
|
-
import { watch } from '../internal/watch';
|
13
|
-
import { getStartAndEndIndices, getVisibleItems, stringToDOM, } from './nile-virtual-scroll.utils';
|
14
|
-
/**
|
15
|
-
* Nile virtual-scroll component.
|
16
|
-
*
|
17
|
-
* @tag nile-virtual-scroll
|
18
|
-
*
|
19
|
-
*/
|
20
|
-
let NileVirtualScroll = class NileVirtualScroll extends NileElement {
|
21
|
-
/**
|
22
|
-
* The styles for nile-virtual-scroll
|
23
|
-
* @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
|
24
|
-
*/
|
25
|
-
static get styles() {
|
26
|
-
return [styles];
|
27
|
-
}
|
28
|
-
constructor() {
|
29
|
-
super();
|
30
|
-
this.templateContent = '';
|
31
|
-
this.scrollInProgress = false;
|
32
|
-
this.currentController = null;
|
33
|
-
this.itemHeight = 10;
|
34
|
-
this.cachedElements = [];
|
35
|
-
this.height = 100;
|
36
|
-
this.items = [];
|
37
|
-
this.bufferSize = 50;
|
38
|
-
this.showLoading = false;
|
39
|
-
this.scrollHeightAdjust = '0px';
|
40
|
-
this.startIndex = 0;
|
41
|
-
this.endIndex = 0;
|
42
|
-
this.currentScrollTop = 0;
|
43
|
-
this.handleScroll = this.handleScroll.bind(this);
|
44
|
-
this.showLoadingItemsScreen = this.showLoadingItemsScreen.bind(this);
|
45
|
-
this.updateVisibleItems = this.updateVisibleItems.bind(this);
|
46
|
-
}
|
47
|
-
firstUpdated() {
|
48
|
-
this.templateContent =
|
49
|
-
document.getElementsByTagName('template')[0]?.innerHTML;
|
50
|
-
this.addEventListener('scroll', this.handleScroll);
|
51
|
-
this.scrollInProgress = true;
|
52
|
-
this.updateVisibleItems();
|
53
|
-
}
|
54
|
-
handleScroll() {
|
55
|
-
this.currentScrollTop = this.scrollTop;
|
56
|
-
this.scrollInProgress = true;
|
57
|
-
this.updateVisibleItems();
|
58
|
-
}
|
59
|
-
/* #endregion */
|
60
|
-
showLoadingItemsScreen() {
|
61
|
-
const { startIndex, endIndex } = getStartAndEndIndices({
|
62
|
-
currentScrollTop: this.currentScrollTop,
|
63
|
-
items: this.items,
|
64
|
-
height: this.height,
|
65
|
-
itemHeight: this.itemHeight,
|
66
|
-
bufferSize: this.bufferSize,
|
67
|
-
});
|
68
|
-
const visibleItems = this.items.slice(startIndex, endIndex);
|
69
|
-
const loadingScreenItems = [];
|
70
|
-
visibleItems.forEach((item) => {
|
71
|
-
let element = stringToDOM(`<p>Loading...</p>`);
|
72
|
-
if (element) {
|
73
|
-
loadingScreenItems.push(element);
|
74
|
-
}
|
75
|
-
});
|
76
|
-
this.innerHTML = '';
|
77
|
-
this.append(...loadingScreenItems);
|
78
|
-
this.scrollInProgress = true;
|
79
|
-
this.requestUpdate();
|
80
|
-
}
|
81
|
-
updateVisibleItems() {
|
82
|
-
const { startIndex, endIndex } = getStartAndEndIndices({
|
83
|
-
currentScrollTop: this.currentScrollTop,
|
84
|
-
items: this.items,
|
85
|
-
height: this.height,
|
86
|
-
itemHeight: this.itemHeight,
|
87
|
-
bufferSize: this.bufferSize,
|
88
|
-
});
|
89
|
-
const currentVisibleItems = getVisibleItems({
|
90
|
-
startIndex: startIndex,
|
91
|
-
endIndex: endIndex,
|
92
|
-
items: this.items,
|
93
|
-
templateContent: this.templateContent,
|
94
|
-
});
|
95
|
-
this.innerHTML = '';
|
96
|
-
this.append(...currentVisibleItems);
|
97
|
-
this.scrollInProgress = false;
|
98
|
-
this.requestUpdate();
|
99
|
-
}
|
100
|
-
connectedCallback() {
|
101
|
-
super.connectedCallback();
|
102
|
-
}
|
103
|
-
disconnectedCallback() {
|
104
|
-
super.disconnectedCallback();
|
105
|
-
}
|
106
|
-
handleItemChange() {
|
107
|
-
if (this.items.length) {
|
108
|
-
this.updateVisibleItems();
|
109
|
-
}
|
110
|
-
}
|
111
|
-
/* #region Methods */
|
112
|
-
/**
|
113
|
-
* Render method
|
114
|
-
* @slot This is a slot test
|
115
|
-
*/
|
116
|
-
render() {
|
117
|
-
return html `
|
118
|
-
<style>
|
119
|
-
:host {
|
120
|
-
display: block;
|
121
|
-
overflow-y: scroll;
|
122
|
-
will-change: scroll-position;
|
123
|
-
max-height: calc(
|
124
|
-
var(--auto-size-available-height) - ${this.scrollHeightAdjust}
|
125
|
-
);
|
126
|
-
transform: translateZ(0);
|
127
|
-
}
|
128
|
-
:host::-webkit-scrollbar {
|
129
|
-
-webkit-appearance: none;
|
130
|
-
width: 7px;
|
131
|
-
}
|
132
|
-
:host::-webkit-scrollbar-thumb {
|
133
|
-
border-radius: 4px;
|
134
|
-
background-color: rgba(0, 0, 0, 0.5);
|
135
|
-
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
136
|
-
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
137
|
-
}
|
138
|
-
</style>
|
139
|
-
<div
|
140
|
-
style="
|
141
|
-
position: absolute;
|
142
|
-
width: 100%;
|
143
|
-
top: 0;
|
144
|
-
left: 0;
|
145
|
-
contain: content;
|
146
|
-
transform: translateY(${this.currentScrollTop}px)
|
147
|
-
"
|
148
|
-
>
|
149
|
-
<slot></slot>
|
150
|
-
</div>
|
151
|
-
<div
|
152
|
-
style="height: ${this.items?.length *
|
153
|
-
this.itemHeight}px; transform-origin: 0 0; flex: 0 0 auto;"
|
154
|
-
></div>
|
155
|
-
`;
|
156
|
-
}
|
157
|
-
};
|
158
|
-
__decorate([
|
159
|
-
property({ type: Number })
|
160
|
-
], NileVirtualScroll.prototype, "itemHeight", void 0);
|
161
|
-
__decorate([
|
162
|
-
property({ type: Number })
|
163
|
-
], NileVirtualScroll.prototype, "cachedElements", void 0);
|
164
|
-
__decorate([
|
165
|
-
property({ type: Number })
|
166
|
-
], NileVirtualScroll.prototype, "height", void 0);
|
167
|
-
__decorate([
|
168
|
-
property({ type: Array })
|
169
|
-
], NileVirtualScroll.prototype, "items", void 0);
|
170
|
-
__decorate([
|
171
|
-
property({ type: Number })
|
172
|
-
], NileVirtualScroll.prototype, "bufferSize", void 0);
|
173
|
-
__decorate([
|
174
|
-
property({ type: Boolean })
|
175
|
-
], NileVirtualScroll.prototype, "showLoading", void 0);
|
176
|
-
__decorate([
|
177
|
-
property({ type: String })
|
178
|
-
], NileVirtualScroll.prototype, "scrollHeightAdjust", void 0);
|
179
|
-
__decorate([
|
180
|
-
state()
|
181
|
-
], NileVirtualScroll.prototype, "startIndex", void 0);
|
182
|
-
__decorate([
|
183
|
-
state()
|
184
|
-
], NileVirtualScroll.prototype, "endIndex", void 0);
|
185
|
-
__decorate([
|
186
|
-
state()
|
187
|
-
], NileVirtualScroll.prototype, "currentScrollTop", void 0);
|
188
|
-
__decorate([
|
189
|
-
watch('items')
|
190
|
-
], NileVirtualScroll.prototype, "handleItemChange", null);
|
191
|
-
NileVirtualScroll = __decorate([
|
192
|
-
customElement('nile-virtual-scroll')
|
193
|
-
], NileVirtualScroll);
|
194
|
-
export { NileVirtualScroll };
|
195
|
-
export default NileVirtualScroll;
|
196
|
-
//# sourceMappingURL=nile-virtual-scroll.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-virtual-scroll.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './nile-virtual-scroll.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport {\n getStartAndEndIndices,\n getVisibleItems,\n stringToDOM,\n} from './nile-virtual-scroll.utils';\n\n/**\n * Nile virtual-scroll component.\n *\n * @tag nile-virtual-scroll\n *\n */\n@customElement('nile-virtual-scroll')\nexport class NileVirtualScroll extends NileElement {\n /**\n * The styles for nile-virtual-scroll\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n templateContent: any = '';\n scrollInProgress: boolean = false;\n currentController: AbortController | null = null;\n private observer!: MutationObserver;\n\n @property({ type: Number })\n itemHeight = 10;\n\n @property({ type: Number })\n cachedElements: any = [];\n\n @property({ type: Number })\n height = 100;\n\n @property({ type: Array })\n items: any[] = [];\n\n @property({ type: Number })\n bufferSize = 50;\n\n @property({ type: Boolean })\n showLoading = false;\n\n @property({ type: String })\n scrollHeightAdjust = '0px';\n\n @state()\n startIndex: number = 0;\n @state()\n endIndex: number = 0;\n @state()\n currentScrollTop = 0;\n\n constructor() {\n super();\n this.handleScroll = this.handleScroll.bind(this);\n this.showLoadingItemsScreen = this.showLoadingItemsScreen.bind(this);\n this.updateVisibleItems = this.updateVisibleItems.bind(this);\n }\n\n protected firstUpdated() {\n this.templateContent =\n document.getElementsByTagName('template')[0]?.innerHTML;\n this.addEventListener('scroll', this.handleScroll);\n \n this.scrollInProgress = true;\n this.updateVisibleItems();\n }\n\n private handleScroll() {\n this.currentScrollTop = this.scrollTop;\n this.scrollInProgress = true;\n this.updateVisibleItems();\n }\n\n /* #endregion */\n\n private showLoadingItemsScreen() {\n const { startIndex, endIndex } = getStartAndEndIndices({\n currentScrollTop: this.currentScrollTop,\n items: this.items,\n height: this.height,\n itemHeight: this.itemHeight,\n bufferSize: this.bufferSize,\n });\n const visibleItems = this.items.slice(startIndex, endIndex);\n const loadingScreenItems: HTMLElement[] = [];\n visibleItems.forEach((item: any) => {\n let element = stringToDOM(`<p>Loading...</p>`) as HTMLElement;\n if (element) {\n loadingScreenItems.push(element);\n }\n });\n this.innerHTML = '';\n this.append(...loadingScreenItems);\n this.scrollInProgress = true;\n this.requestUpdate();\n }\n\n updateVisibleItems() {\n const { startIndex, endIndex } = getStartAndEndIndices({\n currentScrollTop: this.currentScrollTop,\n items: this.items,\n height: this.height,\n itemHeight: this.itemHeight,\n bufferSize: this.bufferSize,\n });\n\n const currentVisibleItems: HTMLElement[] = getVisibleItems({\n startIndex: startIndex,\n endIndex: endIndex,\n items: this.items,\n templateContent: this.templateContent,\n });\n\n this.innerHTML = '';\n this.append(...currentVisibleItems);\n this.scrollInProgress = false;\n this.requestUpdate();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n @watch('items')\n handleItemChange() {\n if(this.items.length) {\n this.updateVisibleItems()\n }\n }\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n return html`\n <style>\n :host {\n display: block;\n overflow-y: scroll;\n will-change: scroll-position;\n max-height: calc(\n var(--auto-size-available-height) - ${this.scrollHeightAdjust}\n );\n transform: translateZ(0);\n }\n :host::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n }\n :host::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(0, 0, 0, 0.5);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n </style>\n <div\n style=\"\n position: absolute; \n width: 100%; \n top: 0; \n left: 0; \n contain: content;\n transform: translateY(${this.currentScrollTop}px)\n \"\n >\n <slot></slot>\n </div>\n <div\n style=\"height: ${this.items?.length *\n this.itemHeight}px; transform-origin: 0 0; flex: 0 0 auto;\"\n ></div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileVirtualScroll;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-virtual-scroll': NileVirtualScroll;\n }\n}\n"]}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
interface ScrollParams {
|
2
|
-
currentScrollTop: number;
|
3
|
-
itemHeight: number;
|
4
|
-
height: number;
|
5
|
-
items: any[];
|
6
|
-
bufferSize: number;
|
7
|
-
}
|
8
|
-
interface GetVisibleItemsParams {
|
9
|
-
startIndex: number;
|
10
|
-
endIndex: number;
|
11
|
-
items: any[];
|
12
|
-
templateContent: any;
|
13
|
-
}
|
14
|
-
export declare const VIRTUAL_LIST_KEY = "data-itemValue";
|
15
|
-
export declare const stringToDOM: (htmlString: string) => ChildNode | null;
|
16
|
-
export declare const interpolateString: (template: string, item: any) => string;
|
17
|
-
export declare const isHTMLElement: (obj: any) => obj is HTMLElement;
|
18
|
-
export declare const getStartAndEndIndices: ({ currentScrollTop, itemHeight, height, items, bufferSize, }: ScrollParams) => {
|
19
|
-
startIndex: number;
|
20
|
-
endIndex: number;
|
21
|
-
};
|
22
|
-
export declare const getVisibleItems: ({ startIndex, endIndex, items, templateContent, }: GetVisibleItemsParams) => HTMLElement[];
|
23
|
-
export {};
|
@@ -1,48 +0,0 @@
|
|
1
|
-
export const VIRTUAL_LIST_KEY = 'data-itemValue';
|
2
|
-
export const stringToDOM = (htmlString) => {
|
3
|
-
const parser = new DOMParser();
|
4
|
-
const doc = parser.parseFromString(htmlString, 'text/html');
|
5
|
-
return doc.body.firstChild; // Returns the first element
|
6
|
-
};
|
7
|
-
export const interpolateString = (template, item) => {
|
8
|
-
return new Function('item', `return \`${template}\`;`)(item);
|
9
|
-
};
|
10
|
-
export const isHTMLElement = (obj) => {
|
11
|
-
return obj instanceof HTMLElement;
|
12
|
-
};
|
13
|
-
export const getStartAndEndIndices = ({ currentScrollTop, itemHeight, height, items, bufferSize, }) => {
|
14
|
-
let startIndex = Math.floor(currentScrollTop / itemHeight);
|
15
|
-
let endIndex = startIndex +
|
16
|
-
Math.min(Math.ceil(height / itemHeight), items.length) +
|
17
|
-
Math.floor((bufferSize * 2) / itemHeight);
|
18
|
-
if (startIndex < 0) {
|
19
|
-
startIndex = 0;
|
20
|
-
}
|
21
|
-
if (endIndex >= items.length) {
|
22
|
-
endIndex = items.length - 1;
|
23
|
-
}
|
24
|
-
return { startIndex, endIndex };
|
25
|
-
};
|
26
|
-
export const getVisibleItems = ({ startIndex, endIndex, items, templateContent, }) => {
|
27
|
-
const currentVisibleItems = [];
|
28
|
-
let currentVisibleIndices = Array.from({ length: endIndex - startIndex + 1 }, (_, index) => startIndex + index);
|
29
|
-
for (let visibleIndex of currentVisibleIndices) {
|
30
|
-
const virtualItem = items[visibleIndex];
|
31
|
-
if (isHTMLElement(virtualItem)) {
|
32
|
-
if (!currentVisibleItems.includes(virtualItem)) {
|
33
|
-
currentVisibleItems.push(virtualItem);
|
34
|
-
}
|
35
|
-
}
|
36
|
-
else {
|
37
|
-
if (currentVisibleIndices.includes(virtualItem.index)) {
|
38
|
-
let element = stringToDOM(interpolateString(templateContent, virtualItem));
|
39
|
-
if (element) {
|
40
|
-
element.setAttribute(VIRTUAL_LIST_KEY, `${virtualItem.name}`);
|
41
|
-
currentVisibleItems.push(element);
|
42
|
-
}
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}
|
46
|
-
return currentVisibleItems;
|
47
|
-
};
|
48
|
-
//# sourceMappingURL=nile-virtual-scroll.utils.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-virtual-scroll.utils.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.utils.ts"],"names":[],"mappings":"AAeA,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE;IAChD,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAC5D,OAAO,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,4BAA4B;AAC1D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,IAAS,EAAU,EAAE;IACvE,OAAO,IAAI,QAAQ,CAAC,MAAM,EAAE,YAAY,QAAQ,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC;AAC/D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAQ,EAAE,EAAE;IACxC,OAAO,GAAG,YAAY,WAAW,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,KAAK,EACL,UAAU,GACG,EAA4C,EAAE;IAC3D,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC;IAC3D,IAAI,QAAQ,GACV,UAAU;QACV,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC;QACtD,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;IAE5C,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;QACnB,UAAU,GAAG,CAAC,CAAC;IACjB,CAAC;IAED,IAAI,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC7B,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,UAAU,EACV,QAAQ,EACR,KAAK,EACL,eAAe,GACO,EAAiB,EAAE;IACzC,MAAM,mBAAmB,GAAkB,EAAE,CAAC;IAC9C,IAAI,qBAAqB,GAAG,KAAK,CAAC,IAAI,CACpC,EAAE,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,CAAC,EAAE,EACrC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,GAAG,KAAK,CACjC,CAAC;IAEF,KAAI,IAAI,YAAY,IAAI,qBAAqB,EAAE,CAAC;QAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC/C,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAG,qBAAqB,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrD,IAAI,OAAO,GAAG,WAAW,CACvB,iBAAiB,CAAC,eAAe,EAAE,WAAW,CAAC,CACjC,CAAC;gBACjB,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,YAAY,CAAC,gBAAgB,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC9D,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["interface ScrollParams {\n currentScrollTop: number;\n itemHeight: number;\n height: number;\n items: any[];\n bufferSize: number;\n}\n\ninterface GetVisibleItemsParams {\n startIndex: number;\n endIndex: number;\n items: any[];\n templateContent: any;\n}\n\nexport const VIRTUAL_LIST_KEY = 'data-itemValue';\n\nexport const stringToDOM = (htmlString: string) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n return doc.body.firstChild; // Returns the first element\n};\n\nexport const interpolateString = (template: string, item: any): string => {\n return new Function('item', `return \\`${template}\\`;`)(item);\n};\n\nexport const isHTMLElement = (obj: any) => {\n return obj instanceof HTMLElement;\n};\n\nexport const getStartAndEndIndices = ({\n currentScrollTop,\n itemHeight,\n height,\n items,\n bufferSize,\n}: ScrollParams): { startIndex: number; endIndex: number } => {\n let startIndex = Math.floor(currentScrollTop / itemHeight);\n let endIndex =\n startIndex +\n Math.min(Math.ceil(height / itemHeight), items.length) +\n Math.floor((bufferSize * 2) / itemHeight);\n\n if (startIndex < 0) {\n startIndex = 0;\n }\n\n if (endIndex >= items.length) {\n endIndex = items.length - 1;\n }\n\n return { startIndex, endIndex };\n};\n\nexport const getVisibleItems = ({\n startIndex,\n endIndex,\n items,\n templateContent,\n}: GetVisibleItemsParams): HTMLElement[] => {\n const currentVisibleItems: HTMLElement[] = [];\n let currentVisibleIndices = Array.from(\n { length: endIndex - startIndex + 1 },\n (_, index) => startIndex + index\n );\n\n for(let visibleIndex of currentVisibleIndices) {\n const virtualItem = items[visibleIndex];\n if (isHTMLElement(virtualItem)) {\n if (!currentVisibleItems.includes(virtualItem)) {\n currentVisibleItems.push(virtualItem);\n }\n } else {\n if(currentVisibleIndices.includes(virtualItem.index)) {\n let element = stringToDOM(\n interpolateString(templateContent, virtualItem)\n ) as HTMLElement;\n if (element) {\n element.setAttribute(VIRTUAL_LIST_KEY, `${virtualItem.name}`);\n currentVisibleItems.push(element);\n }\n }\n }\n }\n\n return currentVisibleItems;\n};\n"]}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import type { NileVirtualSelect } from './nile-virtual-select';
|
2
|
-
export declare class SelectEventHandlers {
|
3
|
-
private select;
|
4
|
-
constructor(select: NileVirtualSelect);
|
5
|
-
setupEventHandlers(): void;
|
6
|
-
addOpenListeners(): void;
|
7
|
-
removeOpenListeners(): void;
|
8
|
-
removeEventHandlers(): void;
|
9
|
-
handleFocus(): void;
|
10
|
-
handleBlur(): void;
|
11
|
-
handleDocumentFocusIn(event: FocusEvent): void;
|
12
|
-
handleDocumentKeyDown(event: KeyboardEvent): void;
|
13
|
-
handleDocumentMouseDown(event: MouseEvent): void;
|
14
|
-
handleLabelClick(): void;
|
15
|
-
handleComboboxMouseDown(event: MouseEvent): void;
|
16
|
-
handleComboboxKeyDown(event: KeyboardEvent): void;
|
17
|
-
handleSearchFocus(): void;
|
18
|
-
handleSearchBlur(): void;
|
19
|
-
}
|
@@ -1,153 +0,0 @@
|
|
1
|
-
export class SelectEventHandlers {
|
2
|
-
constructor(select) {
|
3
|
-
this.select = select;
|
4
|
-
// Bind methods to this instance
|
5
|
-
this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
|
6
|
-
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
|
7
|
-
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
|
8
|
-
}
|
9
|
-
setupEventHandlers() {
|
10
|
-
// No listeners added initially - they're added when the select opens
|
11
|
-
}
|
12
|
-
addOpenListeners() {
|
13
|
-
document.addEventListener('focusin', this.handleDocumentFocusIn);
|
14
|
-
document.addEventListener('keydown', this.handleDocumentKeyDown);
|
15
|
-
document.addEventListener('mousedown', this.handleDocumentMouseDown);
|
16
|
-
}
|
17
|
-
removeOpenListeners() {
|
18
|
-
document.removeEventListener('focusin', this.handleDocumentFocusIn);
|
19
|
-
document.removeEventListener('keydown', this.handleDocumentKeyDown);
|
20
|
-
document.removeEventListener('mousedown', this.handleDocumentMouseDown);
|
21
|
-
}
|
22
|
-
removeEventHandlers() {
|
23
|
-
this.removeOpenListeners();
|
24
|
-
}
|
25
|
-
handleFocus() {
|
26
|
-
this.select.hasFocus = true;
|
27
|
-
this.select.displayInput.setSelectionRange(0, 0);
|
28
|
-
this.select.emit('nile-focus', { value: this.select.value, name: this.select.name });
|
29
|
-
}
|
30
|
-
handleBlur() {
|
31
|
-
this.select.hasFocus = false;
|
32
|
-
this.select.emit('nile-blur', { value: this.select.value, name: this.select.name });
|
33
|
-
}
|
34
|
-
handleDocumentFocusIn(event) {
|
35
|
-
// Close when focusing out of the select
|
36
|
-
const path = event.composedPath();
|
37
|
-
if (this.select && !path.includes(this.select)) {
|
38
|
-
this.select.hide();
|
39
|
-
}
|
40
|
-
}
|
41
|
-
handleDocumentKeyDown(event) {
|
42
|
-
const target = event.target;
|
43
|
-
const isClearButton = target.closest('.select__clear') !== null;
|
44
|
-
const isIconButton = target.closest('nile-icon-button') !== null;
|
45
|
-
// Ignore presses when the target is an icon button (e.g. the remove button in <nile-tag>)
|
46
|
-
if (isClearButton || isIconButton) {
|
47
|
-
return;
|
48
|
-
}
|
49
|
-
// Close when pressing escape
|
50
|
-
if (event.key === 'Escape' && this.select.open) {
|
51
|
-
event.preventDefault();
|
52
|
-
event.stopPropagation();
|
53
|
-
this.select.hide();
|
54
|
-
this.select.displayInput.focus({ preventScroll: true });
|
55
|
-
}
|
56
|
-
// Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
|
57
|
-
// buffer we _don't_ close it.
|
58
|
-
if (event.key === 'Enter' ||
|
59
|
-
(event.key === ' ' && this.select.typeToSelectString === '')) {
|
60
|
-
event.preventDefault();
|
61
|
-
event.stopImmediatePropagation();
|
62
|
-
// If it's not open, open it
|
63
|
-
if (!this.select.open) {
|
64
|
-
this.select.show();
|
65
|
-
return;
|
66
|
-
}
|
67
|
-
// If it is open, update the value based on the current selection and close it
|
68
|
-
if (this.select.currentOption && !this.select.currentOption.disabled) {
|
69
|
-
if (this.select.multiple) {
|
70
|
-
this.select.toggleOptionSelection(this.select.currentOption);
|
71
|
-
}
|
72
|
-
else {
|
73
|
-
this.select.setSelectedOptions(this.select.currentOption);
|
74
|
-
}
|
75
|
-
// Emit after updating
|
76
|
-
this.select.updateComplete.then(() => {
|
77
|
-
this.select.nileInput({ value: this.select.value, name: this.select.name });
|
78
|
-
this.select.nileChange({ value: this.select.value, name: this.select.name });
|
79
|
-
});
|
80
|
-
if (!this.select.multiple) {
|
81
|
-
this.select.hide();
|
82
|
-
this.select.displayInput.focus({ preventScroll: true });
|
83
|
-
}
|
84
|
-
}
|
85
|
-
return;
|
86
|
-
}
|
87
|
-
// All other "printable" keys trigger type to select
|
88
|
-
if (event.key.length === 1 || event.key === 'Backspace') {
|
89
|
-
const allOptions = this.select.optionUtils.getAllOptions(this.select);
|
90
|
-
// Don't block important key combos like CMD+R
|
91
|
-
if (event.metaKey || event.ctrlKey || event.altKey) {
|
92
|
-
return;
|
93
|
-
}
|
94
|
-
// Open, unless the key that triggered is backspace
|
95
|
-
if (!this.select.open) {
|
96
|
-
if (event.key === 'Backspace') {
|
97
|
-
return;
|
98
|
-
}
|
99
|
-
this.select.show();
|
100
|
-
}
|
101
|
-
event.stopPropagation();
|
102
|
-
event.preventDefault();
|
103
|
-
clearTimeout(this.select.typeToSelectTimeout);
|
104
|
-
this.select.typeToSelectTimeout = window.setTimeout(() => (this.select.typeToSelectString = ''), 1000);
|
105
|
-
if (event.key === 'Backspace') {
|
106
|
-
this.select.typeToSelectString = this.select.typeToSelectString.slice(0, -1);
|
107
|
-
}
|
108
|
-
else {
|
109
|
-
this.select.typeToSelectString += event.key.toLowerCase();
|
110
|
-
}
|
111
|
-
for (const option of allOptions) {
|
112
|
-
const label = option.getTextLabel().toLowerCase();
|
113
|
-
if (label.startsWith(this.select.typeToSelectString)) {
|
114
|
-
this.select.setCurrentOption(option);
|
115
|
-
break;
|
116
|
-
}
|
117
|
-
}
|
118
|
-
}
|
119
|
-
}
|
120
|
-
handleDocumentMouseDown(event) {
|
121
|
-
// Close when clicking outside of the select
|
122
|
-
const path = event.composedPath();
|
123
|
-
if (this.select && !path.includes(this.select)) {
|
124
|
-
this.select.hide();
|
125
|
-
}
|
126
|
-
}
|
127
|
-
handleLabelClick() {
|
128
|
-
this.select.displayInput.focus();
|
129
|
-
this.select.hide();
|
130
|
-
}
|
131
|
-
handleComboboxMouseDown(event) {
|
132
|
-
const path = event.composedPath();
|
133
|
-
const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button');
|
134
|
-
// Ignore disabled controls and clicks on tags (remove buttons)
|
135
|
-
if (this.select.disabled || isIconButton) {
|
136
|
-
return;
|
137
|
-
}
|
138
|
-
event.preventDefault();
|
139
|
-
this.select.displayInput.focus({ preventScroll: true });
|
140
|
-
this.select.open = !this.select.open;
|
141
|
-
}
|
142
|
-
handleComboboxKeyDown(event) {
|
143
|
-
event.stopPropagation();
|
144
|
-
this.handleDocumentKeyDown(event);
|
145
|
-
}
|
146
|
-
handleSearchFocus() {
|
147
|
-
document.removeEventListener('keydown', this.handleDocumentKeyDown);
|
148
|
-
}
|
149
|
-
handleSearchBlur() {
|
150
|
-
document.addEventListener('keydown', this.handleDocumentKeyDown);
|
151
|
-
}
|
152
|
-
}
|
153
|
-
//# sourceMappingURL=event-handlers.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/event-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NileVirtualSelect } from './nile-virtual-select';\nimport type NileOption from '../nile-option/nile-option';\nimport { scrollIntoView } from '../internal/scroll';\n\nexport class SelectEventHandlers {\n private select: NileVirtualSelect;\n \n constructor(select: NileVirtualSelect) {\n this.select = select;\n \n // Bind methods to this instance\n this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n }\n \n setupEventHandlers() {\n // No listeners added initially - they're added when the select opens\n }\n \n addOpenListeners() {\n document.addEventListener('focusin', this.handleDocumentFocusIn);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n }\n\n removeOpenListeners() {\n document.removeEventListener('focusin', this.handleDocumentFocusIn);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n }\n \n removeEventHandlers() {\n this.removeOpenListeners();\n }\n \n handleFocus() {\n this.select.hasFocus = true;\n this.select.displayInput.setSelectionRange(0, 0);\n this.select.emit('nile-focus', { value: this.select.value, name: this.select.name });\n }\n\n handleBlur() {\n this.select.hasFocus = false;\n this.select.emit('nile-blur', { value: this.select.value, name: this.select.name });\n }\n\n handleDocumentFocusIn(event: FocusEvent) {\n // Close when focusing out of the select\n const path = event.composedPath();\n if (this.select && !path.includes(this.select)) {\n this.select.hide();\n }\n }\n\n handleDocumentKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const isClearButton = target.closest('.select__clear') !== null;\n const isIconButton = target.closest('nile-icon-button') !== null;\n\n // Ignore presses when the target is an icon button (e.g. the remove button in <nile-tag>)\n if (isClearButton || isIconButton) {\n return;\n }\n\n // Close when pressing escape\n if (event.key === 'Escape' && this.select.open) {\n event.preventDefault();\n event.stopPropagation();\n this.select.hide();\n this.select.displayInput.focus({ preventScroll: true });\n }\n\n // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the\n // buffer we _don't_ close it.\n if (\n event.key === 'Enter' ||\n (event.key === ' ' && (this.select as any).typeToSelectString === '')\n ) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n // If it's not open, open it\n if (!this.select.open) {\n this.select.show();\n return;\n }\n\n // If it is open, update the value based on the current selection and close it\n if (this.select.currentOption && !this.select.currentOption.disabled) {\n if (this.select.multiple) {\n this.select.toggleOptionSelection(this.select.currentOption);\n } else {\n this.select.setSelectedOptions(this.select.currentOption);\n }\n\n // Emit after updating\n this.select.updateComplete.then(() => {\n this.select.nileInput({ value: this.select.value, name: this.select.name });\n this.select.nileChange({ value: this.select.value, name: this.select.name });\n });\n\n if (!this.select.multiple) {\n this.select.hide();\n this.select.displayInput.focus({ preventScroll: true });\n }\n }\n\n return;\n }\n\n // All other \"printable\" keys trigger type to select\n if (event.key.length === 1 || event.key === 'Backspace') {\n const allOptions = (this.select as any).optionUtils.getAllOptions(this.select);\n\n // Don't block important key combos like CMD+R\n if (event.metaKey || event.ctrlKey || event.altKey) {\n return;\n }\n\n // Open, unless the key that triggered is backspace\n if (!this.select.open) {\n if (event.key === 'Backspace') {\n return;\n }\n\n this.select.show();\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n clearTimeout((this.select as any).typeToSelectTimeout);\n (this.select as any).typeToSelectTimeout = window.setTimeout(\n () => ((this.select as any).typeToSelectString = ''),\n 1000\n );\n\n if (event.key === 'Backspace') {\n (this.select as any).typeToSelectString = (this.select as any).typeToSelectString.slice(0, -1);\n } else {\n (this.select as any).typeToSelectString += event.key.toLowerCase();\n }\n\n for (const option of allOptions) {\n const label = option.getTextLabel().toLowerCase();\n\n if (label.startsWith((this.select as any).typeToSelectString)) {\n this.select.setCurrentOption(option);\n break;\n }\n }\n }\n }\n\n handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the select\n const path = event.composedPath();\n if (this.select && !path.includes(this.select)) {\n this.select.hide();\n }\n }\n\n handleLabelClick() {\n this.select.displayInput.focus();\n this.select.hide();\n }\n\n handleComboboxMouseDown(event: MouseEvent) {\n const path = event.composedPath();\n const isIconButton = path.some(\n el =>\n el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button'\n );\n\n // Ignore disabled controls and clicks on tags (remove buttons)\n if (this.select.disabled || isIconButton) {\n return;\n }\n\n event.preventDefault();\n this.select.displayInput.focus({ preventScroll: true });\n this.select.open = !this.select.open;\n }\n\n handleComboboxKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n this.handleDocumentKeyDown(event);\n }\n \n handleSearchFocus() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n handleSearchBlur() {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n}"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
export { NileVirtualSelect } from './nile-virtual-select';
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileVirtualSelect } from './nile-virtual-select';\n"]}
|
@@ -1,33 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Types and interfaces for nile-virtual-select
|
3
|
-
*/
|
4
|
-
import type NileOption from '../nile-option/nile-option';
|
5
|
-
export type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
6
|
-
export interface SelectChangeEventDetail {
|
7
|
-
value: string | string[];
|
8
|
-
name: string;
|
9
|
-
}
|
10
|
-
export interface SelectClearEventDetail {
|
11
|
-
value: string | string[];
|
12
|
-
name: string;
|
13
|
-
}
|
14
|
-
export interface SelectInputEventDetail {
|
15
|
-
value: string | string[];
|
16
|
-
name: string;
|
17
|
-
}
|
18
|
-
export interface TagRemoveEventDetail {
|
19
|
-
value: string | string[];
|
20
|
-
name: string;
|
21
|
-
removedtagvalue: string;
|
22
|
-
}
|
23
|
-
export interface SelectSize {
|
24
|
-
size: 'small' | 'medium' | 'large';
|
25
|
-
}
|
26
|
-
export interface SelectPlacement {
|
27
|
-
placement: 'top' | 'bottom';
|
28
|
-
}
|
29
|
-
export interface VirtualOptionState {
|
30
|
-
option: NileOption;
|
31
|
-
visible: boolean;
|
32
|
-
index: number;
|
33
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/models.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\n * Types and interfaces for nile-virtual-select\n */\n\nimport type NileOption from '../nile-option/nile-option';\n\nexport type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;\n\nexport interface SelectChangeEventDetail {\n value: string | string[];\n name: string;\n}\n\nexport interface SelectClearEventDetail {\n value: string | string[];\n name: string;\n}\n\nexport interface SelectInputEventDetail {\n value: string | string[];\n name: string;\n}\n\nexport interface TagRemoveEventDetail {\n value: string | string[];\n name: string;\n removedtagvalue: string;\n}\n\nexport interface SelectSize {\n size: 'small' | 'medium' | 'large';\n}\n\nexport interface SelectPlacement {\n placement: 'top' | 'bottom';\n}\n\nexport interface VirtualOptionState {\n option: NileOption;\n visible: boolean;\n index: number;\n}"]}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2023
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
/**
|
8
|
-
* Select_2 CSS
|
9
|
-
*/
|
10
|
-
export declare const styles: import("lit").CSSResult;
|
11
|
-
declare const _default: import("lit").CSSResult[];
|
12
|
-
export default _default;
|