@lukso/web-components 1.72.0 → 1.74.0

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 (84) hide show
  1. package/dist/components/index.cjs +3 -3
  2. package/dist/components/index.js +3 -3
  3. package/dist/components/lukso-button/index.cjs +1 -1
  4. package/dist/components/lukso-button/index.d.ts +2 -2
  5. package/dist/components/lukso-button/index.d.ts.map +1 -1
  6. package/dist/components/lukso-button/index.js +1 -1
  7. package/dist/components/lukso-card/index.cjs +3 -3
  8. package/dist/components/lukso-card/index.js +3 -3
  9. package/dist/components/lukso-checkbox/index.cjs +1 -1
  10. package/dist/components/lukso-checkbox/index.js +1 -1
  11. package/dist/components/lukso-footer/index.cjs +1 -1
  12. package/dist/components/lukso-footer/index.js +1 -1
  13. package/dist/components/lukso-icon/icons/database.d.ts +3 -0
  14. package/dist/components/lukso-icon/icons/database.d.ts.map +1 -0
  15. package/dist/components/lukso-icon/icons/empty-outline.d.ts +3 -0
  16. package/dist/components/lukso-icon/icons/empty-outline.d.ts.map +1 -0
  17. package/dist/components/lukso-icon/index.cjs +61 -3
  18. package/dist/components/lukso-icon/index.d.ts.map +1 -1
  19. package/dist/components/lukso-icon/index.js +61 -3
  20. package/dist/components/lukso-image/index.cjs +2 -2
  21. package/dist/components/lukso-image/index.js +2 -2
  22. package/dist/components/lukso-input/index.cjs +170 -43
  23. package/dist/components/lukso-input/index.d.ts +11 -6
  24. package/dist/components/lukso-input/index.d.ts.map +1 -1
  25. package/dist/components/lukso-input/index.js +170 -43
  26. package/dist/components/lukso-input/lukso-input.stories.d.ts +5 -1
  27. package/dist/components/lukso-input/lukso-input.stories.d.ts.map +1 -1
  28. package/dist/components/lukso-modal/index.cjs +1 -1
  29. package/dist/components/lukso-modal/index.js +1 -1
  30. package/dist/components/lukso-navbar/index.cjs +3 -3
  31. package/dist/components/lukso-navbar/index.js +3 -3
  32. package/dist/components/lukso-profile/index.cjs +2 -2
  33. package/dist/components/lukso-profile/index.js +2 -2
  34. package/dist/components/lukso-progress/index.cjs +2 -2
  35. package/dist/components/lukso-progress/index.js +2 -2
  36. package/dist/components/lukso-sanitize/index.cjs +1 -1
  37. package/dist/components/lukso-sanitize/index.js +1 -1
  38. package/dist/components/lukso-search/index.cjs +105 -139
  39. package/dist/components/lukso-search/index.d.ts +6 -12
  40. package/dist/components/lukso-search/index.d.ts.map +1 -1
  41. package/dist/components/lukso-search/index.js +101 -135
  42. package/dist/components/lukso-search/lukso-search.stories.d.ts +2 -0
  43. package/dist/components/lukso-search/lukso-search.stories.d.ts.map +1 -1
  44. package/dist/components/lukso-select/index.cjs +234 -45
  45. package/dist/components/lukso-select/index.d.ts +18 -5
  46. package/dist/components/lukso-select/index.d.ts.map +1 -1
  47. package/dist/components/lukso-select/index.js +234 -45
  48. package/dist/components/lukso-select/lukso-select.stories.d.ts +12 -0
  49. package/dist/components/lukso-select/lukso-select.stories.d.ts.map +1 -1
  50. package/dist/components/lukso-share/index.cjs +1 -1
  51. package/dist/components/lukso-share/index.js +1 -1
  52. package/dist/components/lukso-switch/index.cjs +2 -2
  53. package/dist/components/lukso-switch/index.js +2 -2
  54. package/dist/components/lukso-tag/index.cjs +2 -2
  55. package/dist/components/lukso-tag/index.js +2 -2
  56. package/dist/components/lukso-terms/index.cjs +2 -2
  57. package/dist/components/lukso-terms/index.js +2 -2
  58. package/dist/components/lukso-test/index.cjs +1 -1
  59. package/dist/components/lukso-test/index.js +1 -1
  60. package/dist/components/lukso-tooltip/index.cjs +2 -2
  61. package/dist/components/lukso-tooltip/index.js +2 -2
  62. package/dist/components/lukso-username/index.cjs +2 -2
  63. package/dist/components/lukso-username/index.js +2 -2
  64. package/dist/components/lukso-wizard/index.cjs +1 -1
  65. package/dist/components/lukso-wizard/index.js +1 -1
  66. package/dist/index-09db75ee.js +39 -0
  67. package/dist/index-9b930f6a.cjs +46 -0
  68. package/dist/{index-59f199b0.cjs → index-a1e4b7d4.cjs} +1 -1
  69. package/dist/{index-8c727f4c.js → index-dfdfb6fe.js} +1 -1
  70. package/dist/index.cjs +3 -3
  71. package/dist/index.js +3 -3
  72. package/dist/shared/tailwind-element/index.cjs +1 -1
  73. package/dist/shared/tailwind-element/index.js +1 -1
  74. package/dist/shared/types.d.ts +1 -0
  75. package/dist/shared/types.d.ts.map +1 -1
  76. package/dist/{style-map-c66282ea.js → style-map-3669b30c.js} +1 -1
  77. package/dist/{style-map-6337084a.cjs → style-map-ebf3a8d2.cjs} +1 -1
  78. package/dist/styles/main.css +3 -0
  79. package/dist/styles/main.css.map +1 -1
  80. package/package.json +3 -2
  81. package/tools/sass/typography.scss +4 -0
  82. package/tools/styles/main.css +3 -0
  83. package/dist/index-25503efb.cjs +0 -46
  84. package/dist/index-bf6e0a1d.js +0 -39
