@nuralyui/select 0.0.1

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.
Files changed (33) hide show
  1. package/demo/select-demo.d.ts +25 -0
  2. package/demo/select-demo.d.ts.map +1 -0
  3. package/demo/select-demo.js +254 -0
  4. package/demo/select-demo.js.map +1 -0
  5. package/index.d.ts +2 -0
  6. package/index.d.ts.map +1 -0
  7. package/index.js +2 -0
  8. package/index.js.map +1 -0
  9. package/package.json +15 -0
  10. package/react.d.ts +1 -0
  11. package/react.d.ts.map +1 -0
  12. package/react.js +2 -0
  13. package/react.js.map +1 -0
  14. package/select.component.d.ts +29 -0
  15. package/select.component.d.ts.map +1 -0
  16. package/select.component.js +206 -0
  17. package/select.component.js.map +1 -0
  18. package/select.constant.d.ts +3 -0
  19. package/select.constant.d.ts.map +1 -0
  20. package/select.constant.js +3 -0
  21. package/select.constant.js.map +1 -0
  22. package/select.style.d.ts +2 -0
  23. package/select.style.d.ts.map +1 -0
  24. package/select.style.js +231 -0
  25. package/select.style.js.map +1 -0
  26. package/select.types.d.ts +23 -0
  27. package/select.types.d.ts.map +1 -0
  28. package/select.types.js +23 -0
  29. package/select.types.js.map +1 -0
  30. package/test/select_test.d.ts +2 -0
  31. package/test/select_test.d.ts.map +1 -0
  32. package/test/select_test.js +132 -0
  33. package/test/select_test.js.map +1 -0
