@lukso/web-components 1.102.1 → 1.102.2
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 +4 -4
- package/dist/components/index.js +4 -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 +2 -2
- package/dist/components/lukso-color-picker/index.js +2 -2
- 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 +3 -3
- package/dist/components/lukso-dropdown-option/index.js +3 -3
- 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 +2 -2
- package/dist/components/lukso-input/index.js +2 -2
- 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 +72 -73
- package/dist/components/lukso-select/index.d.ts.map +1 -1
- package/dist/components/lukso-select/index.js +72 -73
- package/dist/components/lukso-share/index.cjs +23 -26
- package/dist/components/lukso-share/index.js +23 -26
- package/dist/components/lukso-switch/index.cjs +7 -10
- package/dist/components/lukso-switch/index.js +7 -10
- package/dist/components/lukso-tag/index.cjs +31 -34
- package/dist/components/lukso-tag/index.js +31 -34
- package/dist/components/lukso-terms/index.cjs +5 -8
- package/dist/components/lukso-terms/index.js +5 -8
- package/dist/components/lukso-test/index.cjs +12 -15
- package/dist/components/lukso-test/index.js +12 -15
- package/dist/components/lukso-textarea/index.cjs +81 -84
- package/dist/components/lukso-textarea/index.js +81 -84
- package/dist/components/lukso-tooltip/index.cjs +33 -36
- package/dist/components/lukso-tooltip/index.js +33 -36
- package/dist/components/lukso-username/index.cjs +49 -52
- package/dist/components/lukso-username/index.js +49 -52
- package/dist/components/lukso-wizard/index.cjs +41 -44
- package/dist/components/lukso-wizard/index.js +41 -44
- package/dist/{index-6349a8aa.js → index-15b30335.js} +1 -1
- package/dist/{index-474fac60.cjs → index-1ce46c50.cjs} +1 -1
- package/dist/{index-8ccda1e9.cjs → index-89eb56eb.cjs} +3 -5
- package/dist/{index-17879e5a.cjs → index-b9bc3bbb.cjs} +1 -1
- package/dist/{index-d89cc6bc.js → index-c154a31c.js} +3 -5
- package/dist/{index-7e82dcae.js → index-f62a47db.js} +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.js +4 -4
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-12def811.cjs → style-map-3dd58f82.cjs} +1 -1
- package/dist/{style-map-cf4f4350.js → style-map-d46cc789.js} +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-c154a31c.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
4
|
-
import { c as customStyleMap } from '../../index-
|
|
4
|
+
import { c as customStyleMap } from '../../index-15b30335.js';
|
|
5
5
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
6
6
|
import '../../directive-2bb7789e.js';
|
|
7
7
|
|
|
@@ -19,39 +19,36 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
let LuksoTag = class extends TailwindStyledElement(style) {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
|
|
35
|
-
large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
|
|
36
|
-
},
|
|
37
|
-
isRounded: {
|
|
38
|
-
true: "rounded-[56px]"
|
|
39
|
-
}
|
|
22
|
+
size = "small";
|
|
23
|
+
isRounded = false;
|
|
24
|
+
backgroundColor = "";
|
|
25
|
+
borderColor = "";
|
|
26
|
+
textColor = "";
|
|
27
|
+
tagStyles = ce({
|
|
28
|
+
base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
|
|
29
|
+
variants: {
|
|
30
|
+
size: {
|
|
31
|
+
"x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
|
|
32
|
+
small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
|
|
33
|
+
large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
|
|
40
34
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
isRounded: {
|
|
36
|
+
true: "rounded-[56px]"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
compoundVariants: [
|
|
40
|
+
{
|
|
41
|
+
size: "small",
|
|
42
|
+
isRounded: true,
|
|
43
|
+
class: "px-3"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
size: "x-small",
|
|
47
|
+
isRounded: true,
|
|
48
|
+
class: "px-2"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
});
|
|
55
52
|
resolveBorderColor() {
|
|
56
53
|
if (this.borderColor) {
|
|
57
54
|
return this.borderColor;
|
|
@@ -2,14 +2,14 @@
|
|
|
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-89eb56eb.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-e9668573.cjs');
|
|
9
9
|
require('../lukso-icon/index.cjs');
|
|
10
10
|
require('../lukso-sanitize/index.cjs');
|
|
11
11
|
require('../../directive-8278ab14.cjs');
|
|
12
|
-
require('../../style-map-
|
|
12
|
+
require('../../style-map-3dd58f82.cjs');
|
|
13
13
|
|
|
14
14
|
const style = ":host {\n display: flex;\n height: 100%\n}";
|
|
15
15
|
|
|
@@ -25,14 +25,11 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
25
25
|
return result;
|
|
26
26
|
};
|
|
27
27
|
exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
this.hasScrollButton = true;
|
|
32
|
-
this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
|
|
28
|
+
text = "";
|
|
29
|
+
hasScrollButton = true;
|
|
30
|
+
defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
|
|
33
31
|
bg-gradient-to-b from-transparent to-neutral-100/80
|
|
34
32
|
flex justify-center transition-opacity opacity-0`;
|
|
35
|
-
}
|
|
36
33
|
onScrollBottom() {
|
|
37
34
|
const event = new CustomEvent("on-bottom-scroll", {
|
|
38
35
|
bubbles: true,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-c154a31c.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 customClassMap } from '../../index-5e194caf.js';
|
|
5
5
|
import '../lukso-icon/index.js';
|
|
6
6
|
import '../lukso-sanitize/index.js';
|
|
7
7
|
import '../../directive-2bb7789e.js';
|
|
8
|
-
import '../../style-map-
|
|
8
|
+
import '../../style-map-d46cc789.js';
|
|
9
9
|
|
|
10
10
|
const style = ":host {\n display: flex;\n height: 100%\n}";
|
|
11
11
|
|
|
@@ -21,14 +21,11 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
21
21
|
return result;
|
|
22
22
|
};
|
|
23
23
|
let LuksoTerms = class extends TailwindStyledElement(style) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
this.hasScrollButton = true;
|
|
28
|
-
this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
|
|
24
|
+
text = "";
|
|
25
|
+
hasScrollButton = true;
|
|
26
|
+
defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
|
|
29
27
|
bg-gradient-to-b from-transparent to-neutral-100/80
|
|
30
28
|
flex justify-center transition-opacity opacity-0`;
|
|
31
|
-
}
|
|
32
29
|
onScrollBottom() {
|
|
33
30
|
const event = new CustomEvent("on-bottom-scroll", {
|
|
34
31
|
bubbles: true,
|
|
@@ -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-89eb56eb.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const directive = require('../../directive-8278ab14.cjs');
|
|
8
8
|
|
|
@@ -56,21 +56,18 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
56
56
|
return result;
|
|
57
57
|
};
|
|
58
58
|
exports.LuksoTest = class LuksoTest extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
duration: this.duration,
|
|
69
|
-
fill: "backwards"
|
|
70
|
-
}
|
|
59
|
+
name = "World";
|
|
60
|
+
clicked = false;
|
|
61
|
+
disabled = false;
|
|
62
|
+
duration = 1e3;
|
|
63
|
+
controller = new t(this, {
|
|
64
|
+
defaultOptions: {
|
|
65
|
+
keyframeOptions: {
|
|
66
|
+
duration: this.duration,
|
|
67
|
+
fill: "backwards"
|
|
71
68
|
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
69
|
+
}
|
|
70
|
+
});
|
|
74
71
|
_onClick() {
|
|
75
72
|
if (this.disabled) {
|
|
76
73
|
return;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-
|
|
1
|
+
import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-c154a31c.js';
|
|
2
2
|
import { n as n$3, e as e$3 } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { e as e$2, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
|
|
4
4
|
|
|
@@ -52,21 +52,18 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
52
52
|
return result;
|
|
53
53
|
};
|
|
54
54
|
let LuksoTest = class extends TailwindStyledElement(style) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
duration: this.duration,
|
|
65
|
-
fill: "backwards"
|
|
66
|
-
}
|
|
55
|
+
name = "World";
|
|
56
|
+
clicked = false;
|
|
57
|
+
disabled = false;
|
|
58
|
+
duration = 1e3;
|
|
59
|
+
controller = new t(this, {
|
|
60
|
+
defaultOptions: {
|
|
61
|
+
keyframeOptions: {
|
|
62
|
+
duration: this.duration,
|
|
63
|
+
fill: "backwards"
|
|
67
64
|
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
65
|
+
}
|
|
66
|
+
});
|
|
70
67
|
_onClick() {
|
|
71
68
|
if (this.disabled) {
|
|
72
69
|
return;
|
|
@@ -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-89eb56eb.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-3dd58f82.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}";
|
|
@@ -28,95 +28,92 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
28
28
|
};
|
|
29
29
|
const FOCUS_DELAY_MS = 10;
|
|
30
30
|
exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
wrapper: "group flex",
|
|
56
|
-
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
31
|
+
value = "";
|
|
32
|
+
name = "";
|
|
33
|
+
placeholder = "";
|
|
34
|
+
label = "";
|
|
35
|
+
id = "";
|
|
36
|
+
ref = void 0;
|
|
37
|
+
description = "";
|
|
38
|
+
error = "";
|
|
39
|
+
customClass = "";
|
|
40
|
+
isFullWidth = false;
|
|
41
|
+
isReadonly = false;
|
|
42
|
+
isDisabled = false;
|
|
43
|
+
autofocus = false;
|
|
44
|
+
borderless = false;
|
|
45
|
+
isNonResizable = false;
|
|
46
|
+
keepFocusOnEscape = false;
|
|
47
|
+
size = "medium";
|
|
48
|
+
rows = 4;
|
|
49
|
+
hasFocus = false;
|
|
50
|
+
hasHighlight = false;
|
|
51
|
+
styles = index.ce({
|
|
52
|
+
slots: {
|
|
53
|
+
wrapper: "group flex",
|
|
54
|
+
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
57
55
|
outline-none transition transition-all duration-150 appearance-none`
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
false: {
|
|
65
|
-
input: "border-neutral-90"
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
hasHighlight: {
|
|
69
|
-
true: {
|
|
70
|
-
input: "border-neutral-35"
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
borderless: {
|
|
74
|
-
true: { input: "border-0" },
|
|
75
|
-
false: { input: "border" }
|
|
56
|
+
},
|
|
57
|
+
variants: {
|
|
58
|
+
hasError: {
|
|
59
|
+
true: {
|
|
60
|
+
input: "border-red-85"
|
|
76
61
|
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
62
|
+
false: {
|
|
63
|
+
input: "border-neutral-90"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
hasHighlight: {
|
|
67
|
+
true: {
|
|
68
|
+
input: "border-neutral-35"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
borderless: {
|
|
72
|
+
true: { input: "border-0" },
|
|
73
|
+
false: { input: "border" }
|
|
74
|
+
},
|
|
75
|
+
isReadonly: {
|
|
76
|
+
true: { input: "cursor-not-allowed" }
|
|
77
|
+
},
|
|
78
|
+
isDisabled: {
|
|
79
|
+
true: {
|
|
80
|
+
input: "text-neutral-60 cursor-not-allowed"
|
|
89
81
|
},
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
82
|
+
false: { input: "text-neutral-20" }
|
|
83
|
+
},
|
|
84
|
+
isFullWidth: {
|
|
85
|
+
true: { wrapper: "w-full" },
|
|
86
|
+
false: { wrapper: "w-[350px]" }
|
|
87
|
+
},
|
|
88
|
+
size: {
|
|
89
|
+
small: {
|
|
90
|
+
input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
|
|
97
91
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
input: "resize-none"
|
|
101
|
-
}
|
|
92
|
+
medium: {
|
|
93
|
+
input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
|
|
102
94
|
}
|
|
103
95
|
},
|
|
104
|
-
|
|
105
|
-
{
|
|
106
|
-
|
|
107
|
-
size: "small",
|
|
108
|
-
class: { wrapper: "w-[210px]" }
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
hasHighlight: true,
|
|
112
|
-
hasError: true,
|
|
113
|
-
class: {
|
|
114
|
-
input: "border-red-65"
|
|
115
|
-
}
|
|
96
|
+
isNonResizable: {
|
|
97
|
+
true: {
|
|
98
|
+
input: "resize-none"
|
|
116
99
|
}
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
compoundVariants: [
|
|
103
|
+
{
|
|
104
|
+
isFullWidth: false,
|
|
105
|
+
size: "small",
|
|
106
|
+
class: { wrapper: "w-[210px]" }
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
hasHighlight: true,
|
|
110
|
+
hasError: true,
|
|
111
|
+
class: {
|
|
112
|
+
input: "border-red-65"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
});
|
|
120
117
|
connectedCallback() {
|
|
121
118
|
super.connectedCallback();
|
|
122
119
|
if (this.autofocus) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-c154a31c.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-d46cc789.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}";
|
|
@@ -24,95 +24,92 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
24
24
|
};
|
|
25
25
|
const FOCUS_DELAY_MS = 10;
|
|
26
26
|
let LuksoTextarea = class extends TailwindStyledElement(style) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
wrapper: "group flex",
|
|
52
|
-
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
27
|
+
value = "";
|
|
28
|
+
name = "";
|
|
29
|
+
placeholder = "";
|
|
30
|
+
label = "";
|
|
31
|
+
id = "";
|
|
32
|
+
ref = void 0;
|
|
33
|
+
description = "";
|
|
34
|
+
error = "";
|
|
35
|
+
customClass = "";
|
|
36
|
+
isFullWidth = false;
|
|
37
|
+
isReadonly = false;
|
|
38
|
+
isDisabled = false;
|
|
39
|
+
autofocus = false;
|
|
40
|
+
borderless = false;
|
|
41
|
+
isNonResizable = false;
|
|
42
|
+
keepFocusOnEscape = false;
|
|
43
|
+
size = "medium";
|
|
44
|
+
rows = 4;
|
|
45
|
+
hasFocus = false;
|
|
46
|
+
hasHighlight = false;
|
|
47
|
+
styles = ce({
|
|
48
|
+
slots: {
|
|
49
|
+
wrapper: "group flex",
|
|
50
|
+
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
53
51
|
outline-none transition transition-all duration-150 appearance-none`
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
},
|
|
60
|
-
false: {
|
|
61
|
-
input: "border-neutral-90"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
hasHighlight: {
|
|
65
|
-
true: {
|
|
66
|
-
input: "border-neutral-35"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
borderless: {
|
|
70
|
-
true: { input: "border-0" },
|
|
71
|
-
false: { input: "border" }
|
|
52
|
+
},
|
|
53
|
+
variants: {
|
|
54
|
+
hasError: {
|
|
55
|
+
true: {
|
|
56
|
+
input: "border-red-85"
|
|
72
57
|
},
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
58
|
+
false: {
|
|
59
|
+
input: "border-neutral-90"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
hasHighlight: {
|
|
63
|
+
true: {
|
|
64
|
+
input: "border-neutral-35"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
borderless: {
|
|
68
|
+
true: { input: "border-0" },
|
|
69
|
+
false: { input: "border" }
|
|
70
|
+
},
|
|
71
|
+
isReadonly: {
|
|
72
|
+
true: { input: "cursor-not-allowed" }
|
|
73
|
+
},
|
|
74
|
+
isDisabled: {
|
|
75
|
+
true: {
|
|
76
|
+
input: "text-neutral-60 cursor-not-allowed"
|
|
85
77
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
78
|
+
false: { input: "text-neutral-20" }
|
|
79
|
+
},
|
|
80
|
+
isFullWidth: {
|
|
81
|
+
true: { wrapper: "w-full" },
|
|
82
|
+
false: { wrapper: "w-[350px]" }
|
|
83
|
+
},
|
|
84
|
+
size: {
|
|
85
|
+
small: {
|
|
86
|
+
input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
|
|
93
87
|
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
input: "resize-none"
|
|
97
|
-
}
|
|
88
|
+
medium: {
|
|
89
|
+
input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
|
|
98
90
|
}
|
|
99
91
|
},
|
|
100
|
-
|
|
101
|
-
{
|
|
102
|
-
|
|
103
|
-
size: "small",
|
|
104
|
-
class: { wrapper: "w-[210px]" }
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
hasHighlight: true,
|
|
108
|
-
hasError: true,
|
|
109
|
-
class: {
|
|
110
|
-
input: "border-red-65"
|
|
111
|
-
}
|
|
92
|
+
isNonResizable: {
|
|
93
|
+
true: {
|
|
94
|
+
input: "resize-none"
|
|
112
95
|
}
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
compoundVariants: [
|
|
99
|
+
{
|
|
100
|
+
isFullWidth: false,
|
|
101
|
+
size: "small",
|
|
102
|
+
class: { wrapper: "w-[210px]" }
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
hasHighlight: true,
|
|
106
|
+
hasError: true,
|
|
107
|
+
class: {
|
|
108
|
+
input: "border-red-65"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
]
|
|
112
|
+
});
|
|
116
113
|
connectedCallback() {
|
|
117
114
|
super.connectedCallback();
|
|
118
115
|
if (this.autofocus) {
|