@aquera/nile-elements 1.8.5 → 1.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +915 -321
- package/dist/nile-markdown/index.cjs.js +2 -0
- package/dist/nile-markdown/index.cjs.js.map +1 -0
- package/dist/nile-markdown/index.esm.js +1 -0
- package/dist/nile-markdown/nile-markdown.cjs.js +30 -0
- package/dist/nile-markdown/nile-markdown.cjs.js.map +1 -0
- package/dist/nile-markdown/nile-markdown.css.cjs.js +2 -0
- package/dist/nile-markdown/nile-markdown.css.cjs.js.map +1 -0
- package/dist/nile-markdown/nile-markdown.css.esm.js +152 -0
- package/dist/nile-markdown/nile-markdown.esm.js +3 -0
- package/dist/nile-markdown-editor/index.cjs.js +2 -0
- package/dist/nile-markdown-editor/index.cjs.js.map +1 -0
- package/dist/nile-markdown-editor/index.esm.js +1 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.cjs.js +2 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.cjs.js.map +1 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.css.cjs.js +2 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.css.cjs.js.map +1 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.css.esm.js +255 -0
- package/dist/nile-markdown-editor/nile-markdown-editor.esm.js +143 -0
- 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 +22 -1
- package/dist/nile-option/nile-option.esm.js +12 -2
- 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.css.cjs.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.esm.js +16 -7
- package/dist/nile-select/nile-select.esm.js +2 -2
- package/dist/nile-select/virtual-scroll-helper.cjs.js +1 -1
- package/dist/nile-select/virtual-scroll-helper.cjs.js.map +1 -1
- package/dist/nile-select/virtual-scroll-helper.esm.js +2 -0
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js +3 -3
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js.map +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js.map +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.esm.js +4 -3
- package/dist/nile-virtual-select/nile-virtual-select.esm.js +4 -4
- package/dist/nile-virtual-select/renderer.cjs.js +1 -1
- package/dist/nile-virtual-select/renderer.cjs.js.map +1 -1
- package/dist/nile-virtual-select/renderer.esm.js +14 -12
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +2 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-markdown/index.d.ts +1 -0
- package/dist/src/nile-markdown/index.js +2 -0
- package/dist/src/nile-markdown/index.js.map +1 -0
- package/dist/src/nile-markdown/nile-markdown.css.d.ts +10 -0
- package/dist/src/nile-markdown/nile-markdown.css.js +163 -0
- package/dist/src/nile-markdown/nile-markdown.css.js.map +1 -0
- package/dist/src/nile-markdown/nile-markdown.d.ts +91 -0
- package/dist/src/nile-markdown/nile-markdown.js +167 -0
- package/dist/src/nile-markdown/nile-markdown.js.map +1 -0
- package/dist/src/nile-markdown/nile-markdown.test.d.ts +1 -0
- package/dist/src/nile-markdown/nile-markdown.test.js +192 -0
- package/dist/src/nile-markdown/nile-markdown.test.js.map +1 -0
- package/dist/src/nile-markdown-editor/index.d.ts +1 -0
- package/dist/src/nile-markdown-editor/index.js +2 -0
- package/dist/src/nile-markdown-editor/index.js.map +1 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.css.d.ts +10 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.css.js +266 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.css.js.map +1 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.d.ts +121 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.js +615 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.js.map +1 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.test.d.ts +1 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.test.js +268 -0
- package/dist/src/nile-markdown-editor/nile-markdown-editor.test.js.map +1 -0
- package/dist/src/nile-option/nile-option.css.js +22 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.d.ts +3 -0
- package/dist/src/nile-option/nile-option.js +21 -0
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +16 -7
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +7 -0
- package/dist/src/nile-select/nile-select.js +35 -0
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-select/virtual-scroll-helper.js +2 -0
- package/dist/src/nile-select/virtual-scroll-helper.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js +4 -3
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.d.ts +4 -0
- package/dist/src/nile-virtual-select/nile-virtual-select.js +11 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.js.map +1 -1
- package/dist/src/nile-virtual-select/renderer.d.ts +2 -2
- package/dist/src/nile-virtual-select/renderer.js +6 -4
- package/dist/src/nile-virtual-select/renderer.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
- package/src/index.ts +3 -1
- package/src/nile-markdown/index.ts +1 -0
- package/src/nile-markdown/nile-markdown.css.ts +164 -0
- package/src/nile-markdown/nile-markdown.test.ts +252 -0
- package/src/nile-markdown/nile-markdown.ts +179 -0
- package/src/nile-markdown-editor/index.ts +1 -0
- package/src/nile-markdown-editor/nile-markdown-editor.css.ts +267 -0
- package/src/nile-markdown-editor/nile-markdown-editor.test.ts +402 -0
- package/src/nile-markdown-editor/nile-markdown-editor.ts +710 -0
- package/src/nile-option/nile-option.css.ts +22 -1
- package/src/nile-option/nile-option.ts +18 -0
- package/src/nile-select/nile-select.css.ts +16 -7
- package/src/nile-select/nile-select.ts +32 -0
- package/src/nile-select/virtual-scroll-helper.ts +2 -0
- package/src/nile-virtual-select/nile-virtual-select.css.ts +4 -3
- package/src/nile-virtual-select/nile-virtual-select.ts +9 -1
- package/src/nile-virtual-select/renderer.ts +9 -3
- package/vscode-html-custom-data.json +115 -3
|
@@ -32,12 +32,15 @@ export const styles = css`
|
|
|
32
32
|
line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
|
|
33
33
|
letter-spacing: normal;
|
|
34
34
|
color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
|
|
35
|
-
padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-
|
|
35
|
+
padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));
|
|
36
36
|
transition: 150ms fill;
|
|
37
37
|
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
38
38
|
cursor: pointer;
|
|
39
39
|
margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
|
|
40
40
|
}
|
|
41
|
+
:host([legacy]) .option {
|
|
42
|
+
padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
|
|
43
|
+
}
|
|
41
44
|
|
|
42
45
|
.option--single-select {
|
|
43
46
|
padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
|
|
@@ -77,12 +80,17 @@ export const styles = css`
|
|
|
77
80
|
justify-content: center;
|
|
78
81
|
visibility: hidden;
|
|
79
82
|
padding-inline-end: var(--nile-spacing-xs);
|
|
83
|
+
color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
.option--selected .option__check {
|
|
83
87
|
visibility: visible;
|
|
84
88
|
}
|
|
85
89
|
|
|
90
|
+
:host([tickonselect][selected]) .option__check {
|
|
91
|
+
visibility: visible;
|
|
92
|
+
}
|
|
93
|
+
|
|
86
94
|
.option__prefix,
|
|
87
95
|
.option__suffix {
|
|
88
96
|
flex: 0 0 auto;
|
|
@@ -107,9 +115,22 @@ export const styles = css`
|
|
|
107
115
|
margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
108
116
|
margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
109
117
|
width:auto;
|
|
118
|
+
display:var(--nile-display-inline-block, var(--ng-display-inline-block));
|
|
119
|
+
}
|
|
120
|
+
:host([legacy]) .option--checkbox{
|
|
110
121
|
display:var(--nile-display-inline-block, var(--ng-display-none));
|
|
111
122
|
}
|
|
112
123
|
|
|
124
|
+
|
|
125
|
+
:host([tickonselect]) .option--checkbox{
|
|
126
|
+
display: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
:host([tickonselect]) .option{
|
|
130
|
+
padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
131
|
+
padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
132
|
+
}
|
|
133
|
+
|
|
113
134
|
|
|
114
135
|
@media (forced-colors: active) {
|
|
115
136
|
:host(:hover:not([aria-disabled='true'])) .option {
|
|
@@ -62,6 +62,12 @@ export class NileOption extends NileElement {
|
|
|
62
62
|
|
|
63
63
|
@property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;
|
|
64
64
|
|
|
65
|
+
/** Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select. */
|
|
66
|
+
@property({ type: Boolean, reflect: true }) legacy: boolean = false;
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
@property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect: boolean = false;
|
|
70
|
+
|
|
65
71
|
/** Draws the option in a disabled state, preventing selection. */
|
|
66
72
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
|
67
73
|
|
|
@@ -262,6 +268,18 @@ export class NileOption extends NileElement {
|
|
|
262
268
|
`}
|
|
263
269
|
|
|
264
270
|
<slot part="suffix" name="suffix" class="option__suffix"></slot>
|
|
271
|
+
|
|
272
|
+
${this.tickOnSelect
|
|
273
|
+
? html`<span part="checked-icon" class="option__check">
|
|
274
|
+
<nile-icon
|
|
275
|
+
name="var(--nile-icon-tick, var(--ng-icon-check))"
|
|
276
|
+
method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
|
|
277
|
+
color="currentColor"
|
|
278
|
+
library="system"
|
|
279
|
+
aria-hidden="true"
|
|
280
|
+
></nile-icon>
|
|
281
|
+
</span>`
|
|
282
|
+
: ''}
|
|
265
283
|
</div>`
|
|
266
284
|
: ''}
|
|
267
285
|
`;
|
|
@@ -355,7 +355,8 @@ export const styles = css`
|
|
|
355
355
|
display: inline-flex;
|
|
356
356
|
align-items: center;
|
|
357
357
|
justify-content: center;
|
|
358
|
-
font-
|
|
358
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
359
|
+
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
359
360
|
color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
|
|
360
361
|
border: none;
|
|
361
362
|
background: none;
|
|
@@ -456,21 +457,29 @@ export const styles = css`
|
|
|
456
457
|
}
|
|
457
458
|
|
|
458
459
|
|
|
460
|
+
/* Default: visible + centered footer with proper nxtgen fallbacks. */
|
|
459
461
|
.select__footer {
|
|
460
462
|
position: sticky;
|
|
461
463
|
bottom: 0px;
|
|
462
|
-
background: var(--nile-colors-neutral-100);
|
|
463
|
-
border-top: 1px solid var(--nile-colors-neutral-400);
|
|
464
|
-
display: flex;
|
|
464
|
+
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
465
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
465
466
|
height: 15px;
|
|
466
467
|
/* Auto layout */
|
|
467
|
-
display:var(--nile-display-flex, var(--ng-display-
|
|
468
|
+
display: var(--nile-display-flex, var(--ng-display-flex));
|
|
468
469
|
flex-direction: row;
|
|
470
|
+
align-items: center;
|
|
471
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
472
|
+
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
473
|
+
justify-content: space-between;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
:host([legacy]) .select__footer {
|
|
477
|
+
background: var(--nile-colors-neutral-100);
|
|
478
|
+
border-top: 1px solid var(--nile-colors-neutral-400);
|
|
479
|
+
display: var(--nile-display-flex, var(--ng-display-none));
|
|
469
480
|
align-items: flex-start;
|
|
470
481
|
padding: var(--nile-spacing-md) var(--nile-spacing-lg)
|
|
471
482
|
var(--nile-spacing-xl);
|
|
472
|
-
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
473
|
-
justify-content: space-between;
|
|
474
483
|
}
|
|
475
484
|
|
|
476
485
|
.tag__prefix[slot='prefix'] {
|
|
@@ -172,6 +172,11 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
|
172
172
|
|
|
173
173
|
@property({ type: Boolean, reflect: true }) searchEnabled = false;
|
|
174
174
|
|
|
175
|
+
@property({ type: Boolean, reflect: true }) legacy = false;
|
|
176
|
+
|
|
177
|
+
/** Variant: show a tick on the right of the selected option (single-select). Propagated to options. */
|
|
178
|
+
@property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect = false;
|
|
179
|
+
|
|
175
180
|
@property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
|
|
176
181
|
|
|
177
182
|
@property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
|
|
@@ -386,6 +391,12 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
|
386
391
|
if(_changedProperties.has('multiple')) {
|
|
387
392
|
this.setCheckBoxInOption(this.multiple as boolean);
|
|
388
393
|
}
|
|
394
|
+
if(_changedProperties.has('legacy')) {
|
|
395
|
+
this.setLegacyInOptions(this.legacy);
|
|
396
|
+
}
|
|
397
|
+
if(_changedProperties.has('tickOnSelect')) {
|
|
398
|
+
this.setTickOnSelectInOptions(this.tickOnSelect);
|
|
399
|
+
}
|
|
389
400
|
if (_changedProperties.has('autoResize')) {
|
|
390
401
|
this.setupResizeObserver();
|
|
391
402
|
}
|
|
@@ -406,6 +417,8 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
|
406
417
|
if(_changedProperties.has('multiple')) {
|
|
407
418
|
this.setCheckBoxInOption(this.multiple as boolean);
|
|
408
419
|
}
|
|
420
|
+
this.setLegacyInOptions(this.legacy);
|
|
421
|
+
this.setTickOnSelectInOptions(this.tickOnSelect);
|
|
409
422
|
if (_changedProperties.has('enableDescription')) {
|
|
410
423
|
this.setEnableDescriptionInOptions();
|
|
411
424
|
}
|
|
@@ -445,6 +458,25 @@ export class NileSelect extends NileElement implements NileFormControl{
|
|
|
445
458
|
option.showCheckbox = checked;
|
|
446
459
|
})
|
|
447
460
|
}
|
|
461
|
+
/** Propagates the legacy opt-out flag down to the slotted options. */
|
|
462
|
+
setLegacyInOptions(enabled: boolean): void {
|
|
463
|
+
if(!this.options.length) {
|
|
464
|
+
this.options = this.getAllOptions();
|
|
465
|
+
}
|
|
466
|
+
this.options.forEach((option: NileOption) => {
|
|
467
|
+
option.legacy = enabled;
|
|
468
|
+
})
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
/** Propagates the tick-on-select variant down to the slotted options. */
|
|
472
|
+
setTickOnSelectInOptions(enabled: boolean): void {
|
|
473
|
+
if(!this.options.length) {
|
|
474
|
+
this.options = this.getAllOptions();
|
|
475
|
+
}
|
|
476
|
+
this.options.forEach((option: NileOption) => {
|
|
477
|
+
option.tickOnSelect = enabled;
|
|
478
|
+
})
|
|
479
|
+
}
|
|
448
480
|
|
|
449
481
|
setEnableDescriptionInOptions() {
|
|
450
482
|
this.options = this.getAllOptions();
|
|
@@ -56,6 +56,8 @@ export class VirtualScrollHelper {
|
|
|
56
56
|
.descriptionSearchEnabled=${component.descriptionSearchEnabled}
|
|
57
57
|
.allowHtmlLabel=${component.allowHtmlLabel}
|
|
58
58
|
.enableDescription=${component.enableDescription}
|
|
59
|
+
.tickOnSelect=${component.tickOnSelect}
|
|
60
|
+
.legacy=${component.legacy}
|
|
59
61
|
exportparts="
|
|
60
62
|
select-options,
|
|
61
63
|
select-no-results,
|
|
@@ -362,7 +362,8 @@ export const styles = css`
|
|
|
362
362
|
display: inline-flex;
|
|
363
363
|
align-items: center;
|
|
364
364
|
justify-content: center;
|
|
365
|
-
font-
|
|
365
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
366
|
+
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
366
367
|
color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
|
|
367
368
|
border: none;
|
|
368
369
|
background: none;
|
|
@@ -454,8 +455,8 @@ export const styles = css`
|
|
|
454
455
|
/* Auto layout */
|
|
455
456
|
display: var(--nile-display-flex, var(--ng-display-flex));
|
|
456
457
|
flex-direction: row;
|
|
457
|
-
align-items:
|
|
458
|
-
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg))
|
|
458
|
+
align-items: center;
|
|
459
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
459
460
|
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
460
461
|
justify-content: space-between;
|
|
461
462
|
box-sizing: unset;
|
|
@@ -285,6 +285,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
|
|
|
285
285
|
|
|
286
286
|
@property({ type: Boolean, reflect: true, attribute: true }) enableDescription = false;
|
|
287
287
|
|
|
288
|
+
/** Legacy: hide the option checkbox (the "Show Selected" footer is kept). */
|
|
289
|
+
@property({ type: Boolean, reflect: true }) legacy = false;
|
|
290
|
+
|
|
291
|
+
/** Variant: show a tick on the right of the selected option (single-select). */
|
|
292
|
+
@property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect = false;
|
|
293
|
+
|
|
288
294
|
@state() showListbox: boolean = false;
|
|
289
295
|
@state() private wasShowSelectedCheckedOnClose: boolean = false;
|
|
290
296
|
|
|
@@ -1547,7 +1553,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
|
|
|
1547
1553
|
this.optionsLoading || this.loading,
|
|
1548
1554
|
this.handleScroll.bind(this),
|
|
1549
1555
|
this.allowHtmlLabel,
|
|
1550
|
-
this.enableDescription
|
|
1556
|
+
this.enableDescription,
|
|
1557
|
+
this.tickOnSelect,
|
|
1558
|
+
this.legacy
|
|
1551
1559
|
);
|
|
1552
1560
|
}
|
|
1553
1561
|
|
|
@@ -28,7 +28,9 @@ export class VirtualSelectRenderer {
|
|
|
28
28
|
loading?: boolean,
|
|
29
29
|
onScroll?: (e: Event) => void,
|
|
30
30
|
allowHtmlLabel?: boolean,
|
|
31
|
-
enableDescription?: boolean
|
|
31
|
+
enableDescription?: boolean,
|
|
32
|
+
tickOnSelect?: boolean,
|
|
33
|
+
legacy?: boolean
|
|
32
34
|
): TemplateResult {
|
|
33
35
|
return html`
|
|
34
36
|
<div part="select-options" class="select__options ${
|
|
@@ -51,13 +53,13 @@ export class VirtualSelectRenderer {
|
|
|
51
53
|
${virtualize({
|
|
52
54
|
items: data,
|
|
53
55
|
renderItem: (item: any): TemplateResult =>
|
|
54
|
-
VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription),
|
|
56
|
+
VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription, tickOnSelect, legacy),
|
|
55
57
|
scroller: true,
|
|
56
58
|
})}
|
|
57
59
|
`
|
|
58
60
|
: html`
|
|
59
61
|
${data.map((item: any) =>
|
|
60
|
-
VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription)
|
|
62
|
+
VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription, tickOnSelect, legacy)
|
|
61
63
|
)}
|
|
62
64
|
`}
|
|
63
65
|
</div>
|
|
@@ -77,6 +79,8 @@ export class VirtualSelectRenderer {
|
|
|
77
79
|
getItemSuffix?: (item: any) => string,
|
|
78
80
|
allowHtmlLabel?: boolean,
|
|
79
81
|
enableDescription?: boolean,
|
|
82
|
+
tickOnSelect?: boolean,
|
|
83
|
+
legacy?: boolean,
|
|
80
84
|
): TemplateResult {
|
|
81
85
|
if(!item) {
|
|
82
86
|
return html``;
|
|
@@ -105,6 +109,8 @@ export class VirtualSelectRenderer {
|
|
|
105
109
|
.selected=${isSelected}
|
|
106
110
|
.disabled=${isDisabled}
|
|
107
111
|
.showCheckbox=${multiple}
|
|
112
|
+
.tickOnSelect=${tickOnSelect ?? false}
|
|
113
|
+
.legacy=${legacy ?? false}
|
|
108
114
|
class=${classMap({
|
|
109
115
|
option: enableDescription ?? false,
|
|
110
116
|
[className ?? '']: !!className,
|
|
@@ -4294,6 +4294,88 @@
|
|
|
4294
4294
|
}
|
|
4295
4295
|
]
|
|
4296
4296
|
},
|
|
4297
|
+
{
|
|
4298
|
+
"name": "nile-markdown-editor",
|
|
4299
|
+
"description": "Events:\n\n * `nile-input` {} - Emitted with `{ value }` on every keystroke or toolbar action.\n\n * `nile-change` {} - Emitted with `{ value }` when the editor loses focus after an edit.\n\n * `nile-mode-change` {} - Emitted with `{ mode }` when the write/preview/split mode changes.\n\nAttributes:\n\n * `value` {`string`} - The markdown source.\n\n * `placeholder` {`string`} - Placeholder shown when the editor is empty.\n\n * `disabled` {`boolean`} - Disables the editor.\n\n * `readonly` {`boolean`} - Makes the source read-only while still allowing mode switching.\n\n * `rows` {`number`} - Number of visible text rows in write mode.\n\n * `mode` {`MarkdownEditorMode`} - Active view: `write`, `preview`, or `split`.\n\n * `hide-toolbar` {`boolean`} - Hides the formatting toolbar.\n\n * `tools` {string} - Allowlist of toolbar tool names to show. Accepts a JSON array via the\n`tools` attribute (e.g. `tools='[\"bold\",\"italic\",\"link\"]'`), a\ncomma-separated string, or an array when set as a property. When empty\n(default) every tool is shown. Valid names: `heading`, `bold`, `italic`,\n`strikethrough`, `quote`, `code`, `ul`, `ol`, `link`.\n\nProperties:\n\n * `styles` - \n\n * `value` {`string`} - The markdown source.\n\n * `placeholder` {`string`} - Placeholder shown when the editor is empty.\n\n * `disabled` {`boolean`} - Disables the editor.\n\n * `readonly` {`boolean`} - Makes the source read-only while still allowing mode switching.\n\n * `rows` {`number`} - Number of visible text rows in write mode.\n\n * `mode` {`MarkdownEditorMode`} - Active view: `write`, `preview`, or `split`.\n\n * `hideToolbar` {`boolean`} - Hides the formatting toolbar.\n\n * `allowedTools` {`Set<string> | null`} - Parsed allowlist, or `null` when no allowlist is set (show everything).\n\n * `visibleGroups` {`ToolbarAction[][]`} - Toolbar groups after applying the allowlist; empty groups are dropped.\n\n * `textarea` {`HTMLTextAreaElement | undefined`} - \n\n * `bodyEl` {`HTMLElement | undefined`} - \n\n * `splitRatio` {`number`} - Fraction of the body width given to the write pane in split mode\n(the rest goes to the preview). Clamped to a sensible range while\ndragging the splitter.\n\n * `splitDragging` {`boolean`} - Whether the split divider is currently being dragged.\n\n * `startSplitDrag` - Begins a pointer-driven resize of the split divider.\n\n * `resetSplit` - Resets the splitter to a 50/50 layout (double-click affordance).\n\n * `handleInput` - \n\n * `handleChange` - \n\n * `handleKeydown` - \n\n * `tools` {string} - Allowlist of toolbar tool names to show. Accepts a JSON array via the\n`tools` attribute (e.g. `tools='[\"bold\",\"italic\",\"link\"]'`), a\ncomma-separated string, or an array when set as a property. When empty\n(default) every tool is shown. Valid names: `heading`, `bold`, `italic`,\n`strikethrough`, `quote`, `code`, `ul`, `ol`, `link`.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
4300
|
+
"attributes": [
|
|
4301
|
+
{
|
|
4302
|
+
"name": "value",
|
|
4303
|
+
"description": "`value` {`string`} - The markdown source.\n\nProperty: value\n\nDefault: "
|
|
4304
|
+
},
|
|
4305
|
+
{
|
|
4306
|
+
"name": "placeholder",
|
|
4307
|
+
"description": "`placeholder` {`string`} - Placeholder shown when the editor is empty.\n\nProperty: placeholder\n\nDefault: Write markdown here…"
|
|
4308
|
+
},
|
|
4309
|
+
{
|
|
4310
|
+
"name": "disabled",
|
|
4311
|
+
"description": "`disabled` {`boolean`} - Disables the editor.\n\nProperty: disabled\n\nDefault: false",
|
|
4312
|
+
"valueSet": "v"
|
|
4313
|
+
},
|
|
4314
|
+
{
|
|
4315
|
+
"name": "readonly",
|
|
4316
|
+
"description": "`readonly` {`boolean`} - Makes the source read-only while still allowing mode switching.\n\nProperty: readonly\n\nDefault: false",
|
|
4317
|
+
"valueSet": "v"
|
|
4318
|
+
},
|
|
4319
|
+
{
|
|
4320
|
+
"name": "rows",
|
|
4321
|
+
"description": "`rows` {`number`} - Number of visible text rows in write mode.\n\nProperty: rows\n\nDefault: 8"
|
|
4322
|
+
},
|
|
4323
|
+
{
|
|
4324
|
+
"name": "mode",
|
|
4325
|
+
"description": "`mode` {`MarkdownEditorMode`} - Active view: `write`, `preview`, or `split`.\n\nProperty: mode\n\nDefault: write",
|
|
4326
|
+
"values": [
|
|
4327
|
+
{
|
|
4328
|
+
"name": "write"
|
|
4329
|
+
},
|
|
4330
|
+
{
|
|
4331
|
+
"name": "preview"
|
|
4332
|
+
},
|
|
4333
|
+
{
|
|
4334
|
+
"name": "split"
|
|
4335
|
+
}
|
|
4336
|
+
]
|
|
4337
|
+
},
|
|
4338
|
+
{
|
|
4339
|
+
"name": "hide-toolbar",
|
|
4340
|
+
"description": "`hide-toolbar` {`boolean`} - Hides the formatting toolbar.\n\nProperty: hideToolbar\n\nDefault: false",
|
|
4341
|
+
"valueSet": "v"
|
|
4342
|
+
},
|
|
4343
|
+
{
|
|
4344
|
+
"name": "tools",
|
|
4345
|
+
"description": "`tools` {string} - Allowlist of toolbar tool names to show. Accepts a JSON array via the\n`tools` attribute (e.g. `tools='[\"bold\",\"italic\",\"link\"]'`), a\ncomma-separated string, or an array when set as a property. When empty\n(default) every tool is shown. Valid names: `heading`, `bold`, `italic`,\n`strikethrough`, `quote`, `code`, `ul`, `ol`, `link`.\n\nProperty: tools\n\nDefault: "
|
|
4346
|
+
},
|
|
4347
|
+
{
|
|
4348
|
+
"name": "onnile-input",
|
|
4349
|
+
"description": "`nile-input` {} - Emitted with `{ value }` on every keystroke or toolbar action."
|
|
4350
|
+
},
|
|
4351
|
+
{
|
|
4352
|
+
"name": "onnile-change",
|
|
4353
|
+
"description": "`nile-change` {} - Emitted with `{ value }` when the editor loses focus after an edit."
|
|
4354
|
+
},
|
|
4355
|
+
{
|
|
4356
|
+
"name": "onnile-mode-change",
|
|
4357
|
+
"description": "`nile-mode-change` {} - Emitted with `{ mode }` when the write/preview/split mode changes."
|
|
4358
|
+
}
|
|
4359
|
+
]
|
|
4360
|
+
},
|
|
4361
|
+
{
|
|
4362
|
+
"name": "nile-markdown",
|
|
4363
|
+
"description": "Events:\n\n * `nile-markdown-rendered` {} - Emitted after the markdown has been parsed and rendered.\n\nAttributes:\n\n * `value` {`string`} - The markdown to render. Takes precedence over a\n`<script type=\"text/markdown\">` child when set.\n\n * `tab-size` {`number`} - Number of spaces a tab is converted to during whitespace normalization.\n\nProperties:\n\n * `styles` - \n\n * `marked` - The shared Marked instance used by every nile-markdown on the page.\n\n * `instances` {`Set<NileMarkdown>`} - All connected instances, used by `updateAll()`.\n\n * `value` {`string`} - The markdown to render. Takes precedence over a\n`<script type=\"text/markdown\">` child when set.\n\n * `tabSize` {`number`} - Number of spaces a tab is converted to during whitespace normalization.\n\n * `renderedHtml` {`string`} - \n\n * `mutationObserver` {`MutationObserver`} - Re-renders automatically when the markdown script child changes.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
4364
|
+
"attributes": [
|
|
4365
|
+
{
|
|
4366
|
+
"name": "value",
|
|
4367
|
+
"description": "`value` {`string`} - The markdown to render. Takes precedence over a\n`<script type=\"text/markdown\">` child when set.\n\nProperty: value\n\nDefault: "
|
|
4368
|
+
},
|
|
4369
|
+
{
|
|
4370
|
+
"name": "tab-size",
|
|
4371
|
+
"description": "`tab-size` {`number`} - Number of spaces a tab is converted to during whitespace normalization.\n\nProperty: tabSize\n\nDefault: 4"
|
|
4372
|
+
},
|
|
4373
|
+
{
|
|
4374
|
+
"name": "onnile-markdown-rendered",
|
|
4375
|
+
"description": "`nile-markdown-rendered` {} - Emitted after the markdown has been parsed and rendered."
|
|
4376
|
+
}
|
|
4377
|
+
]
|
|
4378
|
+
},
|
|
4297
4379
|
{
|
|
4298
4380
|
"name": "nile-menu-item",
|
|
4299
4381
|
"description": "Nile icon component.\n\nSlots:\n\n * ` ` {} - The menu item'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 * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n * `checked` {`boolean`} - Draws the item in a checked state.\n\n * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `menuItem` {`HTMLElement`} - \n\n * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n * `checked` {`boolean`} - Draws the item in a checked state.\n\n * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
@@ -4537,7 +4619,7 @@
|
|
|
4537
4619
|
},
|
|
4538
4620
|
{
|
|
4539
4621
|
"name": "nile-option",
|
|
4540
|
-
"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 * `hidden` {`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 * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\n * `description` {`string`} - \n\n * `isDescriptionEnabled` {`boolean`} - \n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `current` {`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 * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\n * `description` {`string`} - \n\n * `prefixSlot` {`HTMLSlotElement`} - \n\n * `suffixSlot` {`HTMLSlotElement`} - \n\n * `labelContainer` {`HTMLElement`} - \n\n * `isParentVirtualSelect` {`boolean`} - \n\n * `isDescriptionEnabled` {`boolean`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
4622
|
+
"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 * `hidden` {`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 * `legacy` {`boolean`} - Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select.\n\n * `tickOnSelect` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\n * `description` {`string`} - \n\n * `isDescriptionEnabled` {`boolean`} - \n\nProperties:\n\n * `styles` - \n\n * `cachedTextLabel` {`string`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `current` {`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 * `legacy` {`boolean`} - Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select.\n\n * `tickOnSelect` {`boolean`} - \n\n * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n * `selected` {`boolean`} - Indicates whether the option is selected.\n\n * `groupName` {`string`} - \n\n * `description` {`string`} - \n\n * `prefixSlot` {`HTMLSlotElement`} - \n\n * `suffixSlot` {`HTMLSlotElement`} - \n\n * `labelContainer` {`HTMLElement`} - \n\n * `isParentVirtualSelect` {`boolean`} - \n\n * `isDescriptionEnabled` {`boolean`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
4541
4623
|
"attributes": [
|
|
4542
4624
|
{
|
|
4543
4625
|
"name": "hidden",
|
|
@@ -4553,6 +4635,16 @@
|
|
|
4553
4635
|
"description": "`showCheckbox` {`boolean`} - \n\nProperty: showCheckbox\n\nDefault: false",
|
|
4554
4636
|
"valueSet": "v"
|
|
4555
4637
|
},
|
|
4638
|
+
{
|
|
4639
|
+
"name": "legacy",
|
|
4640
|
+
"description": "`legacy` {`boolean`} - Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select.\n\nProperty: legacy\n\nDefault: false",
|
|
4641
|
+
"valueSet": "v"
|
|
4642
|
+
},
|
|
4643
|
+
{
|
|
4644
|
+
"name": "tickOnSelect",
|
|
4645
|
+
"description": "`tickOnSelect` {`boolean`} - \n\nProperty: tickOnSelect\n\nDefault: false",
|
|
4646
|
+
"valueSet": "v"
|
|
4647
|
+
},
|
|
4556
4648
|
{
|
|
4557
4649
|
"name": "disabled",
|
|
4558
4650
|
"description": "`disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\nProperty: disabled\n\nDefault: false",
|
|
@@ -5573,7 +5665,7 @@
|
|
|
5573
5665
|
},
|
|
5574
5666
|
{
|
|
5575
5667
|
"name": "nile-select",
|
|
5576
|
-
"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\n * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\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\n * `pre-footer` {} - Content to display at the bottom of the dropdown listbox. Useful for action buttons like \"Create New\". In multi-select mode, appears above the \"Show Selected\" / \"Clear All\" bar.\n\nAttributes:\n\n * `size` {`\"small\" | \"medium\" | \"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 * `enableVisibilityEffect` {`boolean`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `help-text` {`string`} - \n\n * `autoResize` {`boolean`} - \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` {`ComboboxPlacement`} - 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 * `enableTabClose` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n * `loading` {`boolean`} - loading indicator for virtual select\n\n * `stickyHeader` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \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 * `virtualScrollHelper` - \n\n * `portalManager` - \n\n * `hasSlotController` - \n\n * `typeToSelectString` {`string`} - \n\n * `typeToSelectTimeout` {`number`} - \n\n * `scrollTimeout` {`number | undefined`} - \n\n * `scrolling` {`boolean`} - \n\n * `options` {`NileOption[]`} - \n\n * `resizeController` - \n\n * `visibilityManager` - \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` {`\"small\" | \"medium\" | \"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 * `enableVisibilityEffect` {`boolean`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `help_text` {`string`} - \n\n * `autoResize` {`boolean`} - \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` {`ComboboxPlacement`} - 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 * `enableTabClose` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n * `loading` {`boolean`} - loading indicator for virtual select\n\n * `stickyHeader` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `handleWindowResize` - \n\n * `handleWindowScroll` - \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`} - ",
|
|
5668
|
+
"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\n * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\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\n * `pre-footer` {} - Content to display at the bottom of the dropdown listbox. Useful for action buttons like \"Create New\". In multi-select mode, appears above the \"Show Selected\" / \"Clear All\" bar.\n\nAttributes:\n\n * `size` {`\"small\" | \"medium\" | \"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 * `legacy` {`boolean`} - \n\n * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select). Propagated to options.\n\n * `internal-search-placeholder` {`string`} - \n\n * `enableVisibilityEffect` {`boolean`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `help-text` {`string`} - \n\n * `autoResize` {`boolean`} - \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` {`ComboboxPlacement`} - 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 * `enableTabClose` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n * `loading` {`boolean`} - loading indicator for virtual select\n\n * `stickyHeader` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \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 * `virtualScrollHelper` - \n\n * `portalManager` - \n\n * `hasSlotController` - \n\n * `typeToSelectString` {`string`} - \n\n * `typeToSelectTimeout` {`number`} - \n\n * `scrollTimeout` {`number | undefined`} - \n\n * `scrolling` {`boolean`} - \n\n * `options` {`NileOption[]`} - \n\n * `resizeController` - \n\n * `visibilityManager` - \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` {`\"small\" | \"medium\" | \"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 * `legacy` {`boolean`} - \n\n * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select). Propagated to options.\n\n * `internalSearchPlaceHolder` {`string`} - \n\n * `enableVisibilityEffect` {`boolean`} - \n\n * `blockValueChange` {`boolean`} - \n\n * `disableLocalSearch` {`boolean`} - \n\n * `optionsLoading` {`boolean`} - \n\n * `noWidthSync` {`boolean`} - \n\n * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n * `helpText` {`string`} - \n\n * `help_text` {`string`} - \n\n * `autoResize` {`boolean`} - \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` {`ComboboxPlacement`} - 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 * `enableTabClose` {`boolean`} - \n\n * `showNoResults` {`boolean`} - \n\n * `noResultsMessage` {`string`} - \n\n * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n * `data` - \n\n * `enableVirtualScroll` {`boolean`} - \n\n * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n * `loading` {`boolean`} - loading indicator for virtual select\n\n * `stickyHeader` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `handleWindowResize` - \n\n * `handleWindowScroll` - \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`} - ",
|
|
5577
5669
|
"attributes": [
|
|
5578
5670
|
{
|
|
5579
5671
|
"name": "size",
|
|
@@ -5599,6 +5691,16 @@
|
|
|
5599
5691
|
"description": "`searchEnabled` {`boolean`} - \n\nProperty: searchEnabled\n\nDefault: false",
|
|
5600
5692
|
"valueSet": "v"
|
|
5601
5693
|
},
|
|
5694
|
+
{
|
|
5695
|
+
"name": "legacy",
|
|
5696
|
+
"description": "`legacy` {`boolean`} - \n\nProperty: legacy\n\nDefault: false",
|
|
5697
|
+
"valueSet": "v"
|
|
5698
|
+
},
|
|
5699
|
+
{
|
|
5700
|
+
"name": "tickOnSelect",
|
|
5701
|
+
"description": "`tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select). Propagated to options.\n\nProperty: tickOnSelect\n\nDefault: false",
|
|
5702
|
+
"valueSet": "v"
|
|
5703
|
+
},
|
|
5602
5704
|
{
|
|
5603
5705
|
"name": "internal-search-placeholder",
|
|
5604
5706
|
"description": "`internal-search-placeholder` {`string`} - \n\nProperty: internalSearchPlaceHolder\n\nDefault: Search..."
|
|
@@ -7486,7 +7588,7 @@
|
|
|
7486
7588
|
},
|
|
7487
7589
|
{
|
|
7488
7590
|
"name": "nile-virtual-select",
|
|
7489
|
-
"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\n * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\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` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `enableVisibilityEffect` {`boolean`} - \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 * `loading` {`boolean`} - Show loading state using nile-loader\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` {`ComboboxPlacement`} - 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 * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\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 * `enableTabClose` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \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 * `portalManager` - \n\n * `popup` - \n\n * `combobox` {`HTMLElement`} - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `virtualizedContainer` {`HTMLElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `selectedOptions` {`VirtualOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `scrollTimeout` {`number | undefined`} - \n\n * `scrolling` {`boolean`} - \n\n * `visibilityManager` - \n\n * `data` - Array of all option items for virtual scrolling\n\n * `originalOptionItems` - Original unfiltered option items for search functionality\n\n * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n * `searchValue` {`string`} - Current search value\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `enableVisibilityEffect` {`boolean`} - \n\n * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n * `optionsLoading` {`boolean`} - Show loading state\n\n * `loading` {`boolean`} - Show loading state using nile-loader\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` {`ComboboxPlacement`} - 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 * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\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 * `enableTabClose` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `showListbox` {`boolean`} - \n\n * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n * `handleDocumentMouseDown` - \n\n * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n * `handleWindowResize` - \n\n * `handleWindowScroll` - \n\n * `resizeController` - \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`} - ",
|
|
7591
|
+
"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\n * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\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` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `enableVisibilityEffect` {`boolean`} - \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 * `loading` {`boolean`} - Show loading state using nile-loader\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` {`ComboboxPlacement`} - 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 * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\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 * `enableTabClose` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\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 * `portalManager` - \n\n * `popup` - \n\n * `combobox` {`HTMLElement`} - \n\n * `displayInput` {`HTMLInputElement`} - \n\n * `valueInput` {`HTMLInputElement`} - \n\n * `virtualizedContainer` {`HTMLElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `displayLabel` {`string`} - \n\n * `selectedOptions` {`VirtualOption[]`} - \n\n * `oldValue` {`string | string[]`} - \n\n * `scrollTimeout` {`number | undefined`} - \n\n * `scrolling` {`boolean`} - \n\n * `visibilityManager` - \n\n * `data` - Array of all option items for virtual scrolling\n\n * `originalOptionItems` - Original unfiltered option items for search functionality\n\n * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n * `searchValue` {`string`} - Current search value\n\n * `searchEnabled` {`boolean`} - Enable search functionality\n\n * `enableVisibilityEffect` {`boolean`} - \n\n * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n * `optionsLoading` {`boolean`} - Show loading state\n\n * `loading` {`boolean`} - Show loading state using nile-loader\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` {`ComboboxPlacement`} - 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 * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\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 * `enableTabClose` {`boolean`} - \n\n * `descriptionSearchEnabled` {`boolean`} - \n\n * `allowHtmlLabel` {`boolean`} - \n\n * `enableDescription` {`boolean`} - \n\n * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\n * `showListbox` {`boolean`} - \n\n * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n * `handleDocumentMouseDown` - \n\n * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n * `handleWindowResize` - \n\n * `handleWindowScroll` - \n\n * `resizeController` - \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`} - ",
|
|
7490
7592
|
"attributes": [
|
|
7491
7593
|
{
|
|
7492
7594
|
"name": "data",
|
|
@@ -7667,6 +7769,16 @@
|
|
|
7667
7769
|
"description": "`enableDescription` {`boolean`} - \n\nProperty: enableDescription\n\nDefault: false",
|
|
7668
7770
|
"valueSet": "v"
|
|
7669
7771
|
},
|
|
7772
|
+
{
|
|
7773
|
+
"name": "legacy",
|
|
7774
|
+
"description": "`legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\nProperty: legacy\n\nDefault: false",
|
|
7775
|
+
"valueSet": "v"
|
|
7776
|
+
},
|
|
7777
|
+
{
|
|
7778
|
+
"name": "tickOnSelect",
|
|
7779
|
+
"description": "`tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\nProperty: tickOnSelect\n\nDefault: false",
|
|
7780
|
+
"valueSet": "v"
|
|
7781
|
+
},
|
|
7670
7782
|
{
|
|
7671
7783
|
"name": "name",
|
|
7672
7784
|
"description": "`name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "
|