package/demo/select-demo.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2023 Google Laabidi Aymen
4
+ * SPDX-License-Identifier: MIT
5
+ */
6
+ import { LitElement } from 'lit';
7
+ import '../select.component';
8
+ import '../../dropdown/hy-dropdown.component';
9
+ import '../../button/hy-button.component';
10
+ import '../../tabs/tabs.component';
11
+ import '../../input/input.component';
12
+ export declare class SlectDemoElement extends LitElement {
13
+ options: {
14
+ value: string;
15
+ label: string;
16
+ }[];
17
+ selectedOptions: never[];
18
+ render(): import("lit").TemplateResult<1>;
19
+ }
20
+ declare global {
21
+ interface HTMLElementTagNameMap {
22
+ 'hy-select-demo': SlectDemoElement;
23
+ }
24
+ }
25
+ //# sourceMappingURL=select-demo.d.ts.map
package/demo/select-demo.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/select/demo/select-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,qBACa,gBAAiB,SAAQ,UAAU;IAE9C,OAAO;;;QAQL;IAGF,eAAe,UAAM;IACZ,MAAM;CAgNhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,gBAAgB,CAAC;KACpC;CACF"}
package/demo/select-demo.js ADDED
@@ -0,0 +1,254 @@
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ /* eslint-disable @typescript-eslint/no-explicit-any */
3
+ /**
4
+ * @license
5
+ * Copyright 2023 Google Laabidi Aymen
6
+ * SPDX-License-Identifier: MIT
7
+ */
8
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
9
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
10
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
11
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
12
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
13
+ };
14
+ import { LitElement, html } from 'lit';
15
+ import { customElement, state } from 'lit/decorators.js';
16
+ import '../select.component';
17
+ import '../../dropdown/hy-dropdown.component';
18
+ import '../../button/hy-button.component';
19
+ import '../../tabs/tabs.component';
20
+ import '../../input/input.component';
21
+ let SlectDemoElement = class SlectDemoElement extends LitElement {
22
+ constructor() {
23
+ super(...arguments);
24
+ this.options = [
25
+ { value: 'abuja', label: 'Abuja' },
26
+ { value: 'duplin', label: 'Duplin' },
27
+ { value: 'nairobi', label: 'Nairobi' },
28
+ { value: 'beirut', label: 'Beirut' },
29
+ { value: 'prague', label: 'Prague' },
30
+ { value: 'marrakech', label: 'Marrakech' },
31
+ { value: 'buenos aires', label: 'Buenos Aires' },
32
+ ];
33
+ this.selectedOptions = [];
34
+ }
35
+ render() {
36
+ return html `
37
+ <h3>Default: single selection without default values</h3>
38
+ <hy-select
39
+ .options=${this.options}
40
+ @changed=${(e) => {
41
+ this.selectedOptions = e.detail.value;
42
+ console.log(this.selectedOptions);
43
+ }}
44
+ >
45
+ </hy-select>
46
+ <br /><br />
47
+ <br /><br />
48
+
49
+ <hr />
50
+ <br /><br />
51
+ <h3>single selection with default values</h3>
52
+
53
+ <hy-select
54
+ .options=${this.options}
55
+ .defaultSelected="${['Duplin']}"
56
+ @changed=${(e) => {
57
+ this.selectedOptions = e.detail.value;
58
+ console.log(this.selectedOptions);
59
+ }}
60
+ >
61
+ </hy-select>
62
+ <br /><br />
63
+ <br /><br />
64
+
65
+ <hr />
66
+ <br /><br />
67
+ <h3>Disabled</h3>
68
+
69
+ <hy-select
70
+ .options=${this.options}
71
+ .disabled=${true}
72
+ @changed=${(e) => {
73
+ this.selectedOptions = e.detail.value;
74
+ console.log(this.selectedOptions);
75
+ }}
76
+ >
77
+ <span slot="label">disabled input</span>
78
+ <span slot="helper-text">helper</span>
79
+ </hy-select>
80
+
81
+ <br /><br />
82
+ <br /><br />
83
+ <hr />
84
+ <br /><br />
85
+ <h3>Multiple selection without default values</h3>
86
+
87
+ <hy-select
88
+ selectionMode="multiple"
89
+ .options=${this.options}
90
+ @changed=${(e) => {
91
+ this.selectedOptions = e.detail.value;
92
+ console.log(this.selectedOptions);
93
+ }}
94
+ >
95
+ <span slot="label">Selection mode: multiple</span>
96
+ </hy-select>
97
+ <br /><br />
98
+ <br /><br />
99
+ <hr />
100
+ <br /><br />
101
+ <h3>single selection with default value</h3>
102
+
103
+ <hy-select
104
+ .defaultSelected="${['Abuja']}"
105
+ .options=${this.options}
106
+ @changed=${(e) => {
107
+ this.selectedOptions = e.detail.value;
108
+ console.log(this.selectedOptions);
109
+ }}
110
+ >
111
+ <span slot="label">Selection mode: single, default selected: Abuja</span>
112
+ </hy-select>
113
+ <br /><br />
114
+ <br /><br />
115
+ <hr />
116
+ <br /><br />
117
+ <h3>Multiple selection with default values and empty placeholder</h3>
118
+ <hy-select
119
+ selectionMode="multiple"
120
+ placeholder=""
121
+ .defaultSelected="${['Abuja', 'Nairobi']}"
122
+ .options=${this.options}
123
+ @changed=${(e) => {
124
+ this.selectedOptions = e.detail.value;
125
+ console.log(this.selectedOptions);
126
+ }}
127
+ >
128
+ <span slot="label">Selection Mode: multiple</span>
129
+ </hy-select>
130
+ <br /><br />
131
+ <br /><br />
132
+ <hr />
133
+ <br /><br />
134
+ <h3>Default with warning status</h3>
135
+ <hy-select
136
+ status="warning"
137
+ .options=${this.options}
138
+ @changed=${(e) => {
139
+ this.selectedOptions = e.detail.value;
140
+ console.log(this.selectedOptions);
141
+ }}
142
+ >
143
+ <span slot="label">warning status</span>
144
+ </hy-select>
145
+ <br /><br />
146
+ <br /><br />
147
+ <h3>Disabled with warning status</h3>
148
+ <hy-select
149
+ status="warning"
150
+ .disabled=${true}
151
+ .options=${this.options}
152
+ @changed=${(e) => {
153
+ this.selectedOptions = e.detail.value;
154
+ console.log(this.selectedOptions);
155
+ }}
156
+ >
157
+ <span slot="label">warning status</span>
158
+ </hy-select>
159
+ <br /><br />
160
+ <br /><br />
161
+ <hr />
162
+ <br /><br />
163
+ <h3>Default with error status</h3>
164
+ <hy-select
165
+ status="error"
166
+ .options=${this.options}
167
+ @changed=${(e) => {
168
+ this.selectedOptions = e.detail.value;
169
+ console.log(this.selectedOptions);
170
+ }}
171
+ >
172
+ <span slot="label">label</span>
173
+ <span slot="helper-text">error status</span>
174
+ </hy-select>
175
+ <br /><br />
176
+ <br /><br />
177
+ <hr />
178
+ <h3>Disabledwith error status</h3>
179
+ <hy-select
180
+ .disabled=${true}
181
+ status="error"
182
+ .options=${this.options}
183
+ @changed=${(e) => {
184
+ this.selectedOptions = e.detail.value;
185
+ console.log(this.selectedOptions);
186
+ }}
187
+ >
188
+ <span slot="label">label</span>
189
+ <span slot="helper-text">error status</span>
190
+ </hy-select>
191
+ <br /><br />
192
+ <br /><br />
193
+ <hr />
194
+ <br /><br />
195
+ <h3>Default and type inline</h3>
196
+
197
+ <hy-select
198
+ type="inline"
199
+ .options=${this.options}
200
+ @changed=${(e) => {
201
+ this.selectedOptions = e.detail.value;
202
+ console.log(this.selectedOptions);
203
+ }}
204
+ >
205
+ <span slot="label">type inline</span>
206
+ <span slot="helper-text">label</span>
207
+ </hy-select>
208
+ <br /><br />
209
+ <br /><br />
210
+
211
+ <hr />
212
+ <br /><br />
213
+ <h3>Default with small size</h3>
214
+
215
+ <hy-select
216
+ size="small"
217
+ .options=${this.options}
218
+ @changed=${(e) => {
219
+ this.selectedOptions = e.detail.value;
220
+ console.log(this.selectedOptions);
221
+ }}
222
+ >
223
+ <span slot="label">small select</span>
224
+ </hy-select>
225
+ <br /><br />
226
+ <br /><br />
227
+
228
+ <hr />
229
+ <br /><br />
230
+ <h3>Default with large size</h3>
231
+ <hy-select
232
+ size="large"
233
+ .options=${this.options}
234
+ @changed=${(e) => {
235
+ this.selectedOptions = e.detail.value;
236
+ console.log(this.selectedOptions);
237
+ }}
238
+ >
239
+ <span slot="label">large select</span>
240
+ </hy-select>
241
+ `;
242
+ }
243
+ };
244
+ __decorate([
245
+ state()
246
+ ], SlectDemoElement.prototype, "options", void 0);
247
+ __decorate([
248
+ state()
249
+ ], SlectDemoElement.prototype, "selectedOptions", void 0);
250
+ SlectDemoElement = __decorate([
251
+ customElement('hy-select-demo')
252
+ ], SlectDemoElement);
253
+ export { SlectDemoElement };
254
+ //# sourceMappingURL=select-demo.js.map
package/demo/select-demo.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-demo.js","sourceRoot":"","sources":["../../../../src/components/select/demo/select-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\nimport '../select.component';\nimport '../../dropdown/hy-dropdown.component';\nimport '../../button/hy-button.component';\nimport '../../tabs/tabs.component';\nimport '../../input/input.component';\n\n@customElement('hy-select-demo')\nexport class SlectDemoElement extends LitElement {\n @state()\n options = [\n {value: 'abuja', label: 'Abuja'},\n {value: 'duplin', label: 'Duplin'},\n {value: 'nairobi', label: 'Nairobi'},\n {value: 'beirut', label: 'Beirut'},\n {value: 'prague', label: 'Prague'},\n {value: 'marrakech', label: 'Marrakech'},\n {value: 'buenos aires', label: 'Buenos Aires'},\n ];\n\n @state()\n selectedOptions = [];\n override render() {\n return html`\n <h3>Default: single selection without default values</h3>\n <hy-select\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>single selection with default values</h3>\n\n <hy-select\n .options=${this.options}\n .defaultSelected=\"${['Duplin']}\"\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Disabled</h3>\n\n <hy-select\n .options=${this.options}\n .disabled=${true}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">disabled input</span>\n <span slot=\"helper-text\">helper</span>\n </hy-select>\n\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Multiple selection without default values</h3>\n\n <hy-select\n selectionMode=\"multiple\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection mode: multiple</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>single selection with default value</h3>\n\n <hy-select\n .defaultSelected=\"${['Abuja']}\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection mode: single, default selected: Abuja</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Multiple selection with default values and empty placeholder</h3>\n <hy-select\n selectionMode=\"multiple\"\n placeholder=\"\"\n .defaultSelected=\"${['Abuja', 'Nairobi']}\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection Mode: multiple</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default with warning status</h3>\n <hy-select\n status=\"warning\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">warning status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <h3>Disabled with warning status</h3>\n <hy-select\n status=\"warning\"\n .disabled=${true}\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">warning status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default with error status</h3>\n <hy-select\n status=\"error\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">label</span>\n <span slot=\"helper-text\">error status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <h3>Disabledwith error status</h3>\n <hy-select\n .disabled=${true}\n status=\"error\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">label</span>\n <span slot=\"helper-text\">error status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default and type inline</h3>\n\n <hy-select\n type=\"inline\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">type inline</span>\n <span slot=\"helper-text\">label</span>\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Default with small size</h3>\n\n <hy-select\n size=\"small\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">small select</span>\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Default with large size</h3>\n <hy-select\n size=\"large\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">large select</span>\n </hy-select>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-select-demo': SlectDemoElement;\n }\n}\n"]}
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './select.component.js';
2
+ //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
package/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './select.component.js';
2
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './select.component.js';\n"]}
package/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@nuralyui/select",
3
+ "version": "0.0.1",
4
+ "description": "",
5
+ "main": "index.js",
6
+ "type": "module",
7
+ "dependencies": {
8
+ "dayjs": "^1.11.7"
9
+ },
10
+ "scripts": {
11
+ "test": "echo \"Error: no test specified\" && exit 1"
12
+ },
13
+ "author": "Labidi Aymen",
14
+ "license": "ISC"
15
+ }
package/react.d.ts ADDED
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=react.d.ts.map
package/react.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":""}
package/react.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=react.js.map
package/react.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"","sourcesContent":[""]}
package/select.component.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { LitElement, PropertyValues } from 'lit';
2
+ import '../icon/icon.component.js';
3
+ import { IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
4
+ export declare class HySelectComponent extends LitElement {
5
+ static styles: import("lit").CSSResult;
6
+ options: IOption[];
7
+ defaultSelected: string[];
8
+ placeholder: string;
9
+ disabled: boolean;
10
+ type: OptionType;
11
+ selectionMode: OptionSelectionMode;
12
+ show: boolean;
13
+ status: OptionStatus;
14
+ size: OptionSize;
15
+ selected: IOption[];
16
+ optionsElement: HTMLElement;
17
+ wrapper: HTMLElement;
18
+ protected updated(_changedProperties: PropertyValues): void;
19
+ private toggleOptions;
20
+ private calculateOptionsPosition;
21
+ private initOptionsPosition;
22
+ private selectOption;
23
+ private unselectAll;
24
+ private unselectOne;
25
+ private dispatchChangeEvent;
26
+ private onBlur;
27
+ protected render(): unknown;
28
+ }
29
+ //# sourceMappingURL=select.component.d.ts.map
package/select.component.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAI9D,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAC,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAIrG,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,eAAe,EAAC,MAAM,EAAE,CAAG;IAE3B,WAAW,SAAsB;IAEjC,QAAQ,UAAS;IAEjB,IAAI,aAAsB;IAE1B,aAAa,sBAA8B;IAE3C,IAAI,UAAS;IAEb,MAAM,eAAwB;IAE9B,IAAI,aAAqB;IAGzB,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,cAAc,EAAG,WAAW,CAAC;IAE7B,OAAO,EAAG,WAAW,CAAC;cAEH,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;YAatD,aAAa;IAM3B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,MAAM;cAKK,MAAM,IAAI,OAAO;CA6DrC"}
package/select.component.js ADDED
@@ -0,0 +1,206 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
8
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
9
+ return new (P || (P = Promise))(function (resolve, reject) {
10
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
11
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
12
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
13
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
14
+ });
15
+ };
16
+ /* eslint-disable @typescript-eslint/no-explicit-any */
17
+ import { LitElement, html, nothing } from 'lit';
18
+ import { property, state, customElement, query } from 'lit/decorators.js';
19
+ import { styles } from './select.style.js';
20
+ import { map } from 'lit/directives/map.js';
21
+ import '../icon/icon.component.js';
22
+ import { OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
23
+ import { choose } from 'lit/directives/choose.js';
24
+ import { EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR } from './select.constant.js';
25
+ let HySelectComponent = class HySelectComponent extends LitElement {
26
+ constructor() {
27
+ super(...arguments);
28
+ this.defaultSelected = [];
29
+ this.placeholder = 'Select an option';
30
+ this.disabled = false;
31
+ this.type = OptionType.Default;
32
+ this.selectionMode = OptionSelectionMode.Single;
33
+ this.show = false;
34
+ this.status = OptionStatus.Default;
35
+ this.size = OptionSize.Medium;
36
+ this.selected = [];
37
+ }
38
+ updated(_changedProperties) {
39
+ if (_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected')) != JSON.stringify(this.defaultSelected)) {
40
+ let defaultOptions = [];
41
+ this.defaultSelected.forEach((value) => {
42
+ const option = this.options.find((option) => option.label == value);
43
+ if (option)
44
+ defaultOptions.push(option);
45
+ });
46
+ this.selected = [...defaultOptions];
47
+ }
48
+ }
49
+ toggleOptions() {
50
+ return __awaiter(this, void 0, void 0, function* () {
51
+ this.show = !this.show;
52
+ yield this.updateComplete;
53
+ if (this.show)
54
+ this.calculateOptionsPosition();
55
+ else
56
+ this.initOptionsPosition();
57
+ });
58
+ }
59
+ calculateOptionsPosition() {
60
+ const wrapperBorderBottomWidth = +getComputedStyle(this.wrapper).borderBottomWidth.split('px')[0];
61
+ const wrapperBorderTopWidth = +getComputedStyle(this.wrapper).borderTopWidth.split('px')[0];
62
+ const clientRect = this.optionsElement.getBoundingClientRect();
63
+ const availableBottomSpace = window.visualViewport.height -
64
+ clientRect.bottom +
65
+ clientRect.height -
66
+ this.wrapper.getBoundingClientRect().height;
67
+ const availableTopSpace = clientRect.top;
68
+ if (clientRect.height > availableBottomSpace && availableTopSpace > clientRect.height) {
69
+ this.optionsElement.style.top = `${-clientRect.height - wrapperBorderTopWidth}px`;
70
+ }
71
+ else {
72
+ this.optionsElement.style.top = `calc(100% + ${wrapperBorderBottomWidth}px)`;
73
+ }
74
+ }
75
+ initOptionsPosition() {
76
+ this.optionsElement.style.removeProperty('top');
77
+ }
78
+ selectOption(selectOptionEvent, selectedOption) {
79
+ selectOptionEvent.stopPropagation();
80
+ if (this.selectionMode == OptionSelectionMode.Single) {
81
+ this.selected = this.selected.length && this.selected[0].label == selectedOption.label ? [] : [selectedOption];
82
+ this.toggleOptions();
83
+ }
84
+ else {
85
+ if (this.selected.includes(selectedOption)) {
86
+ this.selected = this.selected.filter((previousSelectedOption) => previousSelectedOption.label != selectedOption.label);
87
+ }
88
+ else {
89
+ this.selected = [...this.selected, selectedOption];
90
+ }
91
+ }
92
+ this.dispatchChangeEvent();
93
+ }
94
+ unselectAll(unselectAllEvent) {
95
+ unselectAllEvent.stopPropagation();
96
+ this.selected = [];
97
+ this.dispatchChangeEvent();
98
+ }
99
+ unselectOne(unselectOneEvent, selectedIndex) {
100
+ unselectOneEvent.stopPropagation();
101
+ this.selected = this.selected.filter((_, index) => index != selectedIndex);
102
+ this.dispatchChangeEvent();
103
+ }
104
+ dispatchChangeEvent() {
105
+ let result = this.selectionMode == OptionSelectionMode.Single ? this.selected[0] : this.selected;
106
+ this.dispatchEvent(new CustomEvent('changed', { detail: { value: result }, bubbles: true, composed: true }));
107
+ }
108
+ onBlur() {
109
+ this.show = false;
110
+ this.initOptionsPosition();
111
+ }
112
+ render() {
113
+ return html `
114
+ <slot name="label"></slot>
115
+ <div class="wrapper" tabindex="0" @click="${!this.disabled ? this.toggleOptions : nothing}" @blur=${this.onBlur}>
116
+ <div class="select">
117
+ <div class="select-trigger">
118
+ ${choose(this.selectionMode, [
119
+ [
120
+ OptionSelectionMode.Single,
121
+ () => html `${this.selected.length ? this.selected[0].label : this.placeholder}`,
122
+ ],
123
+ [
124
+ OptionSelectionMode.Multiple,
125
+ () => html `${this.selected.length
126
+ ? map(this.selected, (option, index) => html `<span class="label">
127
+ <hy-icon
128
+ name="remove"
129
+ id="unselect-one"
130
+ @click=${(e) => this.unselectOne(e, index)}
131
+ ></hy-icon
132
+ >${option.label}</span
133
+ >${this.selected.length - 1 != index ? MULTIPLE_OPTIONS_SEPARATOR : EMPTY_STRING}`)
134
+ : this.placeholder}`,
135
+ ],
136
+ ])}
137
+ </div>
138
+ <div class="icons-container">
139
+ ${choose(this.status, [
140
+ [OptionStatus.Default, () => undefined],
141
+ [OptionStatus.Warning, () => html `<hy-icon name="warning" id="warning-icon"></hy-icon>`],
142
+ [OptionStatus.Error, () => html `<hy-icon name="exclamation-circle" id="error-icon"></hy-icon>`],
143
+ ])}
144
+ ${this.selected.length
145
+ ? html `<hy-icon
146
+ name="remove"
147
+ id="unselect-multiple"
148
+ @click=${(e) => this.unselectAll(e)}
149
+ ></hy-icon>`
150
+ : nothing}
151
+ <hy-icon name="angle-down" id="arrow-icon"></hy-icon>
152
+ </div>
153
+ <div class="options">
154
+ ${map(this.options, (option) => html `<div class="option" @click="${(e) => this.selectOption(e, option)}">
155
+ ${this.selected.includes(option) ? html `<hy-icon name="check" id="check-icon"></hy-icon>` : nothing}
156
+ <span class="option-text">${option.label}</span>
157
+ </div>`)}
158
+ </div>
159
+ </div>
160
+ </div>
161
+ <slot name="helper-text"></slot>
162
+ `;
163
+ }
164
+ };
165
+ HySelectComponent.styles = styles;
166
+ __decorate([
167
+ property()
168
+ ], HySelectComponent.prototype, "options", void 0);
169
+ __decorate([
170
+ property()
171
+ ], HySelectComponent.prototype, "defaultSelected", void 0);
172
+ __decorate([
173
+ property()
174
+ ], HySelectComponent.prototype, "placeholder", void 0);
175
+ __decorate([
176
+ property({ type: Boolean, reflect: true })
177
+ ], HySelectComponent.prototype, "disabled", void 0);
178
+ __decorate([
179
+ property({ reflect: true })
180
+ ], HySelectComponent.prototype, "type", void 0);
181
+ __decorate([
182
+ property()
183
+ ], HySelectComponent.prototype, "selectionMode", void 0);
184
+ __decorate([
185
+ property({ type: Boolean, reflect: true })
186
+ ], HySelectComponent.prototype, "show", void 0);
187
+ __decorate([
188
+ property({ reflect: true })
189
+ ], HySelectComponent.prototype, "status", void 0);
190
+ __decorate([
191
+ property({ reflect: true })
192
+ ], HySelectComponent.prototype, "size", void 0);
193
+ __decorate([
194
+ state()
195
+ ], HySelectComponent.prototype, "selected", void 0);
196
+ __decorate([
197
+ query('.options')
198
+ ], HySelectComponent.prototype, "optionsElement", void 0);
199
+ __decorate([
200
+ query('.wrapper')
201
+ ], HySelectComponent.prototype, "wrapper", void 0);
202
+ HySelectComponent = __decorate([
203
+ customElement('hy-select')
204
+ ], HySelectComponent);
205
+ export { HySelectComponent };
206
+ //# sourceMappingURL=select.component.js.map
package/select.component.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAU,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AACrG,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAC,YAAY,EAAE,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAG9E,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAME,oBAAe,GAAU,EAAE,CAAA;QAE3B,gBAAW,GAAG,kBAAkB,CAAC;QAEjC,aAAQ,GAAG,KAAK,CAAC;QAEjB,SAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAE1B,kBAAa,GAAG,mBAAmB,CAAC,MAAM,CAAC;QAE3C,SAAI,GAAG,KAAK,CAAC;QAEb,WAAM,GAAG,YAAY,CAAC,OAAO,CAAC;QAE9B,SAAI,GAAG,UAAU,CAAC,MAAM,CAAC;QAGzB,aAAQ,GAAc,EAAE,CAAC;IA+I3B,CAAC;IAxIoB,OAAO,CAAC,kBAAkC;QAC3D,IAAG,kBAAkB,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,IAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,EAAC;YAC9I,IAAI,cAAc,GAAW,EAAE,CAAA;YAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK,EAAC,EAAE;gBACtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAC,EAAE,CAAA,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,CAAA;gBAChE,IAAG,MAAM;oBACP,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC9B,CAAC,CAAC,CAAA;YACD,IAAI,CAAC,QAAQ,GAAE,CAAC,GAAG,cAAc,CAAC,CAAA;SACnC;IAEH,CAAC;IAEa,aAAa;;YACzB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;;gBAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAClC,CAAC;KAAA;IACO,wBAAwB;QAC9B,MAAM,wBAAwB,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClG,MAAM,qBAAqB,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5F,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC/D,MAAM,oBAAoB,GACxB,MAAM,CAAC,cAAe,CAAC,MAAM;YAC7B,UAAU,CAAC,MAAM;YACjB,UAAU,CAAC,MAAM;YACjB,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC9C,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,CAAC;QACzC,IAAI,UAAU,CAAC,MAAM,GAAG,oBAAoB,IAAI,iBAAiB,GAAG,UAAU,CAAC,MAAM,EAAE;YACrF,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,qBAAqB,IAAI,CAAC;SACnF;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,eAAe,wBAAwB,KAAK,CAAC;SAC9E;IACH,CAAC;IACO,mBAAmB;QACzB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEO,YAAY,CAAC,iBAAwB,EAAE,cAAuB;QACpE,iBAAiB,CAAC,eAAe,EAAE,CAAC;QACpC,IAAI,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC,MAAM,EAAE;YACpD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YAC/G,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM;YACL,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;gBAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClC,CAAC,sBAAsB,EAAE,EAAE,CAAC,sBAAsB,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACjF,CAAC;aACH;iBAAM;gBACL,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;aACpD;SACF;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,WAAW,CAAC,gBAAuB;QACzC,gBAAgB,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,WAAW,CAAC,gBAAuB,EAAE,aAAqB;QAChE,gBAAgB,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC;QAC3E,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,mBAAmB;QACzB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC,MAAM,CAAA,CAAC,CAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA,CAAC,CAAA,IAAI,CAAC,QAAQ,CAAA;QAC5F,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC3G,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;kDAEmC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,WAAW,IAAI,CAAC,MAAM;;;cAGvG,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE;YAC3B;gBACE,mBAAmB,CAAC,MAAM;gBAC1B,GAAG,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;aAChF;YACD;gBACE,mBAAmB,CAAC,QAAQ;gBAC5B,GAAG,EAAE,CACH,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;oBACzB,CAAC,CAAC,GAAG,CACD,IAAI,CAAC,QAAQ,EACb,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAChB,IAAI,CAAA;;;;yCAIW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC;;iCAEhD,MAAM,CAAC,KAAK;+BACd,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,YAAY,EAAE,CACvF;oBACH,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;aACzB;SACF,CAAC;;;cAGA,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE;YACpB,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC;YACvC,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,sDAAsD,CAAC;YACxF,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,+DAA+D,CAAC;SAChG,CAAC;cACA,IAAI,CAAC,QAAQ,CAAC,MAAM;YACpB,CAAC,CAAC,IAAI,CAAA;;;2BAGO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;4BAChC;YACd,CAAC,CAAC,OAAO;;;;cAIT,GAAG,CACH,IAAI,CAAC,OAAO,EACZ,CAAC,MAAM,EAAE,EAAE,CACT,IAAI,CAAA,+BAA+B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;oBACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,CAAC,CAAC,CAAC,OAAO;8CACvE,MAAM,CAAC,KAAK;uBACnC,CACV;;;;;KAKR,CAAC;IACJ,CAAC;CACF,CAAA;AArKiB,wBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,EAAE;kDACS;AAEpB;IADC,QAAQ,EAAE;0DACgB;AAE3B;IADC,QAAQ,EAAE;sDACsB;AAEjC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;+CACA;AAE1B;IADC,QAAQ,EAAE;wDACgC;AAE3C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;AAEb;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;+CACD;AAGzB;IADC,KAAK,EAAE;mDACiB;AAGzB;IADC,KAAK,CAAC,UAAU,CAAC;yDACW;AAE7B;IADC,KAAK,CAAC,UAAU,CAAC;kDACI;AA5BX,iBAAiB;IAD7B,aAAa,CAAC,WAAW,CAAC;GACd,iBAAiB,CAsK7B;SAtKY,iBAAiB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {property,state, customElement, query} from 'lit/decorators.js';\nimport {styles} from './select.style.js';\nimport {map} from 'lit/directives/map.js';\nimport '../icon/icon.component.js';\nimport {IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType} from './select.types.js';\nimport {choose} from 'lit/directives/choose.js';\nimport {EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR} from './select.constant.js';\n\n@customElement('hy-select')\nexport class HySelectComponent extends LitElement {\n static override styles = styles;\n\n @property()\n options!: IOption[];\n @property()\n defaultSelected:string[]=[]\n @property()\n placeholder = 'Select an option';\n @property({type: Boolean, reflect: true})\n disabled = false;\n @property({reflect: true})\n type = OptionType.Default;\n @property()\n selectionMode = OptionSelectionMode.Single;\n @property({type: Boolean, reflect: true})\n show = false;\n @property({reflect: true})\n status = OptionStatus.Default;\n @property({reflect: true})\n size = OptionSize.Medium;\n\n @state()\n selected: IOption[] = [];\n\n @query('.options')\n optionsElement!: HTMLElement;\n @query('.wrapper')\n wrapper!: HTMLElement;\n\n protected override updated(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected'))!=JSON.stringify(this.defaultSelected)){\n let defaultOptions:IOption[]=[]\n this.defaultSelected.forEach((value)=>{\n const option = this.options.find((option)=>option.label ==value)\n if(option)\n defaultOptions.push(option)\n })\n this.selected =[...defaultOptions]\n }\n \n }\n \n private async toggleOptions() {\n this.show = !this.show;\n await this.updateComplete;\n if (this.show) this.calculateOptionsPosition();\n else this.initOptionsPosition();\n }\n private calculateOptionsPosition() {\n const wrapperBorderBottomWidth = +getComputedStyle(this.wrapper).borderBottomWidth.split('px')[0];\n const wrapperBorderTopWidth = +getComputedStyle(this.wrapper).borderTopWidth.split('px')[0];\n const clientRect = this.optionsElement.getBoundingClientRect();\n const availableBottomSpace =\n window.visualViewport!.height -\n clientRect.bottom +\n clientRect.height -\n this.wrapper.getBoundingClientRect().height;\n const availableTopSpace = clientRect.top;\n if (clientRect.height > availableBottomSpace && availableTopSpace > clientRect.height) {\n this.optionsElement.style.top = `${-clientRect.height - wrapperBorderTopWidth}px`;\n } else {\n this.optionsElement.style.top = `calc(100% + ${wrapperBorderBottomWidth}px)`;\n }\n }\n private initOptionsPosition() {\n this.optionsElement.style.removeProperty('top');\n }\n\n private selectOption(selectOptionEvent: Event, selectedOption: IOption) {\n selectOptionEvent.stopPropagation();\n if (this.selectionMode == OptionSelectionMode.Single) {\n this.selected = this.selected.length && this.selected[0].label == selectedOption.label ? [] : [selectedOption];\n this.toggleOptions();\n } else {\n if (this.selected.includes(selectedOption)) {\n this.selected = this.selected.filter(\n (previousSelectedOption) => previousSelectedOption.label != selectedOption.label\n );\n } else {\n this.selected = [...this.selected, selectedOption];\n }\n }\n this.dispatchChangeEvent()\n }\n private unselectAll(unselectAllEvent: Event) {\n unselectAllEvent.stopPropagation();\n this.selected = [];\n this.dispatchChangeEvent()\n }\n private unselectOne(unselectOneEvent: Event, selectedIndex: number) {\n unselectOneEvent.stopPropagation();\n this.selected = this.selected.filter((_, index) => index != selectedIndex);\n this.dispatchChangeEvent()\n }\n private dispatchChangeEvent() {\n let result = this.selectionMode == OptionSelectionMode.Single?this.selected[0]:this.selected\n this.dispatchEvent(new CustomEvent('changed', {detail: {value: result}, bubbles: true, composed: true}));\n }\n\n private onBlur() {\n this.show = false;\n this.initOptionsPosition();\n }\n\n protected override render(): unknown {\n return html`\n <slot name=\"label\"></slot>\n <div class=\"wrapper\" tabindex=\"0\" @click=\"${!this.disabled ? this.toggleOptions : nothing}\" @blur=${this.onBlur}>\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${choose(this.selectionMode, [\n [\n OptionSelectionMode.Single,\n () => html`${this.selected.length ? this.selected[0].label : this.placeholder}`,\n ],\n [\n OptionSelectionMode.Multiple,\n () =>\n html`${this.selected.length\n ? map(\n this.selected,\n (option, index) =>\n html`<span class=\"label\">\n <hy-icon\n name=\"remove\"\n id=\"unselect-one\"\n @click=${(e: Event) => this.unselectOne(e, index)}\n ></hy-icon\n >${option.label}</span\n >${this.selected.length - 1 != index ? MULTIPLE_OPTIONS_SEPARATOR : EMPTY_STRING}`\n )\n : this.placeholder}`,\n ],\n ])}\n </div>\n <div class=\"icons-container\">\n ${choose(this.status, [\n [OptionStatus.Default, () => undefined],\n [OptionStatus.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [OptionStatus.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.selected.length\n ? html`<hy-icon\n name=\"remove\"\n id=\"unselect-multiple\"\n @click=${(e: Event) => this.unselectAll(e)}\n ></hy-icon>`\n : nothing}\n <hy-icon name=\"angle-down\" id=\"arrow-icon\"></hy-icon>\n </div>\n <div class=\"options\">\n ${map(\n this.options,\n (option) =>\n html`<div class=\"option\" @click=\"${(e: Event) => this.selectOption(e, option)}\">\n ${this.selected.includes(option) ? html`<hy-icon name=\"check\" id=\"check-icon\"></hy-icon>` : nothing}\n <span class=\"option-text\">${option.label}</span>\n </div>`\n )}\n </div>\n </div>\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n}"]}
package/select.constant.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const EMPTY_STRING = "";
2
+ export declare const MULTIPLE_OPTIONS_SEPARATOR = ", ";
3
+ //# sourceMappingURL=select.constant.d.ts.map
package/select.constant.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.constant.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,0BAA0B,OAAO,CAAC"}
package/select.constant.js ADDED
@@ -0,0 +1,3 @@
1
+ export const EMPTY_STRING = '';
2
+ export const MULTIPLE_OPTIONS_SEPARATOR = ', ';
3
+ //# sourceMappingURL=select.constant.js.map
package/select.constant.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.constant.js","sourceRoot":"","sources":["../../../src/components/select/select.constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,0BAA0B,GAAG,IAAI,CAAC","sourcesContent":["export const EMPTY_STRING = '';\nexport const MULTIPLE_OPTIONS_SEPARATOR = ', ';\n"]}
package/select.style.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=select.style.d.ts.map
package/select.style.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.style.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAsOA,eAAO,MAAM,MAAM,yBAAc,CAAC"}
package/select.style.js ADDED
@@ -0,0 +1,231 @@
1
+ import { css } from 'lit';
2
+ const selectStyle = css `
3
+ :host {
4
+ font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));
5
+ }
6
+ .wrapper {
7
+ border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
8
+ position: relative;
9
+ width: var(--hybrid-select-width,var(--hybrid-select-local-width));
10
+ border-bottom: var(--hybrid-select-border-bottom,var(--hybrid-select-local-border-bottom));
11
+ border-top: var(--hybrid-select-border-top,var(--hybrid-select-local-border-top));
12
+ border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));
13
+ border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));
14
+ word-break:break-word;
15
+ }
16
+
17
+ .select {
18
+ display: flex;
19
+ flex-direction: column;
20
+ cursor: pointer;
21
+ font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));
22
+ }
23
+
24
+ .select-trigger {
25
+ border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
26
+ position: relative;
27
+ background-color: var(--hybrid-select-background-color,var(--hybrid-select-local-background-color));
28
+ color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
29
+ min-height: var(--hybrid-select-medium-height,var(--hybrid-select-local-medium-height));
30
+ display: flex;
31
+ padding-left: var(--hybrid-select-padding-left,var(--hybrid-select-local-padding-left));
32
+ padding-right: calc(var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width)) * 2 + var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding)) * 2 + 1px);
33
+ align-items: center;
34
+ font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));
35
+ flex-wrap: wrap;
36
+ }
37
+ #unselect-one {
38
+ --hybrid-icon-width: var(--hybrid-select-icon-unselect-one-width,var(--hybrid-select-local-icon-unselect-one-width));
39
+ }
40
+ #unselect-multiple,
41
+ #unselect-one {
42
+ --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
43
+ }
44
+ .label {
45
+ display: flex;
46
+ }
47
+
48
+ .wrapper:focus {
49
+ border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
50
+ border: var(--hybrid-select-focus-border,var(--hybrid-select-local-focus-border));
51
+ }
52
+ .icons-container {
53
+ position: absolute;
54
+ top: 50%;
55
+ left: 100%;
56
+ transform: translate(-100%, -50%);
57
+ display: flex;
58
+ }
59
+
60
+ #check-icon {
61
+ position: absolute;
62
+ top: 50%;
63
+ transform: translate(0%, -50%);
64
+ left: 0%;
65
+ --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
66
+ }
67
+ #warning-icon {
68
+ --hybrid-icon-color: var(--hybrid-select-warning-icon-color,var(--hybrid-select-local-warning-icon-color));
69
+ }
70
+ #error-icon {
71
+ --hybrid-icon-color: var(--hybrid-select-error-icon-color,var(--hybrid-select-local-error-icon-color));
72
+ }
73
+
74
+ :host([disabled]) hy-icon {
75
+ opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
76
+ cursor: not-allowed;
77
+ }
78
+
79
+ .options {
80
+ position: absolute;
81
+ left: 0%;
82
+ right: 0%;
83
+ background-color: var(--hybrid-select-options-background-color,var(--hybrid-select-local-options-background-color));
84
+ border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
85
+ display: none;
86
+ flex-direction: column;
87
+ box-shadow: var(--hybrid-select-box-shadow,var(--hybrid-select-local-box-shadow));
88
+ z-index: 1;
89
+ max-height: var(--hybrid-select-max-height,var(--hybrid-select-local-max-height));
90
+ overflow: auto;
91
+ }
92
+
93
+ .option {
94
+ padding: var(--hybrid-select-option-medium-padding,var(--hybrid-select-local-option-medium-padding));
95
+ padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));
96
+ cursor: pointer;
97
+ position: relative;
98
+ color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));
99
+ }
100
+ .option:hover {
101
+ border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
102
+ background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));
103
+ }
104
+ .option-text {
105
+ padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));
106
+ }
107
+ hy-icon {
108
+ display: flex;
109
+ padding: var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding,));
110
+ --hybrid-icon-width: var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width));
111
+ }
112
+ :host([size='small']) .select-trigger {
113
+ min-height: var(--hybrid-select-small-height,var(--hybrid-select-local-small-height));
114
+ font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));
115
+ }
116
+ :host([size='large']) .select-trigger {
117
+ min-height: var(--hybrid-select-large-height,var(--hybrid-select-local-large-height));
118
+ font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));
119
+ }
120
+
121
+ :host([size='small']) .option {
122
+ padding: var(--hybrid-select-option-small-padding,var(--hybrid-select-local-option-small-padding,));
123
+ font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));
124
+ }
125
+ :host([size='large']) .option {
126
+ padding: var(--hybrid-select-option-large-padding,var(--hybrid-select-local-option-large-padding,));
127
+ font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));
128
+ }
129
+ :host([status='error']) .wrapper {
130
+ border: var(--hybrid-select-error-border,var(--hybrid-select-local-error-border));
131
+ }
132
+ :host([status='error']) ::slotted([slot='helper-text']) {
133
+ color: var(--hybrid-select-error-helper-text,var(--hybrid-select-local-error-helper-text));
134
+ }
135
+
136
+ :host(:not([disabled])) .select-trigger:hover {
137
+ background-color: var(--hybrid-select-hover-background-color,var(--hybrid-select-local-hover-background-color));
138
+ }
139
+
140
+ :host([disabled]) .wrapper {
141
+ border: none;
142
+ opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
143
+ cursor: not-allowed;
144
+ }
145
+ :host([disabled]) ::slotted([slot='helper-text']),
146
+ :host([disabled]) ::slotted([slot='label']) {
147
+ opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
148
+ }
149
+ :host([show]) .options {
150
+ display: flex;
151
+ }
152
+ :host([type='inline']) {
153
+ display: flex;
154
+ gap: var(--hybrid-select-inline-gap,var(--hybrid-select-local-inline-gap));
155
+ }
156
+ :host([type='inline']) ::slotted([slot='helper-text']),
157
+ :host([type='inline']) ::slotted([slot='label']) {
158
+ display: flex;
159
+ align-items: center;
160
+ }
161
+
162
+ ::slotted([slot='helper-text']) {
163
+ color: var(--hybrid-select-helper-text-color,var(--hybrid-select-local-helper-text-color));
164
+ font-size:var(--hybrid-select-helper-text-font-size,var(--hybrid-select-local-helper-text-font-size))
165
+ }
166
+
167
+ ::slotted([slot='label']) {
168
+ color: var(--hybrid-select-label-text-color,var(--hybrid-select-local-label-text-color));
169
+ font-size:var(--hybrid-select-label-font-size,var(--hybrid-select-local-label-font-size))
170
+
171
+ }
172
+ :host {
173
+ --hybrid-select-local-width: 100%;
174
+ --hybrid-select-local-font-family: IBM Plex Sans;
175
+ --hybrid-select-local-background-color: #f4f4f4;
176
+ --hybrid-select-local-hover-background-color: #e0e0e0;
177
+ --hybrid-select-local-border-bottom: 1px solid #cccccc;
178
+ --hybrid-select-local-border-top: 3px solid transparent;
179
+ --hybrid-select-local-border-left: 2px solid transparent;
180
+ --hybrid-select-local-border-right: 2px solid transparent;
181
+ --hybrid-select-local-trigger-text-color: #161616;
182
+ --hybrid-select-local-option-text-color: #161616;
183
+ --hybrid-select-local-padding-left: 5px;
184
+ --hybrid-select-local-option-padding-left: 3px;
185
+ --hybrid-select-local-focus-border: 2px solid #0f62fe;
186
+ --hybrid-select-local-options-background-color: #f4f4f4;
187
+ --hybrid-select-local-border-radius: 2px;
188
+ --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
189
+ --hybrid-select-local-max-height: 250px;
190
+ --hybrid-select-local-option-medium-padding: 10px;
191
+ --hybrid-select-local-option-large-padding: 12px;
192
+ --hybrid-select-local-option-small-padding: 8px;
193
+ --hybrid-select-local-option-padding-left: 17px;
194
+ --hybrid-select-local-option-hover: #e0e0e0;
195
+ --hybrid-select-local-icons-padding: 3px;
196
+ --hybrid-select-local-icon-width: 14px;
197
+ --hybrid-select-local-icon-unselect-one-width: 12px;
198
+ --hybrid-select-local-small-height: 25px;
199
+ --hybrid-select-local-medium-height: 35px;
200
+ --hybrid-select-local-large-height: 45px;
201
+ --hybrid-select-local-small-font-size: 12px;
202
+ --hybrid-select-local-medium-font-size: 14px;
203
+ --hybrid-select-local-large-font-size: 16px;
204
+ --hybrid-select-local-error-border: 2px solid #da1e28;
205
+ --hybrid-select-local-error-icon-color: #da1e28;
206
+ --hybrid-select-local-warning-icon-color: #f0c300;
207
+ --hybrid-select-local-error-helper-text: #da1e28;
208
+ --hybrid-select-local-disabled-opacity: 0.5;
209
+ --hybrid-select-local-inline-gap: 5px;
210
+ --hybrid-select-local-helper-text-color: #a8a8a8;
211
+ --hybrid-select-local-label-text-color: #a8a8a8;
212
+ --hybrid-select-local-helper-text-font-size:13px;
213
+ --hybrid-select-local-label-font-size:13px;
214
+ }
215
+ @media (prefers-color-scheme: dark) {
216
+ :host {
217
+ --hybrid-select-local-focus-border: 2px solid #ffffff;
218
+ --hybrid-select-local-background-color: #393939;
219
+ --hybrid-select-local-hover-background-color: #4c4c4c;
220
+ --hybrid-select-local-options-background-color: #393939;
221
+ --hybrid-select-local-option-hover: #4c4c4c;
222
+ --hybrid-select-local-helper-text-color: #c6c6c6;
223
+ --hybrid-select-local-label-text-color: #c6c6c6;
224
+ --hybrid-select-local-border-bottom: 1px solid #6f6f6f;
225
+ --hybrid-select-local-trigger-text-color: #f4f4f4;
226
+ --hybrid-select-local-option-text-color: #f4f4f4;
227
+ }
228
+ }
229
+ `;
230
+ export const styles = selectStyle;
231
+ //# sourceMappingURL=select.style.js.map
package/select.style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.style.js","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmOtB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst selectStyle = css`\n :host {\n font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));\n }\n .wrapper {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n width: var(--hybrid-select-width,var(--hybrid-select-local-width));\n border-bottom: var(--hybrid-select-border-bottom,var(--hybrid-select-local-border-bottom));\n border-top: var(--hybrid-select-border-top,var(--hybrid-select-local-border-top));\n border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));\n border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));\n word-break:break-word;\n }\n\n .select {\n display: flex;\n flex-direction: column;\n cursor: pointer;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n }\n\n .select-trigger {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n background-color: var(--hybrid-select-background-color,var(--hybrid-select-local-background-color));\n color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n min-height: var(--hybrid-select-medium-height,var(--hybrid-select-local-medium-height));\n display: flex;\n padding-left: var(--hybrid-select-padding-left,var(--hybrid-select-local-padding-left));\n padding-right: calc(var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width)) * 2 + var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding)) * 2 + 1px);\n align-items: center;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n flex-wrap: wrap;\n }\n #unselect-one {\n --hybrid-icon-width: var(--hybrid-select-icon-unselect-one-width,var(--hybrid-select-local-icon-unselect-one-width));\n }\n #unselect-multiple,\n #unselect-one {\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n .label {\n display: flex;\n }\n\n .wrapper:focus {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n border: var(--hybrid-select-focus-border,var(--hybrid-select-local-focus-border));\n }\n .icons-container {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translate(-100%, -50%);\n display: flex;\n }\n\n #check-icon {\n position: absolute;\n top: 50%;\n transform: translate(0%, -50%);\n left: 0%;\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-select-warning-icon-color,var(--hybrid-select-local-warning-icon-color));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-select-error-icon-color,var(--hybrid-select-local-error-icon-color));\n }\n\n :host([disabled]) hy-icon {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n\n .options {\n position: absolute;\n left: 0%;\n right: 0%;\n background-color: var(--hybrid-select-options-background-color,var(--hybrid-select-local-options-background-color));\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n display: none;\n flex-direction: column;\n box-shadow: var(--hybrid-select-box-shadow,var(--hybrid-select-local-box-shadow));\n z-index: 1;\n max-height: var(--hybrid-select-max-height,var(--hybrid-select-local-max-height));\n overflow: auto;\n }\n\n .option {\n padding: var(--hybrid-select-option-medium-padding,var(--hybrid-select-local-option-medium-padding));\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n cursor: pointer;\n position: relative;\n color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));\n }\n .option:hover {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));\n }\n .option-text {\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n }\n hy-icon {\n display: flex;\n padding: var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding,));\n --hybrid-icon-width: var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width));\n }\n :host([size='small']) .select-trigger {\n min-height: var(--hybrid-select-small-height,var(--hybrid-select-local-small-height));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .select-trigger {\n min-height: var(--hybrid-select-large-height,var(--hybrid-select-local-large-height));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n\n :host([size='small']) .option {\n padding: var(--hybrid-select-option-small-padding,var(--hybrid-select-local-option-small-padding,));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .option {\n padding: var(--hybrid-select-option-large-padding,var(--hybrid-select-local-option-large-padding,));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n :host([status='error']) .wrapper {\n border: var(--hybrid-select-error-border,var(--hybrid-select-local-error-border));\n }\n :host([status='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-error-helper-text,var(--hybrid-select-local-error-helper-text));\n }\n\n :host(:not([disabled])) .select-trigger:hover {\n background-color: var(--hybrid-select-hover-background-color,var(--hybrid-select-local-hover-background-color));\n }\n\n :host([disabled]) .wrapper {\n border: none;\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n :host([disabled]) ::slotted([slot='helper-text']),\n :host([disabled]) ::slotted([slot='label']) {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n }\n :host([show]) .options {\n display: flex;\n }\n :host([type='inline']) {\n display: flex;\n gap: var(--hybrid-select-inline-gap,var(--hybrid-select-local-inline-gap));\n }\n :host([type='inline']) ::slotted([slot='helper-text']),\n :host([type='inline']) ::slotted([slot='label']) {\n display: flex;\n align-items: center;\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-helper-text-color,var(--hybrid-select-local-helper-text-color));\n font-size:var(--hybrid-select-helper-text-font-size,var(--hybrid-select-local-helper-text-font-size))\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-select-label-text-color,var(--hybrid-select-local-label-text-color));\n font-size:var(--hybrid-select-label-font-size,var(--hybrid-select-local-label-font-size))\n\n }\n :host {\n --hybrid-select-local-width: 100%;\n --hybrid-select-local-font-family: IBM Plex Sans;\n --hybrid-select-local-background-color: #f4f4f4;\n --hybrid-select-local-hover-background-color: #e0e0e0;\n --hybrid-select-local-border-bottom: 1px solid #cccccc;\n --hybrid-select-local-border-top: 3px solid transparent;\n --hybrid-select-local-border-left: 2px solid transparent;\n --hybrid-select-local-border-right: 2px solid transparent;\n --hybrid-select-local-trigger-text-color: #161616;\n --hybrid-select-local-option-text-color: #161616;\n --hybrid-select-local-padding-left: 5px;\n --hybrid-select-local-option-padding-left: 3px;\n --hybrid-select-local-focus-border: 2px solid #0f62fe;\n --hybrid-select-local-options-background-color: #f4f4f4;\n --hybrid-select-local-border-radius: 2px;\n --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n --hybrid-select-local-max-height: 250px;\n --hybrid-select-local-option-medium-padding: 10px;\n --hybrid-select-local-option-large-padding: 12px;\n --hybrid-select-local-option-small-padding: 8px;\n --hybrid-select-local-option-padding-left: 17px;\n --hybrid-select-local-option-hover: #e0e0e0;\n --hybrid-select-local-icons-padding: 3px;\n --hybrid-select-local-icon-width: 14px;\n --hybrid-select-local-icon-unselect-one-width: 12px;\n --hybrid-select-local-small-height: 25px;\n --hybrid-select-local-medium-height: 35px;\n --hybrid-select-local-large-height: 45px;\n --hybrid-select-local-small-font-size: 12px;\n --hybrid-select-local-medium-font-size: 14px;\n --hybrid-select-local-large-font-size: 16px;\n --hybrid-select-local-error-border: 2px solid #da1e28;\n --hybrid-select-local-error-icon-color: #da1e28;\n --hybrid-select-local-warning-icon-color: #f0c300;\n --hybrid-select-local-error-helper-text: #da1e28;\n --hybrid-select-local-disabled-opacity: 0.5;\n --hybrid-select-local-inline-gap: 5px;\n --hybrid-select-local-helper-text-color: #a8a8a8;\n --hybrid-select-local-label-text-color: #a8a8a8;\n --hybrid-select-local-helper-text-font-size:13px;\n --hybrid-select-local-label-font-size:13px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-select-local-focus-border: 2px solid #ffffff;\n --hybrid-select-local-background-color: #393939;\n --hybrid-select-local-hover-background-color: #4c4c4c;\n --hybrid-select-local-options-background-color: #393939;\n --hybrid-select-local-option-hover: #4c4c4c;\n --hybrid-select-local-helper-text-color: #c6c6c6;\n --hybrid-select-local-label-text-color: #c6c6c6;\n --hybrid-select-local-border-bottom: 1px solid #6f6f6f;\n --hybrid-select-local-trigger-text-color: #f4f4f4;\n --hybrid-select-local-option-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = selectStyle;\n"]}
package/select.types.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ export interface IOption {
2
+ label: string;
3
+ value: string;
4
+ }
5
+ export declare enum OptionType {
6
+ Default = "default",
7
+ Inline = "inline"
8
+ }
9
+ export declare enum OptionStatus {
10
+ Warning = "warning",
11
+ Error = "error",
12
+ Default = "Default"
13
+ }
14
+ export declare enum OptionSelectionMode {
15
+ Single = "single",
16
+ Multiple = "multiple"
17
+ }
18
+ export declare enum OptionSize {
19
+ Small = "small",
20
+ Medium = "medium",
21
+ Large = "large"
22
+ }
23
+ //# sourceMappingURL=select.types.d.ts.map
package/select.types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,oBAAY,mBAAmB;IAC7B,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AACD,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
package/select.types.js ADDED
@@ -0,0 +1,23 @@
1
+ export var OptionType;
2
+ (function (OptionType) {
3
+ OptionType["Default"] = "default";
4
+ OptionType["Inline"] = "inline";
5
+ })(OptionType || (OptionType = {}));
6
+ export var OptionStatus;
7
+ (function (OptionStatus) {
8
+ OptionStatus["Warning"] = "warning";
9
+ OptionStatus["Error"] = "error";
10
+ OptionStatus["Default"] = "Default";
11
+ })(OptionStatus || (OptionStatus = {}));
12
+ export var OptionSelectionMode;
13
+ (function (OptionSelectionMode) {
14
+ OptionSelectionMode["Single"] = "single";
15
+ OptionSelectionMode["Multiple"] = "multiple";
16
+ })(OptionSelectionMode || (OptionSelectionMode = {}));
17
+ export var OptionSize;
18
+ (function (OptionSize) {
19
+ OptionSize["Small"] = "small";
20
+ OptionSize["Medium"] = "medium";
21
+ OptionSize["Large"] = "large";
22
+ })(OptionSize || (OptionSize = {}));
23
+ //# sourceMappingURL=select.types.js.map
package/select.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.types.js","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAKA,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,+BAAiB,CAAA;AACnB,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB;AACD,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACtB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,wCAAiB,CAAA;IACjB,4CAAqB,CAAA;AACvB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AACD,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB","sourcesContent":["export interface IOption {\n label: string;\n value: string;\n}\n\nexport enum OptionType {\n Default = 'default',\n Inline = 'inline',\n}\nexport enum OptionStatus {\n Warning = 'warning',\n Error = 'error',\n Default = 'Default',\n}\n\nexport enum OptionSelectionMode {\n Single = 'single',\n Multiple = 'multiple',\n}\nexport enum OptionSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n"]}
package/test/select_test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import '../select.component';
2
+ //# sourceMappingURL=select_test.d.ts.map
package/test/select_test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select_test.d.ts","sourceRoot":"","sources":["../../../../src/components/select/test/select_test.ts"],"names":[],"mappings":"AACA,OAAO,qBAAqB,CAAC"}
package/test/select_test.js ADDED
@@ -0,0 +1,132 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { expect, fixture, html } from '@open-wc/testing';
11
+ import '../select.component';
12
+ import { OptionSelectionMode, OptionSize, OptionStatus, OptionType } from '../select.types';
13
+ const options = [
14
+ { value: 'abuja', label: 'Abuja' },
15
+ { value: 'duplin', label: 'Duplin' },
16
+ { value: 'nairobi', label: 'Nairobi' },
17
+ { value: 'beirut', label: 'Beirut' },
18
+ { value: 'prague', label: 'Prague' },
19
+ ];
20
+ suite('Hy-select', () => {
21
+ test('init select', () => __awaiter(void 0, void 0, void 0, function* () {
22
+ const el = yield fixture(html `<hy-select .options=${options}></hy-select>`);
23
+ expect(el.show).to.be.false;
24
+ expect(el.placeholder).to.equal('Select an option');
25
+ expect(el.disabled).to.be.false;
26
+ expect(el.selectionMode).to.equal(OptionSelectionMode.Single);
27
+ expect(el.type).to.equal(OptionType.Default);
28
+ expect(el.status).to.equal(OptionStatus.Default);
29
+ expect(el.size).to.equal(OptionSize.Medium);
30
+ expect(el.selected).to.deep.equal([]);
31
+ expect(el.defaultSelected).to.deep.equal([]);
32
+ }));
33
+ test('should hide/show options', () => __awaiter(void 0, void 0, void 0, function* () {
34
+ const el = yield fixture(html `<hy-select .options=${options}></hy-select>`);
35
+ const wrapper = el.shadowRoot.querySelector('.wrapper');
36
+ let displayedOptions = el.shadowRoot.querySelector('.options');
37
+ let displayedStyle = window.getComputedStyle(displayedOptions).display;
38
+ expect(el.show).to.equal(false);
39
+ expect(displayedStyle).to.equal('none');
40
+ wrapper.click();
41
+ yield el.updateComplete;
42
+ displayedOptions = el.shadowRoot.querySelector('.options');
43
+ displayedStyle = window.getComputedStyle(displayedOptions).display;
44
+ expect(el.show).to.be.true;
45
+ expect(displayedStyle).to.equal('flex');
46
+ expect(displayedOptions.children.length).to.equal(options.length);
47
+ }));
48
+ test('should not toggle show when select disabled', () => __awaiter(void 0, void 0, void 0, function* () {
49
+ const el = yield fixture(html `<hy-select .options=${options} .disabled=${true}></hy-select>`);
50
+ const wrapper = el.shadowRoot.querySelector('.wrapper');
51
+ expect(el.show).to.equal(false);
52
+ wrapper.click();
53
+ yield el.updateComplete;
54
+ expect(el.show).to.be.false;
55
+ }));
56
+ test('should dispatch change events', () => __awaiter(void 0, void 0, void 0, function* () {
57
+ const el = yield fixture(html `<hy-select .options=${options} .show=${true}></hy-select>`);
58
+ const wrapper = el.shadowRoot.querySelector('.wrapper');
59
+ let dispatchChangeEvent = false;
60
+ el.addEventListener('changed', () => {
61
+ dispatchChangeEvent = true;
62
+ });
63
+ const displayedOption = wrapper.querySelector('.option');
64
+ displayedOption.click();
65
+ yield el.updateComplete;
66
+ expect(dispatchChangeEvent).to.be.true;
67
+ }));
68
+ test('should select multiple options', () => __awaiter(void 0, void 0, void 0, function* () {
69
+ const el = yield fixture(html `<hy-select
70
+ .options=${options}
71
+ .show=${true}
72
+ selectionMode="multiple"
73
+ ></hy-select>`);
74
+ const wrapper = el.shadowRoot.querySelector('.wrapper');
75
+ const displayedOption = wrapper.querySelectorAll('.option');
76
+ expect(el.selected).to.deep.equal([]);
77
+ displayedOption[0].click();
78
+ yield el.updateComplete;
79
+ expect(el.selected).to.deep.equal([options[0]]);
80
+ displayedOption[2].click();
81
+ expect(el.selected).to.deep.equal([options[0], options[2]]);
82
+ }));
83
+ test('should select one option', () => __awaiter(void 0, void 0, void 0, function* () {
84
+ const el = yield fixture(html `<hy-select .options=${options} .show=${true}></hy-select>`);
85
+ const wrapper = el.shadowRoot.querySelector('.wrapper');
86
+ const displayedOption = wrapper.querySelectorAll('.option');
87
+ expect(el.selected).to.deep.equal([]);
88
+ displayedOption[0].click();
89
+ yield el.updateComplete;
90
+ expect(el.selected).to.deep.equal([options[0]]);
91
+ displayedOption[2].click();
92
+ expect(el.selected).to.deep.equal([options[2]]);
93
+ }));
94
+ suite('display default values', () => {
95
+ test('should display default value when single default value provided in single selection mode', () => __awaiter(void 0, void 0, void 0, function* () {
96
+ const defaultSelected = ['Abuja'];
97
+ const el = yield fixture(html `<hy-select
98
+ .options=${options}
99
+ .show=${true}
100
+ .defaultSelected="${defaultSelected}"
101
+ ></hy-select>`);
102
+ const option = options.find((option) => option.label == defaultSelected[0]);
103
+ expect(el.selected).to.deep.equal([option]);
104
+ }));
105
+ test('should display first default option when multiple default values provided in single selection mode', () => __awaiter(void 0, void 0, void 0, function* () {
106
+ const defaultSelected = ['Abuja', 'Nairobi'];
107
+ const el = yield fixture(html `<hy-select
108
+ .options=${options}
109
+ .show=${true}
110
+ .defaultSelected="${defaultSelected}"
111
+ ></hy-select>`);
112
+ const option = options.find((option) => option.label == defaultSelected[0]);
113
+ expect(el.selected).to.deep.equal([option]);
114
+ }));
115
+ test('should display default option values when multiple default values provided in multiple selection mode', () => __awaiter(void 0, void 0, void 0, function* () {
116
+ const defaultSelected = ['Abuja', 'Nairobi'];
117
+ const el = yield fixture(html `<hy-select
118
+ .options=${options}
119
+ .show=${true}
120
+ .defaultSelected="${defaultSelected}"
121
+ selectionMode="multiple"
122
+ ></hy-select>`);
123
+ const selectedOptions = [];
124
+ defaultSelected.forEach((label) => {
125
+ const option = options.find((option) => option.label == label);
126
+ selectedOptions.push(option);
127
+ });
128
+ expect(el.selected).to.deep.equal(selectedOptions);
129
+ }));
130
+ });
131
+ });
132
+ //# sourceMappingURL=select_test.js.map
package/test/select_test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select_test.js","sourceRoot":"","sources":["../../../../src/components/select/test/select_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {expect, fixture, html} from '@open-wc/testing';\nimport '../select.component';\nimport {HySelectComponent} from '../select.component';\nimport {IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType} from '../select.types';\nconst options = [\n {value: 'abuja', label: 'Abuja'},\n {value: 'duplin', label: 'Duplin'},\n {value: 'nairobi', label: 'Nairobi'},\n {value: 'beirut', label: 'Beirut'},\n {value: 'prague', label: 'Prague'},\n];\nsuite('Hy-select', () => {\n test('init select', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select .options=${options}></hy-select>`);\n expect(el.show).to.be.false;\n expect(el.placeholder).to.equal('Select an option');\n expect(el.disabled).to.be.false;\n expect(el.selectionMode).to.equal(OptionSelectionMode.Single);\n expect(el.type).to.equal(OptionType.Default);\n expect(el.status).to.equal(OptionStatus.Default);\n expect(el.size).to.equal(OptionSize.Medium);\n expect(el.selected).to.deep.equal([]);\n expect(el.defaultSelected).to.deep.equal([]);\n });\n test('should hide/show options', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select .options=${options}></hy-select>`);\n const wrapper: HTMLElement = el.shadowRoot!.querySelector('.wrapper')!;\n let displayedOptions: HTMLElement = el.shadowRoot!.querySelector('.options')!;\n let displayedStyle = window.getComputedStyle(displayedOptions).display;\n expect(el.show).to.equal(false);\n expect(displayedStyle).to.equal('none');\n wrapper.click();\n await el.updateComplete;\n displayedOptions = el.shadowRoot!.querySelector('.options')!;\n displayedStyle = window.getComputedStyle(displayedOptions).display;\n expect(el.show).to.be.true;\n expect(displayedStyle).to.equal('flex');\n expect(displayedOptions.children.length).to.equal(options.length);\n });\n test('should not toggle show when select disabled', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select .options=${options} .disabled=${true}></hy-select>`);\n const wrapper: HTMLElement = el.shadowRoot!.querySelector('.wrapper')!;\n expect(el.show).to.equal(false);\n wrapper.click();\n await el.updateComplete;\n expect(el.show).to.be.false;\n });\n test('should dispatch change events', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select .options=${options} .show=${true}></hy-select>`);\n const wrapper: HTMLElement = el.shadowRoot!.querySelector('.wrapper')!;\n let dispatchChangeEvent = false;\n el.addEventListener('changed', () => {\n dispatchChangeEvent = true;\n });\n const displayedOption: HTMLElement = wrapper.querySelector('.option')!;\n displayedOption.click();\n await el.updateComplete;\n expect(dispatchChangeEvent).to.be.true;\n });\n test('should select multiple options', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select\n .options=${options}\n .show=${true}\n selectionMode=\"multiple\"\n ></hy-select>`);\n const wrapper: HTMLElement = el.shadowRoot!.querySelector('.wrapper')!;\n const displayedOption: NodeListOf<HTMLElement> = wrapper.querySelectorAll('.option')!;\n expect(el.selected).to.deep.equal([]);\n displayedOption[0].click();\n await el.updateComplete;\n expect(el.selected).to.deep.equal([options[0]]);\n displayedOption[2].click();\n expect(el.selected).to.deep.equal([options[0], options[2]]);\n });\n test('should select one option', async () => {\n const el: HySelectComponent = await fixture(html`<hy-select .options=${options} .show=${true}></hy-select>`);\n const wrapper: HTMLElement = el.shadowRoot!.querySelector('.wrapper')!;\n const displayedOption: NodeListOf<HTMLElement> = wrapper.querySelectorAll('.option')!;\n expect(el.selected).to.deep.equal([]);\n displayedOption[0].click();\n await el.updateComplete;\n expect(el.selected).to.deep.equal([options[0]]);\n displayedOption[2].click();\n expect(el.selected).to.deep.equal([options[2]]);\n });\n suite('display default values', () => {\n test('should display default value when single default value provided in single selection mode', async () => {\n const defaultSelected = ['Abuja'];\n const el: HySelectComponent = await fixture(html`<hy-select\n .options=${options}\n .show=${true}\n .defaultSelected=\"${defaultSelected}\"\n ></hy-select>`);\n const option = options.find((option) => option.label == defaultSelected[0]);\n expect(el.selected).to.deep.equal([option]);\n });\n test('should display first default option when multiple default values provided in single selection mode', async () => {\n const defaultSelected = ['Abuja', 'Nairobi'];\n const el: HySelectComponent = await fixture(html`<hy-select\n .options=${options}\n .show=${true}\n .defaultSelected=\"${defaultSelected}\"\n ></hy-select>`);\n const option = options.find((option) => option.label == defaultSelected[0]);\n\n expect(el.selected).to.deep.equal([option]);\n });\n test('should display default option values when multiple default values provided in multiple selection mode', async () => {\n const defaultSelected = ['Abuja', 'Nairobi'];\n const el: HySelectComponent = await fixture(html`<hy-select\n .options=${options}\n .show=${true}\n .defaultSelected=\"${defaultSelected}\"\n selectionMode=\"multiple\"\n ></hy-select>`);\n const selectedOptions: IOption[] = [];\n defaultSelected.forEach((label) => {\n const option = options.find((option) => option.label == label)!;\n selectedOptions.push(option);\n });\n\n expect(el.selected).to.deep.equal(selectedOptions);\n });\n });\n});\n"]}