@@ -2,16 +2,16 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-25503efb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-tag/index.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
12
- require('../../style-map-6337084a.cjs');
12
+ require('../../style-map-ebf3a8d2.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
- require('../../index-59f199b0.cjs');
14
+ require('../../index-a1e4b7d4.cjs');
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
17
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,13 +1,13 @@
1
- import { a as TailwindElement, x, A } from '../../index-bf6e0a1d.js';
1
+ import { a as TailwindElement, x, A } from '../../index-09db75ee.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-tag/index.js';
7
7
  import '../../bundle-mjs-fbc6e2a8.js';
8
- import '../../style-map-c66282ea.js';
8
+ import '../../style-map-3669b30c.js';
9
9
  import '../../directive-2bb7789e.js';
10
- import '../../index-8c727f4c.js';
10
+ import '../../index-dfdfb6fe.js';
11
11
 
12
12
  var __defProp = Object.defineProperty;
13
13
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-25503efb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-1d3f4a5a.cjs');
8
8
  require('../lukso-image/index.cjs');
9
9
  require('../../bundle-mjs-d58a83c6.cjs');
10
10
  require('../../state-d9fb972b.cjs');
11
- require('../../style-map-6337084a.cjs');
11
+ require('../../style-map-ebf3a8d2.cjs');
12
12
  require('../../directive-8278ab14.cjs');
13
13
 
14
14
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1,10 +1,10 @@
1
- import { a as TailwindElement, x } from '../../index-bf6e0a1d.js';
1
+ import { a as TailwindElement, x } from '../../index-09db75ee.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { c as ce } from '../../index-ca8e900d.js';
4
4
  import '../lukso-image/index.js';
5
5
  import '../../bundle-mjs-fbc6e2a8.js';
6
6
  import '../../state-b9ca4e74.js';
7
- import '../../style-map-c66282ea.js';
7
+ import '../../style-map-3669b30c.js';
8
8
  import '../../directive-2bb7789e.js';
9
9
 
10
10
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-25503efb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
- const styleMap = require('../../style-map-6337084a.cjs');
7
+ const styleMap = require('../../style-map-ebf3a8d2.cjs');
8
8
  require('../../tailwind-config.cjs');
9
9
  const cn = require('../../cn-5ceac001.cjs');
10
10
  require('../../directive-8278ab14.cjs');
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-bf6e0a1d.js';
1
+ import { a as TailwindElement, x } from '../../index-09db75ee.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
- import { o } from '../../style-map-c66282ea.js';
3
+ import { o } from '../../style-map-3669b30c.js';
4
4
  import '../../tailwind-config.js';
5
5
  import { c as cn } from '../../cn-b54dcc61.js';
6
6
  import '../../directive-2bb7789e.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-25503efb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { A, b as T, a as TailwindElement, x } from '../../index-bf6e0a1d.js';
1
+ import { A, b as T, a as TailwindElement, x } from '../../index-09db75ee.js';
2
2
  import { n, e as e$2 } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
4
4
 
@@ -2,19 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-25503efb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
- const index = require('../../index-e9668573.cjs');
8
+ const index = require('../../index-1d3f4a5a.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-profile/index.cjs');
11
11
  require('../lukso-username/index.cjs');
12
- require('../../directive-8278ab14.cjs');
13
- require('../../style-map-6337084a.cjs');
14
- require('../../index-1d3f4a5a.cjs');
12
+ require('../lukso-input/index.cjs');
15
13
  require('../../bundle-mjs-d58a83c6.cjs');
14
+ require('../../style-map-ebf3a8d2.cjs');
15
+ require('../../directive-8278ab14.cjs');
16
16
  require('../lukso-image/index.cjs');
17
- require('../../index-59f199b0.cjs');
17
+ require('../../index-e9668573.cjs');
18
+ require('../../index-a1e4b7d4.cjs');
19
+ require('../../tailwind-config.cjs');
20
+ require('../../cn-5ceac001.cjs');
18
21
 
19
22
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
20
23
 
@@ -51,15 +54,54 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
51
54
  this.isSearching = false;
52
55
  this.noResultsText = "";
53
56
  this.showNoResults = false;
57
+ this.hideLoading = false;
54
58
  this.selected = void 0;
55
- this.hasFocus = false;
56
- this.hasHighlight = false;
59
+ this.size = "medium";
57
60
  this.isDebouncing = false;
58
61
  this.resultsParsed = [];
59
62
  this.searchTerm = "";
60
- this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-10
61
- border-solid h-[48px] placeholder:text-neutral-70
62
- outline-none transition transition-all duration-150 appearance-none rounded-12`;
63
+ this.inputStyles = index.ce({
64
+ slots: {
65
+ dropdownWrapper: "bg-neutral-100 border border-neutral-90 shadow-1xl z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64",
66
+ loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
67
+ },
68
+ variants: {
69
+ size: {
70
+ small: {
71
+ dropdownWrapper: "rounded-8 p-2 mt-1",
72
+ loading: "h-7 rounded-4"
73
+ },
74
+ medium: {
75
+ dropdownWrapper: "rounded-12 p-3 mt-2",
76
+ loading: "h-10 rounded-8"
77
+ }
78
+ }
79
+ }
80
+ });
81
+ this.resultStyles = index.ce({
82
+ slots: {
83
+ resultString: "text-neutral-20 cursor-pointer hover:bg-neutral-98",
84
+ resultProfile: "cursor-pointer hover:bg-neutral-98 flex gap-2 items-center"
85
+ },
86
+ variants: {
87
+ selected: {
88
+ true: {
89
+ resultString: "bg-neutral-98",
90
+ resultProfile: "bg-neutral-98"
91
+ }
92
+ },
93
+ size: {
94
+ small: {
95
+ resultString: "paragraph-inter-12-regular rounded-4 py-1 px-2",
96
+ resultProfile: "rounded-4 py-1 px-2"
97
+ },
98
+ medium: {
99
+ resultString: "paragraph-inter-14-regular rounded-8 p-2",
100
+ resultProfile: "rounded-8 p-2"
101
+ }
102
+ }
103
+ }
104
+ });
63
105
  }
64
106
  connectedCallback() {
65
107
  super.connectedCallback();
@@ -88,62 +130,6 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
88
130
  }
89
131
  }
90
132
  }
91
- inputTemplate() {
92
- return shared_tailwindElement_index.x`
93
- <input
94
- name=${this.name}
95
- type="text"
96
- .value=${this.value}
97
- placeholder=${this.placeholder}
98
- ?autofocus=${this.autofocus}
99
- autocomplete=${this.autocomplete}
100
- id=${this.id || this.name}
101
- data-testid=${this.name ? `input-${this.name}` : "input"}
102
- data-component="lukso-search"
103
- ?readonly=${this.isReadonly ? true : void 0}
104
- ?disabled=${this.isDisabled ? true : void 0}
105
- class=${index.customClassMap({
106
- [this.defaultInputStyles]: true,
107
- [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
108
- [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
109
- ["w-full"]: this.isFullWidth,
110
- ["w-[350px]"]: !this.isFullWidth,
111
- ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
112
- ["text-neutral-20"]: !this.isDisabled,
113
- ["cursor-not-allowed"]: this.isReadonly,
114
- [this.customClass]: !!this.customClass,
115
- [this.borderless ? "border-0" : "border"]: true
116
- })}
117
- @focus=${this.handleFocus}
118
- @input=${this.handleSearch}
119
- @blur=${this.handleBlur}
120
- @click=${this.handleInputClick}
121
- @mouseenter=${this.handleMouseOver}
122
- @mouseleave=${this.handleMouseOut}
123
- />
124
- `;
125
- }
126
- labelTemplate() {
127
- return shared_tailwindElement_index.x`
128
- <label
129
- for=${this.name}
130
- class="heading-inter-14-bold text-neutral-20 pb-2 block"
131
- >${this.label}</label
132
- >
133
- `;
134
- }
135
- descriptionTemplate() {
136
- return shared_tailwindElement_index.x`
137
- <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
138
- ${this.description ?? shared_tailwindElement_index.A}
139
- </div>
140
- `;
141
- }
142
- errorTemplate() {
143
- return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
144
- ${this.error}
145
- </div>`;
146
- }
147
133
  resultsTemplate() {
148
134
  const resultTemplates = [];
149
135
  this.resultsParsed = JSON.parse(this.results);
@@ -167,66 +153,58 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
167
153
  )}`;
168
154
  }
169
155
  loadingTemplate() {
156
+ const { loading } = this.inputStyles({
157
+ size: this.size
158
+ });
170
159
  if (this.showNoResults) {
171
160
  return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
172
161
  <div role="status" class="flex flex-col gap-1">
173
- <div
174
- class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
175
- ></div>
162
+ <div class=${loading()}></div>
176
163
  </div>
177
164
  `)}`;
178
165
  }
179
166
  if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
180
167
  return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
181
168
  <div role="status" class="flex flex-col gap-1">
182
- ${[...Array(5)].map(
183
- () => shared_tailwindElement_index.x`<div
184
- class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
185
- ></div>`
186
- )}
169
+ ${[...Array(5)].map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
187
170
  </div>
188
171
  `)}`;
189
172
  }
190
173
  return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
191
174
  <div role="status" class="flex flex-col gap-1">
192
- ${this.resultsParsed.map(
193
- () => shared_tailwindElement_index.x`<div
194
- class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
195
- ></div>`
196
- )}
175
+ ${this.resultsParsed.map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
197
176
  </div>
198
177
  `)}`;
199
178
  }
200
179
  dropdownWrapperTemplate(innerTemplate) {
201
- return shared_tailwindElement_index.x`<div
202
- class="bg-neutral-100 border border-neutral-90 shadow-1xl rounded-12 p-3 mt-2 z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64"
203
- >
204
- ${innerTemplate}
205
- </div>`;
180
+ const { dropdownWrapper } = this.inputStyles({
181
+ size: this.size
182
+ });
183
+ return shared_tailwindElement_index.x`<div class=${dropdownWrapper()}>${innerTemplate}</div>`;
206
184
  }
207
- resultStringTemplate(result, index$1) {
185
+ resultStringTemplate(result, index) {
186
+ const { resultString } = this.resultStyles({
187
+ selected: this.selected === index + 1,
188
+ size: this.size
189
+ });
208
190
  return shared_tailwindElement_index.x`<div
