@lukso/web-components 1.26.2 → 1.27.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 (49) hide show
  1. package/dist/components/index.cjs +7 -2
  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 +3 -2
  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 +2 -2
  8. package/dist/components/lukso-card/index.js +2 -2
  9. package/dist/components/lukso-icon/index.cjs +2 -2
  10. package/dist/components/lukso-icon/index.js +2 -2
  11. package/dist/components/lukso-input/index.cjs +1 -1
  12. package/dist/components/lukso-input/index.js +1 -1
  13. package/dist/components/lukso-modal/index.cjs +1 -1
  14. package/dist/components/lukso-modal/index.js +1 -1
  15. package/dist/components/lukso-navbar/index.cjs +1 -1
  16. package/dist/components/lukso-navbar/index.js +1 -1
  17. package/dist/components/lukso-profile/index.cjs +2 -2
  18. package/dist/components/lukso-profile/index.js +2 -2
  19. package/dist/components/lukso-progress/index.cjs +2 -2
  20. package/dist/components/lukso-progress/index.js +2 -2
  21. package/dist/components/lukso-sanitize/index.cjs +1 -1
  22. package/dist/components/lukso-sanitize/index.js +1 -1
  23. package/dist/components/lukso-share/index.cjs +1 -1
  24. package/dist/components/lukso-share/index.js +1 -1
  25. package/dist/components/lukso-switch/index.cjs +89 -0
  26. package/dist/components/lukso-switch/index.d.ts +16 -0
  27. package/dist/components/lukso-switch/index.d.ts.map +1 -0
  28. package/dist/components/lukso-switch/index.js +87 -0
  29. package/dist/components/lukso-tag/index.cjs +2 -2
  30. package/dist/components/lukso-tag/index.js +2 -2
  31. package/dist/components/lukso-terms/index.cjs +2 -2
  32. package/dist/components/lukso-terms/index.js +2 -2
  33. package/dist/components/lukso-test/index.cjs +1 -1
  34. package/dist/components/lukso-test/index.js +1 -1
  35. package/dist/components/lukso-username/index.cjs +2 -2
  36. package/dist/components/lukso-username/index.js +2 -2
  37. package/dist/components/lukso-wizard/index.cjs +1 -1
  38. package/dist/components/lukso-wizard/index.js +1 -1
  39. package/dist/index-1fd66a06.js +52 -0
  40. package/dist/index-430746dd.cjs +59 -0
  41. package/dist/index.cjs +7 -2
  42. package/dist/index.js +3 -2
  43. package/dist/shared/tailwind-element/index.cjs +1 -1
  44. package/dist/shared/tailwind-element/index.js +1 -1
  45. package/dist/{style-map-9b6875c8.cjs → style-map-3b3cdad1.cjs} +1 -1
  46. package/dist/{style-map-21c35bc6.js → style-map-a05761f1.js} +1 -1
  47. package/package.json +6 -1
  48. package/dist/index-53f01760.cjs +0 -59
  49. package/dist/index-b0a06427.js +0 -52
@@ -12,16 +12,17 @@ const components_luksoProfile_index = require('./lukso-profile/index.cjs');
12
12
  const components_luksoProgress_index = require('./lukso-progress/index.cjs');
13
13
  const components_luksoSanitize_index = require('./lukso-sanitize/index.cjs');
14
14
  const components_luksoShare_index = require('./lukso-share/index.cjs');
15
+ const components_luksoSwitch_index = require('./lukso-switch/index.cjs');
15
16
  const components_luksoTag_index = require('./lukso-tag/index.cjs');
16
17
  const components_luksoTerms_index = require('./lukso-terms/index.cjs');
17
18
  const components_luksoTest_index = require('./lukso-test/index.cjs');
18
19
  const components_luksoUsername_index = require('./lukso-username/index.cjs');
19
20
  const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
20
- const shared_tailwindElement_index = require('../index-53f01760.cjs');
21
+ const shared_tailwindElement_index = require('../index-430746dd.cjs');
21
22
  require('../directive-db00f5fb.cjs');
