@lukso/web-components 1.88.1 → 1.89.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 (79) hide show
  1. package/dist/components/index.cjs +9 -4
  2. package/dist/components/index.d.ts +1 -0
  3. package/dist/components/index.d.ts.map +1 -1
  4. package/dist/components/index.js +5 -4
  5. package/dist/components/lukso-button/index.cjs +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-color-picker/index.cjs +340 -0
  12. package/dist/components/lukso-color-picker/index.d.ts +39 -0
  13. package/dist/components/lukso-color-picker/index.d.ts.map +1 -0
  14. package/dist/components/lukso-color-picker/index.js +338 -0
  15. package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts +19 -0
  16. package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts.map +1 -0
  17. package/dist/components/lukso-dropdown/index.cjs +4 -4
  18. package/dist/components/lukso-dropdown/index.js +4 -4
  19. package/dist/components/lukso-dropdown-option/index.cjs +1 -1
  20. package/dist/components/lukso-dropdown-option/index.js +1 -1
  21. package/dist/components/lukso-footer/index.cjs +1 -1
  22. package/dist/components/lukso-footer/index.js +1 -1
  23. package/dist/components/lukso-icon/index.cjs +2 -2
  24. package/dist/components/lukso-icon/index.js +2 -2
  25. package/dist/components/lukso-image/index.cjs +2 -2
  26. package/dist/components/lukso-image/index.js +2 -2
  27. package/dist/components/lukso-input/index.cjs +7 -7
  28. package/dist/components/lukso-input/index.d.ts +1 -1
  29. package/dist/components/lukso-input/index.js +7 -7
  30. package/dist/components/lukso-modal/index.cjs +1 -1
  31. package/dist/components/lukso-modal/index.js +1 -1
  32. package/dist/components/lukso-navbar/index.cjs +3 -3
  33. package/dist/components/lukso-navbar/index.js +3 -3
  34. package/dist/components/lukso-pagination/index.cjs +2 -2
  35. package/dist/components/lukso-pagination/index.js +2 -2
  36. package/dist/components/lukso-profile/index.cjs +2 -2
  37. package/dist/components/lukso-profile/index.js +2 -2
  38. package/dist/components/lukso-progress/index.cjs +2 -2
  39. package/dist/components/lukso-progress/index.js +2 -2
  40. package/dist/components/lukso-sanitize/index.cjs +1 -1
  41. package/dist/components/lukso-sanitize/index.js +1 -1
  42. package/dist/components/lukso-search/index.cjs +4 -4
  43. package/dist/components/lukso-search/index.js +4 -4
  44. package/dist/components/lukso-select/index.cjs +4 -4
  45. package/dist/components/lukso-select/index.js +4 -4
  46. package/dist/components/lukso-share/index.cjs +1 -1
  47. package/dist/components/lukso-share/index.js +1 -1
  48. package/dist/components/lukso-switch/index.cjs +2 -2
  49. package/dist/components/lukso-switch/index.js +2 -2
  50. package/dist/components/lukso-tag/index.cjs +2 -2
  51. package/dist/components/lukso-tag/index.js +2 -2
  52. package/dist/components/lukso-terms/index.cjs +2 -2
  53. package/dist/components/lukso-terms/index.js +2 -2
  54. package/dist/components/lukso-test/index.cjs +1 -1
  55. package/dist/components/lukso-test/index.js +1 -1
  56. package/dist/components/lukso-textarea/index.cjs +7 -7
  57. package/dist/components/lukso-textarea/index.d.ts +1 -1
  58. package/dist/components/lukso-textarea/index.js +7 -7
  59. package/dist/components/lukso-tooltip/index.cjs +2 -2
  60. package/dist/components/lukso-tooltip/index.js +2 -2
  61. package/dist/components/lukso-username/index.cjs +2 -2
  62. package/dist/components/lukso-username/index.js +2 -2
  63. package/dist/components/lukso-wizard/index.cjs +1 -1
  64. package/dist/components/lukso-wizard/index.js +1 -1
  65. package/dist/{index-0f429f67.js → index-0b520c6a.js} +1 -1
  66. package/dist/index-31c27410.cjs +46 -0
  67. package/dist/{index-8186b19a.cjs → index-3429e18a.cjs} +1 -1
  68. package/dist/{index-752774b2.cjs → index-bca7ccb0.cjs} +1 -1
  69. package/dist/{index-62e802f0.js → index-c6f49fea.js} +1 -1
  70. package/dist/index-e73db22f.js +39 -0
  71. package/dist/index.cjs +9 -4
  72. package/dist/index.js +5 -4
  73. package/dist/shared/tailwind-element/index.cjs +1 -1
  74. package/dist/shared/tailwind-element/index.js +1 -1
  75. package/dist/{style-map-272091aa.cjs → style-map-77b74f74.cjs} +1 -1
  76. package/dist/{style-map-f7093d93.js → style-map-d5d85b80.js} +1 -1
  77. package/package.json +6 -1
  78. package/dist/index-14baf4da.js +0 -39
  79. package/dist/index-8322d22b.cjs +0 -46