209
191
  data-id="${result.id}"
210
- data-index="${index$1 + 1}"
211
- class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${index.customClassMap(
212
- {
213
- ["bg-neutral-98"]: this.selected === index$1 + 1
214
- }
215
- )}"
192
+ data-index="${index + 1}"
193
+ class=${resultString()}
216
194
  @click=${() => this.handleSelect(result)}
217
195
  >
218
196
  ${result.value}
219
197
  </div>`;
220
198
  }
221
- resultProfileTemplate(result, index$1) {
199
+ resultProfileTemplate(result, index) {
200
+ const { resultProfile } = this.resultStyles({
201
+ selected: this.selected === index + 1,
202
+ size: this.size
203
+ });
222
204
  return shared_tailwindElement_index.x`<div
223
205
  data-id="${result.address}"
224
- data-index="${index$1 + 1}"
225
- class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${index.customClassMap(
226
- {
227
- ["bg-neutral-98"]: this.selected === index$1 + 1
228
- }
229
- )}"
206
+ data-index="${index + 1}"
207
+ class=${resultProfile()}
230
208
  @click=${() => this.handleSelect(result)}
231
209
  >
232
210
  <lukso-profile
@@ -285,16 +263,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
285
263
  });
286
264
  this.dispatchEvent(selectEvent);
