@aquera/nile-elements 0.1.52-beta-1.2 → 0.1.52-beta-1.3
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 +0 -4
- package/demo/index.html +53 -150
- package/dist/{fixture-fe6c932e.cjs.js → fixture-324a7ef9.cjs.js} +2 -2
- package/dist/{fixture-fe6c932e.cjs.js.map → fixture-324a7ef9.cjs.js.map} +1 -1
- package/dist/{fixture-e7023246.esm.js → fixture-ba65eb22.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +618 -1364
- package/dist/internal/form.cjs.js +1 -1
- package/dist/internal/form.cjs.js.map +1 -1
- package/dist/internal/form.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/index.cjs.js +1 -1
- package/dist/nile-auto-complete/index.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +17 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +29 -8
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js.map +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.cjs.js.map +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.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-code-editor/extensionSetup.cjs.js +5 -5
- package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
- package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +3 -3
- 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.test.cjs.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.test.esm.js +1 -1
- 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/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-option/nile-option.cjs.js +1 -1
- package/dist/nile-option/nile-option.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +1 -1
- package/dist/nile-option/nile-option.esm.js +2 -2
- 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/index.cjs.js +1 -1
- package/dist/nile-select/index.esm.js +1 -1
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.esm.js +2 -2
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.test.esm.js +2 -2
- 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 +0 -1
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/internal/form.js +2 -2
- package/dist/src/internal/form.js.map +1 -1
- package/dist/src/nile-calendar/test.d.ts +0 -0
- package/dist/src/nile-calendar/test.js +2 -0
- package/dist/src/nile-calendar/test.js.map +1 -0
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +1 -0
- package/dist/src/nile-code-editor/nile-code-editor.js +12 -0
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-option/nile-option.css.js +1 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.d.ts +1 -5
- package/dist/src/nile-option/nile-option.js +6 -21
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +2 -11
- package/dist/src/nile-select/nile-select.js +18 -37
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
- package/src/index.ts +1 -3
- package/src/internal/form.ts +2 -2
- package/src/nile-code-editor/nile-code-editor.ts +15 -0
- package/src/nile-option/nile-option.css.ts +1 -1
- package/src/nile-option/nile-option.ts +3 -17
- package/src/nile-select/nile-select.ts +9 -35
- package/vscode-html-custom-data.json +2 -229
- package/dist/nile-select/virtual-scroll-helper.cjs.js +0 -2
- package/dist/nile-select/virtual-scroll-helper.cjs.js.map +0 -1
- package/dist/nile-select/virtual-scroll-helper.esm.js +0 -38
- package/dist/nile-virtual-select/index.cjs.js +0 -2
- package/dist/nile-virtual-select/index.cjs.js.map +0 -1
- package/dist/nile-virtual-select/index.esm.js +0 -1
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js +0 -2
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js.map +0 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js +0 -2
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js.map +0 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.esm.js +0 -467
- package/dist/nile-virtual-select/nile-virtual-select.esm.js +0 -227
- package/dist/nile-virtual-select/nile-virtual-select.test.cjs.js +0 -2
- package/dist/nile-virtual-select/nile-virtual-select.test.cjs.js.map +0 -1
- package/dist/nile-virtual-select/nile-virtual-select.test.esm.js +0 -49
- package/dist/nile-virtual-select/renderer.cjs.js +0 -2
- package/dist/nile-virtual-select/renderer.cjs.js.map +0 -1
- package/dist/nile-virtual-select/renderer.esm.js +0 -18
- package/dist/nile-virtual-select/search-manager.cjs.js +0 -2
- package/dist/nile-virtual-select/search-manager.cjs.js.map +0 -1
- package/dist/nile-virtual-select/search-manager.esm.js +0 -1
- package/dist/nile-virtual-select/selection-manager.cjs.js +0 -2
- package/dist/nile-virtual-select/selection-manager.cjs.js.map +0 -1
- package/dist/nile-virtual-select/selection-manager.esm.js +0 -1
- package/dist/nile-virtual-select/types.cjs.js +0 -2
- package/dist/nile-virtual-select/types.cjs.js.map +0 -1
- package/dist/nile-virtual-select/types.esm.js +0 -1
- package/dist/src/nile-select/virtual-scroll-helper.d.ts +0 -9
- package/dist/src/nile-select/virtual-scroll-helper.js +0 -51
- package/dist/src/nile-select/virtual-scroll-helper.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/nile-virtual-select.css.d.ts +0 -12
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js +0 -479
- 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 -263
- package/dist/src/nile-virtual-select/nile-virtual-select.js +0 -1183
- 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 -7
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js +0 -341
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js.map +0 -1
- package/dist/src/nile-virtual-select/renderer.d.ts +0 -11
- package/dist/src/nile-virtual-select/renderer.js +0 -51
- package/dist/src/nile-virtual-select/renderer.js.map +0 -1
- package/dist/src/nile-virtual-select/search-manager.d.ts +0 -12
- package/dist/src/nile-virtual-select/search-manager.js +0 -40
- package/dist/src/nile-virtual-select/search-manager.js.map +0 -1
- package/dist/src/nile-virtual-select/selection-manager.d.ts +0 -12
- package/dist/src/nile-virtual-select/selection-manager.js +0 -64
- package/dist/src/nile-virtual-select/selection-manager.js.map +0 -1
- package/dist/src/nile-virtual-select/types.d.ts +0 -50
- package/dist/src/nile-virtual-select/types.js +0 -8
- package/dist/src/nile-virtual-select/types.js.map +0 -1
- package/dist/virtualize-a4a40d96.esm.js +0 -22
- package/dist/virtualize-b6a2fbe0.cjs.js +0 -18
- package/dist/virtualize-b6a2fbe0.cjs.js.map +0 -1
- package/src/nile-select/virtual-scroll-helper.ts +0 -56
- package/src/nile-virtual-select/index.ts +0 -1
- package/src/nile-virtual-select/nile-virtual-select.css.ts +0 -481
- package/src/nile-virtual-select/nile-virtual-select.test.ts +0 -414
- package/src/nile-virtual-select/nile-virtual-select.ts +0 -1268
- package/src/nile-virtual-select/renderer.ts +0 -73
- package/src/nile-virtual-select/search-manager.ts +0 -50
- package/src/nile-virtual-select/selection-manager.ts +0 -75
- package/src/nile-virtual-select/types.ts +0 -54
package/package.json
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
"description": "Webcomponent nile-elements following open-wc recommendations",
|
4
4
|
"license": "MIT",
|
5
5
|
"author": "nile-elements",
|
6
|
-
"version": "0.1.52-beta-1.
|
6
|
+
"version": "0.1.52-beta-1.3",
|
7
7
|
"main": "dist/src/index.js",
|
8
8
|
"type": "module",
|
9
9
|
"module": "dist/src/index.js",
|
@@ -191,3 +191,4 @@
|
|
191
191
|
]
|
192
192
|
}
|
193
193
|
}
|
194
|
+
|
package/src/index.ts
CHANGED
@@ -16,7 +16,6 @@ export { NileLoader } from './nile-loader';
|
|
16
16
|
export { NileProgressBar } from './nile-progress-bar';
|
17
17
|
export { NileSpinner } from './nile-spinner';
|
18
18
|
export { NileSelect } from './nile-select';
|
19
|
-
export { NileVirtualSelect } from './nile-virtual-select';
|
20
19
|
export { NileOption } from './nile-option';
|
21
20
|
export { NileTag } from './nile-tag';
|
22
21
|
export { NileIconButton } from './nile-icon-button';
|
@@ -77,6 +76,5 @@ export { NileSectionMessage } from './nile-section-message';
|
|
77
76
|
export { NileToolbar } from './nile-toolbar';
|
78
77
|
export { NileInlineEdit } from './nile-inline-edit';
|
79
78
|
export { NileTable } from './nile-table';
|
80
|
-
|
81
79
|
export { NileFilterChip } from './nile-filter-chip';
|
82
|
-
export {
|
80
|
+
export {NilePagination } from './nile-pagination';
|
package/src/internal/form.ts
CHANGED
@@ -89,7 +89,7 @@ export class FormControlController implements ReactiveController {
|
|
89
89
|
}
|
90
90
|
|
91
91
|
hostConnected() {
|
92
|
-
const form = this.options
|
92
|
+
const form = this.options.form(this.host);
|
93
93
|
|
94
94
|
if (form) {
|
95
95
|
this.attachForm(form);
|
@@ -97,7 +97,7 @@ export class FormControlController implements ReactiveController {
|
|
97
97
|
|
98
98
|
// Listen for interactions
|
99
99
|
interactions.set(this.host, []);
|
100
|
-
this.options
|
100
|
+
this.options.assumeInteractionOn.forEach(event => {
|
101
101
|
this.host.addEventListener(event, this.handleInteraction);
|
102
102
|
});
|
103
103
|
}
|
@@ -40,6 +40,8 @@ import NileElement from '../internal/nile-element';
|
|
40
40
|
import { basicSetup } from './extensionSetup';
|
41
41
|
import { classMap } from 'lit/directives/class-map.js';
|
42
42
|
import { Theme as DefaultTheme } from './theme';
|
43
|
+
import { keymap } from '@codemirror/view';
|
44
|
+
import { acceptCompletion } from '@codemirror/autocomplete';
|
43
45
|
|
44
46
|
// Choose the appropriate mode for your use case
|
45
47
|
|
@@ -141,6 +143,18 @@ export class NileCodeEditor extends NileElement {
|
|
141
143
|
}, false )
|
142
144
|
}
|
143
145
|
|
146
|
+
getTabCompletionKeymap() {
|
147
|
+
return keymap.of([
|
148
|
+
{
|
149
|
+
key: 'Tab',
|
150
|
+
run: acceptCompletion,
|
151
|
+
preventDefault: true
|
152
|
+
},
|
153
|
+
|
154
|
+
]);
|
155
|
+
}
|
156
|
+
|
157
|
+
|
144
158
|
protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
|
145
159
|
super.updated(changedProperties);
|
146
160
|
if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
|
@@ -275,6 +289,7 @@ export class NileCodeEditor extends NileElement {
|
|
275
289
|
placeholderExtension,
|
276
290
|
defaultSyntaxHighlightingExtension,
|
277
291
|
autocompletion({aboveCursor: this.aboveCursor}),
|
292
|
+
this.getTabCompletionKeymap(),
|
278
293
|
language,
|
279
294
|
customThemeExtension,
|
280
295
|
EditorView.updateListener.of((v: ViewUpdate) => {
|
@@ -49,6 +49,7 @@ export class NileOption extends NileElement {
|
|
49
49
|
@query('.option__label') defaultSlot: HTMLSlotElement;
|
50
50
|
|
51
51
|
@state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
|
52
|
+
@state() selected = false; // the option is selected and has aria-selected="true"
|
52
53
|
@state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
|
53
54
|
@state() hidden = false; // the option is hidden
|
54
55
|
@state() isMultipleSelect = false;
|
@@ -65,19 +66,13 @@ export class NileOption extends NileElement {
|
|
65
66
|
/** Draws the option in a disabled state, preventing selection. */
|
66
67
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
67
68
|
|
68
|
-
/** Forces the option to display in multiple select mode with checkboxes. */
|
69
|
-
@property({ type: Boolean, reflect: true }) multiple = false;
|
70
|
-
|
71
|
-
/** Indicates whether the option is selected. */
|
72
|
-
@property({ type: Boolean, reflect: true }) selected = false;
|
73
|
-
|
74
69
|
connectedCallback() {
|
75
70
|
super.connectedCallback();
|
76
71
|
this.setAttribute('role', 'option');
|
77
72
|
this.setAttribute('aria-selected', 'false');
|
78
73
|
|
79
|
-
// Find the closest parent 'nile-select'
|
80
|
-
const parentSelect = this.closest('nile-select')
|
74
|
+
// Find the closest parent 'nile-select' element
|
75
|
+
const parentSelect = this.closest('nile-select');
|
81
76
|
|
82
77
|
// Check if the parent has the 'multiple' attribute
|
83
78
|
if (parentSelect && parentSelect.hasAttribute('multiple')) {
|
@@ -89,10 +84,6 @@ export class NileOption extends NileElement {
|
|
89
84
|
this.isMultipleSelect = Boolean(multipleValue);
|
90
85
|
}
|
91
86
|
}
|
92
|
-
|
93
|
-
if (this.multiple) {
|
94
|
-
this.isMultipleSelect = true;
|
95
|
-
}
|
96
87
|
}
|
97
88
|
|
98
89
|
protected updated(_changedProperties: PropertyValues): void {
|
@@ -135,11 +126,6 @@ export class NileOption extends NileElement {
|
|
135
126
|
this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
|
136
127
|
}
|
137
128
|
|
138
|
-
@watch('multiple')
|
139
|
-
handleMultipleChange() {
|
140
|
-
this.isMultipleSelect = this.multiple;
|
141
|
-
}
|
142
|
-
|
143
129
|
@watch('value')
|
144
130
|
handleValueChange() {
|
145
131
|
// Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
|
@@ -33,11 +33,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
|
|
33
33
|
import type { NileFormControl } from '../internal/nile-element';
|
34
34
|
import type NileOption from '../nile-option/nile-option';
|
35
35
|
import type NilePopup from '../nile-popup/nile-popup';
|
36
|
-
import type { RenderItemConfig } from '../nile-virtual-select/types.js';
|
37
36
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
38
37
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
39
|
-
import '../nile-virtual-select/nile-virtual-select';
|
40
|
-
import { VirtualScrollHelper } from './virtual-scroll-helper';
|
41
38
|
|
42
39
|
type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
43
40
|
|
@@ -56,7 +53,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
56
53
|
* @dependency nile-icon
|
57
54
|
* @dependency nile-popup
|
58
55
|
* @dependency nile-tag
|
59
|
-
* @dependency nile-virtual-select
|
60
56
|
*
|
61
57
|
* @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
|
62
58
|
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
@@ -95,15 +91,14 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
95
91
|
*/
|
96
92
|
|
97
93
|
@customElement('nile-select')
|
98
|
-
export class NileSelect extends NileElement implements NileFormControl{
|
94
|
+
export class NileSelect extends NileElement implements NileFormControl {
|
99
95
|
static styles: CSSResultGroup = styles;
|
100
96
|
|
101
97
|
// protected override BUBBLES=false;
|
102
98
|
|
103
|
-
private formControlController
|
104
|
-
|
105
|
-
|
106
|
-
|
99
|
+
private readonly formControlController = new FormControlController(this, {
|
100
|
+
assumeInteractionOn: ['nile-blur', 'nile-input'],
|
101
|
+
});
|
107
102
|
private readonly hasSlotController = new HasSlotController(
|
108
103
|
this,
|
109
104
|
'help-text',
|
@@ -237,13 +232,6 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
237
232
|
|
238
233
|
@property({ type: String }) noResultsMessage: string = 'No results found';
|
239
234
|
|
240
|
-
/** Enhanced configuration for rendering items with support for display text, value, and search text */
|
241
|
-
@property({ attribute: false }) renderItemConfig?: RenderItemConfig;
|
242
|
-
|
243
|
-
@property({ type: Array }) data: any = [];
|
244
|
-
|
245
|
-
@property({ type: Boolean }) enableVirtualScroll = false;
|
246
|
-
|
247
235
|
/** Gets the validity state object */
|
248
236
|
get validity() {
|
249
237
|
return this.valueInput?.validity;
|
@@ -254,18 +242,8 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
254
242
|
return this.valueInput?.validationMessage;
|
255
243
|
}
|
256
244
|
|
257
|
-
constructor() {
|
258
|
-
super();
|
259
|
-
}
|
260
|
-
|
261
245
|
connectedCallback() {
|
262
246
|
super.connectedCallback();
|
263
|
-
if(!this.enableVirtualScroll) {
|
264
|
-
this.formControlController = new FormControlController(this, {
|
265
|
-
assumeInteractionOn: ['nile-blur', 'nile-input'],
|
266
|
-
});
|
267
|
-
}
|
268
|
-
this.virtualScrollHelper = new VirtualScrollHelper(this);
|
269
247
|
this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
|
270
248
|
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
|
271
249
|
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
|
@@ -769,7 +747,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
769
747
|
|
770
748
|
// Update validity
|
771
749
|
this.updateComplete.then(() => {
|
772
|
-
this.formControlController
|
750
|
+
this.formControlController.updateValidity();
|
773
751
|
});
|
774
752
|
|
775
753
|
this.calculateTotalWidthOfTags();
|
@@ -820,8 +798,8 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
820
798
|
}
|
821
799
|
|
822
800
|
private handleInvalid(event: Event) {
|
823
|
-
this.formControlController
|
824
|
-
this.formControlController
|
801
|
+
this.formControlController.setValidity(false);
|
802
|
+
this.formControlController.emitInvalidEvent(event);
|
825
803
|
}
|
826
804
|
|
827
805
|
@watch('disabled', { waitUntilFirstUpdate: true })
|
@@ -924,7 +902,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
924
902
|
|
925
903
|
/** Gets the associated form, if one exists. */
|
926
904
|
getForm(): HTMLFormElement | null {
|
927
|
-
return this.formControlController
|
905
|
+
return this.formControlController.getForm();
|
928
906
|
}
|
929
907
|
|
930
908
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
@@ -935,7 +913,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
935
913
|
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
936
914
|
setCustomValidity(message: string) {
|
937
915
|
this.valueInput.setCustomValidity(message);
|
938
|
-
this.formControlController
|
916
|
+
this.formControlController.updateValidity();
|
939
917
|
}
|
940
918
|
|
941
919
|
/** Sets focus on the control. */
|
@@ -1008,10 +986,6 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
1008
986
|
}
|
1009
987
|
|
1010
988
|
render() {
|
1011
|
-
if(this.enableVirtualScroll) {
|
1012
|
-
return this.virtualScrollHelper.renderVirtualizedContent();
|
1013
|
-
}
|
1014
|
-
|
1015
989
|
const hasLabelSlot = this.hasSlotController.test('label');
|
1016
990
|
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
1017
991
|
const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
|
@@ -2312,7 +2312,7 @@
|
|
2312
2312
|
},
|
2313
2313
|
{
|
2314
2314
|
"name": "nile-option",
|
2315
|
-
"description": "Slots:\n\n * ` ` {} - The option's label.\n\n * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `
|
2315
|
+
"description": "Slots:\n\n * ` ` {} - The option's label.\n\n * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `current` {`boolean`} - \n\n * `selected` {`boolean`} - \n\n * `hasHover` {`boolean`} - \n\n * `hidden` {`boolean`} - \n\n * `isMultipleSelect` {`boolean`} - \n\n * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n * `showCheckbox` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2316
2316
|
"attributes": [
|
2317
2317
|
{
|
2318
2318
|
"name": "value",
|
@@ -2327,16 +2327,6 @@
|
|
2327
2327
|
"name": "disabled",
|
2328
2328
|
"description": "`disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\nProperty: disabled\n\nDefault: false",
|
2329
2329
|
"valueSet": "v"
|
2330
|
-
},
|
2331
|
-
{
|
2332
|
-
"name": "multiple",
|
2333
|
-
"description": "`multiple` {`boolean`} - Forces the option to display in multiple select mode with checkboxes.\n\nProperty: multiple\n\nDefault: false",
|
2334
|
-
"valueSet": "v"
|
2335
|
-
},
|
2336
|
-
{
|
2337
|
-
"name": "selected",
|
2338
|
-
"description": "`selected` {`boolean`} - Indicates whether the option is selected.\n\nProperty: selected\n\nDefault: false",
|
2339
|
-
"valueSet": "v"
|
2340
2330
|
}
|
2341
2331
|
]
|
2342
2332
|
},
|
@@ -2843,7 +2833,7 @@
|
|
2843
2833
|
},
|
2844
2834
|
{
|
2845
2835
|
"name": "nile-select",
|
2846
|
-
"description": "Events:\n\n * `nile-change` {} - Emitted when the control's value changes.\n\n * `nile-clear` {} - Emitted when the control's value is cleared.\n\n * `nile-input` {} - Emitted when the control receives input.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-show` {} - Emitted when the select's menu opens.\n\n * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the select's menu closes.\n\n * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internal-search-placeholder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `
|
2836
|
+
"description": "Events:\n\n * `nile-change` {} - Emitted when the control's value changes.\n\n * `nile-clear` {} - Emitted when the control's value is cleared.\n\n * `nile-input` {} - Emitted when the control receives input.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-show` {} - Emitted when the select's menu opens.\n\n * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the select's menu closes.\n\n * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internal-search-placeholder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n * `styles` - \n\n * `formControlController` - \n\n * `hasSlotController` - \n\n * `typeToSelectString` {`string`} - \n\n * `typeToSelectTimeout` {`number`} - \n\n * `popup` - \n\n * `combobox` {`HTMLSlotElement`} - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `listbox` {`HTMLSlotElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `currentOption` - \n\n * `selectedOptions` {`NileOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - \n\n * `internalSearchPlaceHolder` {`string`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showSelected` {`boolean`} - \n\n * `oldMaxOptionsVisible` {`number`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `defaultChecked` {`boolean | undefined`} - \n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string | undefined`} - \n\n * `min` {`string | number | Date | undefined`} - \n\n * `max` {`string | number | Date | undefined`} - \n\n * `step` {`number | \"any\" | undefined`} - \n\n * `required` {`boolean`} - The select's required attribute.\n\n * `minlength` {`number | undefined`} - \n\n * `maxlength` {`number | undefined`} - \n\n * `validity` {`ValidityState`} - Gets the validity state object\n\n * `validationMessage` {`string`} - Gets the validation message\n\n * `checkValidity` - \n\n * `getForm` - \n\n * `reportValidity` - \n\n * `setCustomValidity` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
2847
2837
|
"attributes": [
|
2848
2838
|
{
|
2849
2839
|
"name": "size",
|
@@ -2980,15 +2970,6 @@
|
|
2980
2970
|
"name": "noResultsMessage",
|
2981
2971
|
"description": "`noResultsMessage` {`string`} - \n\nProperty: noResultsMessage\n\nDefault: No results found"
|
2982
2972
|
},
|
2983
|
-
{
|
2984
|
-
"name": "data",
|
2985
|
-
"description": "`data` - \n\nProperty: data\n\nDefault: "
|
2986
|
-
},
|
2987
|
-
{
|
2988
|
-
"name": "enableVirtualScroll",
|
2989
|
-
"description": "`enableVirtualScroll` {`boolean`} - \n\nProperty: enableVirtualScroll\n\nDefault: false",
|
2990
|
-
"valueSet": "v"
|
2991
|
-
},
|
2992
2973
|
{
|
2993
2974
|
"name": "name",
|
2994
2975
|
"description": "`name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "
|
@@ -4057,214 +4038,6 @@
|
|
4057
4038
|
"description": "`subtitle` {`string`} - \n\nProperty: subtitle\n\nDefault: "
|
4058
4039
|
}
|
4059
4040
|
]
|
4060
|
-
},
|
4061
|
-
{
|
4062
|
-
"name": "nile-virtual-select",
|
4063
|
-
"description": "Events:\n\n * `nile-change` {} - Emitted when the control's value changes.\n\n * `nile-clear` {} - Emitted when the control's value is cleared.\n\n * `nile-input` {} - Emitted when the control receives input.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-show` {} - Emitted when the select's menu opens.\n\n * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the select's menu closes.\n\n * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n * `expand-icon` {} - The icon to show when the control is expanded and collapsed.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `data` - Array of all option items for virtual scrolling\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `internal-search-placeholder` {`string`} - Search input placeholder\n\n * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n * `optionsLoading` {`boolean`} - Show loading state\n\n * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n * `help-text` {`string`} - Help text\n\n * `error-message` {`string`} - Error message\n\n * `warning` {`boolean`} - Sets the input to a warning state\n\n * `error` {`boolean`} - Sets the input to an error state\n\n * `success` {`boolean`} - Sets the input to a success state\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - The select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showNoResults` {`boolean`} - Show no results message\n\n * `noResultsMessage` {`string`} - No results message\n\n * `showSelected` {`boolean`} - Show selected options only\n\n * `blockValueChange` {`boolean`} - Block value change events\n\n * `noWidthSync` {`boolean`} - Disable width synchronization\n\n * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n * `styles` - \n\n * `formControlController` - \n\n * `hasSlotController` - \n\n * `popup` - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `selectedOptions` {`VirtualOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `data` - Array of all option items for virtual scrolling\n\n * `originalOptionItems` - Original unfiltered option items for search functionality\n\n * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `searchValue` {`string`} - Current search value\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n * `optionsLoading` {`boolean`} - Show loading state\n\n * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - Help text\n\n * `errorMessage` {`string`} - Error message\n\n * `warning` {`boolean`} - Sets the input to a warning state\n\n * `error` {`boolean`} - Sets the input to an error state\n\n * `success` {`boolean`} - Sets the input to a success state\n\n * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n * `open` {`boolean`} - The select's open state.\n\n * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `filled` {`boolean`} - Draws a filled select.\n\n * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n * `showNoResults` {`boolean`} - Show no results message\n\n * `noResultsMessage` {`string`} - No results message\n\n * `showSelected` {`boolean`} - Show selected options only\n\n * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n * `blockValueChange` {`boolean`} - Block value change events\n\n * `noWidthSync` {`boolean`} - Disable width synchronization\n\n * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n * `oldMaxOptionsVisible` {`number`} - \n\n * `handleDocumentMouseDown` - \n\n * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n * `disabled` {`boolean`} - Disables the select control.\n\n * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `defaultChecked` {`boolean | undefined`} - \n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string | undefined`} - \n\n * `min` {`string | number | Date | undefined`} - \n\n * `max` {`string | number | Date | undefined`} - \n\n * `step` {`number | \"any\" | undefined`} - \n\n * `required` {`boolean`} - The select's required attribute.\n\n * `minlength` {`number | undefined`} - \n\n * `maxlength` {`number | undefined`} - \n\n * `validity` {`ValidityState`} - Gets the validity state object\n\n * `validationMessage` {`string`} - Gets the validation message\n\n * `checkValidity` - \n\n * `getForm` - \n\n * `reportValidity` - \n\n * `setCustomValidity` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
4064
|
-
"attributes": [
|
4065
|
-
{
|
4066
|
-
"name": "data",
|
4067
|
-
"description": "`data` - Array of all option items for virtual scrolling\n\nProperty: data\n\nDefault: "
|
4068
|
-
},
|
4069
|
-
{
|
4070
|
-
"name": "size",
|
4071
|
-
"description": "`size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\nProperty: size\n\nDefault: medium",
|
4072
|
-
"values": [
|
4073
|
-
{
|
4074
|
-
"name": "medium"
|
4075
|
-
},
|
4076
|
-
{
|
4077
|
-
"name": "small"
|
4078
|
-
},
|
4079
|
-
{
|
4080
|
-
"name": "large"
|
4081
|
-
}
|
4082
|
-
]
|
4083
|
-
},
|
4084
|
-
{
|
4085
|
-
"name": "placeholder",
|
4086
|
-
"description": "`placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\nProperty: placeholder\n\nDefault: Select..."
|
4087
|
-
},
|
4088
|
-
{
|
4089
|
-
"name": "searchEnabled",
|
4090
|
-
"description": "`searchEnabled` {`boolean`} - Enable search functionality\n\nProperty: searchEnabled\n\nDefault: false",
|
4091
|
-
"valueSet": "v"
|
4092
|
-
},
|
4093
|
-
{
|
4094
|
-
"name": "internal-search-placeholder",
|
4095
|
-
"description": "`internal-search-placeholder` {`string`} - Search input placeholder\n\nProperty: internalSearchPlaceHolder\n\nDefault: Search..."
|
4096
|
-
},
|
4097
|
-
{
|
4098
|
-
"name": "disableLocalSearch",
|
4099
|
-
"description": "`disableLocalSearch` {`boolean`} - Disable local search filtering\n\nProperty: disableLocalSearch\n\nDefault: false",
|
4100
|
-
"valueSet": "v"
|
4101
|
-
},
|
4102
|
-
{
|
4103
|
-
"name": "optionsLoading",
|
4104
|
-
"description": "`optionsLoading` {`boolean`} - Show loading state\n\nProperty: optionsLoading\n\nDefault: false",
|
4105
|
-
"valueSet": "v"
|
4106
|
-
},
|
4107
|
-
{
|
4108
|
-
"name": "multiple",
|
4109
|
-
"description": "`multiple` {`boolean`} - Allows more than one option to be selected.\n\nProperty: multiple\n\nDefault: false",
|
4110
|
-
"valueSet": "v"
|
4111
|
-
},
|
4112
|
-
{
|
4113
|
-
"name": "help-text",
|
4114
|
-
"description": "`help-text` {`string`} - Help text\n\nProperty: helpText\n\nDefault: "
|
4115
|
-
},
|
4116
|
-
{
|
4117
|
-
"name": "error-message",
|
4118
|
-
"description": "`error-message` {`string`} - Error message\n\nProperty: errorMessage\n\nDefault: "
|
4119
|
-
},
|
4120
|
-
{
|
4121
|
-
"name": "warning",
|
4122
|
-
"description": "`warning` {`boolean`} - Sets the input to a warning state\n\nProperty: warning\n\nDefault: false",
|
4123
|
-
"valueSet": "v"
|
4124
|
-
},
|
4125
|
-
{
|
4126
|
-
"name": "error",
|
4127
|
-
"description": "`error` {`boolean`} - Sets the input to an error state\n\nProperty: error\n\nDefault: false",
|
4128
|
-
"valueSet": "v"
|
4129
|
-
},
|
4130
|
-
{
|
4131
|
-
"name": "success",
|
4132
|
-
"description": "`success` {`boolean`} - Sets the input to a success state\n\nProperty: success\n\nDefault: false",
|
4133
|
-
"valueSet": "v"
|
4134
|
-
},
|
4135
|
-
{
|
4136
|
-
"name": "clearable",
|
4137
|
-
"description": "`clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\nProperty: clearable\n\nDefault: false",
|
4138
|
-
"valueSet": "v"
|
4139
|
-
},
|
4140
|
-
{
|
4141
|
-
"name": "open",
|
4142
|
-
"description": "`open` {`boolean`} - The select's open state.\n\nProperty: open\n\nDefault: false",
|
4143
|
-
"valueSet": "v"
|
4144
|
-
},
|
4145
|
-
{
|
4146
|
-
"name": "hoist",
|
4147
|
-
"description": "`hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\nProperty: hoist\n\nDefault: false",
|
4148
|
-
"valueSet": "v"
|
4149
|
-
},
|
4150
|
-
{
|
4151
|
-
"name": "filled",
|
4152
|
-
"description": "`filled` {`boolean`} - Draws a filled select.\n\nProperty: filled\n\nDefault: false",
|
4153
|
-
"valueSet": "v"
|
4154
|
-
},
|
4155
|
-
{
|
4156
|
-
"name": "pill",
|
4157
|
-
"description": "`pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\nProperty: pill\n\nDefault: false",
|
4158
|
-
"valueSet": "v"
|
4159
|
-
},
|
4160
|
-
{
|
4161
|
-
"name": "label",
|
4162
|
-
"description": "`label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\nProperty: label\n\nDefault: "
|
4163
|
-
},
|
4164
|
-
{
|
4165
|
-
"name": "placement",
|
4166
|
-
"description": "`placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\nProperty: placement\n\nDefault: bottom",
|
4167
|
-
"values": [
|
4168
|
-
{
|
4169
|
-
"name": "top"
|
4170
|
-
},
|
4171
|
-
{
|
4172
|
-
"name": "bottom"
|
4173
|
-
}
|
4174
|
-
]
|
4175
|
-
},
|
4176
|
-
{
|
4177
|
-
"name": "showNoResults",
|
4178
|
-
"description": "`showNoResults` {`boolean`} - Show no results message\n\nProperty: showNoResults\n\nDefault: false",
|
4179
|
-
"valueSet": "v"
|
4180
|
-
},
|
4181
|
-
{
|
4182
|
-
"name": "noResultsMessage",
|
4183
|
-
"description": "`noResultsMessage` {`string`} - No results message\n\nProperty: noResultsMessage\n\nDefault: No results found"
|
4184
|
-
},
|
4185
|
-
{
|
4186
|
-
"name": "showSelected",
|
4187
|
-
"description": "`showSelected` {`boolean`} - Show selected options only\n\nProperty: showSelected\n\nDefault: false",
|
4188
|
-
"valueSet": "v"
|
4189
|
-
},
|
4190
|
-
{
|
4191
|
-
"name": "blockValueChange",
|
4192
|
-
"description": "`blockValueChange` {`boolean`} - Block value change events\n\nProperty: blockValueChange\n\nDefault: false",
|
4193
|
-
"valueSet": "v"
|
4194
|
-
},
|
4195
|
-
{
|
4196
|
-
"name": "noWidthSync",
|
4197
|
-
"description": "`noWidthSync` {`boolean`} - Disable width synchronization\n\nProperty: noWidthSync\n\nDefault: false",
|
4198
|
-
"valueSet": "v"
|
4199
|
-
},
|
4200
|
-
{
|
4201
|
-
"name": "max-options-visible",
|
4202
|
-
"description": "`max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\nProperty: maxOptionsVisible\n\nDefault: 3"
|
4203
|
-
},
|
4204
|
-
{
|
4205
|
-
"name": "name",
|
4206
|
-
"description": "`name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "
|
4207
|
-
},
|
4208
|
-
{
|
4209
|
-
"name": "value",
|
4210
|
-
"description": "`value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\nProperty: value\n\nDefault: ",
|
4211
|
-
"values": []
|
4212
|
-
},
|
4213
|
-
{
|
4214
|
-
"name": "disabled",
|
4215
|
-
"description": "`disabled` {`boolean`} - Disables the select control.\n\nProperty: disabled\n\nDefault: false",
|
4216
|
-
"valueSet": "v"
|
4217
|
-
},
|
4218
|
-
{
|
4219
|
-
"name": "form",
|
4220
|
-
"description": "`form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\nProperty: form\n\nDefault: "
|
4221
|
-
},
|
4222
|
-
{
|
4223
|
-
"name": "required",
|
4224
|
-
"description": "`required` {`boolean`} - The select's required attribute.\n\nProperty: required\n\nDefault: false",
|
4225
|
-
"valueSet": "v"
|
4226
|
-
},
|
4227
|
-
{
|
4228
|
-
"name": "onnile-change",
|
4229
|
-
"description": "`nile-change` {} - Emitted when the control's value changes."
|
4230
|
-
},
|
4231
|
-
{
|
4232
|
-
"name": "onnile-clear",
|
4233
|
-
"description": "`nile-clear` {} - Emitted when the control's value is cleared."
|
4234
|
-
},
|
4235
|
-
{
|
4236
|
-
"name": "onnile-input",
|
4237
|
-
"description": "`nile-input` {} - Emitted when the control receives input."
|
4238
|
-
},
|
4239
|
-
{
|
4240
|
-
"name": "onnile-focus",
|
4241
|
-
"description": "`nile-focus` {} - Emitted when the control gains focus."
|
4242
|
-
},
|
4243
|
-
{
|
4244
|
-
"name": "onnile-blur",
|
4245
|
-
"description": "`nile-blur` {} - Emitted when the control loses focus."
|
4246
|
-
},
|
4247
|
-
{
|
4248
|
-
"name": "onnile-show",
|
4249
|
-
"description": "`nile-show` {} - Emitted when the select's menu opens."
|
4250
|
-
},
|
4251
|
-
{
|
4252
|
-
"name": "onnile-after-show",
|
4253
|
-
"description": "`nile-after-show` {} - Emitted after the select's menu opens and all animations are complete."
|
4254
|
-
},
|
4255
|
-
{
|
4256
|
-
"name": "onnile-hide",
|
4257
|
-
"description": "`nile-hide` {} - Emitted when the select's menu closes."
|
4258
|
-
},
|
4259
|
-
{
|
4260
|
-
"name": "onnile-after-hide",
|
4261
|
-
"description": "`nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete."
|
4262
|
-
},
|
4263
|
-
{
|
4264
|
-
"name": "onnile-invalid",
|
4265
|
-
"description": "`nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied."
|
4266
|
-
}
|
4267
|
-
]
|
4268
4041
|
}
|
4269
4042
|
],
|
4270
4043
|
"globalAttributes": [],
|
@@ -1,2 +0,0 @@
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,l;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}return{setters:[function(_lit){e=_lit.html;}],execute:function execute(){_export("V",l=/*#__PURE__*/function(){function l(e){_classCallCheck(this,l);this.component=e;}return _createClass(l,[{key:"renderVirtualizedContent",value:function renderVirtualizedContent(){var _l=this.component;return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div class=\"virtual-select\">\n <nile-virtual-select\n .name=","\n .value=","\n .placeholder=","\n .size=","\n .searchEnabled=","\n .internalSearchPlaceHolder=","\n .disableLocalSearch=","\n .optionsLoading=","\n .multiple=","\n .helpText=","\n .errorMessage=","\n .warning=","\n .error=","\n .success=","\n .disabled=","\n .clearable=","\n .hoist=","\n .filled=","\n .pill=","\n .label=","\n .placement=","\n .form=","\n .required=","\n .showNoResults=","\n .noResultsMessage=","\n .renderItemConfig=","\n .blockValueChange=","\n .noWidthSync=","\n .maxOptionsVisible=","\n .data=","\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n </nile-virtual-select>\n </div>\n "])),_l.name,_l.value,_l.placeholder,_l.size,_l.searchEnabled,_l.internalSearchPlaceHolder,_l.disableLocalSearch,_l.optionsLoading,_l.multiple,_l.helpText,_l.errorMessage,_l.warning,_l.error,_l.success,_l.disabled,_l.clearable,_l.hoist,_l.filled,_l.pill,_l.label,_l.placement,_l.form,_l.required,_l.showNoResults,_l.noResultsMessage,_l.renderItemConfig,_l.blockValueChange,_l.noWidthSync,_l.maxOptionsVisible,_l.data);}}]);}());}};});
|
2
|
-
//# sourceMappingURL=virtual-scroll-helper.cjs.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"virtual-scroll-helper.cjs.js","sources":["../../../src/nile-select/virtual-scroll-helper.ts"],"sourcesContent":["import { html } from 'lit';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-select component\n */\nexport class VirtualScrollHelper {\n private component: NileElement;\n\n constructor(component: NileElement) {\n this.component = component;\n }\n\n renderVirtualizedContent(): any {\n const component = this.component as any;\n\n return html`\n <div class=\"virtual-select\">\n <nile-virtual-select\n .name=${component.name}\n .value=${component.value}\n .placeholder=${component.placeholder}\n .size=${component.size}\n .searchEnabled=${component.searchEnabled}\n .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}\n .disableLocalSearch=${component.disableLocalSearch}\n .optionsLoading=${component.optionsLoading}\n .multiple=${component.multiple}\n .helpText=${component.helpText}\n .errorMessage=${component.errorMessage}\n .warning=${component.warning}\n .error=${component.error}\n .success=${component.success}\n .disabled=${component.disabled}\n .clearable=${component.clearable}\n .hoist=${component.hoist}\n .filled=${component.filled}\n .pill=${component.pill}\n .label=${component.label}\n .placement=${component.placement}\n .form=${component.form}\n .required=${component.required}\n .showNoResults=${component.showNoResults}\n .noResultsMessage=${component.noResultsMessage}\n .renderItemConfig=${component.renderItemConfig}\n .blockValueChange=${component.blockValueChange}\n .noWidthSync=${component.noWidthSync}\n .maxOptionsVisible=${component.maxOptionsVisible}\n .data=${component.data}\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n </nile-virtual-select>\n </div>\n `;\n }\n}\n"],"names":["VirtualScrollHelper","l","component","this","_createClass","key","value","renderVirtualizedContent","html","_templateObject","_taggedTemplateLiteral","name","placeholder","size","searchEnabled","internalSearchPlaceHolder","disableLocalSearch","optionsLoading","multiple","helpText","errorMessage","warning","error","success","disabled","clearable","hoist","filled","pill","label","placement","form","required","showNoResults","noResultsMessage","renderItemConfig","blockValueChange","noWidthSync","maxOptionsVisible","data"],"mappings":"w4CAMaA,CAAAA,yBAGX,SAAAC,EAAYC,2BACVC,IAAKD,CAAAA,SAAAA,CAAYA,CAClB,EAED,OAAAE,YAAA,CAAAH,CAAA,GAAAI,GAAA,4BAAAC,KAAA,UAAAC,wBAAAA,CAAAA,CACE,CAAA,GAAML,CAAAA,GAAYC,IAAKD,CAAAA,SAAAA,CAEvB,MAAOM,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,s+BAGGR,EAAUS,CAAAA,IAAAA,CACTT,EAAUI,CAAAA,KAAAA,CACJJ,EAAUU,CAAAA,WAAAA,CACjBV,EAAUW,CAAAA,IAAAA,CACDX,EAAUY,CAAAA,aAAAA,CACEZ,EAAUa,CAAAA,yBAAAA,CACjBb,EAAUc,CAAAA,kBAAAA,CACdd,EAAUe,CAAAA,cAAAA,CAChBf,EAAUgB,CAAAA,QAAAA,CACVhB,EAAUiB,CAAAA,QAAAA,CACNjB,EAAUkB,CAAAA,YAAAA,CACflB,EAAUmB,CAAAA,OAAAA,CACZnB,EAAUoB,CAAAA,KAAAA,CACRpB,EAAUqB,CAAAA,OAAAA,CACTrB,EAAUsB,CAAAA,QAAAA,CACTtB,EAAUuB,CAAAA,SAAAA,CACdvB,EAAUwB,CAAAA,KAAAA,CACTxB,EAAUyB,CAAAA,MAAAA,CACZzB,EAAU0B,CAAAA,IAAAA,CACT1B,EAAU2B,CAAAA,KAAAA,CACN3B,EAAU4B,CAAAA,SAAAA,CACf5B,EAAU6B,CAAAA,IAAAA,CACN7B,EAAU8B,CAAAA,QAAAA,CACL9B,EAAU+B,CAAAA,aAAAA,CACP/B,EAAUgC,CAAAA,gBAAAA,CACVhC,EAAUiC,CAAAA,gBAAAA,CACVjC,EAAUkC,CAAAA,gBAAAA,CACflC,EAAUmC,CAAAA,WAAAA,CACJnC,EAAUoC,CAAAA,iBAAAA,CACvBpC,EAAUqC,CAAAA,IAAAA,EAMzB"}
|