@nuralyui/select 0.1.2 → 0.1.4
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/bundle.js +206 -327
- package/package.json +1 -1
- package/react.js +1 -1
- package/react.js.map +1 -1
- package/select.component.d.ts +31 -11
- package/select.component.js +81 -35
- package/select.component.js.map +1 -1
- package/select.style.js +166 -204
- package/select.style.js.map +1 -1
- package/select.style.variables.d.ts +0 -6
- package/select.style.variables.js +0 -94
- package/select.style.variables.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/select",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "A comprehensive select component with advanced features including multi-selection, keyboard navigation, validation, and accessibility support.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
package/react.js
CHANGED
|
@@ -6,7 +6,7 @@ import { HySelectComponent } from './select.component.js';
|
|
|
6
6
|
* Provides React-compatible props and event handling
|
|
7
7
|
*/
|
|
8
8
|
export const HySelect = createComponent({
|
|
9
|
-
tagName: '
|
|
9
|
+
tagName: 'nr-select',
|
|
10
10
|
elementClass: HySelectComponent,
|
|
11
11
|
react: React,
|
|
12
12
|
events: {
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB;QAClB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;QAEd,yBAAyB;QACzB,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,gBAAgB;QACjC,YAAY,EAAE,YAAY;QAC1B,aAAa,EAAE,cAAc;QAC7B,aAAa,EAAE,cAAc;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HySelectComponent } from './select.component.js';\n\n/**\n * React wrapper for the HySelectComponent\n * Provides React-compatible props and event handling\n */\nexport const HySelect = createComponent({\n tagName: '
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB;QAClB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;QAEd,yBAAyB;QACzB,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,gBAAgB;QACjC,YAAY,EAAE,YAAY;QAC1B,aAAa,EAAE,cAAc;QAC7B,aAAa,EAAE,cAAc;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HySelectComponent } from './select.component.js';\n\n/**\n * React wrapper for the HySelectComponent\n * Provides React-compatible props and event handling\n */\nexport const HySelect = createComponent({\n tagName: 'nr-select',\n elementClass: HySelectComponent,\n react: React,\n events: {\n // Standard events\n onChange: 'change',\n onChanged: 'changed', // Legacy event for backward compatibility\n onFocus: 'focus',\n onBlur: 'blur',\n \n // Select-specific events\n onDropdownOpen: 'dropdown-open',\n onDropdownClose: 'dropdown-close',\n onValidation: 'validation',\n onSelectError: 'select-error',\n onSelectFocus: 'select-focus',\n },\n});\n\n// Export type for React props\nexport type HySelectProps = React.ComponentProps<typeof HySelect>;"]}
|
package/select.component.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { SelectOption, SelectType, SelectSize, SelectStatus } from './select.types.js';
|
|
8
8
|
import { SelectHost } from './interfaces/index.js';
|
|
9
|
-
declare const HySelectComponent_base: (new (...args: any[]) => import("
|
|
9
|
+
declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
10
10
|
/**
|
|
11
11
|
* Advanced select component with multiple selection modes, validation, and accessibility features.
|
|
12
12
|
*
|
|
@@ -16,25 +16,28 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("../../sha
|
|
|
16
16
|
* @example
|
|
17
17
|
* ```html
|
|
18
18
|
* <!-- Basic select -->
|
|
19
|
-
* <
|
|
19
|
+
* <nr-select placeholder="Choose an option">
|
|
20
20
|
* <option value="1">Option 1</option>
|
|
21
21
|
* <option value="2">Option 2</option>
|
|
22
|
-
* </
|
|
22
|
+
* </nr-select>
|
|
23
23
|
*
|
|
24
24
|
* <!-- Multiple selection -->
|
|
25
|
-
* <
|
|
25
|
+
* <nr-select multiple placeholder="Choose multiple options"></nr-select>
|
|
26
26
|
*
|
|
27
27
|
* <!-- With validation -->
|
|
28
|
-
* <
|
|
28
|
+
* <nr-select required status="error"></nr-select>
|
|
29
29
|
*
|
|
30
30
|
* <!-- Button style -->
|
|
31
|
-
* <
|
|
31
|
+
* <nr-select type="button"></nr-select>
|
|
32
32
|
*
|
|
33
33
|
* <!-- With search functionality -->
|
|
34
|
-
* <
|
|
34
|
+
* <nr-select searchable search-placeholder="Search options..."></nr-select>
|
|
35
35
|
*
|
|
36
|
-
* <!--
|
|
37
|
-
* <
|
|
36
|
+
* <!-- With clear button -->
|
|
37
|
+
* <nr-select clearable></nr-select>
|
|
38
|
+
*
|
|
39
|
+
* <!-- Full width block select -->
|
|
40
|
+
* <nr-select block></nr-select>
|
|
38
41
|
* ```
|
|
39
42
|
*
|
|
40
43
|
* @fires nr-change - Selection changed
|
|
@@ -47,6 +50,7 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("../../sha
|
|
|
47
50
|
* @slot label - Select label content
|
|
48
51
|
* @slot helper-text - Helper text below select
|
|
49
52
|
* @slot trigger - Custom trigger content (slot type only)
|
|
53
|
+
* @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
|
|
50
54
|
*
|
|
51
55
|
* @cssproperty --select-border-color - Border color
|
|
52
56
|
* @cssproperty --select-background - Background color
|
|
@@ -67,8 +71,6 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
67
71
|
requiredComponents: string[];
|
|
68
72
|
/** Array of options to display in the select dropdown */
|
|
69
73
|
options: SelectOption[];
|
|
70
|
-
/** Default selected values (for initialization) */
|
|
71
|
-
defaultValue: string[];
|
|
72
74
|
/** Placeholder text shown when no option is selected */
|
|
73
75
|
placeholder: string;
|
|
74
76
|
/** Disables the select component */
|
|
@@ -101,8 +103,12 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
101
103
|
searchPlaceholder: string;
|
|
102
104
|
/** Current search query */
|
|
103
105
|
searchQuery: string;
|
|
106
|
+
/** Enable custom selected display slot */
|
|
107
|
+
useCustomSelectedDisplay: boolean;
|
|
104
108
|
/** Maximum height of the options dropdown */
|
|
105
109
|
maxHeight: string;
|
|
110
|
+
/** Makes select full width */
|
|
111
|
+
block: boolean;
|
|
106
112
|
/** Options dropdown container element */
|
|
107
113
|
optionsElement: HTMLElement;
|
|
108
114
|
/** Main wrapper element */
|
|
@@ -131,6 +137,10 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
131
137
|
* Component disconnected from DOM - cleanup event listeners
|
|
132
138
|
*/
|
|
133
139
|
disconnectedCallback(): void;
|
|
140
|
+
/**
|
|
141
|
+
* Called before update to handle property changes
|
|
142
|
+
*/
|
|
143
|
+
willUpdate(changedProperties: Map<string, any>): void;
|
|
134
144
|
/**
|
|
135
145
|
* First render complete - setup controllers and initialize state
|
|
136
146
|
*/
|
|
@@ -155,6 +165,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
155
165
|
* @param option - The option to unselect
|
|
156
166
|
*/
|
|
157
167
|
unselectOption(option: SelectOption): void;
|
|
168
|
+
/**
|
|
169
|
+
* Toggles an option's selection state
|
|
170
|
+
* @param option - The option to toggle
|
|
171
|
+
*/
|
|
172
|
+
toggleOption(option: SelectOption): void;
|
|
158
173
|
/**
|
|
159
174
|
* Clears all current selections
|
|
160
175
|
*/
|
|
@@ -224,6 +239,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
224
239
|
* @returns Current search query string
|
|
225
240
|
*/
|
|
226
241
|
getCurrentSearchQuery(): string;
|
|
242
|
+
/**
|
|
243
|
+
* Gets the currently selected options
|
|
244
|
+
* @returns Array of selected option objects
|
|
245
|
+
*/
|
|
246
|
+
getSelectedOptions(): SelectOption[];
|
|
227
247
|
/**
|
|
228
248
|
* Manually trigger setup of global event listeners
|
|
229
249
|
*/
|
package/select.component.js
CHANGED
|
@@ -16,7 +16,7 @@ import { map } from 'lit/directives/map.js';
|
|
|
16
16
|
import { choose } from 'lit/directives/choose.js';
|
|
17
17
|
import { classMap } from 'lit/directives/class-map.js';
|
|
18
18
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
19
|
-
import { NuralyUIBaseMixin } from '
|
|
19
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
20
20
|
// Import types
|
|
21
21
|
import { SelectType, SelectSize, SelectStatus } from './select.types.js';
|
|
22
22
|
// Import controllers
|
|
@@ -30,25 +30,28 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
|
|
|
30
30
|
* @example
|
|
31
31
|
* ```html
|
|
32
32
|
* <!-- Basic select -->
|
|
33
|
-
* <
|
|
33
|
+
* <nr-select placeholder="Choose an option">
|
|
34
34
|
* <option value="1">Option 1</option>
|
|
35
35
|
* <option value="2">Option 2</option>
|
|
36
|
-
* </
|
|
36
|
+
* </nr-select>
|
|
37
37
|
*
|
|
38
38
|
* <!-- Multiple selection -->
|
|
39
|
-
* <
|
|
39
|
+
* <nr-select multiple placeholder="Choose multiple options"></nr-select>
|
|
40
40
|
*
|
|
41
41
|
* <!-- With validation -->
|
|
42
|
-
* <
|
|
42
|
+
* <nr-select required status="error"></nr-select>
|
|
43
43
|
*
|
|
44
44
|
* <!-- Button style -->
|
|
45
|
-
* <
|
|
45
|
+
* <nr-select type="button"></nr-select>
|
|
46
46
|
*
|
|
47
47
|
* <!-- With search functionality -->
|
|
48
|
-
* <
|
|
48
|
+
* <nr-select searchable search-placeholder="Search options..."></nr-select>
|
|
49
49
|
*
|
|
50
|
-
* <!--
|
|
51
|
-
* <
|
|
50
|
+
* <!-- With clear button -->
|
|
51
|
+
* <nr-select clearable></nr-select>
|
|
52
|
+
*
|
|
53
|
+
* <!-- Full width block select -->
|
|
54
|
+
* <nr-select block></nr-select>
|
|
52
55
|
* ```
|
|
53
56
|
*
|
|
54
57
|
* @fires nr-change - Selection changed
|
|
@@ -61,6 +64,7 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
|
|
|
61
64
|
* @slot label - Select label content
|
|
62
65
|
* @slot helper-text - Helper text below select
|
|
63
66
|
* @slot trigger - Custom trigger content (slot type only)
|
|
67
|
+
* @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
|
|
64
68
|
*
|
|
65
69
|
* @cssproperty --select-border-color - Border color
|
|
66
70
|
* @cssproperty --select-background - Background color
|
|
@@ -79,11 +83,9 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
|
|
|
79
83
|
let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitElement) {
|
|
80
84
|
constructor() {
|
|
81
85
|
super(...arguments);
|
|
82
|
-
this.requiredComponents = ["nr-input", "
|
|
86
|
+
this.requiredComponents = ["nr-input", "nr-icon"];
|
|
83
87
|
/** Array of options to display in the select dropdown */
|
|
84
88
|
this.options = [];
|
|
85
|
-
/** Default selected values (for initialization) */
|
|
86
|
-
this.defaultValue = [];
|
|
87
89
|
/** Placeholder text shown when no option is selected */
|
|
88
90
|
this.placeholder = 'Select an option';
|
|
89
91
|
/** Disables the select component */
|
|
@@ -111,13 +113,17 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
111
113
|
/** Enable search/filter functionality */
|
|
112
114
|
this.searchable = false;
|
|
113
115
|
/** Enable clear button to clear all selections */
|
|
114
|
-
this.clearable =
|
|
116
|
+
this.clearable = false;
|
|
115
117
|
/** Placeholder text for the search input */
|
|
116
118
|
this.searchPlaceholder = 'Search options...';
|
|
117
119
|
/** Current search query */
|
|
118
120
|
this.searchQuery = '';
|
|
121
|
+
/** Enable custom selected display slot */
|
|
122
|
+
this.useCustomSelectedDisplay = false;
|
|
119
123
|
/** Maximum height of the options dropdown */
|
|
120
124
|
this.maxHeight = '';
|
|
125
|
+
/** Makes select full width */
|
|
126
|
+
this.block = false;
|
|
121
127
|
/** Handles option selection logic */
|
|
122
128
|
this.selectionController = new SelectSelectionController(this);
|
|
123
129
|
/** Manages dropdown visibility and positioning */
|
|
@@ -187,6 +193,21 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
187
193
|
disconnectedCallback() {
|
|
188
194
|
super.disconnectedCallback();
|
|
189
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* Called before update to handle property changes
|
|
198
|
+
*/
|
|
199
|
+
willUpdate(changedProperties) {
|
|
200
|
+
super.willUpdate(changedProperties);
|
|
201
|
+
// If options or value changed, reinitialize selection
|
|
202
|
+
if ((changedProperties.has('options') || changedProperties.has('value')) &&
|
|
203
|
+
this.options.length > 0 &&
|
|
204
|
+
this.value &&
|
|
205
|
+
(Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
|
|
206
|
+
// Reset initialization flag to allow reinit
|
|
207
|
+
this.selectionController._initialized = false;
|
|
208
|
+
this.selectionController.initializeFromValue();
|
|
209
|
+
}
|
|
210
|
+
}
|
|
190
211
|
/**
|
|
191
212
|
* First render complete - setup controllers and initialize state
|
|
192
213
|
*/
|
|
@@ -205,8 +226,8 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
205
226
|
}, 100);
|
|
206
227
|
}
|
|
207
228
|
// Apply default selection if specified
|
|
208
|
-
if (this.
|
|
209
|
-
this.selectionController.
|
|
229
|
+
if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
|
|
230
|
+
this.selectionController.initializeFromValue();
|
|
210
231
|
}
|
|
211
232
|
}
|
|
212
233
|
// === Public API Methods ===
|
|
@@ -238,6 +259,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
238
259
|
unselectOption(option) {
|
|
239
260
|
this.selectionController.unselectOption(option);
|
|
240
261
|
}
|
|
262
|
+
/**
|
|
263
|
+
* Toggles an option's selection state
|
|
264
|
+
* @param option - The option to toggle
|
|
265
|
+
*/
|
|
266
|
+
toggleOption(option) {
|
|
267
|
+
this.selectionController.toggleOption(option);
|
|
268
|
+
}
|
|
241
269
|
/**
|
|
242
270
|
* Clears all current selections
|
|
243
271
|
*/
|
|
@@ -337,6 +365,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
337
365
|
getCurrentSearchQuery() {
|
|
338
366
|
return this.searchController.searchQuery;
|
|
339
367
|
}
|
|
368
|
+
/**
|
|
369
|
+
* Gets the currently selected options
|
|
370
|
+
* @returns Array of selected option objects
|
|
371
|
+
*/
|
|
372
|
+
getSelectedOptions() {
|
|
373
|
+
return this.selectedOptions;
|
|
374
|
+
}
|
|
340
375
|
/**
|
|
341
376
|
* Manually trigger setup of global event listeners
|
|
342
377
|
*/
|
|
@@ -409,11 +444,12 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
409
444
|
<div class="icons-container">
|
|
410
445
|
${this.renderStatusIcon()}
|
|
411
446
|
${this.renderClearButton(selectedOptions)}
|
|
412
|
-
<
|
|
447
|
+
<nr-icon
|
|
413
448
|
name="angle-down"
|
|
449
|
+
size="${this.size}"
|
|
414
450
|
class="arrow-icon"
|
|
415
451
|
aria-hidden="true"
|
|
416
|
-
></
|
|
452
|
+
></nr-icon>
|
|
417
453
|
</div>
|
|
418
454
|
|
|
419
455
|
<div
|
|
@@ -455,7 +491,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
455
491
|
@keydown=${this.handleKeyDown}
|
|
456
492
|
>
|
|
457
493
|
${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}
|
|
458
|
-
<
|
|
494
|
+
<nr-icon name="angle-down" class="arrow-icon"></nr-icon>
|
|
459
495
|
</button>
|
|
460
496
|
|
|
461
497
|
<div
|
|
@@ -492,15 +528,21 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
492
528
|
return html `<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`;
|
|
493
529
|
}
|
|
494
530
|
if (this.multiple) {
|
|
531
|
+
// Check if custom display slot should be used
|
|
532
|
+
if (this.useCustomSelectedDisplay) {
|
|
533
|
+
return html `<slot name="selected-display" .selectedOptions=${selectedOptions}></slot>`;
|
|
534
|
+
}
|
|
535
|
+
// Default behavior: render tags
|
|
495
536
|
return map(selectedOptions, (option) => html `
|
|
496
537
|
<span class="tag">
|
|
497
538
|
<span class="tag-label">${option.label}</span>
|
|
498
|
-
<
|
|
539
|
+
<nr-icon
|
|
499
540
|
name="remove"
|
|
541
|
+
size="${this.size}"
|
|
500
542
|
class="tag-close"
|
|
501
543
|
@click=${(e) => this.handleTagRemove(e, option)}
|
|
502
544
|
aria-label="Remove ${option.label}"
|
|
503
|
-
></
|
|
545
|
+
></nr-icon>
|
|
504
546
|
</span>
|
|
505
547
|
`);
|
|
506
548
|
}
|
|
@@ -514,11 +556,11 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
514
556
|
renderStatusIcon() {
|
|
515
557
|
switch (this.status) {
|
|
516
558
|
case SelectStatus.Warning:
|
|
517
|
-
return html `<
|
|
559
|
+
return html `<nr-icon name="warning" size="${this.size}" class="status-icon warning"></nr-icon>`;
|
|
518
560
|
case SelectStatus.Error:
|
|
519
|
-
return html `<
|
|
561
|
+
return html `<nr-icon name="exclamation-circle" size="${this.size}" class="status-icon error"></nr-icon>`;
|
|
520
562
|
case SelectStatus.Success:
|
|
521
|
-
return html `<
|
|
563
|
+
return html `<nr-icon name="check-circle" size="${this.size}" class="status-icon success"></nr-icon>`;
|
|
522
564
|
default:
|
|
523
565
|
return nothing;
|
|
524
566
|
}
|
|
@@ -531,13 +573,14 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
531
573
|
return nothing;
|
|
532
574
|
}
|
|
533
575
|
return html `
|
|
534
|
-
<
|
|
576
|
+
<nr-icon
|
|
535
577
|
name="remove"
|
|
578
|
+
size="${this.size}"
|
|
536
579
|
class="clear-icon"
|
|
537
580
|
@click=${this.handleClearAll}
|
|
538
581
|
aria-label="Clear selection"
|
|
539
582
|
tabindex="-1"
|
|
540
|
-
></
|
|
583
|
+
></nr-icon>
|
|
541
584
|
`;
|
|
542
585
|
}
|
|
543
586
|
/**
|
|
@@ -550,11 +593,11 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
550
593
|
return html `
|
|
551
594
|
<div class="no-options" role="option" aria-disabled="true">
|
|
552
595
|
<div class="no-options-content">
|
|
553
|
-
<
|
|
596
|
+
<nr-icon
|
|
554
597
|
name="${this.noOptionsIcon}"
|
|
555
598
|
class="no-options-icon"
|
|
556
599
|
aria-hidden="true">
|
|
557
|
-
</
|
|
600
|
+
</nr-icon>
|
|
558
601
|
<span class="no-options-text">${this.noOptionsMessage}</span>
|
|
559
602
|
</div>
|
|
560
603
|
</div>
|
|
@@ -586,18 +629,18 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
586
629
|
title="${option.title || ''}"
|
|
587
630
|
>
|
|
588
631
|
<div class="option-content">
|
|
589
|
-
${option.icon ? html `<
|
|
632
|
+
${option.icon ? html `<nr-icon name="${option.icon}" size="${this.size}" class="option-icon"></nr-icon>` : nothing}
|
|
590
633
|
<div class="option-text">
|
|
591
634
|
${option.htmlContent ? html `<div .innerHTML=${option.htmlContent}></div>` : option.label}
|
|
592
635
|
${option.description ? html `<div class="option-description">${option.description}</div>` : nothing}
|
|
593
636
|
</div>
|
|
594
637
|
</div>
|
|
595
638
|
|
|
596
|
-
${isSelected ? html `<
|
|
639
|
+
${isSelected ? html `<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>` : nothing}
|
|
597
640
|
|
|
598
641
|
${option.state && option.message ? html `
|
|
599
642
|
<div class="option-message ${option.state}">
|
|
600
|
-
<
|
|
643
|
+
<nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}" size="${this.size}"></nr-icon>
|
|
601
644
|
<span>${option.message}</span>
|
|
602
645
|
</div>
|
|
603
646
|
` : nothing}
|
|
@@ -629,9 +672,6 @@ HySelectComponent.styles = styles;
|
|
|
629
672
|
__decorate([
|
|
630
673
|
property({ type: Array })
|
|
631
674
|
], HySelectComponent.prototype, "options", void 0);
|
|
632
|
-
__decorate([
|
|
633
|
-
property({ type: Array, attribute: 'default-value' })
|
|
634
|
-
], HySelectComponent.prototype, "defaultValue", void 0);
|
|
635
675
|
__decorate([
|
|
636
676
|
property({ type: String })
|
|
637
677
|
], HySelectComponent.prototype, "placeholder", void 0);
|
|
@@ -660,7 +700,7 @@ __decorate([
|
|
|
660
700
|
property({ type: String })
|
|
661
701
|
], HySelectComponent.prototype, "name", void 0);
|
|
662
702
|
__decorate([
|
|
663
|
-
property(
|
|
703
|
+
property()
|
|
664
704
|
], HySelectComponent.prototype, "value", void 0);
|
|
665
705
|
__decorate([
|
|
666
706
|
property({ type: String, attribute: 'no-options-message' })
|
|
@@ -680,9 +720,15 @@ __decorate([
|
|
|
680
720
|
__decorate([
|
|
681
721
|
property({ type: String })
|
|
682
722
|
], HySelectComponent.prototype, "searchQuery", void 0);
|
|
723
|
+
__decorate([
|
|
724
|
+
property({ type: Boolean, attribute: 'use-custom-selected-display' })
|
|
725
|
+
], HySelectComponent.prototype, "useCustomSelectedDisplay", void 0);
|
|
683
726
|
__decorate([
|
|
684
727
|
property({ type: String, attribute: 'max-height' })
|
|
685
728
|
], HySelectComponent.prototype, "maxHeight", void 0);
|
|
729
|
+
__decorate([
|
|
730
|
+
property({ type: Boolean, reflect: true })
|
|
731
|
+
], HySelectComponent.prototype, "block", void 0);
|
|
686
732
|
__decorate([
|
|
687
733
|
query('.options')
|
|
688
734
|
], HySelectComponent.prototype, "optionsElement", void 0);
|
|
@@ -693,7 +739,7 @@ __decorate([
|
|
|
693
739
|
query('.search-input')
|
|
694
740
|
], HySelectComponent.prototype, "searchInput", void 0);
|
|
695
741
|
HySelectComponent = __decorate([
|
|
696
|
-
customElement('
|
|
742
|
+
customElement('nr-select')
|
|
697
743
|
], HySelectComponent);
|
|
698
744
|
export { HySelectComponent };
|
|
699
745
|
//# sourceMappingURL=select.component.js.map
|
package/select.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { styles } from './select.style.js';\nimport { map } from 'lit/directives/map.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n// Import types\nimport {\n SelectOption,\n SelectType,\n SelectSize,\n SelectStatus\n} from './select.types.js';\n\n// Import controllers\nimport {\n SelectSelectionController,\n SelectKeyboardController,\n SelectDropdownController,\n SelectFocusController,\n SelectValidationController,\n SelectSearchController,\n SelectEventController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { SelectHost } from './interfaces/index.js';\n\n/**\n * Advanced select component with multiple selection modes, validation, and accessibility features.\n * \n * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,\n * and various display types including default, inline, button, and slot-based configurations.\n * \n * @example\n * ```html\n * <!-- Basic select -->\n * <hy-select placeholder=\"Choose an option\">\n * <option value=\"1\">Option 1</option>\n * <option value=\"2\">Option 2</option>\n * </hy-select>\n * \n * <!-- Multiple selection -->\n * <hy-select multiple placeholder=\"Choose multiple options\"></hy-select>\n * \n * <!-- With validation -->\n * <hy-select required status=\"error\"></hy-select>\n * \n * <!-- Button style -->\n * <hy-select type=\"button\"></hy-select>\n * \n * <!-- With search functionality -->\n * <hy-select searchable search-placeholder=\"Search options...\"></hy-select>\n * \n * <!-- Without clear button -->\n * <hy-select clearable=\"false\"></hy-select>\n * ```\n * \n * @fires nr-change - Selection changed\n * @fires nr-focus - Component focused \n * @fires nr-blur - Component blurred\n * @fires nr-dropdown-open - Dropdown opened\n * @fires nr-dropdown-close - Dropdown closed\n * @fires nr-validation - Validation state changed\n * \n * @slot label - Select label content\n * @slot helper-text - Helper text below select\n * @slot trigger - Custom trigger content (slot type only)\n * \n * @cssproperty --select-border-color - Border color\n * @cssproperty --select-background - Background color\n * @cssproperty --select-text-color - Text color\n * @cssproperty --select-focus-color - Focus indicator color\n * @cssproperty --select-dropdown-shadow - Dropdown shadow\n * @cssproperty --select-dropdown-max-height - Maximum height of dropdown\n * @cssproperty --select-no-options-color - No options message text color\n * @cssproperty --select-no-options-icon-color - No options icon color\n * @cssproperty --select-no-options-padding - Padding for no options message\n * @cssproperty --select-no-options-gap - Gap between icon and text\n * @cssproperty --select-search-border - Search input border\n * @cssproperty --select-search-background - Search input background\n * @cssproperty --select-search-padding - Search input padding\n */\n@customElement('hy-select')\nexport class HySelectComponent extends NuralyUIBaseMixin(LitElement) implements SelectHost {\n static override styles = styles;\n \n override requiredComponents = [ \"nr-input\", \"hy-icon\" ];\n\n /** Array of options to display in the select dropdown */\n @property({ type: Array }) \n options: SelectOption[] = [];\n \n /** Default selected values (for initialization) */\n @property({ type: Array, attribute: 'default-value' }) \n defaultValue: string[] = [];\n \n /** Placeholder text shown when no option is selected */\n @property({ type: String }) \n placeholder: string = 'Select an option';\n \n /** Disables the select component */\n @property({ type: Boolean, reflect: true }) \n disabled: boolean = false;\n \n /** Select display type (default, inline, button, slot) */\n @property({ type: String, reflect: true }) \n type: SelectType = SelectType.Default;\n \n /** Enables multiple option selection */\n @property({ type: Boolean, attribute: 'multiple' }) \n multiple: boolean = false;\n \n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show: boolean = false;\n \n /** Validation status (default, warning, error, success) */\n @property({ type: String, reflect: true }) \n status: SelectStatus = SelectStatus.Default;\n \n /** Select size (small, medium, large) */\n @property({ type: String, reflect: true }) \n size: SelectSize = SelectSize.Medium;\n \n /** Makes the select required for form validation */\n @property({ type: Boolean, reflect: true }) \n required: boolean = false;\n \n /** Form field name */\n @property({ type: String }) \n name: string = '';\n \n /** Current selected value(s) */\n @property({ type: String }) \n value: string | string[] = '';\n \n /** Message to display when no options are available */\n @property({ type: String, attribute: 'no-options-message' })\n noOptionsMessage: string = 'No options available';\n \n /** Icon to display with the no options message */\n @property({ type: String, attribute: 'no-options-icon' })\n noOptionsIcon: string = 'circle-info';\n \n /** Enable search/filter functionality */\n @property({ type: Boolean, reflect: true })\n searchable: boolean = false;\n \n /** Enable clear button to clear all selections */\n @property({ type: Boolean, reflect: true })\n clearable: boolean = true;\n \n /** Placeholder text for the search input */\n @property({ type: String, attribute: 'search-placeholder' })\n searchPlaceholder: string = 'Search options...';\n \n /** Current search query */\n @property({ type: String })\n searchQuery: string = '';\n\n /** Maximum height of the options dropdown */\n @property({ type: String, attribute: 'max-height' })\n maxHeight: string = '';\n\n /** Options dropdown container element */\n @query('.options') \n optionsElement!: HTMLElement;\n \n /** Main wrapper element */\n @query('.wrapper') \n wrapper!: HTMLElement;\n \n /** Search input element */\n @query('.search-input')\n searchInput?: HTMLInputElement;\n\n /** Handles option selection logic */\n private selectionController = new SelectSelectionController(this);\n \n /** Manages dropdown visibility and positioning */\n private dropdownController = new SelectDropdownController(this);\n \n /** Handles keyboard navigation */\n private keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);\n \n /** Manages focus states */\n private focusController = new SelectFocusController(this);\n \n /** Handles validation logic */\n private validationController = new SelectValidationController(this, this.selectionController);\n \n /** Handles search/filter functionality */\n private searchController = new SelectSearchController(this);\n \n /** Handles all event management */\n private eventController = new SelectEventController(this);\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * First render complete - setup controllers and initialize state\n */\n override firstUpdated(changedProperties: any): void {\n super.firstUpdated(changedProperties);\n \n // Configure dropdown controller with DOM element references\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n } else {\n // Retry element setup if DOM isn't ready yet\n setTimeout(() => {\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n }\n }, 100);\n }\n\n // Apply default selection if specified\n if (this.defaultValue.length > 0) {\n this.selectionController.initializeFromDefaultValue();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Gets the currently selected options\n * @returns Array of selected options\n */\n get selectedOptions(): SelectOption[] {\n return this.selectionController.getSelectedOptions();\n }\n\n /**\n * Gets the first selected option (for single selection mode)\n * @returns Selected option or undefined if none selected\n */\n get selectedOption(): SelectOption | undefined {\n return this.selectionController.getSelectedOption();\n }\n\n /**\n * Selects an option programmatically\n * @param option - The option to select\n */\n selectOption(option: SelectOption): void {\n this.selectionController.selectOption(option);\n }\n\n /**\n * Unselects an option programmatically\n * @param option - The option to unselect\n */\n unselectOption(option: SelectOption): void {\n this.selectionController.unselectOption(option);\n }\n\n /**\n * Clears all current selections\n */\n clearSelection(): void {\n this.selectionController.clearSelection();\n }\n\n /**\n * Checks if a specific option is currently selected\n * @param option - The option to check\n * @returns True if the option is selected\n */\n isOptionSelected(option: SelectOption): boolean {\n return this.selectionController.isOptionSelected(option);\n }\n\n /**\n * Toggles the dropdown visibility\n */\n toggleDropdown(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Opens the dropdown programmatically\n */\n openDropdown(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the dropdown programmatically\n */\n closeDropdown(): void {\n this.dropdownController.close();\n }\n\n /**\n * Focuses the select component\n */\n override focus(): void {\n this.focusController.focus();\n }\n\n /**\n * Removes focus from the select component\n */\n override blur(): void {\n this.focusController.blur();\n }\n\n /**\n * Validates the current selection according to component rules\n * @returns True if valid, false otherwise\n */\n validate(): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Checks if the current selection is valid without showing validation UI\n * @returns True if valid, false otherwise\n */\n checkValidity(): boolean {\n return this.validationController.checkValidity();\n }\n\n /**\n * Reports the current validation state and shows validation UI if invalid\n * @returns True if valid, false otherwise\n */\n reportValidity(): boolean {\n return this.validationController.reportValidity();\n }\n\n /**\n * Sets a custom validation message\n * @param message - Custom validation message (empty string to clear)\n */\n setCustomValidity(message: string): void {\n this.validationController.setCustomValidity(message);\n }\n\n /**\n * Searches for options with the given query\n * @param query - Search query string\n */\n searchOptions(query: string): void {\n this.searchController.search(query);\n }\n\n /**\n * Clears the current search query\n */\n clearSearch(): void {\n this.searchController.clearSearch();\n }\n\n /**\n * Gets the filtered options based on current search\n * @returns Array of filtered options\n */\n getSearchFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n }\n\n /**\n * Gets the current search query\n * @returns Current search query string\n */\n getCurrentSearchQuery(): string {\n return this.searchController.searchQuery;\n }\n\n /**\n * Manually trigger setup of global event listeners\n */\n setupGlobalEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Manually trigger removal of global event listeners\n */\n removeGlobalEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n \n /**\n * Handles clicks on the select trigger element\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles clicks on individual options\n */\n private handleOptionClick = (event: Event, option: SelectOption): void => {\n this.eventController.handleOptionClick(event, option);\n };\n\n /**\n * Handles removal of selected tags in multiple selection mode\n */\n private handleTagRemove = (event: Event, option: SelectOption): void => {\n this.eventController.handleTagRemove(event, option);\n };\n\n /**\n * Handles the clear all selections button\n */\n private handleClearAll = (event: Event): void => {\n this.eventController.handleClearAll(event);\n };\n\n /**\n * Handles keyboard navigation and interactions\n */\n private handleKeyDown = (event: KeyboardEvent): void => {\n this.eventController.handleKeyDown(event);\n };\n\n /**\n * Handles focus events\n */\n private handleFocus = (): void => {\n this.eventController.handleFocus();\n };\n\n /**\n * Handles blur events\n */\n private handleBlur = (): void => {\n this.eventController.handleBlur();\n };\n\n /**\n * Filters options based on search query\n */\n private getFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n };\n\n /**\n * Sets up global event listeners (called when dropdown opens)\n */\n public setupEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Removes global event listeners (called on disconnect or dropdown close)\n */\n public removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n \n /**\n * Main render method that delegates to specific type renderers\n */\n protected override render() {\n return html`${choose(this.type, [\n [SelectType.Default, () => this.renderDefault()],\n [SelectType.Inline, () => this.renderInline()],\n [SelectType.Button, () => this.renderButton()],\n [SelectType.Slot, () => this.renderSlot()],\n ])}`;\n }\n /**\n * Renders the default select appearance with full features\n */\n private renderDefault() {\n const selectedOptions = this.selectedOptions;\n const validationClasses = this.validationController.getValidationClasses();\n \n return html`\n <slot name=\"label\"></slot>\n <div \n class=\"${classMap({\n 'wrapper': true,\n ...validationClasses\n })}\"\n data-theme=\"${this.currentTheme}\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"select-label\"\n\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n >\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${this.renderSelectedContent(selectedOptions)}\n </div>\n \n <div class=\"icons-container\">\n ${this.renderStatusIcon()}\n ${this.renderClearButton(selectedOptions)}\n <hy-icon \n name=\"angle-down\" \n class=\"arrow-icon\"\n aria-hidden=\"true\"\n ></hy-icon>\n </div>\n \n <div \n class=\"options\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n </div>\n </div>\n \n ${this.renderValidationMessage()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders inline select with integrated label and helper text\n */\n private renderInline() {\n return html`\n <slot name=\"label\"></slot>\n ${this.renderDefault()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders select as a button-style component\n */\n private renderButton() {\n const selectedOptions = this.selectedOptions;\n return html`\n <button\n class=\"select-button\"\n ?disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n >\n ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}\n <hy-icon name=\"angle-down\" class=\"arrow-icon\"></hy-icon>\n </button>\n \n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders select with custom trigger content via slots\n */\n private renderSlot() {\n return html`\n <slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>\n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders the selected content in the trigger area\n */\n private renderSelectedContent(selectedOptions: SelectOption[]) {\n if (selectedOptions.length === 0) {\n return html`<span class=\"placeholder\" aria-hidden=\"true\">${this.placeholder}</span>`;\n }\n\n if (this.multiple) {\n return map(selectedOptions, (option) => html`\n <span class=\"tag\">\n <span class=\"tag-label\">${option.label}</span>\n <hy-icon \n name=\"remove\"\n class=\"tag-close\"\n @click=${(e: Event) => this.handleTagRemove(e, option)}\n aria-label=\"Remove ${option.label}\"\n ></hy-icon>\n </span>\n `);\n } else {\n return html`${selectedOptions[0].label}`;\n }\n }\n\n /**\n * Renders status/validation icons based on current status\n */\n private renderStatusIcon() {\n switch (this.status) {\n case SelectStatus.Warning:\n return html`<hy-icon name=\"warning\" class=\"status-icon warning\"></hy-icon>`;\n case SelectStatus.Error:\n return html`<hy-icon name=\"exclamation-circle\" class=\"status-icon error\"></hy-icon>`;\n case SelectStatus.Success:\n return html`<hy-icon name=\"check-circle\" class=\"status-icon success\"></hy-icon>`;\n default:\n return nothing;\n }\n }\n\n /**\n * Renders the clear all selections button when applicable\n */\n private renderClearButton(selectedOptions: SelectOption[]) {\n if (!this.clearable || selectedOptions.length === 0 || this.disabled) {\n return nothing;\n }\n\n return html`\n <hy-icon\n name=\"remove\"\n class=\"clear-icon\"\n @click=${this.handleClearAll}\n aria-label=\"Clear selection\"\n tabindex=\"-1\"\n ></hy-icon>\n `;\n }\n\n /**\n * Renders all available options in the dropdown\n */\n private renderSelectOptions() {\n const filteredOptions = this.getFilteredOptions();\n \n // Show \"no options\" message when no options are available (original array empty)\n if (!this.options || this.options.length === 0) {\n return html`\n <div class=\"no-options\" role=\"option\" aria-disabled=\"true\">\n <div class=\"no-options-content\">\n <hy-icon \n name=\"${this.noOptionsIcon}\" \n class=\"no-options-icon\"\n aria-hidden=\"true\">\n </hy-icon>\n <span class=\"no-options-text\">${this.noOptionsMessage}</span>\n </div>\n </div>\n `;\n }\n \n // Show \"no results\" message when search returns no results\n if (this.searchController.hasNoResults(this.options)) {\n return this.searchController.renderNoResults();\n }\n \n // Cache the focused option to avoid multiple controller accesses\n const focusedOption = this.keyboardController.focusedOption;\n \n return map(filteredOptions, (option) => {\n const isSelected = this.isOptionSelected(option);\n const isFocused = focusedOption && focusedOption.value === option.value;\n \n return html`\n <div\n class=\"${classMap({\n 'option': true,\n 'selected': isSelected,\n 'focused': isFocused,\n 'disabled': Boolean(option.disabled)\n })}\"\n role=\"option\"\n aria-selected=\"${isSelected}\"\n aria-disabled=\"${Boolean(option.disabled)}\"\n data-value=\"${option.value}\"\n @click=${(e: Event) => this.handleOptionClick(e, option)}\n style=${styleMap(option.style ? { style: option.style } : {})}\n title=\"${option.title || ''}\"\n >\n <div class=\"option-content\">\n ${option.icon ? html`<hy-icon name=\"${option.icon}\" class=\"option-icon\"></hy-icon>` : nothing}\n <div class=\"option-text\">\n ${option.htmlContent ? html`<div .innerHTML=${option.htmlContent}></div>` : option.label}\n ${option.description ? html`<div class=\"option-description\">${option.description}</div>` : nothing}\n </div>\n </div>\n \n ${isSelected ? html`<hy-icon name=\"check\" class=\"check-icon\" aria-hidden=\"true\"></hy-icon>` : nothing}\n \n ${option.state && option.message ? html`\n <div class=\"option-message ${option.state}\">\n <hy-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></hy-icon>\n <span>${option.message}</span>\n </div>\n ` : nothing}\n </div>\n `;\n });\n }\n\n /**\n * Renders the search input when searchable is enabled\n */\n private renderSearchInput() {\n return this.searchController.renderSearchInput();\n }\n\n /**\n * Renders validation message when present\n */\n private renderValidationMessage() {\n const validationMessage = this.validationController.validationMessage;\n if (!validationMessage) return nothing;\n\n return html`\n <div class=\"validation-message ${this.status}\" id=\"validation-message\">\n ${validationMessage}\n </div>\n `;\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { styles } from './select.style.js';\nimport { map } from 'lit/directives/map.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import types\nimport {\n SelectOption,\n SelectType,\n SelectSize,\n SelectStatus\n} from './select.types.js';\n\n// Import controllers\nimport {\n SelectSelectionController,\n SelectKeyboardController,\n SelectDropdownController,\n SelectFocusController,\n SelectValidationController,\n SelectSearchController,\n SelectEventController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { SelectHost } from './interfaces/index.js';\n\n/**\n * Advanced select component with multiple selection modes, validation, and accessibility features.\n * \n * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,\n * and various display types including default, inline, button, and slot-based configurations.\n * \n * @example\n * ```html\n * <!-- Basic select -->\n * <nr-select placeholder=\"Choose an option\">\n * <option value=\"1\">Option 1</option>\n * <option value=\"2\">Option 2</option>\n * </nr-select>\n * \n * <!-- Multiple selection -->\n * <nr-select multiple placeholder=\"Choose multiple options\"></nr-select>\n * \n * <!-- With validation -->\n * <nr-select required status=\"error\"></nr-select>\n * \n * <!-- Button style -->\n * <nr-select type=\"button\"></nr-select>\n * \n * <!-- With search functionality -->\n * <nr-select searchable search-placeholder=\"Search options...\"></nr-select>\n * \n * <!-- With clear button -->\n * <nr-select clearable></nr-select>\n * \n * <!-- Full width block select -->\n * <nr-select block></nr-select>\n * ```\n * \n * @fires nr-change - Selection changed\n * @fires nr-focus - Component focused \n * @fires nr-blur - Component blurred\n * @fires nr-dropdown-open - Dropdown opened\n * @fires nr-dropdown-close - Dropdown closed\n * @fires nr-validation - Validation state changed\n * \n * @slot label - Select label content\n * @slot helper-text - Helper text below select\n * @slot trigger - Custom trigger content (slot type only)\n * @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)\n * \n * @cssproperty --select-border-color - Border color\n * @cssproperty --select-background - Background color\n * @cssproperty --select-text-color - Text color\n * @cssproperty --select-focus-color - Focus indicator color\n * @cssproperty --select-dropdown-shadow - Dropdown shadow\n * @cssproperty --select-dropdown-max-height - Maximum height of dropdown\n * @cssproperty --select-no-options-color - No options message text color\n * @cssproperty --select-no-options-icon-color - No options icon color\n * @cssproperty --select-no-options-padding - Padding for no options message\n * @cssproperty --select-no-options-gap - Gap between icon and text\n * @cssproperty --select-search-border - Search input border\n * @cssproperty --select-search-background - Search input background\n * @cssproperty --select-search-padding - Search input padding\n */\n@customElement('nr-select')\nexport class HySelectComponent extends NuralyUIBaseMixin(LitElement) implements SelectHost {\n static override styles = styles;\n \n override requiredComponents = [ \"nr-input\", \"nr-icon\" ];\n\n /** Array of options to display in the select dropdown */\n @property({ type: Array }) \n options: SelectOption[] = [];\n \n /** Placeholder text shown when no option is selected */\n @property({ type: String }) \n placeholder: string = 'Select an option';\n \n /** Disables the select component */\n @property({ type: Boolean, reflect: true }) \n disabled: boolean = false;\n \n /** Select display type (default, inline, button, slot) */\n @property({ type: String, reflect: true }) \n type: SelectType = SelectType.Default;\n \n /** Enables multiple option selection */\n @property({ type: Boolean, attribute: 'multiple' }) \n multiple: boolean = false;\n \n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show: boolean = false;\n \n /** Validation status (default, warning, error, success) */\n @property({ type: String, reflect: true }) \n status: SelectStatus = SelectStatus.Default;\n \n /** Select size (small, medium, large) */\n @property({ type: String, reflect: true }) \n size: SelectSize = SelectSize.Medium;\n \n /** Makes the select required for form validation */\n @property({ type: Boolean, reflect: true }) \n required: boolean = false;\n \n /** Form field name */\n @property({ type: String }) \n name: string = '';\n \n /** Current selected value(s) */\n @property() \n value: string | string[] = '';\n \n /** Message to display when no options are available */\n @property({ type: String, attribute: 'no-options-message' })\n noOptionsMessage: string = 'No options available';\n \n /** Icon to display with the no options message */\n @property({ type: String, attribute: 'no-options-icon' })\n noOptionsIcon: string = 'circle-info';\n \n /** Enable search/filter functionality */\n @property({ type: Boolean, reflect: true })\n searchable: boolean = false;\n \n /** Enable clear button to clear all selections */\n @property({ type: Boolean, reflect: true })\n clearable: boolean = false;\n \n /** Placeholder text for the search input */\n @property({ type: String, attribute: 'search-placeholder' })\n searchPlaceholder: string = 'Search options...';\n \n /** Current search query */\n @property({ type: String })\n searchQuery: string = '';\n\n /** Enable custom selected display slot */\n @property({ type: Boolean, attribute: 'use-custom-selected-display' })\n useCustomSelectedDisplay: boolean = false;\n\n /** Maximum height of the options dropdown */\n @property({ type: String, attribute: 'max-height' })\n maxHeight: string = '';\n\n /** Makes select full width */\n @property({ type: Boolean, reflect: true })\n block: boolean = false;\n\n /** Options dropdown container element */\n @query('.options') \n optionsElement!: HTMLElement;\n \n /** Main wrapper element */\n @query('.wrapper') \n wrapper!: HTMLElement;\n \n /** Search input element */\n @query('.search-input')\n searchInput?: HTMLInputElement;\n\n /** Handles option selection logic */\n private selectionController = new SelectSelectionController(this);\n \n /** Manages dropdown visibility and positioning */\n private dropdownController = new SelectDropdownController(this);\n \n /** Handles keyboard navigation */\n private keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);\n \n /** Manages focus states */\n private focusController = new SelectFocusController(this);\n \n /** Handles validation logic */\n private validationController = new SelectValidationController(this, this.selectionController);\n \n /** Handles search/filter functionality */\n private searchController = new SelectSearchController(this);\n \n /** Handles all event management */\n private eventController = new SelectEventController(this);\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * Called before update to handle property changes\n */\n override willUpdate(changedProperties: Map<string, any>): void {\n super.willUpdate(changedProperties);\n \n // If options or value changed, reinitialize selection\n if ((changedProperties.has('options') || changedProperties.has('value')) && \n this.options.length > 0 && \n this.value && \n (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {\n // Reset initialization flag to allow reinit\n (this.selectionController as any)._initialized = false;\n this.selectionController.initializeFromValue();\n }\n }\n\n /**\n * First render complete - setup controllers and initialize state\n */\n override firstUpdated(changedProperties: any): void {\n super.firstUpdated(changedProperties);\n \n // Configure dropdown controller with DOM element references\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n } else {\n // Retry element setup if DOM isn't ready yet\n setTimeout(() => {\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n }\n }, 100);\n }\n\n // Apply default selection if specified\n if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {\n this.selectionController.initializeFromValue();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Gets the currently selected options\n * @returns Array of selected options\n */\n get selectedOptions(): SelectOption[] {\n return this.selectionController.getSelectedOptions();\n }\n\n /**\n * Gets the first selected option (for single selection mode)\n * @returns Selected option or undefined if none selected\n */\n get selectedOption(): SelectOption | undefined {\n return this.selectionController.getSelectedOption();\n }\n\n /**\n * Selects an option programmatically\n * @param option - The option to select\n */\n selectOption(option: SelectOption): void {\n this.selectionController.selectOption(option);\n }\n\n /**\n * Unselects an option programmatically\n * @param option - The option to unselect\n */\n unselectOption(option: SelectOption): void {\n this.selectionController.unselectOption(option);\n }\n\n /**\n * Toggles an option's selection state\n * @param option - The option to toggle\n */\n toggleOption(option: SelectOption): void {\n this.selectionController.toggleOption(option);\n }\n\n /**\n * Clears all current selections\n */\n clearSelection(): void {\n this.selectionController.clearSelection();\n }\n\n /**\n * Checks if a specific option is currently selected\n * @param option - The option to check\n * @returns True if the option is selected\n */\n isOptionSelected(option: SelectOption): boolean {\n return this.selectionController.isOptionSelected(option);\n }\n\n /**\n * Toggles the dropdown visibility\n */\n toggleDropdown(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Opens the dropdown programmatically\n */\n openDropdown(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the dropdown programmatically\n */\n closeDropdown(): void {\n this.dropdownController.close();\n }\n\n /**\n * Focuses the select component\n */\n override focus(): void {\n this.focusController.focus();\n }\n\n /**\n * Removes focus from the select component\n */\n override blur(): void {\n this.focusController.blur();\n }\n\n /**\n * Validates the current selection according to component rules\n * @returns True if valid, false otherwise\n */\n validate(): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Checks if the current selection is valid without showing validation UI\n * @returns True if valid, false otherwise\n */\n checkValidity(): boolean {\n return this.validationController.checkValidity();\n }\n\n /**\n * Reports the current validation state and shows validation UI if invalid\n * @returns True if valid, false otherwise\n */\n reportValidity(): boolean {\n return this.validationController.reportValidity();\n }\n\n /**\n * Sets a custom validation message\n * @param message - Custom validation message (empty string to clear)\n */\n setCustomValidity(message: string): void {\n this.validationController.setCustomValidity(message);\n }\n\n /**\n * Searches for options with the given query\n * @param query - Search query string\n */\n searchOptions(query: string): void {\n this.searchController.search(query);\n }\n\n /**\n * Clears the current search query\n */\n clearSearch(): void {\n this.searchController.clearSearch();\n }\n\n /**\n * Gets the filtered options based on current search\n * @returns Array of filtered options\n */\n getSearchFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n }\n\n /**\n * Gets the current search query\n * @returns Current search query string\n */\n getCurrentSearchQuery(): string {\n return this.searchController.searchQuery;\n }\n\n /**\n * Gets the currently selected options\n * @returns Array of selected option objects\n */\n getSelectedOptions(): SelectOption[] {\n return this.selectedOptions;\n }\n\n /**\n * Manually trigger setup of global event listeners\n */\n setupGlobalEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Manually trigger removal of global event listeners\n */\n removeGlobalEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n \n /**\n * Handles clicks on the select trigger element\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles clicks on individual options\n */\n private handleOptionClick = (event: Event, option: SelectOption): void => {\n this.eventController.handleOptionClick(event, option);\n };\n\n /**\n * Handles removal of selected tags in multiple selection mode\n */\n private handleTagRemove = (event: Event, option: SelectOption): void => {\n this.eventController.handleTagRemove(event, option);\n };\n\n /**\n * Handles the clear all selections button\n */\n private handleClearAll = (event: Event): void => {\n this.eventController.handleClearAll(event);\n };\n\n /**\n * Handles keyboard navigation and interactions\n */\n private handleKeyDown = (event: KeyboardEvent): void => {\n this.eventController.handleKeyDown(event);\n };\n\n /**\n * Handles focus events\n */\n private handleFocus = (): void => {\n this.eventController.handleFocus();\n };\n\n /**\n * Handles blur events\n */\n private handleBlur = (): void => {\n this.eventController.handleBlur();\n };\n\n /**\n * Filters options based on search query\n */\n private getFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n };\n\n /**\n * Sets up global event listeners (called when dropdown opens)\n */\n public setupEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Removes global event listeners (called on disconnect or dropdown close)\n */\n public removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n \n /**\n * Main render method that delegates to specific type renderers\n */\n protected override render() {\n return html`${choose(this.type, [\n [SelectType.Default, () => this.renderDefault()],\n [SelectType.Inline, () => this.renderInline()],\n [SelectType.Button, () => this.renderButton()],\n [SelectType.Slot, () => this.renderSlot()],\n ])}`;\n }\n /**\n * Renders the default select appearance with full features\n */\n private renderDefault() {\n const selectedOptions = this.selectedOptions;\n const validationClasses = this.validationController.getValidationClasses();\n \n return html`\n <slot name=\"label\"></slot>\n <div \n class=\"${classMap({\n 'wrapper': true,\n ...validationClasses\n })}\"\n data-theme=\"${this.currentTheme}\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"select-label\"\n\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n >\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${this.renderSelectedContent(selectedOptions)}\n </div>\n \n <div class=\"icons-container\">\n ${this.renderStatusIcon()}\n ${this.renderClearButton(selectedOptions)}\n <nr-icon \n name=\"angle-down\" \n size=\"${this.size}\"\n class=\"arrow-icon\"\n aria-hidden=\"true\"\n ></nr-icon>\n </div>\n \n <div \n class=\"options\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n </div>\n </div>\n \n ${this.renderValidationMessage()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders inline select with integrated label and helper text\n */\n private renderInline() {\n return html`\n <slot name=\"label\"></slot>\n ${this.renderDefault()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders select as a button-style component\n */\n private renderButton() {\n const selectedOptions = this.selectedOptions;\n return html`\n <button\n class=\"select-button\"\n ?disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n >\n ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}\n <nr-icon name=\"angle-down\" class=\"arrow-icon\"></nr-icon>\n </button>\n \n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders select with custom trigger content via slots\n */\n private renderSlot() {\n return html`\n <slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>\n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders the selected content in the trigger area\n */\n private renderSelectedContent(selectedOptions: SelectOption[]) {\n if (selectedOptions.length === 0) {\n return html`<span class=\"placeholder\" aria-hidden=\"true\">${this.placeholder}</span>`;\n }\n\n if (this.multiple) {\n // Check if custom display slot should be used\n if (this.useCustomSelectedDisplay) {\n return html`<slot name=\"selected-display\" .selectedOptions=${selectedOptions}></slot>`;\n }\n \n // Default behavior: render tags\n return map(selectedOptions, (option) => html`\n <span class=\"tag\">\n <span class=\"tag-label\">${option.label}</span>\n <nr-icon \n name=\"remove\"\n size=\"${this.size}\"\n class=\"tag-close\"\n @click=${(e: Event) => this.handleTagRemove(e, option)}\n aria-label=\"Remove ${option.label}\"\n ></nr-icon>\n </span>\n `);\n } else {\n return html`${selectedOptions[0].label}`;\n }\n }\n\n /**\n * Renders status/validation icons based on current status\n */\n private renderStatusIcon() {\n switch (this.status) {\n case SelectStatus.Warning:\n return html`<nr-icon name=\"warning\" size=\"${this.size}\" class=\"status-icon warning\"></nr-icon>`;\n case SelectStatus.Error:\n return html`<nr-icon name=\"exclamation-circle\" size=\"${this.size}\" class=\"status-icon error\"></nr-icon>`;\n case SelectStatus.Success:\n return html`<nr-icon name=\"check-circle\" size=\"${this.size}\" class=\"status-icon success\"></nr-icon>`;\n default:\n return nothing;\n }\n }\n\n /**\n * Renders the clear all selections button when applicable\n */\n private renderClearButton(selectedOptions: SelectOption[]) {\n if (!this.clearable || selectedOptions.length === 0 || this.disabled) {\n return nothing;\n }\n\n return html`\n <nr-icon\n name=\"remove\"\n size=\"${this.size}\"\n class=\"clear-icon\"\n @click=${this.handleClearAll}\n aria-label=\"Clear selection\"\n tabindex=\"-1\"\n ></nr-icon>\n `;\n }\n\n /**\n * Renders all available options in the dropdown\n */\n private renderSelectOptions() {\n const filteredOptions = this.getFilteredOptions();\n \n // Show \"no options\" message when no options are available (original array empty)\n if (!this.options || this.options.length === 0) {\n return html`\n <div class=\"no-options\" role=\"option\" aria-disabled=\"true\">\n <div class=\"no-options-content\">\n <nr-icon \n name=\"${this.noOptionsIcon}\" \n class=\"no-options-icon\"\n aria-hidden=\"true\">\n </nr-icon>\n <span class=\"no-options-text\">${this.noOptionsMessage}</span>\n </div>\n </div>\n `;\n }\n \n // Show \"no results\" message when search returns no results\n if (this.searchController.hasNoResults(this.options)) {\n return this.searchController.renderNoResults();\n }\n \n // Cache the focused option to avoid multiple controller accesses\n const focusedOption = this.keyboardController.focusedOption;\n \n return map(filteredOptions, (option) => {\n const isSelected = this.isOptionSelected(option);\n const isFocused = focusedOption && focusedOption.value === option.value;\n \n return html`\n <div\n class=\"${classMap({\n 'option': true,\n 'selected': isSelected,\n 'focused': isFocused,\n 'disabled': Boolean(option.disabled)\n })}\"\n role=\"option\"\n aria-selected=\"${isSelected}\"\n aria-disabled=\"${Boolean(option.disabled)}\"\n data-value=\"${option.value}\"\n @click=${(e: Event) => this.handleOptionClick(e, option)}\n style=${styleMap(option.style ? { style: option.style } : {})}\n title=\"${option.title || ''}\"\n >\n <div class=\"option-content\">\n ${option.icon ? html`<nr-icon name=\"${option.icon}\" size=\"${this.size}\" class=\"option-icon\"></nr-icon>` : nothing}\n <div class=\"option-text\">\n ${option.htmlContent ? html`<div .innerHTML=${option.htmlContent}></div>` : option.label}\n ${option.description ? html`<div class=\"option-description\">${option.description}</div>` : nothing}\n </div>\n </div>\n \n ${isSelected ? html`<nr-icon name=\"check\" size=\"${this.size}\" class=\"check-icon\" aria-hidden=\"true\"></nr-icon>` : nothing}\n \n ${option.state && option.message ? html`\n <div class=\"option-message ${option.state}\">\n <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\" size=\"${this.size}\"></nr-icon>\n <span>${option.message}</span>\n </div>\n ` : nothing}\n </div>\n `;\n });\n }\n\n /**\n * Renders the search input when searchable is enabled\n */\n private renderSearchInput() {\n return this.searchController.renderSearchInput();\n }\n\n /**\n * Renders validation message when present\n */\n private renderValidationMessage() {\n const validationMessage = this.validationController.validationMessage;\n if (!validationMessage) return nothing;\n\n return html`\n <div class=\"validation-message ${this.status}\" id=\"validation-message\">\n ${validationMessage}\n </div>\n `;\n }\n}"]}
|