287
265
  }
288
- handleFocus() {
289
- if (!this.isReadonly && !this.isDisabled) {
290
- this.hasFocus = true;
291
- this.hasHighlight = true;
292
- }
293
- }
294
266
  async handleBlur(event) {
295
267
  await this.updateComplete;
296
- this.hasFocus = false;
297
- this.hasHighlight = false;
298
268
  const target = event.target;
299
269
  const blurEvent = new CustomEvent("on-blur", {
300
270
  detail: {
@@ -317,7 +287,6 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
317
287
  bubbles: false,
318
288
  composed: true
319
289
  });
320
- this.handleSearch(event);
321
290
  this.dispatchEvent(clickEvent);
322
291
  }
323
292
  async searchDebounce(searchTerm) {
@@ -343,40 +312,37 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
343
312
  const target = event.target;
344
313
  this.searchDebounce(target.value);
345
314
  }
346
- handleMouseOver() {
347
- if (!this.isReadonly && !this.isDisabled) {
348
- this.hasHighlight = true;
349
- }
350
- }
351
- handleMouseOut() {
352
- if (!this.hasFocus) {
353
- this.hasHighlight = false;
354
- }
355
- }
356
315
  render() {
357
316
  return shared_tailwindElement_index.x`
358
317
  <div class="relative w-full">
359
- ${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
360
- ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.A}
361
- <div class="flex relative items-center">
362
- ${this.inputTemplate()}
363
- <lukso-icon
364
- name="search"
365
- class="absolute right-0 mr-3 ${index.customClassMap({
366
- ["opacity-60 cursor-not-allowed"]: this.isDisabled,
367
- ["cursor-not-allowed"]: this.isReadonly
368
- })}"
369
- @mouseenter=${this.handleMouseOver}
370
- ></lukso-icon>
371
- </div>
318
+ <lukso-input
319
+ name=${this.name}
320
+ type="text"
321
+ value=${this.value}
322
+ placeholder=${this.placeholder}
323
+ autocomplete=${this.autocomplete}
324
+ label=${this.label}
325
+ description=${this.description}
326
+ error=${this.error}
327
+ custom-class=${this.customClass}
328
+ id=${this.id}
329
+ size=${this.size}
330
+ data-component="lukso-search"
331
+ right-icon="search"
332
+ ?autofocus=${this.autofocus}
333
+ ?readonly=${this.isReadonly}
334
+ ?disabled=${this.isDisabled}
335
+ ?is-full-width=${this.isFullWidth}
336
+ @on-input=${this.handleSearch}
337
+ @on-blur=${this.handleBlur}
338
+ @on-input-click=${this.handleInputClick}
339
+ ></lukso-input>
372
340
  <!-- results dropdown -->
373
341
  ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : shared_tailwindElement_index.A}
374
342
  <!-- no results dropdown -->
375
343
  ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : shared_tailwindElement_index.A}
376
344
  <!-- loading dropdown -->
377
- ${this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : shared_tailwindElement_index.A}
378
- <!-- error -->
379
- ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
345
+ ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : shared_tailwindElement_index.A}
380
346
  </div>
381
347
  `;
382
348
  }
@@ -438,15 +404,15 @@ __decorateClass([
438
404
  __decorateClass([
439
405
  queryAssignedElements.n({ type: Boolean, attribute: "show-no-results" })
440
406
  ], exports.LuksoSearch.prototype, "showNoResults", 2);
407
+ __decorateClass([
408
+ queryAssignedElements.n({ type: Boolean, attribute: "hide-loading" })
409
+ ], exports.LuksoSearch.prototype, "hideLoading", 2);
441
410
  __decorateClass([
442
411
  queryAssignedElements.n({ type: Number })
443
412
  ], exports.LuksoSearch.prototype, "selected", 2);
444
413
  __decorateClass([
445
- state.t()
446
- ], exports.LuksoSearch.prototype, "hasFocus", 2);
447
- __decorateClass([
448
- state.t()
449
- ], exports.LuksoSearch.prototype, "hasHighlight", 2);
414
+ queryAssignedElements.n({ type: String })
415
+ ], exports.LuksoSearch.prototype, "size", 2);
450
416
  __decorateClass([
451
417
  state.t()
452
418
  ], exports.LuksoSearch.prototype, "isDebouncing", 2);
@@ -1,5 +1,5 @@
1
- import { PropertyValues, TemplateResult } from 'lit';
2
- import { Address } from '../../shared/types';
1
+ import { type PropertyValues, type TemplateResult } from 'lit';
2
+ import type { Address, InputSize } from '../../shared/types';
3
3
  export type SearchStringResult = {
4
4
  id?: string;
5
5
  value: string;
@@ -31,21 +31,18 @@ export declare class LuksoSearch extends LuksoSearch_base {
31
31
  isSearching: boolean;
32
32
  noResultsText: string;
33
33
  showNoResults: boolean;
34
+ hideLoading: boolean;
34
35
  selected: any;
35
- private hasFocus;
36
- private hasHighlight;
36
+ size: InputSize;
37
37
  private isDebouncing;
38
38
  private debounceTimer;
39
39
  private resultsParsed;
40
40
  private searchTerm;
41
- private defaultInputStyles;
41
+ private inputStyles;
42
+ private resultStyles;
42
43
  connectedCallback(): void;
43
44
  disconnectedCallback(): void;
44
45
  willUpdate(changedProperties: PropertyValues<this>): void;
45
- inputTemplate(): TemplateResult<1>;
46
- labelTemplate(): TemplateResult<1>;
47
- descriptionTemplate(): TemplateResult<1>;
48
- errorTemplate(): TemplateResult<1>;
49
46
  resultsTemplate(): TemplateResult<1>;
50
47
  noResultsTemplate(): TemplateResult<1>;
51
48
  loadingTemplate(): TemplateResult<1>;
@@ -55,13 +52,10 @@ export declare class LuksoSearch extends LuksoSearch_base {
55
52
  private handleOutsideDropdownClick;
56
53
  private handleDropdownKeydown;
57
54
  private handleSelect;
58
- private handleFocus;
59
55
  private handleBlur;
60
56
  private handleInputClick;
61
57
  private searchDebounce;
62
58
  private handleSearch;
63
- private handleMouseOver;
64
- private handleMouseOut;
65
59
  render(): TemplateResult<1>;
66
60
  }
67
61
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,QAAQ,MAAY;IAGpB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,aAAa;IAsCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IAuCf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAe9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA2BlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;IAY1B,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,gBAAgB;YAehB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAGnB,QAAQ,MAAY;IAGpB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IA+Bf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAgB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA4BlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;YAYZ,UAAU;YAcV,gBAAgB;YAchB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}