@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.
- package/dist/components/index.cjs +9 -4
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -4
- package/dist/components/lukso-button/index.cjs +1 -1
- package/dist/components/lukso-button/index.js +1 -1
- package/dist/components/lukso-card/index.cjs +3 -3
- package/dist/components/lukso-card/index.js +3 -3
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-color-picker/index.cjs +340 -0
- package/dist/components/lukso-color-picker/index.d.ts +39 -0
- package/dist/components/lukso-color-picker/index.d.ts.map +1 -0
- package/dist/components/lukso-color-picker/index.js +338 -0
- package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts +19 -0
- package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts.map +1 -0
- package/dist/components/lukso-dropdown/index.cjs +4 -4
- package/dist/components/lukso-dropdown/index.js +4 -4
- package/dist/components/lukso-dropdown-option/index.cjs +1 -1
- package/dist/components/lukso-dropdown-option/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/index.cjs +2 -2
- package/dist/components/lukso-icon/index.js +2 -2
- package/dist/components/lukso-image/index.cjs +2 -2
- package/dist/components/lukso-image/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +7 -7
- package/dist/components/lukso-input/index.d.ts +1 -1
- package/dist/components/lukso-input/index.js +7 -7
- package/dist/components/lukso-modal/index.cjs +1 -1
- package/dist/components/lukso-modal/index.js +1 -1
- package/dist/components/lukso-navbar/index.cjs +3 -3
- package/dist/components/lukso-navbar/index.js +3 -3
- package/dist/components/lukso-pagination/index.cjs +2 -2
- package/dist/components/lukso-pagination/index.js +2 -2
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +2 -2
- package/dist/components/lukso-progress/index.js +2 -2
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +4 -4
- package/dist/components/lukso-search/index.js +4 -4
- package/dist/components/lukso-select/index.cjs +4 -4
- package/dist/components/lukso-select/index.js +4 -4
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +1 -1
- package/dist/components/lukso-test/index.js +1 -1
- package/dist/components/lukso-textarea/index.cjs +7 -7
- package/dist/components/lukso-textarea/index.d.ts +1 -1
- package/dist/components/lukso-textarea/index.js +7 -7
- package/dist/components/lukso-tooltip/index.cjs +2 -2
- package/dist/components/lukso-tooltip/index.js +2 -2
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/{index-0f429f67.js → index-0b520c6a.js} +1 -1
- package/dist/index-31c27410.cjs +46 -0
- package/dist/{index-8186b19a.cjs → index-3429e18a.cjs} +1 -1
- package/dist/{index-752774b2.cjs → index-bca7ccb0.cjs} +1 -1
- package/dist/{index-62e802f0.js → index-c6f49fea.js} +1 -1
- package/dist/index-e73db22f.js +39 -0
- package/dist/index.cjs +9 -4
- package/dist/index.js +5 -4
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-272091aa.cjs → style-map-77b74f74.cjs} +1 -1
- package/dist/{style-map-f7093d93.js → style-map-d5d85b80.js} +1 -1
- package/package.json +6 -1
- package/dist/index-14baf4da.js +0 -39
- 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-
|
|
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-
|
|
12
|
+
const components_luksoDropdown_index = require('../../index-3429e18a.cjs');
|
|
13
13
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
14
|
-
require('../../style-map-
|
|
14
|
+
require('../../style-map-77b74f74.cjs');
|
|
15
15
|
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../lukso-image/index.cjs');
|
|
17
|
-
require('../../index-
|
|
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-
|
|
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-
|
|
8
|
+
export { L as LuksoDropdown } from '../../index-c6f49fea.js';
|
|
9
9
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
10
|
-
import '../../style-map-
|
|
10
|
+
import '../../style-map-d5d85b80.js';
|
|
11
11
|
import '../../directive-2bb7789e.js';
|
|
12
12
|
import '../lukso-image/index.js';
|
|
13
|
-
import '../../index-
|
|
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-
|
|
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-
|
|
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-
|
|
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;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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.
|
|
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.
|
|
236
|
+
this.hasFocus = true;
|
|
237
237
|
this.hasHighlight = true;
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
async handleBlur(event) {
|
|
241
|
-
this.
|
|
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.
|
|
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, "
|
|
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
|
|
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-
|
|
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-
|
|
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.
|
|
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.
|
|
232
|
+
this.hasFocus = true;
|
|
233
233
|
this.hasHighlight = true;
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
async handleBlur(event) {
|
|
237
|
-
this.
|
|
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.
|
|
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, "
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
12
|
+
require('../../style-map-77b74f74.cjs');
|
|
13
13
|
require('../../directive-8278ab14.cjs');
|
|
14
|
-
require('../../index-
|
|
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-
|
|
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-
|
|
8
|
+
import '../../style-map-d5d85b80.js';
|
|
9
9
|
import '../../directive-2bb7789e.js';
|
|
10
|
-
import '../../index-
|
|
10
|
+
import '../../index-0b520c6a.js';
|
|
11
11
|
|
|
12
12
|
var __defProp = Object.defineProperty;
|
|
13
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|