@aquera/nile-elements 0.1.49-beta-1.4 → 0.1.49
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 +2 -2
- package/demo/index.html +32 -72
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- 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-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-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.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-checkbox/nile-checkbox.test.cjs.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 +1 -0
- 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-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.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-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.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-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.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-chip/nile-chip.js +1 -0
- package/dist/src/nile-chip/nile-chip.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 -9
- package/dist/src/nile-select/nile-select.js +18 -38
- 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-chip/nile-chip.ts +1 -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 -33
- 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 -17
- 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 -251
- package/dist/src/nile-virtual-select/nile-virtual-select.js +0 -1158
- 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 -317
- 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 -48
- 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 -39
- 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 -57
- package/dist/src/nile-virtual-select/selection-manager.js.map +0 -1
- package/dist/src/nile-virtual-select/types.d.ts +0 -45
- 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 -390
- package/src/nile-virtual-select/nile-virtual-select.ts +0 -1234
- package/src/nile-virtual-select/renderer.ts +0 -65
- package/src/nile-virtual-select/search-manager.ts +0 -48
- package/src/nile-virtual-select/selection-manager.ts +0 -64
- package/src/nile-virtual-select/types.ts +0 -48
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.49
|
6
|
+
"version": "0.1.49",
|
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
|
}
|
@@ -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
|
@@ -35,8 +35,6 @@ import type NileOption from '../nile-option/nile-option';
|
|
35
35
|
import type NilePopup from '../nile-popup/nile-popup';
|
36
36
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
37
37
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
38
|
-
import '../nile-virtual-select/nile-virtual-select';
|
39
|
-
import { VirtualScrollHelper } from './virtual-scroll-helper';
|
40
38
|
|
41
39
|
type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
42
40
|
|
@@ -55,7 +53,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
55
53
|
* @dependency nile-icon
|
56
54
|
* @dependency nile-popup
|
57
55
|
* @dependency nile-tag
|
58
|
-
* @dependency nile-virtual-select
|
59
56
|
*
|
60
57
|
* @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
|
61
58
|
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
@@ -94,15 +91,14 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
94
91
|
*/
|
95
92
|
|
96
93
|
@customElement('nile-select')
|
97
|
-
export class NileSelect extends NileElement implements NileFormControl{
|
94
|
+
export class NileSelect extends NileElement implements NileFormControl {
|
98
95
|
static styles: CSSResultGroup = styles;
|
99
96
|
|
100
97
|
// protected override BUBBLES=false;
|
101
98
|
|
102
|
-
private formControlController
|
103
|
-
|
104
|
-
|
105
|
-
|
99
|
+
private readonly formControlController = new FormControlController(this, {
|
100
|
+
assumeInteractionOn: ['nile-blur', 'nile-input'],
|
101
|
+
});
|
106
102
|
private readonly hasSlotController = new HasSlotController(
|
107
103
|
this,
|
108
104
|
'help-text',
|
@@ -236,12 +232,6 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
236
232
|
|
237
233
|
@property({ type: String }) noResultsMessage: string = 'No results found';
|
238
234
|
|
239
|
-
@property({ attribute: false }) renderItemFunction: (item: any) => string = (item: any) => item?.label || item?.name || item;
|
240
|
-
|
241
|
-
@property({ type: Array }) data: any = [];
|
242
|
-
|
243
|
-
@property({ type: Boolean }) enableVirtualScroll = false;
|
244
|
-
|
245
235
|
/** Gets the validity state object */
|
246
236
|
get validity() {
|
247
237
|
return this.valueInput?.validity;
|
@@ -252,18 +242,8 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
252
242
|
return this.valueInput?.validationMessage;
|
253
243
|
}
|
254
244
|
|
255
|
-
constructor() {
|
256
|
-
super();
|
257
|
-
}
|
258
|
-
|
259
245
|
connectedCallback() {
|
260
246
|
super.connectedCallback();
|
261
|
-
if(!this.enableVirtualScroll) {
|
262
|
-
this.formControlController = new FormControlController(this, {
|
263
|
-
assumeInteractionOn: ['nile-blur', 'nile-input'],
|
264
|
-
});
|
265
|
-
}
|
266
|
-
this.virtualScrollHelper = new VirtualScrollHelper(this);
|
267
247
|
this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
|
268
248
|
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
|
269
249
|
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
|
@@ -767,7 +747,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
767
747
|
|
768
748
|
// Update validity
|
769
749
|
this.updateComplete.then(() => {
|
770
|
-
this.formControlController
|
750
|
+
this.formControlController.updateValidity();
|
771
751
|
});
|
772
752
|
|
773
753
|
this.calculateTotalWidthOfTags();
|
@@ -818,8 +798,8 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
818
798
|
}
|
819
799
|
|
820
800
|
private handleInvalid(event: Event) {
|
821
|
-
this.formControlController
|
822
|
-
this.formControlController
|
801
|
+
this.formControlController.setValidity(false);
|
802
|
+
this.formControlController.emitInvalidEvent(event);
|
823
803
|
}
|
824
804
|
|
825
805
|
@watch('disabled', { waitUntilFirstUpdate: true })
|
@@ -922,7 +902,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
922
902
|
|
923
903
|
/** Gets the associated form, if one exists. */
|
924
904
|
getForm(): HTMLFormElement | null {
|
925
|
-
return this.formControlController
|
905
|
+
return this.formControlController.getForm();
|
926
906
|
}
|
927
907
|
|
928
908
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
@@ -933,7 +913,7 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
933
913
|
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
934
914
|
setCustomValidity(message: string) {
|
935
915
|
this.valueInput.setCustomValidity(message);
|
936
|
-
this.formControlController
|
916
|
+
this.formControlController.updateValidity();
|
937
917
|
}
|
938
918
|
|
939
919
|
/** Sets focus on the control. */
|
@@ -1006,10 +986,6 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
1006
986
|
}
|
1007
987
|
|
1008
988
|
render() {
|
1009
|
-
if(this.enableVirtualScroll) {
|
1010
|
-
return this.virtualScrollHelper.renderVirtualizedContent();
|
1011
|
-
}
|
1012
|
-
|
1013
989
|
const hasLabelSlot = this.hasSlotController.test('label');
|
1014
990
|
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
1015
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 * `renderItemFunction` - Function to render item value from data object\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 .renderItemFunction=","\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.renderItemFunction,_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 .renderItemFunction=${component.renderItemFunction}\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","renderItemFunction","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,w+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,CACRhC,EAAUiC,CAAAA,kBAAAA,CACZjC,EAAUkC,CAAAA,gBAAAA,CACflC,EAAUmC,CAAAA,WAAAA,CACJnC,EAAUoC,CAAAA,iBAAAA,CACvBpC,EAAUqC,CAAAA,IAAAA,EAMzB"}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import{html as e}from"lit";class l{constructor(e){this.component=e}renderVirtualizedContent(){const l=this.component;return e`
|
2
|
-
<div class="virtual-select">
|
3
|
-
<nile-virtual-select
|
4
|
-
.name=${l.name}
|
5
|
-
.value=${l.value}
|
6
|
-
.placeholder=${l.placeholder}
|
7
|
-
.size=${l.size}
|
8
|
-
.searchEnabled=${l.searchEnabled}
|
9
|
-
.internalSearchPlaceHolder=${l.internalSearchPlaceHolder}
|
10
|
-
.disableLocalSearch=${l.disableLocalSearch}
|
11
|
-
.optionsLoading=${l.optionsLoading}
|
12
|
-
.multiple=${l.multiple}
|
13
|
-
.helpText=${l.helpText}
|
14
|
-
.errorMessage=${l.errorMessage}
|
15
|
-
.warning=${l.warning}
|
16
|
-
.error=${l.error}
|
17
|
-
.success=${l.success}
|
18
|
-
.disabled=${l.disabled}
|
19
|
-
.clearable=${l.clearable}
|
20
|
-
.hoist=${l.hoist}
|
21
|
-
.filled=${l.filled}
|
22
|
-
.pill=${l.pill}
|
23
|
-
.label=${l.label}
|
24
|
-
.placement=${l.placement}
|
25
|
-
.form=${l.form}
|
26
|
-
.required=${l.required}
|
27
|
-
.showNoResults=${l.showNoResults}
|
28
|
-
.noResultsMessage=${l.noResultsMessage}
|
29
|
-
.renderItemFunction=${l.renderItemFunction}
|
30
|
-
.blockValueChange=${l.blockValueChange}
|
31
|
-
.noWidthSync=${l.noWidthSync}
|
32
|
-
.maxOptionsVisible=${l.maxOptionsVisible}
|
33
|
-
.data=${l.data}
|
34
|
-
>
|
35
|
-
<slot name="prefix" slot="prefix"></slot>
|
36
|
-
</nile-virtual-select>
|
37
|
-
</div>
|
38
|
-
`}}export{l as V};
|