@@ -0,0 +1,338 @@
1
+ import { T as TailwindStyledElement, x, A } from '../../index-e73db22f.js';
2
+ import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
+ import { t } from '../../state-b9ca4e74.js';
4
+ import { c as ce } from '../../index-ca8e900d.js';
5
+ import { o } from '../../style-map-d5d85b80.js';
6
+ import '../../tailwind-config.js';
7
+ import { c as cn } from '../../cn-b54dcc61.js';
8
+ import '../lukso-icon/index.js';
9
+ import '../../bundle-mjs-fbc6e2a8.js';
10
+ import '../../directive-2bb7789e.js';
11
+
12
+ const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
13
+
14
+ var __defProp = Object.defineProperty;
15
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
16
+ var __decorateClass = (decorators, target, key, kind) => {
17
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
18
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
19
+ if (decorator = decorators[i])
20
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
21
+ if (kind && result)
22
+ __defProp(target, key, result);
23
+ return result;
24
+ };
25
+ let LuksoColorPicker = class extends TailwindStyledElement(style) {
26
+ constructor() {
27
+ super(...arguments);
28
+ this.value = "";
29
+ this.name = "";
30
+ this.placeholder = "#000000";
31
+ this.label = "";
32
+ this.id = "";
33
+ this.description = "";
34
+ this.error = "";
35
+ this.customClass = "";
36
+ this.isFullWidth = false;
37
+ this.isReadonly = false;
38
+ this.isDisabled = false;
39
+ this.autofocus = false;
40
+ this.size = "medium";
41
+ this.hasFocus = false;
42
+ this.hasHighlight = false;
43
+ this.styles = ce({
44
+ slots: {
45
+ wrapper: "group grid border overflow-hidden",
46
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
47
+ outline-none transition transition-all duration-150 appearance-none`,
48
+ color: "border-r border-solid",
49
+ colorInput: "h-[inherit] w-[inherit] opacity-0"
50
+ },
51
+ variants: {
52
+ hasError: {
53
+ true: {
54
+ wrapper: "border-red-85 hover:border-red-65",
55
+ color: "border-red-85 group-hover:border-red-65"
56
+ },
57
+ false: {
58
+ wrapper: "border-neutral-90",
59
+ color: "border-neutral-90"
60
+ }
61
+ },
62
+ hasHighlight: {
63
+ true: {
64
+ wrapper: "border-neutral-35",
65
+ color: "border-neutral-35"
66
+ }
67
+ },
68
+ isReadonly: {
69
+ true: { input: "cursor-not-allowed", colorInput: "cursor-not-allowed" }
70
+ },
71
+ isDisabled: {
72
+ true: {
73
+ input: "text-neutral-60 cursor-not-allowed",
74
+ color: "opacity-50",
75
+ colorInput: "cursor-not-allowed"
76
+ },
77
+ false: {
78
+ wrapper: "hover:border-neutral-35",
79
+ input: "text-neutral-20",
80
+ color: "group-hover:border-neutral-35"
81
+ }
82
+ },
83
+ isFullWidth: {
84
+ true: { wrapper: "w-full" },
85
+ false: { wrapper: "w-[350px]" }
86
+ },
87
+ size: {
88
+ small: {
89
+ wrapper: "grid-cols-[28px,auto] rounded-8",
90
+ input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-r-8",
91
+ color: "h-[28px] w-[28px]"
92
+ },
93
+ medium: {
94
+ wrapper: "grid-cols-[48px,auto] rounded-12",
95
+ input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-r-12",
96
+ color: "h-[48px] w-[48px]"
97
+ }
98
+ }
99
+ },
100
+ compoundVariants: [
101
+ {
102
+ isFullWidth: false,
103
+ class: { wrapper: "w-[300px]" }
104
+ },
105
+ {
106
+ isFullWidth: false,
107
+ size: "small",
108
+ class: { wrapper: "w-[190px]" }
109
+ },
110
+ {
111
+ isFullWidth: false,
112
+ size: "small",
113
+ class: { wrapper: "w-[210px]" }
114
+ },
115
+ {
116
+ hasHighlight: true,
117
+ hasError: true,
118
+ class: {
119
+ wrapper: "border-red-65 hover:border-red-65",
120
+ color: "border-red-65 group-hover:border-red-65"
121
+ }
122
+ },
123
+ {
124
+ isReadonly: false,
125
+ isDisabled: false,
126
+ class: {
127
+ colorInput: "cursor-pointer"
128
+ }
129
+ }
130
+ ]
131
+ });
132
+ }
133
+ inputTemplate(styles) {
134
+ return x`
135
+ <input
136
+ .value=${this.value}
137
+ name=${this.name ? this.name : A}
138
+ type="text"
139
+ placeholder=${this.placeholder ? this.placeholder : A}
140
+ ?autofocus=${this.autofocus}
141
+ autocomplete="off"
142
+ id=${this.id ? this.id : A}
143
+ data-testid=${this.name ? `input-${this.name}` : "input"}
144
+ ?readonly=${this.isReadonly ? true : void 0}
145
+ ?disabled=${this.isDisabled ? true : void 0}
146
+ class=${cn(styles, this.customClass)}
147
+ @focus=${this.handleFocus}
148
+ @input=${this.handleInput}
149
+ @change=${this.handleChange}
150
+ @blur=${this.handleBlur}
151
+ @keyup=${this.handleKeyUp}
152
+ @keydown=${this.handleKeyDown}
153
+ />
154
+ `;
155
+ }
156
+ colorPickerTemplate(styles, colorInputStyles) {
157
+ return x`<div
158
+ class=${styles}
159
+ style=${o({
160
+ backgroundColor: `${this.value}`
161
+ })}
162
+ >
163
+ <input
164
+ .value=${this.value}
165
+ type="color"
166
+ ?disabled=${this.isDisabled || this.isReadonly ? true : void 0}
167
+ class=${colorInputStyles}
168
+ @input=${this.handleInput}
169
+ />
170
+ </div>`;
171
+ }
172
+ labelTemplate() {
173
+ return x`
174
+ <label
175
+ for=${this.name}
176
+ class="heading-inter-14-bold text-neutral-20 pb-2 block"
177
+ >${this.label}</label
178
+ >
179
+ `;
180
+ }
181
+ descriptionTemplate() {
182
+ return x`
183
+ <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
184
+ ${this.description ?? A}
185
+ </div>
186
+ `;
187
+ }
188
+ errorTemplate() {
189
+ return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
190
+ ${this.error}
191
+ </div>`;
192
+ }
193
+ handleFocus() {
194
+ if (!this.isReadonly && !this.isDisabled) {
195
+ this.hasFocus = true;
196
+ this.hasHighlight = true;
197
+ }
198
+ }
199
+ async handleBlur(event) {
200
+ this.hasFocus = false;
201
+ this.hasHighlight = false;
202
+ await this.updateComplete;
203
+ const target = event.target;
204
+ const blurEvent = new CustomEvent("on-blur", {
205
+ detail: {
206
+ value: target?.value,
207
+ event
208
+ },
209
+ bubbles: false,
210
+ composed: true
211
+ });
212
+ this.dispatchEvent(blurEvent);
213
+ }
214
+ async handleChange(event) {
215
+ await this.updateComplete;
216
+ const target = event.target;
217
+ const changeEvent = new CustomEvent("on-change", {
218
+ detail: {
219
+ value: target?.value,
220
+ event
221
+ },
222
+ bubbles: false,
223
+ composed: true
224
+ });
225
+ this.dispatchEvent(changeEvent);
226
+ }
227
+ async handleInput(event) {
228
+ await this.updateComplete;
229
+ const target = event.target;
230
+ this.value = target?.value;
231
+ const changeEvent = new CustomEvent("on-input", {
232
+ detail: {
233
+ value: target?.value,
234
+ event
235
+ },
236
+ bubbles: false,
237
+ composed: true
238
+ });
239
+ this.dispatchEvent(changeEvent);
240
+ }
241
+ async handleKeyUp(event) {
242
+ await this.updateComplete;
243
+ const target = event.target;
244
+ const keyEvent = new CustomEvent("on-key-up", {
245
+ detail: {
246
+ value: target?.value,
247
+ event
248
+ },
249
+ bubbles: true,
250
+ composed: true
251
+ });
252
+ this.dispatchEvent(keyEvent);
253
+ }
254
+ async handleKeyDown(event) {
255
+ await this.updateComplete;
256
+ const target = event.target;
257
+ const keyEvent = new CustomEvent("on-key-down", {
258
+ detail: {
259
+ value: target.value,
260
+ event
261
+ },
262
+ bubbles: true,
263
+ composed: true
264
+ });
265
+ this.dispatchEvent(keyEvent);
266
+ }
267
+ render() {
268
+ const { wrapper, input, color, colorInput } = this.styles({
269
+ hasError: this.error !== "",
270
+ hasHighlight: this.hasHighlight,
271
+ isReadonly: this.isReadonly,
272
+ isDisabled: this.isDisabled,
273
+ isFullWidth: this.isFullWidth,
274
+ size: this.size
275
+ });
276
+ return x`
277
+ <div class="w-[inherit]">
278
+ ${this.label ? this.labelTemplate() : A}
279
+ ${this.description ? this.descriptionTemplate() : A}
280
+ <div class=${wrapper()}>
281
+ ${this.colorPickerTemplate(color(), colorInput())}
282
+ <div class="relative w-full">${this.inputTemplate(input())}</div>
283
+ </div>
284
+ ${this.error ? this.errorTemplate() : A}
285
+ </div>
286
+ `;
287
+ }
288
+ };
289
+ __decorateClass([
290
+ n({ type: String })
291
+ ], LuksoColorPicker.prototype, "value", 2);
292
+ __decorateClass([
293
+ n({ type: String })
294
+ ], LuksoColorPicker.prototype, "name", 2);
295
+ __decorateClass([
296
+ n({ type: String })
297
+ ], LuksoColorPicker.prototype, "placeholder", 2);
298
+ __decorateClass([
299
+ n({ type: String })
300
+ ], LuksoColorPicker.prototype, "label", 2);
301
+ __decorateClass([
302
+ n({ type: String })
303
+ ], LuksoColorPicker.prototype, "id", 2);
304
+ __decorateClass([
305
+ n({ type: String })
306
+ ], LuksoColorPicker.prototype, "description", 2);
307
+ __decorateClass([
308
+ n({ type: String })
309
+ ], LuksoColorPicker.prototype, "error", 2);
310
+ __decorateClass([
311
+ n({ type: String, attribute: "custom-class" })
312
+ ], LuksoColorPicker.prototype, "customClass", 2);
313
+ __decorateClass([
314
+ n({ type: Boolean, attribute: "is-full-width" })
315
+ ], LuksoColorPicker.prototype, "isFullWidth", 2);
316
+ __decorateClass([
317
+ n({ type: Boolean, attribute: "is-readonly" })
318
+ ], LuksoColorPicker.prototype, "isReadonly", 2);
319
+ __decorateClass([
320
+ n({ type: Boolean, attribute: "is-disabled" })
321
+ ], LuksoColorPicker.prototype, "isDisabled", 2);
322
+ __decorateClass([
323
+ n({ type: Boolean })
324
+ ], LuksoColorPicker.prototype, "autofocus", 2);
325
+ __decorateClass([
326
+ n({ type: String })
327
+ ], LuksoColorPicker.prototype, "size", 2);
328
+ __decorateClass([
329
+ t()
330
+ ], LuksoColorPicker.prototype, "hasFocus", 2);
331
+ __decorateClass([
332
+ t()
333
+ ], LuksoColorPicker.prototype, "hasHighlight", 2);
334
+ LuksoColorPicker = __decorateClass([
335
+ e("lukso-color-picker")
336
+ ], LuksoColorPicker);
337
+
338
+ export { LuksoColorPicker };
@@ -0,0 +1,19 @@
1
+ import type { Meta } from '@storybook/web-components';
2
+ /** Documentation and examples of `lukso-color-picker` component. */
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ /** Example of default input with `value`. */
6
+ export declare const DefaultInput: any;
7
+ /** Example of input with `placeholder` text. */
8
+ export declare const PlaceholderText: any;
9
+ /** Example of input with `label`. */
10
+ export declare const Label: any;
11
+ /** Example of input with `label` and `description`. */
12
+ export declare const LabelAndDescription: any;
13
+ /** Example of input with `error`. */
14
+ export declare const ErrorInput: any;
15
+ /** If you need input to take full width of the parent element add `is-full-width` property. */
16
+ export declare const FullWidth: any;
17
+ /** Example of `small` size input. */
18
+ export declare const Small: any;
19
+ //# sourceMappingURL=lukso-color-picker.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lukso-color-picker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/lukso-color-picker.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,sEAAsE;AACtE,QAAA,MAAM,IAAI,EAAE,IA+KX,CAAA;AAED,eAAe,IAAI,CAAA;AA2CnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAE7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAMhD,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAO3C,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA"}
@@ -2,19 +2,19 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- require('../../index-8322d22b.cjs');
5
+ require('../../index-31c27410.cjs');
6
6
  require('../../query-assigned-elements-d5e45650.cjs');
7
7
  require('../../state-d9fb972b.cjs');
8
8
  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
- const components_luksoDropdown_index = require('../../index-8186b19a.cjs');
12
+ const components_luksoDropdown_index = require('../../index-3429e18a.cjs');
13
13
  require('../../bundle-mjs-d58a83c6.cjs');
14
- require('../../style-map-272091aa.cjs');
14
+ require('../../style-map-77b74f74.cjs');
15
15
  require('../../directive-8278ab14.cjs');
16
16
  require('../lukso-image/index.cjs');
17
- require('../../index-752774b2.cjs');
17
+ require('../../index-bca7ccb0.cjs');
18
18
  require('../../tailwind-config.cjs');
19
19
  require('../../cn-5ceac001.cjs');
20
20
 
@@ -1,15 +1,15 @@
1
- import '../../index-14baf4da.js';
1
+ import '../../index-e73db22f.js';
2
2
  import '../../query-assigned-elements-1c8c9e90.js';
3
3
  import '../../state-b9ca4e74.js';
4
4
  import '../../index-ca8e900d.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-profile/index.js';
7
7
  import '../lukso-username/index.js';
8
- export { L as LuksoDropdown } from '../../index-62e802f0.js';
8
+ export { L as LuksoDropdown } from '../../index-c6f49fea.js';
9
9
  import '../../bundle-mjs-fbc6e2a8.js';
10
- import '../../style-map-f7093d93.js';
10
+ import '../../style-map-d5d85b80.js';
11
11
  import '../../directive-2bb7789e.js';
12
12
  import '../lukso-image/index.js';
13
- import '../../index-0f429f67.js';
13
+ import '../../index-0b520c6a.js';
14
14
  import '../../tailwind-config.js';
15
15
  import '../../cn-b54dcc61.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-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-1d3f4a5a.cjs');
8
8
  require('../../bundle-mjs-d58a83c6.cjs');
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-14baf4da.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-e73db22f.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 '../../bundle-mjs-fbc6e2a8.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-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
 
8
8
  var __defProp = Object.defineProperty;
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-14baf4da.js';
1
+ import { a as TailwindElement, x } from '../../index-e73db22f.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
 
4
4
  var __defProp = Object.defineProperty;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
- const styleMap = require('../../style-map-272091aa.cjs');
7
+ const styleMap = require('../../style-map-77b74f74.cjs');
8
8
  require('../../directive-8278ab14.cjs');
9
9
 
10
10
  const style = ":host {\n display: inline-flex\n}";
@@ -1,6 +1,6 @@
1
- import { x, T as TailwindStyledElement } from '../../index-14baf4da.js';
1
+ import { x, T as TailwindStyledElement } from '../../index-e73db22f.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
- import { o } from '../../style-map-f7093d93.js';
3
+ import { o } from '../../style-map-d5d85b80.js';
4
4
  import '../../directive-2bb7789e.js';
5
5
 
6
6
  const style = ":host {\n display: inline-flex\n}";
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
- const styleMap = require('../../style-map-272091aa.cjs');
8
+ const styleMap = require('../../style-map-77b74f74.cjs');
9
9
  const index = require('../../index-1d3f4a5a.cjs');
10
10
  require('../../directive-8278ab14.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
@@ -1,7 +1,7 @@
1
- import { a as TailwindElement, x } from '../../index-14baf4da.js';
1
+ import { a as TailwindElement, x } from '../../index-e73db22f.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
- import { o } from '../../style-map-f7093d93.js';
4
+ import { o } from '../../style-map-d5d85b80.js';
5
5
  import { c as ce } from '../../index-ca8e900d.js';
6
6
  import '../../directive-2bb7789e.js';
7
7
  import '../../bundle-mjs-fbc6e2a8.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-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.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');
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-5ceac001.cjs');
11
11
  require('../lukso-icon/index.cjs');
12
12
  require('../../bundle-mjs-d58a83c6.cjs');
13
- require('../../style-map-272091aa.cjs');
13
+ require('../../style-map-77b74f74.cjs');
14
14
  require('../../directive-8278ab14.cjs');
15
15
 
16
16
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -52,7 +52,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
52
52
  this.size = "medium";
53
53
  this.rightIcon = "";
54
54
  this.isRightIconClickable = false;
55
- this.hasHocus = false;
55
+ this.hasFocus = false;
56
56
  this.hasHighlight = false;
57
57
  this.inputStyles = index.ce({
58
58
  slots: {
@@ -233,12 +233,12 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
233
233
  }
234
234
  handleFocus() {
235
235
  if (!this.isReadonly && !this.isDisabled) {
236
- this.hasHocus = true;
236
+ this.hasFocus = true;
237
237
  this.hasHighlight = true;
238
238
  }
239
239
  }
240
240
  async handleBlur(event) {
241
- this.hasHocus = false;
241
+ this.hasFocus = false;
242
242
  this.hasHighlight = false;
243
243
  await this.updateComplete;
244
244
  const target = event.target;
@@ -324,7 +324,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
324
324
  }
325
325
  }
326
326
  handleMouseOut() {
327
- if (!this.hasHocus) {
327
+ if (!this.hasFocus) {
328
328
  this.hasHighlight = false;
329
329
  }
330
330
  }
@@ -464,7 +464,7 @@ __decorateClass([
464
464
  ], exports.LuksoInput.prototype, "isRightIconClickable", 2);
465
465
  __decorateClass([
466
466
  state.t()
467
- ], exports.LuksoInput.prototype, "hasHocus", 2);
467
+ ], exports.LuksoInput.prototype, "hasFocus", 2);
468
468
  __decorateClass([
469
469
  state.t()
470
470
  ], exports.LuksoInput.prototype, "hasHighlight", 2);
@@ -24,7 +24,7 @@ export declare class LuksoInput extends LuksoInput_base {
24
24
  size: InputSize;
25
25
  rightIcon: string;
26
26
  isRightIconClickable: boolean;
27
- private hasHocus;
27
+ private hasFocus;
28
28
  private hasHighlight;
29
29
  private inputStyles;
30
30
  inputTemplate(styles: string): import("lit-html").TemplateResult<1>;
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-14baf4da.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-e73db22f.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';
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-b54dcc61.js';
7
7
  import '../lukso-icon/index.js';
8
8
  import '../../bundle-mjs-fbc6e2a8.js';
9
- import '../../style-map-f7093d93.js';
9
+ import '../../style-map-d5d85b80.js';
10
10
  import '../../directive-2bb7789e.js';
11
11
 
12
12
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -48,7 +48,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
48
48
  this.size = "medium";
49
49
  this.rightIcon = "";
50
50
  this.isRightIconClickable = false;
51
- this.hasHocus = false;
51
+ this.hasFocus = false;
52
52
  this.hasHighlight = false;
53
53
  this.inputStyles = ce({
54
54
  slots: {
@@ -229,12 +229,12 @@ let LuksoInput = class extends TailwindStyledElement(style) {
229
229
  }
230
230
  handleFocus() {
231
231
  if (!this.isReadonly && !this.isDisabled) {
232
- this.hasHocus = true;
232
+ this.hasFocus = true;
233
233
  this.hasHighlight = true;
234
234
  }
235
235
  }
236
236
  async handleBlur(event) {
237
- this.hasHocus = false;
237
+ this.hasFocus = false;
238
238
  this.hasHighlight = false;
239
239
  await this.updateComplete;
240
240
  const target = event.target;
@@ -320,7 +320,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
320
320
  }
321
321
  }
322
322
  handleMouseOut() {
323
- if (!this.hasHocus) {
323
+ if (!this.hasFocus) {
324
324
  this.hasHighlight = false;
325
325
  }
326
326
  }
@@ -460,7 +460,7 @@ __decorateClass([
460
460
  ], LuksoInput.prototype, "isRightIconClickable", 2);
461
461
  __decorateClass([
462
462
  t()
463
- ], LuksoInput.prototype, "hasHocus", 2);
463
+ ], LuksoInput.prototype, "hasFocus", 2);
464
464
  __decorateClass([
465
465
  t()
466
466
  ], LuksoInput.prototype, "hasHighlight", 2);
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-1d3f4a5a.cjs');
8
8
  require('../../bundle-mjs-d58a83c6.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-14baf4da.js';
1
+ import { a as TailwindElement, x } from '../../index-e73db22f.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 '../../bundle-mjs-fbc6e2a8.js';
@@ -2,16 +2,16 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.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-272091aa.cjs');
12
+ require('../../style-map-77b74f74.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
- require('../../index-752774b2.cjs');
14
+ require('../../index-bca7ccb0.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-14baf4da.js';
1
+ import { a as TailwindElement, x, A } from '../../index-e73db22f.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-f7093d93.js';
8
+ import '../../style-map-d5d85b80.js';
9
9
  import '../../directive-2bb7789e.js';
10
- import '../../index-0f429f67.js';
10
+ import '../../index-0b520c6a.js';
11
11
 
12
12
  var __defProp = Object.defineProperty;
13
13
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;