@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
|
@@ -5,7 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
5
5
|
const components_luksoButton_index = require('./lukso-button/index.cjs');
|
|
6
6
|
const components_luksoCard_index = require('./lukso-card/index.cjs');
|
|
7
7
|
const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
|
|
8
|
-
const
|
|
8
|
+
const components_luksoColorPicker_index = require('./lukso-color-picker/index.cjs');
|
|
9
|
+
const components_luksoDropdown_index = require('../index-3429e18a.cjs');
|
|
9
10
|
const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
|
|
10
11
|
const components_luksoFooter_index = require('./lukso-footer/index.cjs');
|
|
11
12
|
const components_luksoIcon_index = require('./lukso-icon/index.cjs');
|
|
@@ -28,16 +29,16 @@ const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
|
|
|
28
29
|
const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
|
|
29
30
|
const components_luksoUsername_index = require('./lukso-username/index.cjs');
|
|
30
31
|
const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
|
|
31
|
-
const shared_tailwindElement_index = require('../index-
|
|
32
|
+
const shared_tailwindElement_index = require('../index-31c27410.cjs');
|
|
32
33
|
require('../cn-5ceac001.cjs');
|
|
33
34
|
require('../query-assigned-elements-d5e45650.cjs');
|
|
34
35
|
require('../state-d9fb972b.cjs');
|
|
35
36
|
require('../index-1d3f4a5a.cjs');
|
|
36
37
|
require('../bundle-mjs-d58a83c6.cjs');
|
|
37
38
|
require('../tailwind-config.cjs');
|
|
38
|
-
require('../style-map-
|
|
39
|
+
require('../style-map-77b74f74.cjs');
|
|
39
40
|
require('../directive-8278ab14.cjs');
|
|
40
|
-
require('../index-
|
|
41
|
+
require('../index-bca7ccb0.cjs');
|
|
41
42
|
require('../index-e9668573.cjs');
|
|
42
43
|
|
|
43
44
|
|
|
@@ -54,6 +55,10 @@ Object.defineProperty(exports, 'LuksoCheckbox', {
|
|
|
54
55
|
enumerable: true,
|
|
55
56
|
get: () => components_luksoCheckbox_index.LuksoCheckbox
|
|
56
57
|
});
|
|
58
|
+
Object.defineProperty(exports, 'LuksoColorPicker', {
|
|
59
|
+
enumerable: true,
|
|
60
|
+
get: () => components_luksoColorPicker_index.LuksoColorPicker
|
|
61
|
+
});
|
|
57
62
|
Object.defineProperty(exports, 'LuksoDropdown', {
|
|
58
63
|
enumerable: true,
|
|
59
64
|
get: () => components_luksoDropdown_index.LuksoDropdown
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './lukso-button/index';
|
|
2
2
|
export * from './lukso-card/index';
|
|
3
3
|
export * from './lukso-checkbox/index';
|
|
4
|
+
export * from './lukso-color-picker/index';
|
|
4
5
|
export * from './lukso-dropdown/index';
|
|
5
6
|
export * from './lukso-dropdown-option/index';
|
|
6
7
|
export * from './lukso-footer/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export { LuksoButton } from './lukso-button/index.js';
|
|
2
2
|
export { LuksoCard } from './lukso-card/index.js';
|
|
3
3
|
export { LuksoCheckbox } from './lukso-checkbox/index.js';
|
|
4
|
-
export {
|
|
4
|
+
export { LuksoColorPicker } from './lukso-color-picker/index.js';
|
|
5
|
+
export { L as LuksoDropdown } from '../index-c6f49fea.js';
|
|
5
6
|
export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
|
|
6
7
|
export { LuksoFooter } from './lukso-footer/index.js';
|
|
7
8
|
export { LuksoIcon } from './lukso-icon/index.js';
|
|
@@ -24,14 +25,14 @@ export { LuksoTextarea } from './lukso-textarea/index.js';
|
|
|
24
25
|
export { LuksoTooltip } from './lukso-tooltip/index.js';
|
|
25
26
|
export { LuksoUsername } from './lukso-username/index.js';
|
|
26
27
|
export { LuksoWizard } from './lukso-wizard/index.js';
|
|
27
|
-
export { a as TailwindElement, T as TailwindStyledElement } from '../index-
|
|
28
|
+
export { a as TailwindElement, T as TailwindStyledElement } from '../index-e73db22f.js';
|
|
28
29
|
import '../cn-b54dcc61.js';
|
|
29
30
|
import '../query-assigned-elements-1c8c9e90.js';
|
|
30
31
|
import '../state-b9ca4e74.js';
|
|
31
32
|
import '../index-ca8e900d.js';
|
|
32
33
|
import '../bundle-mjs-fbc6e2a8.js';
|
|
33
34
|
import '../tailwind-config.js';
|
|
34
|
-
import '../style-map-
|
|
35
|
+
import '../style-map-d5d85b80.js';
|
|
35
36
|
import '../directive-2bb7789e.js';
|
|
36
|
-
import '../index-
|
|
37
|
+
import '../index-0b520c6a.js';
|
|
37
38
|
import '../index-5e194caf.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');
|
|
@@ -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';
|
|
@@ -2,15 +2,15 @@
|
|
|
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('../lukso-profile/index.cjs');
|
|
11
11
|
require('../../tailwind-config.cjs');
|
|
12
12
|
const cn = require('../../cn-5ceac001.cjs');
|
|
13
|
-
const index$1 = require('../../index-
|
|
13
|
+
const index$1 = require('../../index-bca7ccb0.cjs');
|
|
14
14
|
require('../lukso-image/index.cjs');
|
|
15
15
|
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-e73db22f.js';
|
|
2
2
|
import { n, l, 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 '../lukso-profile/index.js';
|
|
7
7
|
import '../../tailwind-config.js';
|
|
8
8
|
import { c as cn } from '../../cn-b54dcc61.js';
|
|
9
|
-
import { c as customStyleMap } from '../../index-
|
|
9
|
+
import { c as customStyleMap } from '../../index-0b520c6a.js';
|
|
10
10
|
import '../lukso-image/index.js';
|
|
11
11
|
import '../../directive-2bb7789e.js';
|
|
12
12
|
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-e9668573.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
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 customClassMap } from '../../index-5e194caf.js';
|
|
@@ -0,0 +1,340 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-31c27410.cjs');
|
|
6
|
+
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
+
const state = require('../../state-d9fb972b.cjs');
|
|
8
|
+
const index = require('../../index-1d3f4a5a.cjs');
|
|
9
|
+
const styleMap = require('../../style-map-77b74f74.cjs');
|
|
10
|
+
require('../../tailwind-config.cjs');
|
|
11
|
+
const cn = require('../../cn-5ceac001.cjs');
|
|
12
|
+
require('../lukso-icon/index.cjs');
|
|
13
|
+
require('../../bundle-mjs-d58a83c6.cjs');
|
|
14
|
+
require('../../directive-8278ab14.cjs');
|
|
15
|
+
|
|
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}";
|
|
17
|
+
|
|
18
|
+
var __defProp = Object.defineProperty;
|
|
19
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
20
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
21
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
22
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
23
|
+
if (decorator = decorators[i])
|
|
24
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
25
|
+
if (kind && result)
|
|
26
|
+
__defProp(target, key, result);
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
this.value = "";
|
|
33
|
+
this.name = "";
|
|
34
|
+
this.placeholder = "#000000";
|
|
35
|
+
this.label = "";
|
|
36
|
+
this.id = "";
|
|
37
|
+
this.description = "";
|
|
38
|
+
this.error = "";
|
|
39
|
+
this.customClass = "";
|
|
40
|
+
this.isFullWidth = false;
|
|
41
|
+
this.isReadonly = false;
|
|
42
|
+
this.isDisabled = false;
|
|
43
|
+
this.autofocus = false;
|
|
44
|
+
this.size = "medium";
|
|
45
|
+
this.hasFocus = false;
|
|
46
|
+
this.hasHighlight = false;
|
|
47
|
+
this.styles = index.ce({
|
|
48
|
+
slots: {
|
|
49
|
+
wrapper: "group grid border overflow-hidden",
|
|
50
|
+
input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
|
|
51
|
+
outline-none transition transition-all duration-150 appearance-none`,
|
|
52
|
+
color: "border-r border-solid",
|
|
53
|
+
colorInput: "h-[inherit] w-[inherit] opacity-0"
|
|
54
|
+
},
|
|
55
|
+
variants: {
|
|
56
|
+
hasError: {
|
|
57
|
+
true: {
|
|
58
|
+
wrapper: "border-red-85 hover:border-red-65",
|
|
59
|
+
color: "border-red-85 group-hover:border-red-65"
|
|
60
|
+
},
|
|
61
|
+
false: {
|
|
62
|
+
wrapper: "border-neutral-90",
|
|
63
|
+
color: "border-neutral-90"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
hasHighlight: {
|
|
67
|
+
true: {
|
|
68
|
+
wrapper: "border-neutral-35",
|
|
69
|
+
color: "border-neutral-35"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
isReadonly: {
|
|
73
|
+
true: { input: "cursor-not-allowed", colorInput: "cursor-not-allowed" }
|
|
74
|
+
},
|
|
75
|
+
isDisabled: {
|
|
76
|
+
true: {
|
|
77
|
+
input: "text-neutral-60 cursor-not-allowed",
|
|
78
|
+
color: "opacity-50",
|
|
79
|
+
colorInput: "cursor-not-allowed"
|
|
80
|
+
},
|
|
81
|
+
false: {
|
|
82
|
+
wrapper: "hover:border-neutral-35",
|
|
83
|
+
input: "text-neutral-20",
|
|
84
|
+
color: "group-hover:border-neutral-35"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
isFullWidth: {
|
|
88
|
+
true: { wrapper: "w-full" },
|
|
89
|
+
false: { wrapper: "w-[350px]" }
|
|
90
|
+
},
|
|
91
|
+
size: {
|
|
92
|
+
small: {
|
|
93
|
+
wrapper: "grid-cols-[28px,auto] rounded-8",
|
|
94
|
+
input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-r-8",
|
|
95
|
+
color: "h-[28px] w-[28px]"
|
|
96
|
+
},
|
|
97
|
+
medium: {
|
|
98
|
+
wrapper: "grid-cols-[48px,auto] rounded-12",
|
|
99
|
+
input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-r-12",
|
|
100
|
+
color: "h-[48px] w-[48px]"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
compoundVariants: [
|
|
105
|
+
{
|
|
106
|
+
isFullWidth: false,
|
|
107
|
+
class: { wrapper: "w-[300px]" }
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
isFullWidth: false,
|
|
111
|
+
size: "small",
|
|
112
|
+
class: { wrapper: "w-[190px]" }
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
isFullWidth: false,
|
|
116
|
+
size: "small",
|
|
117
|
+
class: { wrapper: "w-[210px]" }
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
hasHighlight: true,
|
|
121
|
+
hasError: true,
|
|
122
|
+
class: {
|
|
123
|
+
wrapper: "border-red-65 hover:border-red-65",
|
|
124
|
+
color: "border-red-65 group-hover:border-red-65"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
isReadonly: false,
|
|
129
|
+
isDisabled: false,
|
|
130
|
+
class: {
|
|
131
|
+
colorInput: "cursor-pointer"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
inputTemplate(styles) {
|
|
138
|
+
return shared_tailwindElement_index.x`
|
|
139
|
+
<input
|
|
140
|
+
.value=${this.value}
|
|
141
|
+
name=${this.name ? this.name : shared_tailwindElement_index.A}
|
|
142
|
+
type="text"
|
|
143
|
+
placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.A}
|
|
144
|
+
?autofocus=${this.autofocus}
|
|
145
|
+
autocomplete="off"
|
|
146
|
+
id=${this.id ? this.id : shared_tailwindElement_index.A}
|
|
147
|
+
data-testid=${this.name ? `input-${this.name}` : "input"}
|
|
148
|
+
?readonly=${this.isReadonly ? true : void 0}
|
|
149
|
+
?disabled=${this.isDisabled ? true : void 0}
|
|
150
|
+
class=${cn.cn(styles, this.customClass)}
|
|
151
|
+
@focus=${this.handleFocus}
|
|
152
|
+
@input=${this.handleInput}
|
|
153
|
+
@change=${this.handleChange}
|
|
154
|
+
@blur=${this.handleBlur}
|
|
155
|
+
@keyup=${this.handleKeyUp}
|
|
156
|
+
@keydown=${this.handleKeyDown}
|
|
157
|
+
/>
|
|
158
|
+
`;
|
|
159
|
+
}
|
|
160
|
+
colorPickerTemplate(styles, colorInputStyles) {
|
|
161
|
+
return shared_tailwindElement_index.x`<div
|
|
162
|
+
class=${styles}
|
|
163
|
+
style=${styleMap.o({
|
|
164
|
+
backgroundColor: `${this.value}`
|
|
165
|
+
})}
|
|
166
|
+
>
|
|
167
|
+
<input
|
|
168
|
+
.value=${this.value}
|
|
169
|
+
type="color"
|
|
170
|
+
?disabled=${this.isDisabled || this.isReadonly ? true : void 0}
|
|
171
|
+
class=${colorInputStyles}
|
|
172
|
+
@input=${this.handleInput}
|
|
173
|
+
/>
|
|
174
|
+
</div>`;
|
|
175
|
+
}
|
|
176
|
+
labelTemplate() {
|
|
177
|
+
return shared_tailwindElement_index.x`
|
|
178
|
+
<label
|
|
179
|
+
for=${this.name}
|
|
180
|
+
class="heading-inter-14-bold text-neutral-20 pb-2 block"
|
|
181
|
+
>${this.label}</label
|
|
182
|
+
>
|
|
183
|
+
`;
|
|
184
|
+
}
|
|
185
|
+
descriptionTemplate() {
|
|
186
|
+
return shared_tailwindElement_index.x`
|
|
187
|
+
<div class="paragraph-inter-12-regular text-neutral-20 pb-2">
|
|
188
|
+
${this.description ?? shared_tailwindElement_index.A}
|
|
189
|
+
</div>
|
|
190
|
+
`;
|
|
191
|
+
}
|
|
192
|
+
errorTemplate() {
|
|
193
|
+
return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
|
|
194
|
+
${this.error}
|
|
195
|
+
</div>`;
|
|
196
|
+
}
|
|
197
|
+
handleFocus() {
|
|
198
|
+
if (!this.isReadonly && !this.isDisabled) {
|
|
199
|
+
this.hasFocus = true;
|
|
200
|
+
this.hasHighlight = true;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
async handleBlur(event) {
|
|
204
|
+
this.hasFocus = false;
|
|
205
|
+
this.hasHighlight = false;
|
|
206
|
+
await this.updateComplete;
|
|
207
|
+
const target = event.target;
|
|
208
|
+
const blurEvent = new CustomEvent("on-blur", {
|
|
209
|
+
detail: {
|
|
210
|
+
value: target?.value,
|
|
211
|
+
event
|
|
212
|
+
},
|
|
213
|
+
bubbles: false,
|
|
214
|
+
composed: true
|
|
215
|
+
});
|
|
216
|
+
this.dispatchEvent(blurEvent);
|
|
217
|
+
}
|
|
218
|
+
async handleChange(event) {
|
|
219
|
+
await this.updateComplete;
|
|
220
|
+
const target = event.target;
|
|
221
|
+
const changeEvent = new CustomEvent("on-change", {
|
|
222
|
+
detail: {
|
|
223
|
+
value: target?.value,
|
|
224
|
+
event
|
|
225
|
+
},
|
|
226
|
+
bubbles: false,
|
|
227
|
+
composed: true
|
|
228
|
+
});
|
|
229
|
+
this.dispatchEvent(changeEvent);
|
|
230
|
+
}
|
|
231
|
+
async handleInput(event) {
|
|
232
|
+
await this.updateComplete;
|
|
233
|
+
const target = event.target;
|
|
234
|
+
this.value = target?.value;
|
|
235
|
+
const changeEvent = new CustomEvent("on-input", {
|
|
236
|
+
detail: {
|
|
237
|
+
value: target?.value,
|
|
238
|
+
event
|
|
239
|
+
},
|
|
240
|
+
bubbles: false,
|
|
241
|
+
composed: true
|
|
242
|
+
});
|
|
243
|
+
this.dispatchEvent(changeEvent);
|
|
244
|
+
}
|
|
245
|
+
async handleKeyUp(event) {
|
|
246
|
+
await this.updateComplete;
|
|
247
|
+
const target = event.target;
|
|
248
|
+
const keyEvent = new CustomEvent("on-key-up", {
|
|
249
|
+
detail: {
|
|
250
|
+
value: target?.value,
|
|
251
|
+
event
|
|
252
|
+
},
|
|
253
|
+
bubbles: true,
|
|
254
|
+
composed: true
|
|
255
|
+
});
|
|
256
|
+
this.dispatchEvent(keyEvent);
|
|
257
|
+
}
|
|
258
|
+
async handleKeyDown(event) {
|
|
259
|
+
await this.updateComplete;
|
|
260
|
+
const target = event.target;
|
|
261
|
+
const keyEvent = new CustomEvent("on-key-down", {
|
|
262
|
+
detail: {
|
|
263
|
+
value: target.value,
|
|
264
|
+
event
|
|
265
|
+
},
|
|
266
|
+
bubbles: true,
|
|
267
|
+
composed: true
|
|
268
|
+
});
|
|
269
|
+
this.dispatchEvent(keyEvent);
|
|
270
|
+
}
|
|
271
|
+
render() {
|
|
272
|
+
const { wrapper, input, color, colorInput } = this.styles({
|
|
273
|
+
hasError: this.error !== "",
|
|
274
|
+
hasHighlight: this.hasHighlight,
|
|
275
|
+
isReadonly: this.isReadonly,
|
|
276
|
+
isDisabled: this.isDisabled,
|
|
277
|
+
isFullWidth: this.isFullWidth,
|
|
278
|
+
size: this.size
|
|
279
|
+
});
|
|
280
|
+
return shared_tailwindElement_index.x`
|
|
281
|
+
<div class="w-[inherit]">
|
|
282
|
+
${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
|
|
283
|
+
${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.A}
|
|
284
|
+
<div class=${wrapper()}>
|
|
285
|
+
${this.colorPickerTemplate(color(), colorInput())}
|
|
286
|
+
<div class="relative w-full">${this.inputTemplate(input())}</div>
|
|
287
|
+
</div>
|
|
288
|
+
${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
|
|
289
|
+
</div>
|
|
290
|
+
`;
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
__decorateClass([
|
|
294
|
+
queryAssignedElements.n({ type: String })
|
|
295
|
+
], exports.LuksoColorPicker.prototype, "value", 2);
|
|
296
|
+
__decorateClass([
|
|
297
|
+
queryAssignedElements.n({ type: String })
|
|
298
|
+
], exports.LuksoColorPicker.prototype, "name", 2);
|
|
299
|
+
__decorateClass([
|
|
300
|
+
queryAssignedElements.n({ type: String })
|
|
301
|
+
], exports.LuksoColorPicker.prototype, "placeholder", 2);
|
|
302
|
+
__decorateClass([
|
|
303
|
+
queryAssignedElements.n({ type: String })
|
|
304
|
+
], exports.LuksoColorPicker.prototype, "label", 2);
|
|
305
|
+
__decorateClass([
|
|
306
|
+
queryAssignedElements.n({ type: String })
|
|
307
|
+
], exports.LuksoColorPicker.prototype, "id", 2);
|
|
308
|
+
__decorateClass([
|
|
309
|
+
queryAssignedElements.n({ type: String })
|
|
310
|
+
], exports.LuksoColorPicker.prototype, "description", 2);
|
|
311
|
+
__decorateClass([
|
|
312
|
+
queryAssignedElements.n({ type: String })
|
|
313
|
+
], exports.LuksoColorPicker.prototype, "error", 2);
|
|
314
|
+
__decorateClass([
|
|
315
|
+
queryAssignedElements.n({ type: String, attribute: "custom-class" })
|
|
316
|
+
], exports.LuksoColorPicker.prototype, "customClass", 2);
|
|
317
|
+
__decorateClass([
|
|
318
|
+
queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
|
|
319
|
+
], exports.LuksoColorPicker.prototype, "isFullWidth", 2);
|
|
320
|
+
__decorateClass([
|
|
321
|
+
queryAssignedElements.n({ type: Boolean, attribute: "is-readonly" })
|
|
322
|
+
], exports.LuksoColorPicker.prototype, "isReadonly", 2);
|
|
323
|
+
__decorateClass([
|
|
324
|
+
queryAssignedElements.n({ type: Boolean, attribute: "is-disabled" })
|
|
325
|
+
], exports.LuksoColorPicker.prototype, "isDisabled", 2);
|
|
326
|
+
__decorateClass([
|
|
327
|
+
queryAssignedElements.n({ type: Boolean })
|
|
328
|
+
], exports.LuksoColorPicker.prototype, "autofocus", 2);
|
|
329
|
+
__decorateClass([
|
|
330
|
+
queryAssignedElements.n({ type: String })
|
|
331
|
+
], exports.LuksoColorPicker.prototype, "size", 2);
|
|
332
|
+
__decorateClass([
|
|
333
|
+
state.t()
|
|
334
|
+
], exports.LuksoColorPicker.prototype, "hasFocus", 2);
|
|
335
|
+
__decorateClass([
|
|
336
|
+
state.t()
|
|
337
|
+
], exports.LuksoColorPicker.prototype, "hasHighlight", 2);
|
|
338
|
+
exports.LuksoColorPicker = __decorateClass([
|
|
339
|
+
queryAssignedElements.e("lukso-color-picker")
|
|
340
|
+
], exports.LuksoColorPicker);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { InputSize } from '../../shared/types';
|
|
2
|
+
declare const LuksoColorPicker_base: typeof import("lit").LitElement;
|
|
3
|
+
export declare class LuksoColorPicker extends LuksoColorPicker_base {
|
|
4
|
+
value: string;
|
|
5
|
+
name: string;
|
|
6
|
+
placeholder: string;
|
|
7
|
+
label: string;
|
|
8
|
+
id: string;
|
|
9
|
+
description: string;
|
|
10
|
+
error: string;
|
|
11
|
+
customClass: string;
|
|
12
|
+
isFullWidth: boolean;
|
|
13
|
+
isReadonly: boolean;
|
|
14
|
+
isDisabled: boolean;
|
|
15
|
+
autofocus: boolean;
|
|
16
|
+
size: InputSize;
|
|
17
|
+
private hasFocus;
|
|
18
|
+
private hasHighlight;
|
|
19
|
+
private styles;
|
|
20
|
+
inputTemplate(styles: string): import("lit-html").TemplateResult<1>;
|
|
21
|
+
colorPickerTemplate(styles: string, colorInputStyles: string): import("lit-html").TemplateResult<1>;
|
|
22
|
+
labelTemplate(): import("lit-html").TemplateResult<1>;
|
|
23
|
+
descriptionTemplate(): import("lit-html").TemplateResult<1>;
|
|
24
|
+
errorTemplate(): import("lit-html").TemplateResult<1>;
|
|
25
|
+
private handleFocus;
|
|
26
|
+
private handleBlur;
|
|
27
|
+
private handleChange;
|
|
28
|
+
private handleInput;
|
|
29
|
+
private handleKeyUp;
|
|
30
|
+
private handleKeyDown;
|
|
31
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
32
|
+
}
|
|
33
|
+
declare global {
|
|
34
|
+
interface HTMLElementTagNameMap {
|
|
35
|
+
'lukso-color-picker': LuksoColorPicker;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
export {};
|
|
39
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/index.ts"],"names":[],"mappings":"AAOA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,gBAAiB,SAAQ,qBAA4B;IAEhE,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAY;IAGvB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CAwFZ;IAEF,aAAa,CAAC,MAAM,EAAE,MAAM;IAwB5B,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM;IAiB5D,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAcX,aAAa;IAe3B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}
|