@lukso/web-components 1.131.0 → 1.131.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.cjs +7 -7
- package/dist/components/index.js +7 -7
- package/dist/components/lukso-button/index.cjs +3 -3
- package/dist/components/lukso-button/index.js +3 -3
- package/dist/components/lukso-card/index.cjs +6 -6
- package/dist/components/lukso-card/index.js +6 -6
- package/dist/components/lukso-checkbox/index.cjs +3 -3
- package/dist/components/lukso-checkbox/index.js +3 -3
- package/dist/components/lukso-color-picker/index.cjs +4 -4
- package/dist/components/lukso-color-picker/index.js +4 -4
- package/dist/components/lukso-dropdown/index.cjs +7 -7
- package/dist/components/lukso-dropdown/index.js +7 -7
- package/dist/components/lukso-dropdown-option/index.cjs +2 -2
- package/dist/components/lukso-dropdown-option/index.js +2 -2
- package/dist/components/lukso-footer/index.cjs +2 -2
- package/dist/components/lukso-footer/index.js +2 -2
- package/dist/components/lukso-icon/index.cjs +3 -3
- package/dist/components/lukso-icon/index.js +3 -3
- package/dist/components/lukso-image/index.cjs +4 -4
- package/dist/components/lukso-image/index.js +4 -4
- package/dist/components/lukso-input/index.cjs +4 -4
- package/dist/components/lukso-input/index.js +4 -4
- package/dist/components/lukso-modal/index.cjs +2 -2
- package/dist/components/lukso-modal/index.js +2 -2
- package/dist/components/lukso-navbar/index.cjs +5 -5
- package/dist/components/lukso-navbar/index.js +5 -5
- package/dist/components/lukso-pagination/index.cjs +4 -4
- package/dist/components/lukso-pagination/index.js +4 -4
- package/dist/components/lukso-profile/index.cjs +5 -5
- package/dist/components/lukso-profile/index.js +5 -5
- package/dist/components/lukso-progress/index.cjs +3 -3
- package/dist/components/lukso-progress/index.js +3 -3
- package/dist/components/lukso-sanitize/index.cjs +2 -2
- package/dist/components/lukso-sanitize/index.js +2 -2
- package/dist/components/lukso-search/index.cjs +8 -8
- package/dist/components/lukso-search/index.js +8 -8
- package/dist/components/lukso-select/index.cjs +75 -75
- package/dist/components/lukso-select/index.js +75 -75
- package/dist/components/lukso-share/index.cjs +27 -24
- package/dist/components/lukso-share/index.js +27 -24
- package/dist/components/lukso-switch/index.cjs +50 -50
- package/dist/components/lukso-switch/index.js +50 -50
- package/dist/components/lukso-tag/index.cjs +35 -32
- package/dist/components/lukso-tag/index.js +35 -32
- package/dist/components/lukso-terms/index.cjs +10 -7
- package/dist/components/lukso-terms/index.js +10 -7
- package/dist/components/lukso-test/index.cjs +16 -13
- package/dist/components/lukso-test/index.js +16 -13
- package/dist/components/lukso-textarea/index.cjs +86 -83
- package/dist/components/lukso-textarea/index.js +86 -83
- package/dist/components/lukso-tooltip/index.cjs +38 -35
- package/dist/components/lukso-tooltip/index.js +38 -35
- package/dist/components/lukso-username/index.cjs +4 -4
- package/dist/components/lukso-username/index.js +4 -4
- package/dist/components/lukso-wizard/index.cjs +45 -42
- package/dist/components/lukso-wizard/index.js +45 -42
- package/dist/{index-5387057e.js → index-1db9d1ee.js} +1 -1
- package/dist/{index-38990f38.js → index-2f05f181.js} +2 -2
- package/dist/{index-9ba001cb.js → index-35fd0f44.js} +53 -50
- package/dist/{index-2d057f81.js → index-44537fbb.js} +5 -3
- package/dist/{index-5df012eb.cjs → index-6bad7e66.cjs} +1 -1
- package/dist/{index-ba49f23a.cjs → index-96c96a31.cjs} +53 -50
- package/dist/{index-96bba619.cjs → index-b103f110.cjs} +5 -3
- package/dist/{index-9c39357d.cjs → index-dfcb5b8a.cjs} +2 -2
- package/dist/index.cjs +7 -7
- package/dist/index.js +7 -7
- package/dist/{property-5367c26a.js → property-27a56e78.js} +1 -1
- package/dist/{property-98f7e05b.cjs → property-e2dd6303.cjs} +1 -1
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{state-bdfaec36.js → state-cda0c5ee.js} +1 -1
- package/dist/{state-eba8ded5.cjs → state-e20739c9.cjs} +1 -1
- package/dist/{style-map-9e6bb4a6.js → style-map-d0cf7858.js} +1 -1
- package/dist/{style-map-b13b92c1.cjs → style-map-ff389c6a.cjs} +1 -1
- package/dist/styles/main.css +1 -0
- package/dist/styles/main.css.map +1 -1
- package/dist/tailwind-config.cjs +1 -1
- package/dist/tailwind-config.js +1 -1
- package/package.json +1 -1
- package/tools/cn.cjs +1 -1
- package/tools/cn.js +1 -1
- package/tools/index.cjs +1 -1
- package/tools/index.js +1 -1
- package/tools/sass/colors.scss +1 -1
- package/tools/styles/main.css +1 -0
- package/tools/{tailwind-config-c5a676c5.js → tailwind-config-73222825.js} +1 -1
- package/tools/{tailwind-config-20125010.cjs → tailwind-config-d0ffa274.cjs} +1 -1
- package/tools/tailwind-config.cjs +1 -1
- package/tools/tailwind-config.js +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, E } from '../../index-
|
|
2
|
-
import { n, t } from '../../property-
|
|
3
|
-
import { r } from '../../state-
|
|
1
|
+
import { T as TailwindStyledElement, x, E } from '../../index-44537fbb.js';
|
|
2
|
+
import { n, t } from '../../property-27a56e78.js';
|
|
3
|
+
import { r } from '../../state-cda0c5ee.js';
|
|
4
4
|
import { c as ce } from '../../index-d14b6a34.js';
|
|
5
5
|
import '../../tailwind-config.js';
|
|
6
6
|
import { c as cn } from '../../cn-90c03edf.js';
|
|
7
7
|
import '../lukso-icon/index.js';
|
|
8
8
|
import '../lukso-sanitize/index.js';
|
|
9
|
-
import '../../style-map-
|
|
9
|
+
import '../../style-map-d0cf7858.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,92 +24,95 @@ 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
|
-
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
this.value = "";
|
|
30
|
+
this.name = "";
|
|
31
|
+
this.placeholder = "";
|
|
32
|
+
this.label = "";
|
|
33
|
+
this.id = "";
|
|
34
|
+
this.ref = void 0;
|
|
35
|
+
this.description = "";
|
|
36
|
+
this.error = "";
|
|
37
|
+
this.customClass = "";
|
|
38
|
+
this.isFullWidth = false;
|
|
39
|
+
this.isReadonly = false;
|
|
40
|
+
this.isDisabled = false;
|
|
41
|
+
this.autofocus = false;
|
|
42
|
+
this.borderless = false;
|
|
43
|
+
this.isNonResizable = false;
|
|
44
|
+
this.keepFocusOnEscape = false;
|
|
45
|
+
this.size = "medium";
|
|
46
|
+
this.rows = 4;
|
|
47
|
+
this.hasFocus = false;
|
|
48
|
+
this.hasHighlight = false;
|
|
49
|
+
this.styles = ce({
|
|
50
|
+
slots: {
|
|
51
|
+
wrapper: "group flex",
|
|
52
|
+
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
51
53
|
outline-none transition transition-all duration-150 appearance-none`
|
|
52
|
-
},
|
|
53
|
-
variants: {
|
|
54
|
-
hasError: {
|
|
55
|
-
true: {
|
|
56
|
-
input: "border-red-85"
|
|
57
|
-
},
|
|
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
54
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
55
|
+
variants: {
|
|
56
|
+
hasError: {
|
|
57
|
+
true: {
|
|
58
|
+
input: "border-red-85"
|
|
59
|
+
},
|
|
60
|
+
false: {
|
|
61
|
+
input: "border-neutral-90"
|
|
62
|
+
}
|
|
77
63
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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"
|
|
64
|
+
hasHighlight: {
|
|
65
|
+
true: {
|
|
66
|
+
input: "border-neutral-35"
|
|
67
|
+
}
|
|
87
68
|
},
|
|
88
|
-
|
|
89
|
-
input: "
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
69
|
+
borderless: {
|
|
70
|
+
true: { input: "border-0" },
|
|
71
|
+
false: { input: "border" }
|
|
72
|
+
},
|
|
73
|
+
isReadonly: {
|
|
74
|
+
true: { input: "cursor-not-allowed" }
|
|
75
|
+
},
|
|
76
|
+
isDisabled: {
|
|
77
|
+
true: {
|
|
78
|
+
input: "text-neutral-60 cursor-not-allowed"
|
|
79
|
+
},
|
|
80
|
+
false: { input: "text-neutral-20" }
|
|
81
|
+
},
|
|
82
|
+
isFullWidth: {
|
|
83
|
+
true: { wrapper: "w-full" },
|
|
84
|
+
false: { wrapper: "w-[350px]" }
|
|
85
|
+
},
|
|
86
|
+
size: {
|
|
87
|
+
small: {
|
|
88
|
+
input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
|
|
89
|
+
},
|
|
90
|
+
medium: {
|
|
91
|
+
input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
isNonResizable: {
|
|
95
|
+
true: {
|
|
96
|
+
input: "resize-none"
|
|
97
|
+
}
|
|
95
98
|
}
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
compoundVariants: [
|
|
99
|
-
{
|
|
100
|
-
isFullWidth: false,
|
|
101
|
-
size: "small",
|
|
102
|
-
class: { wrapper: "w-[210px]" }
|
|
103
99
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
compoundVariants: [
|
|
101
|
+
{
|
|
102
|
+
isFullWidth: false,
|
|
103
|
+
size: "small",
|
|
104
|
+
class: { wrapper: "w-[210px]" }
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
hasHighlight: true,
|
|
108
|
+
hasError: true,
|
|
109
|
+
class: {
|
|
110
|
+
input: "border-red-65"
|
|
111
|
+
}
|
|
109
112
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
+
]
|
|
114
|
+
});
|
|
115
|
+
}
|
|
113
116
|
connectedCallback() {
|
|
114
117
|
super.connectedCallback();
|
|
115
118
|
if (this.autofocus) {
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
6
|
-
const property = require('../../property-
|
|
7
|
-
const state = require('../../state-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b103f110.cjs');
|
|
6
|
+
const property = require('../../property-e2dd6303.cjs');
|
|
7
|
+
const state = require('../../state-e20739c9.cjs');
|
|
8
8
|
const index = require('../../index-2b104ecb.cjs');
|
|
9
|
-
const styleMap = require('../../style-map-
|
|
9
|
+
const styleMap = require('../../style-map-ff389c6a.cjs');
|
|
10
10
|
require('../../directive-8278ab14.cjs');
|
|
11
11
|
|
|
12
12
|
var top = 'top';
|
|
@@ -3460,39 +3460,42 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
3460
3460
|
return result;
|
|
3461
3461
|
};
|
|
3462
3462
|
exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3463
|
+
constructor() {
|
|
3464
|
+
super(...arguments);
|
|
3465
|
+
this.variant = "light";
|
|
3466
|
+
this.size = "medium";
|
|
3467
|
+
this.placement = "top";
|
|
3468
|
+
this.trigger = "mouseenter";
|
|
3469
|
+
this.text = "";
|
|
3470
|
+
this.maxWidth = 300;
|
|
3471
|
+
this.show = false;
|
|
3472
|
+
this.hideOnClick = "true";
|
|
3473
|
+
this.isClipboardCopy = false;
|
|
3474
|
+
this.copyText = "";
|
|
3475
|
+
this.copyValue = "";
|
|
3476
|
+
this.offset = 10;
|
|
3477
|
+
this.options = "";
|
|
3478
|
+
this.showArrow = true;
|
|
3479
|
+
this.showDelay = 300;
|
|
3480
|
+
this.hideDelay = 300;
|
|
3481
|
+
this.showCopy = false;
|
|
3482
|
+
this.optionsParsed = [];
|
|
3483
|
+
this.tooltipInstance = void 0;
|
|
3484
|
+
this.styles = index.ce({
|
|
3485
|
+
slots: {
|
|
3486
|
+
tooltip: "hidden",
|
|
3487
|
+
trigger: "cursor-pointer flex flex-col items-center",
|
|
3488
|
+
options: "rounded-4 hover:bg-neutral-95"
|
|
3489
|
+
},
|
|
3490
|
+
variants: {
|
|
3491
|
+
hasNoText: {
|
|
3492
|
+
true: {
|
|
3493
|
+
trigger: "cursor-default"
|
|
3494
|
+
}
|
|
3492
3495
|
}
|
|
3493
3496
|
}
|
|
3494
|
-
}
|
|
3495
|
-
}
|
|
3497
|
+
});
|
|
3498
|
+
}
|
|
3496
3499
|
hideOnClickCheck() {
|
|
3497
3500
|
if (this.hideOnClick === "toggle") {
|
|
3498
3501
|
return this.hideOnClick;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
2
|
-
import { n, t } from '../../property-
|
|
3
|
-
import { r } from '../../state-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-44537fbb.js';
|
|
2
|
+
import { n, t } from '../../property-27a56e78.js';
|
|
3
|
+
import { r } from '../../state-cda0c5ee.js';
|
|
4
4
|
import { c as ce } from '../../index-d14b6a34.js';
|
|
5
|
-
import { o } from '../../style-map-
|
|
5
|
+
import { o } from '../../style-map-d0cf7858.js';
|
|
6
6
|
import '../../directive-2bb7789e.js';
|
|
7
7
|
|
|
8
8
|
var top = 'top';
|
|
@@ -3456,39 +3456,42 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
3456
3456
|
return result;
|
|
3457
3457
|
};
|
|
3458
3458
|
let LuksoTooltip = class extends TailwindStyledElement(style) {
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3459
|
+
constructor() {
|
|
3460
|
+
super(...arguments);
|
|
3461
|
+
this.variant = "light";
|
|
3462
|
+
this.size = "medium";
|
|
3463
|
+
this.placement = "top";
|
|
3464
|
+
this.trigger = "mouseenter";
|
|
3465
|
+
this.text = "";
|
|
3466
|
+
this.maxWidth = 300;
|
|
3467
|
+
this.show = false;
|
|
3468
|
+
this.hideOnClick = "true";
|
|
3469
|
+
this.isClipboardCopy = false;
|
|
3470
|
+
this.copyText = "";
|
|
3471
|
+
this.copyValue = "";
|
|
3472
|
+
this.offset = 10;
|
|
3473
|
+
this.options = "";
|
|
3474
|
+
this.showArrow = true;
|
|
3475
|
+
this.showDelay = 300;
|
|
3476
|
+
this.hideDelay = 300;
|
|
3477
|
+
this.showCopy = false;
|
|
3478
|
+
this.optionsParsed = [];
|
|
3479
|
+
this.tooltipInstance = void 0;
|
|
3480
|
+
this.styles = ce({
|
|
3481
|
+
slots: {
|
|
3482
|
+
tooltip: "hidden",
|
|
3483
|
+
trigger: "cursor-pointer flex flex-col items-center",
|
|
3484
|
+
options: "rounded-4 hover:bg-neutral-95"
|
|
3485
|
+
},
|
|
3486
|
+
variants: {
|
|
3487
|
+
hasNoText: {
|
|
3488
|
+
true: {
|
|
3489
|
+
trigger: "cursor-default"
|
|
3490
|
+
}
|
|
3488
3491
|
}
|
|
3489
3492
|
}
|
|
3490
|
-
}
|
|
3491
|
-
}
|
|
3493
|
+
});
|
|
3494
|
+
}
|
|
3492
3495
|
hideOnClickCheck() {
|
|
3493
3496
|
if (this.hideOnClick === "toggle") {
|
|
3494
3497
|
return this.hideOnClick;
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
require('../../index-
|
|
6
|
-
require('../../property-
|
|
5
|
+
require('../../index-b103f110.cjs');
|
|
6
|
+
require('../../property-e2dd6303.cjs');
|
|
7
7
|
require('../../index-2b104ecb.cjs');
|
|
8
|
-
const components_luksoUsername_index = require('../../index-
|
|
9
|
-
require('../../index-
|
|
8
|
+
const components_luksoUsername_index = require('../../index-96c96a31.cjs');
|
|
9
|
+
require('../../index-6bad7e66.cjs');
|
|
10
10
|
require('../../tailwind-config.cjs');
|
|
11
11
|
require('../../cn-b6daa995.cjs');
|
|
12
12
|
require('../../directive-8278ab14.cjs');
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import '../../index-
|
|
2
|
-
import '../../property-
|
|
1
|
+
import '../../index-44537fbb.js';
|
|
2
|
+
import '../../property-27a56e78.js';
|
|
3
3
|
import '../../index-d14b6a34.js';
|
|
4
|
-
export { L as LuksoUsername } from '../../index-
|
|
5
|
-
import '../../index-
|
|
4
|
+
export { L as LuksoUsername } from '../../index-35fd0f44.js';
|
|
5
|
+
import '../../index-1db9d1ee.js';
|
|
6
6
|
import '../../tailwind-config.js';
|
|
7
7
|
import '../../cn-90c03edf.js';
|
|
8
8
|
import '../../directive-2bb7789e.js';
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
6
|
-
const property = require('../../property-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b103f110.cjs');
|
|
6
|
+
const property = require('../../property-e2dd6303.cjs');
|
|
7
7
|
const directive = require('../../directive-8278ab14.cjs');
|
|
8
8
|
const index = require('../../index-2b104ecb.cjs');
|
|
9
9
|
|
|
@@ -34,58 +34,61 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
36
|
exports.LuksoWizard = class LuksoWizard extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
constructor() {
|
|
38
|
+
super(...arguments);
|
|
39
|
+
this.steps = "";
|
|
40
|
+
this.activeStep = 1;
|
|
41
|
+
this.size = "medium";
|
|
42
|
+
this.stepStyles = index.ce({
|
|
43
|
+
slots: {
|
|
44
|
+
base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
|
|
43
45
|
[&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden`,
|
|
44
|
-
|
|
46
|
+
circle: `lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
|
|
45
47
|
border-[1px] border-solid border-[rgba(255,255,255,0.8)]
|
|
46
48
|
after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
|
|
47
49
|
after:content:'' after:bg-transparent after:transition-width after:duration-300
|
|
48
50
|
before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
|
|
49
51
|
before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]`,
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
variants: {
|
|
53
|
-
size: {
|
|
54
|
-
small: {
|
|
55
|
-
base: "w-[92px]"
|
|
56
|
-
},
|
|
57
|
-
medium: {
|
|
58
|
-
base: "w-[121px]"
|
|
59
|
-
},
|
|
60
|
-
large: {
|
|
61
|
-
base: "w-[180px]"
|
|
62
|
-
},
|
|
63
|
-
["full-width"]: {
|
|
64
|
-
base: "w-full"
|
|
65
|
-
}
|
|
52
|
+
innerCircle: "lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px]"
|
|
66
53
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
variants: {
|
|
55
|
+
size: {
|
|
56
|
+
small: {
|
|
57
|
+
base: "w-[92px]"
|
|
58
|
+
},
|
|
59
|
+
medium: {
|
|
60
|
+
base: "w-[121px]"
|
|
61
|
+
},
|
|
62
|
+
large: {
|
|
63
|
+
base: "w-[180px]"
|
|
64
|
+
},
|
|
65
|
+
["full-width"]: {
|
|
66
|
+
base: "w-full"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
completed: {
|
|
70
|
+
true: {
|
|
71
|
+
base: `[&>.lukso-wizard-circle]:after:bg-purple-51
|
|
70
72
|
[&_.lukso-wizard-circle-inner]:bg-gradient-to-t
|
|
71
73
|
[&_.lukso-wizard-circle-inner]:from-gradient-3-start
|
|
72
74
|
[&_.lukso-wizard-circle-inner]:to-gradient-3-end`,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
75
|
+
circle: "completed"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
current: {
|
|
79
|
+
true: {
|
|
80
|
+
circle: "current"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
active: {
|
|
84
|
+
true: {
|
|
85
|
+
base: `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`,
|
|
86
|
+
innerCircle: "[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51"
|
|
87
|
+
}
|
|
85
88
|
}
|
|
86
89
|
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
90
|
+
});
|
|
91
|
+
}
|
|
89
92
|
stepTemplate(step, index) {
|
|
90
93
|
const { base, circle, innerCircle } = this.stepStyles({
|
|
91
94
|
completed: index + 1 < this.activeStep,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Z, b as T, T as TailwindStyledElement, x } from '../../index-
|
|
2
|
-
import { n, t as t$2 } from '../../property-
|
|
1
|
+
import { Z, b as T, T as TailwindStyledElement, x } from '../../index-44537fbb.js';
|
|
2
|
+
import { n, t as t$2 } from '../../property-27a56e78.js';
|
|
3
3
|
import { e, i, t as t$1 } from '../../directive-2bb7789e.js';
|
|
4
4
|
import { c as ce } from '../../index-d14b6a34.js';
|
|
5
5
|
|
|
@@ -30,58 +30,61 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
32
|
let LuksoWizard = class extends TailwindStyledElement(style) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
constructor() {
|
|
34
|
+
super(...arguments);
|
|
35
|
+
this.steps = "";
|
|
36
|
+
this.activeStep = 1;
|
|
37
|
+
this.size = "medium";
|
|
38
|
+
this.stepStyles = ce({
|
|
39
|
+
slots: {
|
|
40
|
+
base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
|
|
39
41
|
[&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden`,
|
|
40
|
-
|
|
42
|
+
circle: `lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
|
|
41
43
|
border-[1px] border-solid border-[rgba(255,255,255,0.8)]
|
|
42
44
|
after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
|
|
43
45
|
after:content:'' after:bg-transparent after:transition-width after:duration-300
|
|
44
46
|
before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
|
|
45
47
|
before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]`,
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
variants: {
|
|
49
|
-
size: {
|
|
50
|
-
small: {
|
|
51
|
-
base: "w-[92px]"
|
|
52
|
-
},
|
|
53
|
-
medium: {
|
|
54
|
-
base: "w-[121px]"
|
|
55
|
-
},
|
|
56
|
-
large: {
|
|
57
|
-
base: "w-[180px]"
|
|
58
|
-
},
|
|
59
|
-
["full-width"]: {
|
|
60
|
-
base: "w-full"
|
|
61
|
-
}
|
|
48
|
+
innerCircle: "lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px]"
|
|
62
49
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
variants: {
|
|
51
|
+
size: {
|
|
52
|
+
small: {
|
|
53
|
+
base: "w-[92px]"
|
|
54
|
+
},
|
|
55
|
+
medium: {
|
|
56
|
+
base: "w-[121px]"
|
|
57
|
+
},
|
|
58
|
+
large: {
|
|
59
|
+
base: "w-[180px]"
|
|
60
|
+
},
|
|
61
|
+
["full-width"]: {
|
|
62
|
+
base: "w-full"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
completed: {
|
|
66
|
+
true: {
|
|
67
|
+
base: `[&>.lukso-wizard-circle]:after:bg-purple-51
|
|
66
68
|
[&_.lukso-wizard-circle-inner]:bg-gradient-to-t
|
|
67
69
|
[&_.lukso-wizard-circle-inner]:from-gradient-3-start
|
|
68
70
|
[&_.lukso-wizard-circle-inner]:to-gradient-3-end`,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
circle: "completed"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
current: {
|
|
75
|
+
true: {
|
|
76
|
+
circle: "current"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
active: {
|
|
80
|
+
true: {
|
|
81
|
+
base: `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`,
|
|
82
|
+
innerCircle: "[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51"
|
|
83
|
+
}
|
|
81
84
|
}
|
|
82
85
|
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
86
|
+
});
|
|
87
|
+
}
|
|
85
88
|
stepTemplate(step, index) {
|
|
86
89
|
const { base, circle, innerCircle } = this.stepStyles({
|
|
87
90
|
completed: index + 1 < this.activeStep,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from './index-
|
|
2
|
-
import { n, t } from './property-
|
|
1
|
+
import { a as TailwindElement, x } from './index-44537fbb.js';
|
|
2
|
+
import { n, t } from './property-27a56e78.js';
|
|
3
3
|
import { c as ce } from './index-d14b6a34.js';
|
|
4
4
|
import './components/lukso-image/index.js';
|
|
5
5
|
|