@triptease/tt-combobox 5.7.1 → 5.7.3
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/cjs/src/TtCombobox.js +507 -0
- package/dist/cjs/src/TtCombobox.js.map +1 -0
- package/dist/cjs/src/index.js +21 -0
- package/dist/cjs/src/index.js.map +1 -0
- package/dist/cjs/src/styles.js +225 -0
- package/dist/cjs/src/styles.js.map +1 -0
- package/dist/cjs/src/tt-combobox.js +12 -0
- package/dist/cjs/src/tt-combobox.js.map +1 -0
- package/dist/cjs/src/tt-option/TtOption.js +81 -0
- package/dist/cjs/src/tt-option/TtOption.js.map +1 -0
- package/dist/cjs/src/tt-option/styles.js +75 -0
- package/dist/cjs/src/tt-option/styles.js.map +1 -0
- package/dist/cjs/src/tt-option/tt-option.js +11 -0
- package/dist/cjs/src/tt-option/tt-option.js.map +1 -0
- package/dist/cjs/src/types.js +3 -0
- package/dist/cjs/src/types.js.map +1 -0
- package/dist/esm/src/styles.js +1 -1
- package/dist/esm/src/styles.js.map +1 -1
- package/package.json +6 -2
- package/CHANGELOG.md +0 -180
- package/custom-elements.json +0 -847
- package/test/tt-combobox.test.ts +0 -664
- package/tsconfig.cjs.json +0 -9
- package/tsconfig.json +0 -9
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.styles = void 0;
|
|
4
|
+
const lit_1 = require("lit");
|
|
5
|
+
exports.styles = (0, lit_1.css) `
|
|
6
|
+
:host {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: var(--tt-combobox-flex-direction, row);
|
|
9
|
+
align-items: var(--tt-combobox-align-items, center);
|
|
10
|
+
justify-content: var(--tt-combobox-justify-content, initial);
|
|
11
|
+
align-content: var(--tt-combobox-align-content, initial);
|
|
12
|
+
gap: var(--tt-combobox-gap, 0.5rem);
|
|
13
|
+
font-size: var(--tt-combobox-font-size, var(--font-size-200));
|
|
14
|
+
color: var(--tt-combobox-color, var(--color-text-400));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([disabled]) .tt-combobox-container {
|
|
18
|
+
border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));
|
|
19
|
+
color: var(--tt-combobox-disabled-color, var(--color-text-200));
|
|
20
|
+
background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));
|
|
21
|
+
pointer-events: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.tt-combobox-container:focus-within {
|
|
25
|
+
outline: 5px auto Highlight;
|
|
26
|
+
outline: 5px auto -webkit-focus-ring-color;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tt-combobox-container:hover {
|
|
30
|
+
background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([invalid]) .tt-combobox-container,
|
|
34
|
+
:host(:state(interacted):invalid) .tt-combobox-container {
|
|
35
|
+
outline: 1px solid var(--color-alert-strong);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.errormessage {
|
|
39
|
+
visibility: hidden;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
gap: var(--space-scale-0-5);
|
|
43
|
+
color: var(--color-alert-strong);
|
|
44
|
+
|
|
45
|
+
&[data-hidden] {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.errormessage svg path {
|
|
51
|
+
fill: var(--color-alert-strong);
|
|
52
|
+
height: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {
|
|
56
|
+
visibility: visible;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {
|
|
60
|
+
color: var(--color-alert-strong);
|
|
61
|
+
font-size: var(--font-size-100);
|
|
62
|
+
margin: 0;
|
|
63
|
+
font-weight: var(--font-weight-regular);
|
|
64
|
+
line-height: 1.2;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
slot[name='option']::slotted(*) {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
* {
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
font-family: var(--font-family-sans);
|
|
74
|
+
cursor: inherit;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.tt-combobox-container {
|
|
78
|
+
position: relative;
|
|
79
|
+
max-width: var(--tt-combobox-max-width, 300px);
|
|
80
|
+
min-width: var(--tt-combobox-min-width, 250px);
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: row;
|
|
83
|
+
align-items: center;
|
|
84
|
+
border-radius: var(--border-radius);
|
|
85
|
+
border-color: var(--tt-combobox-border-color, var(--color-border-400));
|
|
86
|
+
border-style: solid;
|
|
87
|
+
border-width: var(--tt-combobox-border-width, 1px);
|
|
88
|
+
background-color: var(--tt-combobox-background-color, var(--color-surface-100));
|
|
89
|
+
padding: 0.5rem;
|
|
90
|
+
gap: 0.25rem;
|
|
91
|
+
//width: 100%;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[role='listbox'] {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
[role='combobox'] {
|
|
99
|
+
width: 100%;
|
|
100
|
+
border-style: none;
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
font-size: var(--tt-combobox-font-size, var(--font-size-200));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.hide-caret {
|
|
106
|
+
caret-color: transparent;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[role='combobox']::placeholder {
|
|
110
|
+
color: var(--tt-combobox-placeholder-color, var(--color-text-300));
|
|
111
|
+
font-family: var(--font-family-inter);
|
|
112
|
+
font-size: var(--tt-combobox-font-size, var(--font-size-200));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([disabled]) [role='combobox']::placeholder {
|
|
116
|
+
color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
[role='combobox']:placeholder-shown {
|
|
120
|
+
text-overflow: ellipsis;
|
|
121
|
+
overflow: clip;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
[role='combobox']:focus {
|
|
125
|
+
outline: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
[role='combobox'] ~ button {
|
|
129
|
+
appearance: none;
|
|
130
|
+
padding: 0;
|
|
131
|
+
border-width: 0;
|
|
132
|
+
background-color: transparent;
|
|
133
|
+
aspect-ratio: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
[role='combobox'] ~ button svg {
|
|
137
|
+
transition: transform 0.2s ease-in-out;
|
|
138
|
+
color: var(--tt-combobox-dropdown-color, var(--color-text-400));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[role='combobox'][aria-expanded='true'] ~ button svg {
|
|
142
|
+
transform: rotate(180deg);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[role='combobox'][aria-expanded='true'] ~ [role='listbox'] {
|
|
146
|
+
display: block;
|
|
147
|
+
width: max-content;
|
|
148
|
+
max-width: var(--tt-combobox-list-max-width, 35ch);
|
|
149
|
+
min-width: 100%;
|
|
150
|
+
background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));
|
|
151
|
+
border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));
|
|
152
|
+
border-radius: var(--border-radius);
|
|
153
|
+
box-shadow: var(--box-shadow-lg);
|
|
154
|
+
padding: 0;
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: var(--tt-combobox-top, calc(100% + 0.5rem));
|
|
157
|
+
left: var(--tt-combobox-left, 0);
|
|
158
|
+
right: var(--tt-combobox-right, unset);
|
|
159
|
+
bottom: var(--tt-combobox-bottom, unset);
|
|
160
|
+
z-index: 999;
|
|
161
|
+
margin: 0;
|
|
162
|
+
list-style: none;
|
|
163
|
+
max-height: var(--tt-combobox-max-height, 400px);
|
|
164
|
+
overflow-y: auto;
|
|
165
|
+
|
|
166
|
+
.no-results {
|
|
167
|
+
display: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:not(:has(tt-option:not([hidden], .select-all))) {
|
|
171
|
+
.no-results {
|
|
172
|
+
display: flex;
|
|
173
|
+
padding: 0.5rem;
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
text-align: left;
|
|
176
|
+
text-overflow: ellipsis;
|
|
177
|
+
text-wrap: nowrap;
|
|
178
|
+
align-items: center;
|
|
179
|
+
gap: 0.25rem;
|
|
180
|
+
max-width: 100%;
|
|
181
|
+
width: 100%;
|
|
182
|
+
overflow-y: visible;
|
|
183
|
+
flex: 1;
|
|
184
|
+
|
|
185
|
+
span {
|
|
186
|
+
overflow: hidden;
|
|
187
|
+
text-overflow: ellipsis;
|
|
188
|
+
white-space: nowrap;
|
|
189
|
+
flex: 1;
|
|
190
|
+
line-height: 1.1;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.select-all {
|
|
195
|
+
display: none;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
[role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {
|
|
201
|
+
top: unset;
|
|
202
|
+
bottom: calc(100% + 0.5rem);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
slot[name='icon'] {
|
|
206
|
+
display: inline-block;
|
|
207
|
+
max-width: var(--tt-combobox-icon-size, 1rem);
|
|
208
|
+
aspect-ratio: 1;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
tt-option.select-all::part(option) {
|
|
212
|
+
border-bottom: 1px solid var(--color-border-300);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
label {
|
|
216
|
+
font-size: var(--tt-combobox-label-font-size, inherit);
|
|
217
|
+
color: var(--tt-combobox-label-color, inherit);
|
|
218
|
+
font-weight: var(--tt-combobox-label-font-weight, inherit);
|
|
219
|
+
|
|
220
|
+
&[data-hidden] {
|
|
221
|
+
display: none;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
`;
|
|
225
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 999;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TtCombobox = void 0;
|
|
4
|
+
const TtCombobox_js_1 = require("./TtCombobox.js");
|
|
5
|
+
Object.defineProperty(exports, "TtCombobox", { enumerable: true, get: function () { return TtCombobox_js_1.TtCombobox; } });
|
|
6
|
+
require("./tt-option/tt-option.js");
|
|
7
|
+
if (typeof window !== 'undefined') {
|
|
8
|
+
if (!window.customElements.get('tt-combobox')) {
|
|
9
|
+
window.customElements.define('tt-combobox', TtCombobox_js_1.TtCombobox);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=tt-combobox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../../src/tt-combobox.ts"],"names":[],"mappings":";;;AAAA,mDAA6C;AASpC,2FATA,0BAAU,OASA;AARnB,oCAAkC;AAElC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,0BAAU,CAAC,CAAC;IAC1D,CAAC;AACH,CAAC","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\nimport './tt-option/tt-option.js';\n\nif (typeof window !== 'undefined') {\n if (!window.customElements.get('tt-combobox')) {\n window.customElements.define('tt-combobox', TtCombobox);\n }\n}\n\nexport { TtCombobox };\n"]}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
+
};
|
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
+
exports.TtOption = void 0;
|
|
10
|
+
const lit_1 = require("lit");
|
|
11
|
+
const decorators_js_1 = require("lit/decorators.js");
|
|
12
|
+
const styles_js_1 = require("./styles.js");
|
|
13
|
+
class TtOption extends lit_1.LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.disabled = false;
|
|
17
|
+
this.selected = false;
|
|
18
|
+
this.active = false;
|
|
19
|
+
this.value = '';
|
|
20
|
+
this.includeCheckbox = false;
|
|
21
|
+
this._onClick = (event) => {
|
|
22
|
+
if (this.disabled) {
|
|
23
|
+
event.preventDefault();
|
|
24
|
+
event.stopImmediatePropagation();
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback();
|
|
31
|
+
this.addEventListener('click', this._onClick);
|
|
32
|
+
}
|
|
33
|
+
disconnectedCallback() {
|
|
34
|
+
super.disconnectedCallback();
|
|
35
|
+
this.removeEventListener('click', this._onClick);
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
return (0, lit_1.html) `
|
|
39
|
+
<li
|
|
40
|
+
role="option"
|
|
41
|
+
aria-selected="${this.selected}"
|
|
42
|
+
aria-disabled="${this.disabled}"
|
|
43
|
+
?aria-hidden="${this.hidden}"
|
|
44
|
+
data-active="${this.active}"
|
|
45
|
+
data-value="${this.value}"
|
|
46
|
+
@click="${this._onClick}"
|
|
47
|
+
@mousedown="${(event) => event.preventDefault()}"
|
|
48
|
+
part="option"
|
|
49
|
+
>
|
|
50
|
+
${this.includeCheckbox
|
|
51
|
+
? (0, lit_1.html) `<input type="checkbox" ?checked=${this.selected} role="presentation" tabindex="-1" part="checkbox" />`
|
|
52
|
+
: lit_1.nothing}
|
|
53
|
+
<span>
|
|
54
|
+
<slot></slot>
|
|
55
|
+
</span>
|
|
56
|
+
</li>
|
|
57
|
+
`;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
exports.TtOption = TtOption;
|
|
61
|
+
TtOption.styles = styles_js_1.styles;
|
|
62
|
+
TtOption.shadowRootOptions = {
|
|
63
|
+
...lit_1.LitElement.shadowRootOptions,
|
|
64
|
+
delegatesFocus: true,
|
|
65
|
+
};
|
|
66
|
+
__decorate([
|
|
67
|
+
(0, decorators_js_1.property)({ type: Boolean })
|
|
68
|
+
], TtOption.prototype, "disabled", void 0);
|
|
69
|
+
__decorate([
|
|
70
|
+
(0, decorators_js_1.property)({ type: Boolean })
|
|
71
|
+
], TtOption.prototype, "selected", void 0);
|
|
72
|
+
__decorate([
|
|
73
|
+
(0, decorators_js_1.property)({ type: Boolean })
|
|
74
|
+
], TtOption.prototype, "active", void 0);
|
|
75
|
+
__decorate([
|
|
76
|
+
(0, decorators_js_1.property)({ type: String })
|
|
77
|
+
], TtOption.prototype, "value", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
(0, decorators_js_1.property)({ type: Boolean, attribute: 'include-checkbox' })
|
|
80
|
+
], TtOption.prototype, "includeCheckbox", void 0);
|
|
81
|
+
//# sourceMappingURL=TtOption.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TtOption.js","sourceRoot":"","sources":["../../../../src/tt-option/TtOption.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAAgD;AAChD,qDAA6C;AAC7C,2CAAqC;AAErC,MAAa,QAAS,SAAQ,gBAAU;IAAxC;;QASE,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,WAAM,GAAG,KAAK,CAAC;QAGf,UAAK,GAAG,EAAE,CAAC;QAGX,oBAAe,GAAG,KAAK,CAAC;QAahB,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;gBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;IAwBJ,CAAC;IAzCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAUD,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;yBAGU,IAAI,CAAC,QAAQ;yBACb,IAAI,CAAC,QAAQ;wBACd,IAAI,CAAC,MAAM;uBACZ,IAAI,CAAC,MAAM;sBACZ,IAAI,CAAC,KAAK;kBACd,IAAI,CAAC,QAAQ;sBACT,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;;;UAGzD,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAA,UAAI,EAAA,mCAAmC,IAAI,CAAC,QAAQ,uDAAuD;YAC7G,CAAC,CAAC,aAAO;;;;;KAKd,CAAC;IACJ,CAAC;;AA/DH,4BAgEC;AA/DQ,eAAM,GAAG,kBAAM,AAAT,CAAU;AAEhB,0BAAiB,GAAG;IACzB,GAAG,gBAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAGf;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAChB;AAGX;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACnC","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\n\nexport class TtOption extends LitElement {\n static styles = styles;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n selected = false;\n\n @property({ type: Boolean })\n active = false;\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean, attribute: 'include-checkbox' })\n includeCheckbox = false;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this._onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this._onClick);\n }\n\n private _onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n };\n\n render() {\n return html`\n <li\n role=\"option\"\n aria-selected=\"${this.selected}\"\n aria-disabled=\"${this.disabled}\"\n ?aria-hidden=\"${this.hidden}\"\n data-active=\"${this.active}\"\n data-value=\"${this.value}\"\n @click=\"${this._onClick}\"\n @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n part=\"option\"\n >\n ${this.includeCheckbox\n ? html`<input type=\"checkbox\" ?checked=${this.selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\" />`\n : nothing}\n <span>\n <slot></slot>\n </span>\n </li>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-option': TtOption;\n }\n}\n"]}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.styles = void 0;
|
|
4
|
+
const lit_1 = require("lit");
|
|
5
|
+
exports.styles = (0, lit_1.css) `
|
|
6
|
+
li {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
display: flex;
|
|
9
|
+
padding: 0.5rem;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
text-align: left;
|
|
12
|
+
text-overflow: ellipsis;
|
|
13
|
+
text-wrap: nowrap;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 0.25rem;
|
|
16
|
+
max-width: 100%;
|
|
17
|
+
width: 100%;
|
|
18
|
+
overflow-y: visible;
|
|
19
|
+
flex: 1;
|
|
20
|
+
|
|
21
|
+
input[type='checkbox'] {
|
|
22
|
+
width: var(--checkbox-size, var(--space-scale-2));
|
|
23
|
+
aspect-ratio: 1;
|
|
24
|
+
flex: 0 0 auto;
|
|
25
|
+
accent-color: var(--color-primary-400);
|
|
26
|
+
pointer-events: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
span {
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
flex: 1;
|
|
34
|
+
line-height: 1.1;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&[aria-hidden='true'] {
|
|
38
|
+
visibility: hidden;
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&[aria-disabled='true'] {
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
opacity: 0.5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&[aria-selected='true']:not(:has(input[type='checkbox'])) {
|
|
48
|
+
color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
|
|
49
|
+
font-weight: var(--font-weight-medium);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([active]),
|
|
54
|
+
:host(:hover) {
|
|
55
|
+
li {
|
|
56
|
+
background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));
|
|
57
|
+
color: var(--tt-combobox-option-color-hover, inherit);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&:first-child li {
|
|
61
|
+
border-top-left-radius: var(--border-radius);
|
|
62
|
+
border-top-right-radius: var(--border-radius);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:last-child li {
|
|
66
|
+
border-bottom-left-radius: var(--border-radius);
|
|
67
|
+
border-bottom-right-radius: var(--border-radius);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([disabled]) {
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/tt-option/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n li {\n cursor: pointer;\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n input[type='checkbox'] {\n width: var(--checkbox-size, var(--space-scale-2));\n aspect-ratio: 1;\n flex: 0 0 auto;\n accent-color: var(--color-primary-400);\n pointer-events: none;\n }\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n\n &[aria-hidden='true'] {\n visibility: hidden;\n display: none;\n }\n\n &[aria-disabled='true'] {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &[aria-selected='true']:not(:has(input[type='checkbox'])) {\n color: var(--tt-combobox-option-selected-color, var(--color-primary-400));\n font-weight: var(--font-weight-medium);\n }\n }\n\n :host([active]),\n :host(:hover) {\n li {\n background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));\n color: var(--tt-combobox-option-color-hover, inherit);\n }\n\n &:first-child li {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n\n &:last-child li {\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n`;\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TtOption = void 0;
|
|
4
|
+
const TtOption_js_1 = require("./TtOption.js");
|
|
5
|
+
Object.defineProperty(exports, "TtOption", { enumerable: true, get: function () { return TtOption_js_1.TtOption; } });
|
|
6
|
+
if (typeof window !== 'undefined') {
|
|
7
|
+
if (!window.customElements.get('tt-option')) {
|
|
8
|
+
window.customElements.define('tt-option', TtOption_js_1.TtOption);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=tt-option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tt-option.js","sourceRoot":"","sources":["../../../../src/tt-option/tt-option.ts"],"names":[],"mappings":";;;AAAA,+CAAyC;AAQhC,yFARA,sBAAQ,OAQA;AANjB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,sBAAQ,CAAC,CAAC;IACtD,CAAC;AACH,CAAC","sourcesContent":["import { TtOption } from './TtOption.js';\n\nif (typeof window !== 'undefined') {\n if (!window.customElements.get('tt-option')) {\n window.customElements.define('tt-option', TtOption);\n }\n}\n\nexport { TtOption };\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n placeholder?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n };\n }\n }\n }\n}\n"]}
|
package/dist/esm/src/styles.js
CHANGED
|
@@ -154,7 +154,7 @@ export const styles = css `
|
|
|
154
154
|
left: var(--tt-combobox-left, 0);
|
|
155
155
|
right: var(--tt-combobox-right, unset);
|
|
156
156
|
bottom: var(--tt-combobox-bottom, unset);
|
|
157
|
-
z-index:
|
|
157
|
+
z-index: 999;
|
|
158
158
|
margin: 0;
|
|
159
159
|
list-style: none;
|
|
160
160
|
max-height: var(--tt-combobox-max-height, 400px);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index:
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 999;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -3,8 +3,12 @@
|
|
|
3
3
|
"description": "Webcomponent tt-combobox following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "@triptease",
|
|
6
|
-
"version": "5.7.
|
|
6
|
+
"version": "5.7.3",
|
|
7
7
|
"type": "module",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/esm",
|
|
10
|
+
"dist/cjs"
|
|
11
|
+
],
|
|
8
12
|
"main": "dist/esm/src/index.js",
|
|
9
13
|
"module": "dist/esm/src/index.js",
|
|
10
14
|
"exports": {
|
|
@@ -38,7 +42,7 @@
|
|
|
38
42
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
39
43
|
},
|
|
40
44
|
"dependencies": {
|
|
41
|
-
"@triptease/icons": "1.4.
|
|
45
|
+
"@triptease/icons": "1.4.1",
|
|
42
46
|
"lit": "^3.1.4"
|
|
43
47
|
},
|
|
44
48
|
"devDependencies": {
|