@lukso/web-components 1.72.0 → 1.74.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 +3 -3
- package/dist/components/index.js +3 -3
- package/dist/components/lukso-button/index.cjs +1 -1
- package/dist/components/lukso-button/index.d.ts +2 -2
- package/dist/components/lukso-button/index.d.ts.map +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-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/icons/database.d.ts +3 -0
- package/dist/components/lukso-icon/icons/database.d.ts.map +1 -0
- package/dist/components/lukso-icon/icons/empty-outline.d.ts +3 -0
- package/dist/components/lukso-icon/icons/empty-outline.d.ts.map +1 -0
- package/dist/components/lukso-icon/index.cjs +61 -3
- package/dist/components/lukso-icon/index.d.ts.map +1 -1
- package/dist/components/lukso-icon/index.js +61 -3
- 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 +170 -43
- package/dist/components/lukso-input/index.d.ts +11 -6
- package/dist/components/lukso-input/index.d.ts.map +1 -1
- package/dist/components/lukso-input/index.js +170 -43
- package/dist/components/lukso-input/lukso-input.stories.d.ts +5 -1
- package/dist/components/lukso-input/lukso-input.stories.d.ts.map +1 -1
- 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-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 +105 -139
- package/dist/components/lukso-search/index.d.ts +6 -12
- package/dist/components/lukso-search/index.d.ts.map +1 -1
- package/dist/components/lukso-search/index.js +101 -135
- package/dist/components/lukso-search/lukso-search.stories.d.ts +2 -0
- package/dist/components/lukso-search/lukso-search.stories.d.ts.map +1 -1
- package/dist/components/lukso-select/index.cjs +234 -45
- package/dist/components/lukso-select/index.d.ts +18 -5
- package/dist/components/lukso-select/index.d.ts.map +1 -1
- package/dist/components/lukso-select/index.js +234 -45
- package/dist/components/lukso-select/lukso-select.stories.d.ts +12 -0
- package/dist/components/lukso-select/lukso-select.stories.d.ts.map +1 -1
- 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-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-09db75ee.js +39 -0
- package/dist/index-9b930f6a.cjs +46 -0
- package/dist/{index-59f199b0.cjs → index-a1e4b7d4.cjs} +1 -1
- package/dist/{index-8c727f4c.js → index-dfdfb6fe.js} +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/shared/types.d.ts +1 -0
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/{style-map-c66282ea.js → style-map-3669b30c.js} +1 -1
- package/dist/{style-map-6337084a.cjs → style-map-ebf3a8d2.cjs} +1 -1
- package/dist/styles/main.css +3 -0
- package/dist/styles/main.css.map +1 -1
- package/package.json +3 -2
- package/tools/sass/typography.scss +4 -0
- package/tools/styles/main.css +3 -0
- package/dist/index-25503efb.cjs +0 -46
- package/dist/index-bf6e0a1d.js +0 -39
|
@@ -2,16 +2,16 @@
|
|
|
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-9b930f6a.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-
|
|
12
|
+
require('../../style-map-ebf3a8d2.cjs');
|
|
13
13
|
require('../../directive-8278ab14.cjs');
|
|
14
|
-
require('../../index-
|
|
14
|
+
require('../../index-a1e4b7d4.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-
|
|
1
|
+
import { a as TailwindElement, x, A } from '../../index-09db75ee.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-
|
|
8
|
+
import '../../style-map-3669b30c.js';
|
|
9
9
|
import '../../directive-2bb7789e.js';
|
|
10
|
-
import '../../index-
|
|
10
|
+
import '../../index-dfdfb6fe.js';
|
|
11
11
|
|
|
12
12
|
var __defProp = Object.defineProperty;
|
|
13
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -2,13 +2,13 @@
|
|
|
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-9b930f6a.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-
|
|
11
|
+
require('../../style-map-ebf3a8d2.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-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-09db75ee.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-
|
|
7
|
+
import '../../style-map-3669b30c.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-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-ebf3a8d2.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-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-09db75ee.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-3669b30c.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-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-9b930f6a.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-
|
|
1
|
+
import { A, b as T, a as TailwindElement, x } from '../../index-09db75ee.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,19 +2,22 @@
|
|
|
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-9b930f6a.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
|
-
const index = require('../../index-
|
|
8
|
+
const index = require('../../index-1d3f4a5a.cjs');
|
|
9
9
|
require('../lukso-icon/index.cjs');
|
|
10
10
|
require('../lukso-profile/index.cjs');
|
|
11
11
|
require('../lukso-username/index.cjs');
|
|
12
|
-
require('
|
|
13
|
-
require('../../style-map-6337084a.cjs');
|
|
14
|
-
require('../../index-1d3f4a5a.cjs');
|
|
12
|
+
require('../lukso-input/index.cjs');
|
|
15
13
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
14
|
+
require('../../style-map-ebf3a8d2.cjs');
|
|
15
|
+
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../lukso-image/index.cjs');
|
|
17
|
-
require('../../index-
|
|
17
|
+
require('../../index-e9668573.cjs');
|
|
18
|
+
require('../../index-a1e4b7d4.cjs');
|
|
19
|
+
require('../../tailwind-config.cjs');
|
|
20
|
+
require('../../cn-5ceac001.cjs');
|
|
18
21
|
|
|
19
22
|
const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
|
|
20
23
|
|
|
@@ -51,15 +54,54 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
51
54
|
this.isSearching = false;
|
|
52
55
|
this.noResultsText = "";
|
|
53
56
|
this.showNoResults = false;
|
|
57
|
+
this.hideLoading = false;
|
|
54
58
|
this.selected = void 0;
|
|
55
|
-
this.
|
|
56
|
-
this.hasHighlight = false;
|
|
59
|
+
this.size = "medium";
|
|
57
60
|
this.isDebouncing = false;
|
|
58
61
|
this.resultsParsed = [];
|
|
59
62
|
this.searchTerm = "";
|
|
60
|
-
this.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
this.inputStyles = index.ce({
|
|
64
|
+
slots: {
|
|
65
|
+
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",
|
|
66
|
+
loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
|
|
67
|
+
},
|
|
68
|
+
variants: {
|
|
69
|
+
size: {
|
|
70
|
+
small: {
|
|
71
|
+
dropdownWrapper: "rounded-8 p-2 mt-1",
|
|
72
|
+
loading: "h-7 rounded-4"
|
|
73
|
+
},
|
|
74
|
+
medium: {
|
|
75
|
+
dropdownWrapper: "rounded-12 p-3 mt-2",
|
|
76
|
+
loading: "h-10 rounded-8"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
this.resultStyles = index.ce({
|
|
82
|
+
slots: {
|
|
83
|
+
resultString: "text-neutral-20 cursor-pointer hover:bg-neutral-98",
|
|
84
|
+
resultProfile: "cursor-pointer hover:bg-neutral-98 flex gap-2 items-center"
|
|
85
|
+
},
|
|
86
|
+
variants: {
|
|
87
|
+
selected: {
|
|
88
|
+
true: {
|
|
89
|
+
resultString: "bg-neutral-98",
|
|
90
|
+
resultProfile: "bg-neutral-98"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
size: {
|
|
94
|
+
small: {
|
|
95
|
+
resultString: "paragraph-inter-12-regular rounded-4 py-1 px-2",
|
|
96
|
+
resultProfile: "rounded-4 py-1 px-2"
|
|
97
|
+
},
|
|
98
|
+
medium: {
|
|
99
|
+
resultString: "paragraph-inter-14-regular rounded-8 p-2",
|
|
100
|
+
resultProfile: "rounded-8 p-2"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
63
105
|
}
|
|
64
106
|
connectedCallback() {
|
|
65
107
|
super.connectedCallback();
|
|
@@ -88,62 +130,6 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
88
130
|
}
|
|
89
131
|
}
|
|
90
132
|
}
|
|
91
|
-
inputTemplate() {
|
|
92
|
-
return shared_tailwindElement_index.x`
|
|
93
|
-
<input
|
|
94
|
-
name=${this.name}
|
|
95
|
-
type="text"
|
|
96
|
-
.value=${this.value}
|
|
97
|
-
placeholder=${this.placeholder}
|
|
98
|
-
?autofocus=${this.autofocus}
|
|
99
|
-
autocomplete=${this.autocomplete}
|
|
100
|
-
id=${this.id || this.name}
|
|
101
|
-
data-testid=${this.name ? `input-${this.name}` : "input"}
|
|
102
|
-
data-component="lukso-search"
|
|
103
|
-
?readonly=${this.isReadonly ? true : void 0}
|
|
104
|
-
?disabled=${this.isDisabled ? true : void 0}
|
|
105
|
-
class=${index.customClassMap({
|
|
106
|
-
[this.defaultInputStyles]: true,
|
|
107
|
-
[this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
|
|
108
|
-
[this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
|
|
109
|
-
["w-full"]: this.isFullWidth,
|
|
110
|
-
["w-[350px]"]: !this.isFullWidth,
|
|
111
|
-
["cursor-not-allowed text-neutral-60"]: this.isDisabled,
|
|
112
|
-
["text-neutral-20"]: !this.isDisabled,
|
|
113
|
-
["cursor-not-allowed"]: this.isReadonly,
|
|
114
|
-
[this.customClass]: !!this.customClass,
|
|
115
|
-
[this.borderless ? "border-0" : "border"]: true
|
|
116
|
-
})}
|
|
117
|
-
@focus=${this.handleFocus}
|
|
118
|
-
@input=${this.handleSearch}
|
|
119
|
-
@blur=${this.handleBlur}
|
|
120
|
-
@click=${this.handleInputClick}
|
|
121
|
-
@mouseenter=${this.handleMouseOver}
|
|
122
|
-
@mouseleave=${this.handleMouseOut}
|
|
123
|
-
/>
|
|
124
|
-
`;
|
|
125
|
-
}
|
|
126
|
-
labelTemplate() {
|
|
127
|
-
return shared_tailwindElement_index.x`
|
|
128
|
-
<label
|
|
129
|
-
for=${this.name}
|
|
130
|
-
class="heading-inter-14-bold text-neutral-20 pb-2 block"
|
|
131
|
-
>${this.label}</label
|
|
132
|
-
>
|
|
133
|
-
`;
|
|
134
|
-
}
|
|
135
|
-
descriptionTemplate() {
|
|
136
|
-
return shared_tailwindElement_index.x`
|
|
137
|
-
<div class="paragraph-inter-12-regular text-neutral-20 pb-2">
|
|
138
|
-
${this.description ?? shared_tailwindElement_index.A}
|
|
139
|
-
</div>
|
|
140
|
-
`;
|
|
141
|
-
}
|
|
142
|
-
errorTemplate() {
|
|
143
|
-
return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
|
|
144
|
-
${this.error}
|
|
145
|
-
</div>`;
|
|
146
|
-
}
|
|
147
133
|
resultsTemplate() {
|
|
148
134
|
const resultTemplates = [];
|
|
149
135
|
this.resultsParsed = JSON.parse(this.results);
|
|
@@ -167,66 +153,58 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
167
153
|
)}`;
|
|
168
154
|
}
|
|
169
155
|
loadingTemplate() {
|
|
156
|
+
const { loading } = this.inputStyles({
|
|
157
|
+
size: this.size
|
|
158
|
+
});
|
|
170
159
|
if (this.showNoResults) {
|
|
171
160
|
return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
|
|
172
161
|
<div role="status" class="flex flex-col gap-1">
|
|
173
|
-
<div
|
|
174
|
-
class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
|
|
175
|
-
></div>
|
|
162
|
+
<div class=${loading()}></div>
|
|
176
163
|
</div>
|
|
177
164
|
`)}`;
|
|
178
165
|
}
|
|
179
166
|
if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
|
|
180
167
|
return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
|
|
181
168
|
<div role="status" class="flex flex-col gap-1">
|
|
182
|
-
${[...Array(5)].map(
|
|
183
|
-
() => shared_tailwindElement_index.x`<div
|
|
184
|
-
class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
|
|
185
|
-
></div>`
|
|
186
|
-
)}
|
|
169
|
+
${[...Array(5)].map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
|
|
187
170
|
</div>
|
|
188
171
|
`)}`;
|
|
189
172
|
}
|
|
190
173
|
return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(shared_tailwindElement_index.x`
|
|
191
174
|
<div role="status" class="flex flex-col gap-1">
|
|
192
|
-
${this.resultsParsed.map(
|
|
193
|
-
() => shared_tailwindElement_index.x`<div
|
|
194
|
-
class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
|
|
195
|
-
></div>`
|
|
196
|
-
)}
|
|
175
|
+
${this.resultsParsed.map(() => shared_tailwindElement_index.x`<div class=${loading()}></div>`)}
|
|
197
176
|
</div>
|
|
198
177
|
`)}`;
|
|
199
178
|
}
|
|
200
179
|
dropdownWrapperTemplate(innerTemplate) {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
</div>`;
|
|
180
|
+
const { dropdownWrapper } = this.inputStyles({
|
|
181
|
+
size: this.size
|
|
182
|
+
});
|
|
183
|
+
return shared_tailwindElement_index.x`<div class=${dropdownWrapper()}>${innerTemplate}</div>`;
|
|
206
184
|
}
|
|
207
|
-
resultStringTemplate(result, index
|
|
185
|
+
resultStringTemplate(result, index) {
|
|
186
|
+
const { resultString } = this.resultStyles({
|
|
187
|
+
selected: this.selected === index + 1,
|
|
188
|
+
size: this.size
|
|
189
|
+
});
|
|
208
190
|
return shared_tailwindElement_index.x`<div
|
|
209
191
|
data-id="${result.id}"
|
|
210
|
-
data-index="${index
|
|
211
|
-
class
|
|
212
|
-
{
|
|
213
|
-
["bg-neutral-98"]: this.selected === index$1 + 1
|
|
214
|
-
}
|
|
215
|
-
)}"
|
|
192
|
+
data-index="${index + 1}"
|
|
193
|
+
class=${resultString()}
|
|
216
194
|
@click=${() => this.handleSelect(result)}
|
|
217
195
|
>
|
|
218
196
|
${result.value}
|
|
219
197
|
</div>`;
|
|
220
198
|
}
|
|
221
|
-
resultProfileTemplate(result, index
|
|
199
|
+
resultProfileTemplate(result, index) {
|
|
200
|
+
const { resultProfile } = this.resultStyles({
|
|
201
|
+
selected: this.selected === index + 1,
|
|
202
|
+
size: this.size
|
|
203
|
+
});
|
|
222
204
|
return shared_tailwindElement_index.x`<div
|
|
223
205
|
data-id="${result.address}"
|
|
224
|
-
data-index="${index
|
|
225
|
-
class
|
|
226
|
-
{
|
|
227
|
-
["bg-neutral-98"]: this.selected === index$1 + 1
|
|
228
|
-
}
|
|
229
|
-
)}"
|
|
206
|
+
data-index="${index + 1}"
|
|
207
|
+
class=${resultProfile()}
|
|
230
208
|
@click=${() => this.handleSelect(result)}
|
|
231
209
|
>
|
|
232
210
|
<lukso-profile
|
|
@@ -285,16 +263,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
285
263
|
});
|
|
286
264
|
this.dispatchEvent(selectEvent);
|
|
287
265
|
}
|
|
288
|
-
handleFocus() {
|
|
289
|
-
if (!this.isReadonly && !this.isDisabled) {
|
|
290
|
-
this.hasFocus = true;
|
|
291
|
-
this.hasHighlight = true;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
266
|
async handleBlur(event) {
|
|
295
267
|
await this.updateComplete;
|
|
296
|
-
this.hasFocus = false;
|
|
297
|
-
this.hasHighlight = false;
|
|
298
268
|
const target = event.target;
|
|
299
269
|
const blurEvent = new CustomEvent("on-blur", {
|
|
300
270
|
detail: {
|
|
@@ -317,7 +287,6 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
317
287
|
bubbles: false,
|
|
318
288
|
composed: true
|
|
319
289
|
});
|
|
320
|
-
this.handleSearch(event);
|
|
321
290
|
this.dispatchEvent(clickEvent);
|
|
322
291
|
}
|
|
323
292
|
async searchDebounce(searchTerm) {
|
|
@@ -343,40 +312,37 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
|
|
|
343
312
|
const target = event.target;
|
|
344
313
|
this.searchDebounce(target.value);
|
|
345
314
|
}
|
|
346
|
-
handleMouseOver() {
|
|
347
|
-
if (!this.isReadonly && !this.isDisabled) {
|
|
348
|
-
this.hasHighlight = true;
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
handleMouseOut() {
|
|
352
|
-
if (!this.hasFocus) {
|
|
353
|
-
this.hasHighlight = false;
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
315
|
render() {
|
|
357
316
|
return shared_tailwindElement_index.x`
|
|
358
317
|
<div class="relative w-full">
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
318
|
+
<lukso-input
|
|
319
|
+
name=${this.name}
|
|
320
|
+
type="text"
|
|
321
|
+
value=${this.value}
|
|
322
|
+
placeholder=${this.placeholder}
|
|
323
|
+
autocomplete=${this.autocomplete}
|
|
324
|
+
label=${this.label}
|
|
325
|
+
description=${this.description}
|
|
326
|
+
error=${this.error}
|
|
327
|
+
custom-class=${this.customClass}
|
|
328
|
+
id=${this.id}
|
|
329
|
+
size=${this.size}
|
|
330
|
+
data-component="lukso-search"
|
|
331
|
+
right-icon="search"
|
|
332
|
+
?autofocus=${this.autofocus}
|
|
333
|
+
?readonly=${this.isReadonly}
|
|
334
|
+
?disabled=${this.isDisabled}
|
|
335
|
+
?is-full-width=${this.isFullWidth}
|
|
336
|
+
@on-input=${this.handleSearch}
|
|
337
|
+
@on-blur=${this.handleBlur}
|
|
338
|
+
@on-input-click=${this.handleInputClick}
|
|
339
|
+
></lukso-input>
|
|
372
340
|
<!-- results dropdown -->
|
|
373
341
|
${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : shared_tailwindElement_index.A}
|
|
374
342
|
<!-- no results dropdown -->
|
|
375
343
|
${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : shared_tailwindElement_index.A}
|
|
376
344
|
<!-- loading dropdown -->
|
|
377
|
-
${this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : shared_tailwindElement_index.A}
|
|
378
|
-
<!-- error -->
|
|
379
|
-
${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
|
|
345
|
+
${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : shared_tailwindElement_index.A}
|
|
380
346
|
</div>
|
|
381
347
|
`;
|
|
382
348
|
}
|
|
@@ -438,15 +404,15 @@ __decorateClass([
|
|
|
438
404
|
__decorateClass([
|
|
439
405
|
queryAssignedElements.n({ type: Boolean, attribute: "show-no-results" })
|
|
440
406
|
], exports.LuksoSearch.prototype, "showNoResults", 2);
|
|
407
|
+
__decorateClass([
|
|
408
|
+
queryAssignedElements.n({ type: Boolean, attribute: "hide-loading" })
|
|
409
|
+
], exports.LuksoSearch.prototype, "hideLoading", 2);
|
|
441
410
|
__decorateClass([
|
|
442
411
|
queryAssignedElements.n({ type: Number })
|
|
443
412
|
], exports.LuksoSearch.prototype, "selected", 2);
|
|
444
413
|
__decorateClass([
|
|
445
|
-
|
|
446
|
-
], exports.LuksoSearch.prototype, "
|
|
447
|
-
__decorateClass([
|
|
448
|
-
state.t()
|
|
449
|
-
], exports.LuksoSearch.prototype, "hasHighlight", 2);
|
|
414
|
+
queryAssignedElements.n({ type: String })
|
|
415
|
+
], exports.LuksoSearch.prototype, "size", 2);
|
|
450
416
|
__decorateClass([
|
|
451
417
|
state.t()
|
|
452
418
|
], exports.LuksoSearch.prototype, "isDebouncing", 2);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PropertyValues, TemplateResult } from 'lit';
|
|
2
|
-
import { Address } from '../../shared/types';
|
|
1
|
+
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import type { Address, InputSize } from '../../shared/types';
|
|
3
3
|
export type SearchStringResult = {
|
|
4
4
|
id?: string;
|
|
5
5
|
value: string;
|
|
@@ -31,21 +31,18 @@ export declare class LuksoSearch extends LuksoSearch_base {
|
|
|
31
31
|
isSearching: boolean;
|
|
32
32
|
noResultsText: string;
|
|
33
33
|
showNoResults: boolean;
|
|
34
|
+
hideLoading: boolean;
|
|
34
35
|
selected: any;
|
|
35
|
-
|
|
36
|
-
private hasHighlight;
|
|
36
|
+
size: InputSize;
|
|
37
37
|
private isDebouncing;
|
|
38
38
|
private debounceTimer;
|
|
39
39
|
private resultsParsed;
|
|
40
40
|
private searchTerm;
|
|
41
|
-
private
|
|
41
|
+
private inputStyles;
|
|
42
|
+
private resultStyles;
|
|
42
43
|
connectedCallback(): void;
|
|
43
44
|
disconnectedCallback(): void;
|
|
44
45
|
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
45
|
-
inputTemplate(): TemplateResult<1>;
|
|
46
|
-
labelTemplate(): TemplateResult<1>;
|
|
47
|
-
descriptionTemplate(): TemplateResult<1>;
|
|
48
|
-
errorTemplate(): TemplateResult<1>;
|
|
49
46
|
resultsTemplate(): TemplateResult<1>;
|
|
50
47
|
noResultsTemplate(): TemplateResult<1>;
|
|
51
48
|
loadingTemplate(): TemplateResult<1>;
|
|
@@ -55,13 +52,10 @@ export declare class LuksoSearch extends LuksoSearch_base {
|
|
|
55
52
|
private handleOutsideDropdownClick;
|
|
56
53
|
private handleDropdownKeydown;
|
|
57
54
|
private handleSelect;
|
|
58
|
-
private handleFocus;
|
|
59
55
|
private handleBlur;
|
|
60
56
|
private handleInputClick;
|
|
61
57
|
private searchDebounce;
|
|
62
58
|
private handleSearch;
|
|
63
|
-
private handleMouseOver;
|
|
64
|
-
private handleMouseOut;
|
|
65
59
|
render(): TemplateResult<1>;
|
|
66
60
|
}
|
|
67
61
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;
|
|
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,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;YAcV,gBAAgB;YAchB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
|