22
23
  require('../state-a62a7d5d.cjs');
23
24
  require('../index-7dc05ee5.cjs');
24
- require('../style-map-9b6875c8.cjs');
25
+ require('../style-map-3b3cdad1.cjs');
25
26
 
26
27
 
27
28
 
@@ -65,6 +66,10 @@ Object.defineProperty(exports, 'LuksoShare', {
65
66
  enumerable: true,
66
67
  get: () => components_luksoShare_index.LuksoShare
67
68
  });
69
+ Object.defineProperty(exports, 'LuksoSwitch', {
70
+ enumerable: true,
71
+ get: () => components_luksoSwitch_index.LuksoSwitch
72
+ });
68
73
  Object.defineProperty(exports, 'LuksoTag', {
69
74
  enumerable: true,
70
75
  get: () => components_luksoTag_index.LuksoTag
@@ -8,6 +8,7 @@ export * from './lukso-profile/index';
8
8
  export * from './lukso-progress/index';
9
9
  export * from './lukso-sanitize/index';
10
10
  export * from './lukso-share/index';
11
+ export * from './lukso-switch/index';
11
12
  export * from './lukso-tag/index';
12
13
  export * from './lukso-terms/index';
13
14
  export * from './lukso-test/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,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,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,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,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,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
@@ -8,13 +8,14 @@ export { LuksoProfile } from './lukso-profile/index.js';
8
8
  export { LuksoProgress } from './lukso-progress/index.js';
9
9
  export { LuksoSanitize } from './lukso-sanitize/index.js';
10
10
  export { LuksoShare } from './lukso-share/index.js';
11
+ export { LuksoSwitch } from './lukso-switch/index.js';
11
12
  export { LuksoTag } from './lukso-tag/index.js';
12
13
  export { LuksoTerms } from './lukso-terms/index.js';
13
14
  export { LuksoTest } from './lukso-test/index.js';
14
15
  export { LuksoUsername } from './lukso-username/index.js';
15
16
  export { LuksoWizard } from './lukso-wizard/index.js';
16
- export { a as TailwindElement, T as TailwindStyledElement } from '../index-b0a06427.js';
17
+ export { a as TailwindElement, T as TailwindStyledElement } from '../index-1fd66a06.js';
17
18
  import '../directive-9ec64c08.js';
18
19
  import '../state-7fde94d1.js';
19
20
  import '../index-714323c9.js';
20
- import '../style-map-21c35bc6.js';
21
+ import '../style-map-a05761f1.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-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const state = require('../../state-a62a7d5d.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { t } from '../../state-7fde94d1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
9
9
  require('../lukso-profile/index.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
5
5
  import '../lukso-profile/index.js';
6
6
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
 
9
9
  const style = ":host {\n display: inline-flex\n}";
10
10
 
@@ -1,6 +1,6 @@
1
- import { x, T as TailwindStyledElement } from '../../index-b0a06427.js';
1
+ import { x, T as TailwindStyledElement } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
 
5
5
  const style = ":host {\n display: inline-flex\n}";
6
6
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const state = require('../../state-a62a7d5d.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x, A } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x, A } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { t } from '../../state-7fde94d1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.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-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const index = require('../../index-7dc05ee5.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { c as customClassMap } from '../../index-714323c9.js';
4
4
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const state = require('../../state-a62a7d5d.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { t } from '../../state-7fde94d1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
 
9
9
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
10
10
 
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
 
5
5
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
6
6
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
5
5
 
6
6
  var __defProp = Object.defineProperty;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
 
8
8
  /**
@@ -1,4 +1,4 @@
1
- import { A, b as T, a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { A, b as T, a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { i, t, b as e$1, e as e$2, a as e$3 } from '../../directive-9ec64c08.js';
3
3
 
4
4
  /**
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const index = require('../../index-7dc05ee5.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { c as customClassMap } from '../../index-714323c9.js';
4
4
 
@@ -0,0 +1,89 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
+ const directive = require('../../directive-db00f5fb.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
+ const index = require('../../index-7dc05ee5.cjs');
9
+
10
+ var __defProp = Object.defineProperty;
11
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
12
+ var __decorateClass = (decorators, target, key, kind) => {
13
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
14
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
+ if (decorator = decorators[i])
16
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
17
+ if (kind && result)
18
+ __defProp(target, key, result);
19
+ return result;
20
+ };
21
+ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.TailwindElement {
22
+ constructor() {
23
+ super(...arguments);
24
+ this.color = "green-54";
25
+ this.isChecked = false;
26
+ this.isDisabled = false;
27
+ this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
28
+ this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
29
+ }
30
+ handleChange(event) {
31
+ this.isChecked = !this.isChecked;
32
+ const target = event.target;
33
+ const blurEvent = new CustomEvent("on-change", {
34
+ detail: {
35
+ value: target.value,
36
+ event
37
+ },
38
+ bubbles: false,
39
+ composed: true
40
+ });
41
+ this.dispatchEvent(blurEvent);
42
+ }
43
+ render() {
44
+ return shared_tailwindElement_index.x`
45
+ <label
46
+ for="switch"
47
+ class=${index.customClassMap({
48
+ [this.defaultLabelStyles]: true
49
+ })}
50
+ style=${styleMap.o({
51
+ backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
52
+ opacity: this.isDisabled ? 0.7 : 1,
53
+ cursor: this.isDisabled ? "not-allowed" : "pointer"
54
+ })}
55
+ >
56
+ <input
57
+ type="checkbox"
58
+ id="switch"
59
+ ?checked=${this.isChecked}
60
+ ?disabled=${this.isDisabled}
61
+ class=${index.customClassMap({
62
+ [this.defaultInputStyles]: true,
63
+ ["translate-x-4"]: this.isChecked
64
+ })}
65
+ style=${styleMap.o({
66
+ borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
67
+ cursor: this.isDisabled ? "not-allowed" : "pointer"
68
+ })}
69
+ @change=${this.handleChange}
70
+ />
71
+ </label>
72
+ `;
73
+ }
74
+ };
75
+ __decorateClass([
76
+ directive.e({ type: String })
77
+ ], exports.LuksoSwitch.prototype, "color", 2);
78
+ __decorateClass([
79
+ directive.e({ type: Boolean, attribute: "is-checked" })
80
+ ], exports.LuksoSwitch.prototype, "isChecked", 2);
81
+ __decorateClass([
82
+ directive.e({
83
+ type: Boolean,
84
+ attribute: "is-disabled"
85
+ })
86
+ ], exports.LuksoSwitch.prototype, "isDisabled", 2);
87
+ exports.LuksoSwitch = __decorateClass([
88
+ directive.e$1("lukso-switch")
89
+ ], exports.LuksoSwitch);
@@ -0,0 +1,16 @@
1
+ import { TailwindElement } from '../../shared/tailwind-element';
2
+ export declare class LuksoSwitch extends TailwindElement {
3
+ color: string;
4
+ private isChecked;
5
+ private isDisabled;
6
+ private handleChange;
7
+ private defaultLabelStyles;
8
+ private defaultInputStyles;
9
+ render(): import("lit-html").TemplateResult<1>;
10
+ }
11
+ declare global {
12
+ interface HTMLElementTagNameMap {
13
+ 'lukso-switch': LuksoSwitch;
14
+ }
15
+ }
16
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
@@ -0,0 +1,87 @@
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
+ import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
+ import { c as customClassMap } from '../../index-714323c9.js';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result)
14
+ __defProp(target, key, result);
15
+ return result;
16
+ };
17
+ let LuksoSwitch = class extends TailwindElement {
18
+ constructor() {
19
+ super(...arguments);
20
+ this.color = "green-54";
21
+ this.isChecked = false;
22
+ this.isDisabled = false;
23
+ this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
24
+ this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
25
+ }
26
+ handleChange(event) {
27
+ this.isChecked = !this.isChecked;
28
+ const target = event.target;
29
+ const blurEvent = new CustomEvent("on-change", {
30
+ detail: {
31
+ value: target.value,
32
+ event
33
+ },
34
+ bubbles: false,
35
+ composed: true
36
+ });
37
+ this.dispatchEvent(blurEvent);
38
+ }
39
+ render() {
40
+ return x`
41
+ <label
42
+ for="switch"
43
+ class=${customClassMap({
44
+ [this.defaultLabelStyles]: true
45
+ })}
46
+ style=${o({
47
+ backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
48
+ opacity: this.isDisabled ? 0.7 : 1,
49
+ cursor: this.isDisabled ? "not-allowed" : "pointer"
50
+ })}
51
+ >
52
+ <input
53
+ type="checkbox"
54
+ id="switch"
55
+ ?checked=${this.isChecked}
56
+ ?disabled=${this.isDisabled}
57
+ class=${customClassMap({
58
+ [this.defaultInputStyles]: true,
59
+ ["translate-x-4"]: this.isChecked
60
+ })}
61
+ style=${o({
62
+ borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
63
+ cursor: this.isDisabled ? "not-allowed" : "pointer"
64
+ })}
65
+ @change=${this.handleChange}
66
+ />
67
+ </label>
68
+ `;
69
+ }
70
+ };
71
+ __decorateClass([
72
+ e({ type: String })
73
+ ], LuksoSwitch.prototype, "color", 2);
74
+ __decorateClass([
75
+ e({ type: Boolean, attribute: "is-checked" })
76
+ ], LuksoSwitch.prototype, "isChecked", 2);
77
+ __decorateClass([
78
+ e({
79
+ type: Boolean,
80
+ attribute: "is-disabled"
81
+ })
82
+ ], LuksoSwitch.prototype, "isDisabled", 2);
83
+ LuksoSwitch = __decorateClass([
84
+ e$1("lukso-switch")
85
+ ], LuksoSwitch);
86
+
87
+ export { LuksoSwitch };
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
5
5
 
6
6
  var __defProp = Object.defineProperty;
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const state = require('../../state-a62a7d5d.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
11
- require('../../style-map-9b6875c8.cjs');
11
+ require('../../style-map-3b3cdad1.cjs');
12
12
 
13
13
  const style = ":host {\n display: flex;\n height: 100%\n}";
14
14
 
@@ -1,10 +1,10 @@
1
- import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
3
  import { t } from '../../state-7fde94d1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
7
- import '../../style-map-21c35bc6.js';
7
+ import '../../style-map-a05761f1.js';
8
8
 
9
9
  const style = ":host {\n display: flex;\n height: 100%\n}";
10
10
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
 
8
8
  /**
@@ -1,4 +1,4 @@
1
- import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-b0a06427.js';
1
+ import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-1fd66a06.js';
2
2
  import { b as e$3, i as i$3, t as t$3, e as e$4, a as e$5 } from '../../directive-9ec64c08.js';
3
3
 
4
4
  /**
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
- const styleMap = require('../../style-map-9b6875c8.cjs');
7
+ const styleMap = require('../../style-map-3b3cdad1.cjs');
8
8
  const index = require('../../index-7dc05ee5.cjs');
9
9
 
10
10
  const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-b0a06427.js';
1
+ import { a as TailwindElement, x } from '../../index-1fd66a06.js';
2
2
  import { e, a as e$1 } from '../../directive-9ec64c08.js';
3
- import { o } from '../../style-map-21c35bc6.js';
3
+ import { o } from '../../style-map-a05761f1.js';
4
4
  import { c as customClassMap } from '../../index-714323c9.js';
5
5
 
6
6
  const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-53f01760.cjs');
5
+ const shared_tailwindElement_index = require('../../index-430746dd.cjs');
6
6
  const directive = require('../../directive-db00f5fb.cjs');
7
7
  const index = require('../../index-7dc05ee5.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { Z, b as T, T as TailwindStyledElement, x } from '../../index-b0a06427.js';
1
+ import { Z, b as T, T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
2
2
  import { b as e, i, t, e as e$1, a as e$2 } from '../../directive-9ec64c08.js';
3
3
  import { c as customClassMap } from '../../index-714323c9.js';
4
4