@lukso/web-components 1.85.0 → 1.86.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 (99) hide show
  1. package/dist/components/index.cjs +13 -3
  2. package/dist/components/index.d.ts +2 -0
  3. package/dist/components/index.d.ts.map +1 -1
  4. package/dist/components/index.js +5 -3
  5. package/dist/components/lukso-button/index.cjs +8 -5
  6. package/dist/components/lukso-button/index.d.ts +1 -1
  7. package/dist/components/lukso-button/index.d.ts.map +1 -1
  8. package/dist/components/lukso-button/index.js +8 -5
  9. package/dist/components/lukso-button/lukso-button.stories.d.ts +2 -0
  10. package/dist/components/lukso-button/lukso-button.stories.d.ts.map +1 -1
  11. package/dist/components/lukso-card/index.cjs +3 -3
  12. package/dist/components/lukso-card/index.js +3 -3
  13. package/dist/components/lukso-checkbox/index.cjs +1 -1
  14. package/dist/components/lukso-checkbox/index.js +1 -1
  15. package/dist/components/lukso-dropdown/index.cjs +26 -0
  16. package/dist/components/lukso-dropdown/index.d.ts +28 -0
  17. package/dist/components/lukso-dropdown/index.d.ts.map +1 -0
  18. package/dist/components/lukso-dropdown/index.js +15 -0
  19. package/dist/components/lukso-dropdown/lukso-dropdown.stories.d.ts +9 -0
  20. package/dist/components/lukso-dropdown/lukso-dropdown.stories.d.ts.map +1 -0
  21. package/dist/components/lukso-dropdown-option/index.cjs +110 -0
  22. package/dist/components/lukso-dropdown-option/index.d.ts +19 -0
  23. package/dist/components/lukso-dropdown-option/index.d.ts.map +1 -0
  24. package/dist/components/lukso-dropdown-option/index.js +108 -0
  25. package/dist/components/lukso-dropdown-option/lukso-dropdown-option.stories.d.ts +7 -0
  26. package/dist/components/lukso-dropdown-option/lukso-dropdown-option.stories.d.ts.map +1 -0
  27. package/dist/components/lukso-footer/index.cjs +1 -1
  28. package/dist/components/lukso-footer/index.js +1 -1
  29. package/dist/components/lukso-icon/index.cjs +2 -2
  30. package/dist/components/lukso-icon/index.js +2 -2
  31. package/dist/components/lukso-image/index.cjs +2 -2
  32. package/dist/components/lukso-image/index.js +2 -2
  33. package/dist/components/lukso-input/index.cjs +2 -2
  34. package/dist/components/lukso-input/index.js +2 -2
  35. package/dist/components/lukso-modal/index.cjs +1 -1
  36. package/dist/components/lukso-modal/index.js +1 -1
  37. package/dist/components/lukso-navbar/index.cjs +3 -3
  38. package/dist/components/lukso-navbar/index.js +3 -3
  39. package/dist/components/lukso-pagination/index.cjs +2 -2
  40. package/dist/components/lukso-pagination/index.js +2 -2
  41. package/dist/components/lukso-profile/index.cjs +2 -2
  42. package/dist/components/lukso-profile/index.js +2 -2
  43. package/dist/components/lukso-progress/index.cjs +2 -2
  44. package/dist/components/lukso-progress/index.js +2 -2
  45. package/dist/components/lukso-sanitize/index.cjs +1 -1
  46. package/dist/components/lukso-sanitize/index.js +1 -1
  47. package/dist/components/lukso-search/index.cjs +62 -71
  48. package/dist/components/lukso-search/index.d.ts +1 -3
  49. package/dist/components/lukso-search/index.d.ts.map +1 -1
  50. package/dist/components/lukso-search/index.js +62 -71
  51. package/dist/components/lukso-select/index.cjs +29 -98
  52. package/dist/components/lukso-select/index.d.ts +0 -3
  53. package/dist/components/lukso-select/index.d.ts.map +1 -1
  54. package/dist/components/lukso-select/index.js +28 -97
  55. package/dist/components/lukso-share/index.cjs +1 -1
  56. package/dist/components/lukso-share/index.js +1 -1
  57. package/dist/components/lukso-switch/index.cjs +2 -2
  58. package/dist/components/lukso-switch/index.js +2 -2
  59. package/dist/components/lukso-tag/index.cjs +2 -2
  60. package/dist/components/lukso-tag/index.js +2 -2
  61. package/dist/components/lukso-terms/index.cjs +2 -2
  62. package/dist/components/lukso-terms/index.js +2 -2
  63. package/dist/components/lukso-test/index.cjs +1 -1
  64. package/dist/components/lukso-test/index.js +1 -1
  65. package/dist/components/lukso-tooltip/index.cjs +2 -2
  66. package/dist/components/lukso-tooltip/index.js +2 -2
  67. package/dist/components/lukso-username/index.cjs +2 -2
  68. package/dist/components/lukso-username/index.js +2 -2
  69. package/dist/components/lukso-wizard/index.cjs +1 -1
  70. package/dist/components/lukso-wizard/index.js +1 -1
  71. package/dist/index-30881141.js +141 -0
  72. package/dist/index-abf15ef1.cjs +143 -0
  73. package/dist/index-b2b49383.js +39 -0
  74. package/dist/{index-3b498928.cjs → index-bf97dd78.cjs} +1 -1
  75. package/dist/index-df36fb06.cjs +46 -0
  76. package/dist/{index-8043be8a.js → index-f1acf332.js} +1 -1
  77. package/dist/index.cjs +13 -3
  78. package/dist/index.js +5 -3
  79. package/dist/shared/tailwind-element/index.cjs +1 -1
  80. package/dist/shared/tailwind-element/index.js +1 -1
  81. package/dist/{style-map-ad97bcc3.js → style-map-6e8b083a.js} +1 -1
  82. package/dist/{style-map-a6d61d04.cjs → style-map-7ce21e2c.cjs} +1 -1
  83. package/dist/styles/main.css +1 -0
  84. package/dist/styles/main.css.map +1 -1
  85. package/dist/tailwind-config.cjs +1 -1
  86. package/dist/tailwind-config.js +1 -1
  87. package/package.json +11 -1
  88. package/tools/cn.cjs +1 -1
  89. package/tools/cn.js +1 -1
  90. package/tools/index.cjs +1 -1
  91. package/tools/index.js +1 -1
  92. package/tools/sass/colors.scss +1 -0
  93. package/tools/styles/main.css +1 -0
  94. package/tools/{tailwind-config-cece8e4d.cjs → tailwind-config-783c9054.cjs} +1 -1
  95. package/tools/{tailwind-config-effbdecc.js → tailwind-config-e386df1d.js} +1 -1
  96. package/tools/tailwind-config.cjs +1 -1
  97. package/tools/tailwind-config.js +1 -1
  98. package/dist/index-e653a9ff.cjs +0 -46
  99. package/dist/index-f72579d6.js +0 -39
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
- const styleMap = require('../../style-map-a6d61d04.cjs');
7
+ const styleMap = require('../../style-map-7ce21e2c.cjs');
8
8
  require('../../directive-8278ab14.cjs');
