@lukso/web-components 1.88.1 → 1.89.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/components/index.cjs +9 -4
  2. package/dist/components/index.d.ts +1 -0
  3. package/dist/components/index.d.ts.map +1 -1
  4. package/dist/components/index.js +5 -4
  5. package/dist/components/lukso-button/index.cjs +1 -1
  6. package/dist/components/lukso-button/index.js +1 -1
  7. package/dist/components/lukso-card/index.cjs +3 -3
  8. package/dist/components/lukso-card/index.js +3 -3
  9. package/dist/components/lukso-checkbox/index.cjs +1 -1
  10. package/dist/components/lukso-checkbox/index.js +1 -1
  11. package/dist/components/lukso-color-picker/index.cjs +340 -0
  12. package/dist/components/lukso-color-picker/index.d.ts +39 -0
  13. package/dist/components/lukso-color-picker/index.d.ts.map +1 -0
  14. package/dist/components/lukso-color-picker/index.js +338 -0
  15. package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts +19 -0
  16. package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts.map +1 -0
  17. package/dist/components/lukso-dropdown/index.cjs +4 -4
  18. package/dist/components/lukso-dropdown/index.js +4 -4
  19. package/dist/components/lukso-dropdown-option/index.cjs +1 -1
  20. package/dist/components/lukso-dropdown-option/index.js +1 -1
  21. package/dist/components/lukso-footer/index.cjs +1 -1
  22. package/dist/components/lukso-footer/index.js +1 -1
  23. package/dist/components/lukso-icon/index.cjs +2 -2
  24. package/dist/components/lukso-icon/index.js +2 -2
  25. package/dist/components/lukso-image/index.cjs +2 -2
  26. package/dist/components/lukso-image/index.js +2 -2
  27. package/dist/components/lukso-input/index.cjs +7 -7
  28. package/dist/components/lukso-input/index.d.ts +1 -1
  29. package/dist/components/lukso-input/index.js +7 -7
  30. package/dist/components/lukso-modal/index.cjs +1 -1
  31. package/dist/components/lukso-modal/index.js +1 -1
  32. package/dist/components/lukso-navbar/index.cjs +3 -3
  33. package/dist/components/lukso-navbar/index.js +3 -3
  34. package/dist/components/lukso-pagination/index.cjs +2 -2
  35. package/dist/components/lukso-pagination/index.js +2 -2
  36. package/dist/components/lukso-profile/index.cjs +2 -2
  37. package/dist/components/lukso-profile/index.js +2 -2
  38. package/dist/components/lukso-progress/index.cjs +2 -2
  39. package/dist/components/lukso-progress/index.js +2 -2
  40. package/dist/components/lukso-sanitize/index.cjs +1 -1
  41. package/dist/components/lukso-sanitize/index.js +1 -1
  42. package/dist/components/lukso-search/index.cjs +4 -4
  43. package/dist/components/lukso-search/index.js +4 -4
  44. package/dist/components/lukso-select/index.cjs +4 -4
  45. package/dist/components/lukso-select/index.js +4 -4
  46. package/dist/components/lukso-share/index.cjs +1 -1
  47. package/dist/components/lukso-share/index.js +1 -1
  48. package/dist/components/lukso-switch/index.cjs +2 -2
  49. package/dist/components/lukso-switch/index.js +2 -2
  50. package/dist/components/lukso-tag/index.cjs +2 -2
  51. package/dist/components/lukso-tag/index.js +2 -2
  52. package/dist/components/lukso-terms/index.cjs +2 -2
  53. package/dist/components/lukso-terms/index.js +2 -2
  54. package/dist/components/lukso-test/index.cjs +1 -1
  55. package/dist/components/lukso-test/index.js +1 -1
  56. package/dist/components/lukso-textarea/index.cjs +7 -7
  57. package/dist/components/lukso-textarea/index.d.ts +1 -1
  58. package/dist/components/lukso-textarea/index.js +7 -7
  59. package/dist/components/lukso-tooltip/index.cjs +2 -2
  60. package/dist/components/lukso-tooltip/index.js +2 -2
  61. package/dist/components/lukso-username/index.cjs +2 -2
  62. package/dist/components/lukso-username/index.js +2 -2
  63. package/dist/components/lukso-wizard/index.cjs +1 -1
  64. package/dist/components/lukso-wizard/index.js +1 -1
  65. package/dist/{index-0f429f67.js → index-0b520c6a.js} +1 -1
  66. package/dist/index-31c27410.cjs +46 -0
  67. package/dist/{index-8186b19a.cjs → index-3429e18a.cjs} +1 -1
  68. package/dist/{index-752774b2.cjs → index-bca7ccb0.cjs} +1 -1
  69. package/dist/{index-62e802f0.js → index-c6f49fea.js} +1 -1
  70. package/dist/index-e73db22f.js +39 -0
  71. package/dist/index.cjs +9 -4
  72. package/dist/index.js +5 -4
  73. package/dist/shared/tailwind-element/index.cjs +1 -1
  74. package/dist/shared/tailwind-element/index.js +1 -1
  75. package/dist/{style-map-272091aa.cjs → style-map-77b74f74.cjs} +1 -1
  76. package/dist/{style-map-f7093d93.js → style-map-d5d85b80.js} +1 -1
  77. package/package.json +6 -1
  78. package/dist/index-14baf4da.js +0 -39
  79. package/dist/index-8322d22b.cjs +0 -46
@@ -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 components_luksoDropdown_index = require('../index-8186b19a.cjs');
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-8322d22b.cjs');
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-272091aa.cjs');
39
+ require('../style-map-77b74f74.cjs');
39
40
  require('../directive-8278ab14.cjs');
40
- require('../index-752774b2.cjs');
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"}
@@ -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 { L as LuksoDropdown } from '../index-62e802f0.js';
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-14baf4da.js';
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-f7093d93.js';
35
+ import '../style-map-d5d85b80.js';
35
36
  import '../directive-2bb7789e.js';
36
- import '../index-0f429f67.js';
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-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-14baf4da.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-e73db22f.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
@@ -2,15 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
- const styleMap = require('../../style-map-272091aa.cjs');
8
+ const styleMap = require('../../style-map-77b74f74.cjs');
9
9
  const index = require('../../index-1d3f4a5a.cjs');
10
10
  require('../lukso-profile/index.cjs');
11
11
  require('../../tailwind-config.cjs');
12
12
  const cn = require('../../cn-5ceac001.cjs');
13
- const index$1 = require('../../index-752774b2.cjs');
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-14baf4da.js';
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-f7093d93.js';
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-0f429f67.js';
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-8322d22b.cjs');
5
+ const shared_tailwindElement_index = require('../../index-31c27410.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x, A } from '../../index-14baf4da.js';
1
+ import { a as TailwindElement, x, A } from '../../index-e73db22f.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as 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"}