9
9
 
10
10
  const style = ":host {\n display: inline-flex\n}";
@@ -1,6 +1,6 @@
1
- import { x, T as TailwindStyledElement } from '../../index-f72579d6.js';
1
+ import { x, T as TailwindStyledElement } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
- import { o } from '../../style-map-ad97bcc3.js';
3
+ import { o } from '../../style-map-6e8b083a.js';
4
4
  import '../../directive-2bb7789e.js';
5
5
 
6
6
  const style = ":host {\n display: inline-flex\n}";
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.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-a6d61d04.cjs');
8
+ const styleMap = require('../../style-map-7ce21e2c.cjs');
9
9
  const index = require('../../index-1d3f4a5a.cjs');
10
10
  require('../../directive-8278ab14.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
@@ -1,7 +1,7 @@
1
- import { a as TailwindElement, x } from '../../index-f72579d6.js';
1
+ import { a as TailwindElement, x } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
- import { o } from '../../style-map-ad97bcc3.js';
4
+ import { o } from '../../style-map-6e8b083a.js';
5
5
  import { c as ce } from '../../index-ca8e900d.js';
6
6
  import '../../directive-2bb7789e.js';
7
7
  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-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-5ceac001.cjs');
11
11
  require('../lukso-icon/index.cjs');
12
12
  require('../../bundle-mjs-d58a83c6.cjs');
13
- require('../../style-map-a6d61d04.cjs');
13
+ require('../../style-map-7ce21e2c.cjs');
14
14
  require('../../directive-8278ab14.cjs');
15
15
 
16
16
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-f72579d6.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-b54dcc61.js';
7
7
  import '../lukso-icon/index.js';
8
8
  import '../../bundle-mjs-fbc6e2a8.js';
9
- import '../../style-map-ad97bcc3.js';
9
+ import '../../style-map-6e8b083a.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}";
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-e9668573.cjs');
8
8
  require('../../directive-8278ab14.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-f72579d6.js';
1
+ import { a as TailwindElement, x } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { c as customClassMap } from '../../index-5e194caf.js';
4
4
  import '../../directive-2bb7789e.js';
@@ -2,16 +2,16 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.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');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-tag/index.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
12
- require('../../style-map-a6d61d04.cjs');
12
+ require('../../style-map-7ce21e2c.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
- require('../../index-3b498928.cjs');
14
+ require('../../index-bf97dd78.cjs');
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
17
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,13 +1,13 @@
1
- import { a as TailwindElement, x, A } from '../../index-f72579d6.js';
1
+ import { a as TailwindElement, x, A } from '../../index-b2b49383.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';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-tag/index.js';
7
7
  import '../../bundle-mjs-fbc6e2a8.js';
8
- import '../../style-map-ad97bcc3.js';
8
+ import '../../style-map-6e8b083a.js';
9
9
  import '../../directive-2bb7789e.js';
10
- import '../../index-8043be8a.js';
10
+ import '../../index-f1acf332.js';
11
11
 
12
12
  var __defProp = Object.defineProperty;
13
13
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.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');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-button/index.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
12
- require('../../style-map-a6d61d04.cjs');
12
+ require('../../style-map-7ce21e2c.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
14
  require('../../tailwind-config.cjs');
15
15
  require('../../cn-5ceac001.cjs');
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x } from '../../index-f72579d6.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-b2b49383.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';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-button/index.js';
7
7
  import '../../bundle-mjs-fbc6e2a8.js';
8
- import '../../style-map-ad97bcc3.js';
8
+ import '../../style-map-6e8b083a.js';
9
9
  import '../../directive-2bb7789e.js';
10
10
  import '../../tailwind-config.js';
11
11
  import '../../cn-b54dcc61.js';
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-1d3f4a5a.cjs');
8
8
  require('../lukso-image/index.cjs');
9
9
  require('../../bundle-mjs-d58a83c6.cjs');
10
10
  require('../../state-d9fb972b.cjs');
11
- require('../../style-map-a6d61d04.cjs');
11
+ require('../../style-map-7ce21e2c.cjs');
12
12
  require('../../directive-8278ab14.cjs');
13
13
 
14
14
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1,10 +1,10 @@
1
- import { a as TailwindElement, x } from '../../index-f72579d6.js';
1
+ import { a as TailwindElement, x } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { c as ce } from '../../index-ca8e900d.js';
4
4
  import '../lukso-image/index.js';
5
5
  import '../../bundle-mjs-fbc6e2a8.js';
6
6
  import '../../state-b9ca4e74.js';
7
- import '../../style-map-ad97bcc3.js';
7
+ import '../../style-map-6e8b083a.js';
8
8
  import '../../directive-2bb7789e.js';
9
9
 
10
10
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
- const styleMap = require('../../style-map-a6d61d04.cjs');
7
+ const styleMap = require('../../style-map-7ce21e2c.cjs');
8
8
  require('../../tailwind-config.cjs');
9
9
  const cn = require('../../cn-5ceac001.cjs');
10
10
  require('../../directive-8278ab14.cjs');
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-f72579d6.js';
1
+ import { a as TailwindElement, x } from '../../index-b2b49383.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
- import { o } from '../../style-map-ad97bcc3.js';
3
+ import { o } from '../../style-map-6e8b083a.js';
4
4
  import '../../tailwind-config.js';
5
5
  import { c as cn } from '../../cn-b54dcc61.js';
6
6
  import '../../directive-2bb7789e.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-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { A, b as T, a as TailwindElement, x } from '../../index-f72579d6.js';
1
+ import { A, b as T, a as TailwindElement, x } from '../../index-b2b49383.js';
2
2
  import { n, e as e$2 } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { i, t, e as e$1 } from '../../directive-2bb7789e.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-e653a9ff.cjs');
5
+ const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
@@ -10,11 +10,13 @@ require('../lukso-icon/index.cjs');
10
10
  require('../lukso-profile/index.cjs');
11
11
  require('../lukso-username/index.cjs');
12
12
  require('../lukso-input/index.cjs');
13
+ require('../../index-abf15ef1.cjs');
14
+ require('../lukso-dropdown-option/index.cjs');
13
15
  require('../../bundle-mjs-d58a83c6.cjs');
14
- require('../../style-map-a6d61d04.cjs');
16
+ require('../../style-map-7ce21e2c.cjs');
15
17
  require('../../directive-8278ab14.cjs');
16
18
  require('../lukso-image/index.cjs');
17
- require('../../index-3b498928.cjs');
19
+ require('../../index-bf97dd78.cjs');
18
20
  require('../../tailwind-config.cjs');
19
21
  require('../../cn-5ceac001.cjs');
20
22
 
@@ -61,48 +63,21 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
61
63
  this.isDebouncing = false;
62
64
  this.resultsParsed = [];
63
65
  this.searchTerm = "";
64
- this.inputStyles = index.ce({
66
+ this.styles = index.ce({
65
67
  slots: {
66
- dropdownWrapper: "bg-neutral-100 border border-neutral-90 shadow-1xl z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64",
67
68
  loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
68
69
  },
69
70
  variants: {
70
71
  size: {
71
72
  small: {
72
- dropdownWrapper: "rounded-8 p-2 mt-1",
73
73
  loading: "h-7 rounded-4"
74
74
  },
75
75
  medium: {
76
- dropdownWrapper: "rounded-12 p-3 mt-2",
77
76
  loading: "h-10 rounded-8"
78
77
  }
79
78
  }
80
79
  }
81
80
  });
82
- this.resultStyles = index.ce({
83
- slots: {
84
- resultString: "text-neutral-20 cursor-pointer hover:bg-neutral-98",
85
- resultProfile: "cursor-pointer hover:bg-neutral-98 flex gap-2 items-center"
86
- },
87
- variants: {
88
- selected: {
89
- true: {
90
- resultString: "bg-neutral-98",
91
- resultProfile: "bg-neutral-98"
92
- }
93
- },
94
- size: {
95
- small: {
96
- resultString: "paragraph-inter-12-regular rounded-4 py-1 px-2",
97
- resultProfile: "rounded-4 py-1 px-2"
98
- },
99
- medium: {
100
- resultString: "paragraph-inter-14-regular rounded-8 p-2",
101
- resultProfile: "rounded-8 p-2"
102
- }
103
- }
104
- }
105
- });
106
81
  }
107
82
  connectedCallback() {
108
83
  super.connectedCallback();
@@ -144,68 +119,84 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
144
119
  console.error("Unknown result type", result);
145
120
  }
146
121
  }
147
- return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(resultTemplates)}`;
122
+ return shared_tailwindElement_index.x`<lukso-dropdown
123
+ size=${this.size}
124
+ is-open
125
+ is-open-on-outside-click
126
+ is-full-width
127
+ >${resultTemplates}</lukso-dropdown
128
+ >`;
148
129
  }
149
130
  noResultsTemplate() {
150
- return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(
151
- shared_tailwindElement_index.x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
131
+ return shared_tailwindElement_index.x`<lukso-dropdown
132
+ size=${this.size}
133
+ is-open
134
+ is-open-on-outside-click
135
+ is-full-width
136
+ >${shared_tailwindElement_index.x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
152
137
  ${this.noResultsText}
153
- </div>`
154
- )}`;
138
+ </div>`}</lukso-dropdown
139
+ >`;
155
140
  }
156
141
  loadingTemplate() {
157
- const { loading } = this.inputStyles({
142
+ const { loading } = this.styles({
158
143
  size: this.size
159
144
  });
160
145
  if (this.showNoResults) {
161
- return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
162
- <div role="status" class="flex flex-col gap-1">
163
- <div class=${loading()}></div>
164
- </div>
165
- `)}`;
146
+ return shared_tailwindElement_index.x`<lukso-dropdown
147
+ size=${this.size}
148
+ is-open
149
+ is-open-on-outside-click
150
+ is-full-width
151
+ >${shared_tailwindElement_index.x`
152
+ <div role="status" class="flex flex-col gap-1">
153
+ <div class=${loading()}></div>
154
+ </div>
155
+ `}</lukso-dropdown
156
+ >`;
166
157
  }
167
158
  if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
168
- return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
159
+ return shared_tailwindElement_index.x`<lukso-dropdown
160
+ size=${this.size}
161
+ is-open
162
+ is-open-on-outside-click
163
+ is-full-width
164
+ >${shared_tailwindElement_index.x`
165
+ <div role="status" class="flex flex-col gap-1">
166
+ ${[...Array(5)].map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
167
+ </div>
168
+ `}</lukso-dropdown
169
+ >`;
170
+ }
171
+ return shared_tailwindElement_index.x`<lukso-dropdown
172
+ size=${this.size}
173
+ is-open
174
+ is-open-on-outside-click
175
+ is-full-width
176
+ >${shared_tailwindElement_index.x`
169
177
  <div role="status" class="flex flex-col gap-1">
170
- ${[...Array(5)].map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
178
+ ${this.resultsParsed.map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
171
179
  </div>
172
- `)}`;
173
- }
174
- return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
175
- <div role="status" class="flex flex-col gap-1">
176
- ${this.resultsParsed.map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
177
- </div>
178
- `)}`;
179
- }
180
- dropdownWrapperTemplate(innerTemplate) {
181
- const { dropdownWrapper } = this.inputStyles({
182
- size: this.size
183
- });
184
- return shared_tailwindElement_index.x`<div class=${dropdownWrapper()}>${innerTemplate}</div>`;
180
+ `}</lukso-dropdown
181
+ >`;
185
182
  }
186
183
  resultStringTemplate(result, index) {
187
- const { resultString } = this.resultStyles({
188
- selected: this.selected === index + 1,
189
- size: this.size
190
- });
191
- return shared_tailwindElement_index.x`<div
184
+ return shared_tailwindElement_index.x`<lukso-dropdown-option
192
185
  data-id="${result.id}"
193
186
  data-index="${index + 1}"
194
- class=${resultString()}
187
+ ?is-selected=${this.selected === index + 1}
188
+ size=${this.size}
195
189
  @click=${() => this.handleSelect(result)}
196
190
  >
197
191
  ${result.value}
198
- </div>`;
192
+ </lukso-dropdown-option>`;
199
193
  }
200
194
  resultProfileTemplate(result, index) {
201
- const { resultProfile } = this.resultStyles({
202
- selected: this.selected === index + 1,
203
- size: this.size
204
- });
205
- return shared_tailwindElement_index.x`<div
195
+ return shared_tailwindElement_index.x`<lukso-dropdown-option
206
196
  data-id="${result.address}"
207
197
  data-index="${index + 1}"
208
- class=${resultProfile()}
198
+ ?is-selected=${this.selected === index + 1}
199
+ size=${this.size}
209
200
  @click=${() => this.handleSelect(result)}
210
201
  >
211
202
  <lukso-profile
@@ -221,7 +212,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
221
212
  max-width="300"
222
213
  size="medium"
223
214
  ></lukso-username>
224
- </div>`;
215
+ </lukso-dropdown-option>`;
225
216
  }
226
217
  async handleOutsideDropdownClick(event) {
227
218
  const element = event.target;
@@ -40,15 +40,13 @@ export declare class LuksoSearch extends LuksoSearch_base {
40
40
  private debounceTimer;
41
41
  private resultsParsed;
42
42
  private searchTerm;
43
- private inputStyles;
44
- private resultStyles;
43
+ private styles;
45
44
  connectedCallback(): void;
46
45
  disconnectedCallback(): void;
47
46
  willUpdate(changedProperties: PropertyValues<this>): void;
48
47
  resultsTemplate(): TemplateResult<1>;
49
48
  noResultsTemplate(): TemplateResult<1>;
50
49
  loadingTemplate(): TemplateResult<1>;
51
- dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
52
50
  resultStringTemplate(result: SearchStringResult, index: number): TemplateResult<1>;
53
51
  resultProfileTemplate(result: SearchProfileResult, index: number): TemplateResult<1>;
54
52
  private handleOutsideDropdownClick;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAGnB,QAAQ,UAAQ;IAGhB,oBAAoB,UAAQ;IAG5B,QAAQ,MAAY;IAGpB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IA+Bf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAgB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA4BlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;YAYZ,UAAU;YAeV,gBAAgB;YAehB,WAAW;YAuBX,WAAW;YAmBX,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,0BAA0B,CAAA;AACjC,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAG3C,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAGnB,QAAQ,UAAQ;IAGhB,oBAAoB,UAAQ;IAG5B,QAAQ,MAAY;IAGpB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,MAAM,CAcZ;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,eAAe;IA2Bf,iBAAiB;IAYjB,eAAe;IAiDf,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAY9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YAwBlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;YAYZ,UAAU;YAeV,gBAAgB;YAehB,WAAW;YAuBX,WAAW;YAmBX,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}