@triptease/tt-combobox 5.7.0 → 5.7.2

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 (22) hide show
  1. package/dist/cjs/src/TtCombobox.js +507 -0
  2. package/dist/cjs/src/TtCombobox.js.map +1 -0
  3. package/dist/cjs/src/index.js +21 -0
  4. package/dist/cjs/src/index.js.map +1 -0
  5. package/dist/cjs/src/styles.js +225 -0
  6. package/dist/cjs/src/styles.js.map +1 -0
  7. package/dist/cjs/src/tt-combobox.js +12 -0
  8. package/dist/cjs/src/tt-combobox.js.map +1 -0
  9. package/dist/cjs/src/tt-option/TtOption.js +81 -0
  10. package/dist/cjs/src/tt-option/TtOption.js.map +1 -0
  11. package/dist/cjs/src/tt-option/styles.js +75 -0
  12. package/dist/cjs/src/tt-option/styles.js.map +1 -0
  13. package/dist/cjs/src/tt-option/tt-option.js +11 -0
  14. package/dist/cjs/src/tt-option/tt-option.js.map +1 -0
  15. package/dist/cjs/src/types.js +3 -0
  16. package/dist/cjs/src/types.js.map +1 -0
  17. package/package.json +7 -3
  18. package/CHANGELOG.md +0 -174
  19. package/custom-elements.json +0 -847
  20. package/test/tt-combobox.test.ts +0 -664
  21. package/tsconfig.cjs.json +0 -9
  22. package/tsconfig.json +0 -9
package/dist/cjs/src/styles.js ADDED
@@ -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: 2;
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
package/dist/cjs/src/styles.js.map ADDED
@@ -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: 2;\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/dist/cjs/src/tt-combobox.js ADDED
@@ -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
package/dist/cjs/src/tt-combobox.js.map ADDED
@@ -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"]}
package/dist/cjs/src/tt-option/TtOption.js ADDED
@@ -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
package/dist/cjs/src/tt-option/TtOption.js.map ADDED
@@ -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"]}
package/dist/cjs/src/tt-option/styles.js ADDED
@@ -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
package/dist/cjs/src/tt-option/styles.js.map ADDED
@@ -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"]}
package/dist/cjs/src/tt-option/tt-option.js ADDED
@@ -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
package/dist/cjs/src/tt-option/tt-option.js.map ADDED
@@ -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"]}
package/dist/cjs/src/types.js ADDED
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
package/dist/cjs/src/types.js.map ADDED
@@ -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/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.0",
6
+ "version": "5.7.2",
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": {
@@ -33,12 +37,12 @@
33
37
  "build:node": "yarn build:esm && yarn build:cjs",
34
38
  "build:node:watch": "tsc --watch",
35
39
  "build:web": "node ../../scripts/esbuild.mjs",
36
- "prepublish": "tsc && npm run analyze -- --exclude dist",
40
+ "prepublish": "yarn build:node && npm run analyze -- --exclude dist",
37
41
  "test": "tsc && wtr",
38
42
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
39
43
  },
40
44
  "dependencies": {
41
- "@triptease/icons": "1.4.0",
45
+ "@triptease/icons": "1.4.1",
42
46
  "lit": "^3.1.4"
43
47
  },
44
48
  "devDependencies": {
package/CHANGELOG.md DELETED
@@ -1,174 +0,0 @@
1
- # @triptease/tt-combobox
2
-
3
- ## 5.7.0
4
-
5
- ### Minor Changes
6
-
7
- - Add dual ESM/CJS output
8
-
9
- ### Patch Changes
10
-
11
- - Updated dependencies
12
- - @triptease/icons@1.4.0
13
-
14
- ## 5.6.7
15
-
16
- ### Patch Changes
17
-
18
- - Update color tokens to use new -subtle and -strong variants
19
-
20
- ## 5.6.6
21
-
22
- ### Patch Changes
23
-
24
- - Updated dependencies
25
- - @triptease/icons@1.3.14
26
-
27
- ## 5.6.5
28
-
29
- ### Patch Changes
30
-
31
- - Adjust combobox validation message
32
-
33
- ## 5.6.4
34
-
35
- ### Patch Changes
36
-
37
- - Remove search filter when closing combobox dropdown
38
-
39
- ## 5.6.3
40
-
41
- ### Patch Changes
42
-
43
- - Updated dependencies
44
- - @triptease/icons@1.3.13
45
-
46
- ## 5.6.2
47
-
48
- ### Patch Changes
49
-
50
- - 9497296: Update the placeholder correctly after selecting filtered options
51
-
52
- ## 5.6.1
53
-
54
- ### Patch Changes
55
-
56
- - Fix types for `style` attribute in React to only accept React.CSSProperties object
57
-
58
- ## 5.6.0
59
-
60
- ### Minor Changes
61
-
62
- - Improve type accuracy
63
- - Remove @triptease/html-jsx support
64
-
65
- ## 5.5.18
66
-
67
- ### Patch Changes
68
-
69
- - Updated dependencies [ff30018]
70
- - @triptease/icons@1.3.12
71
-
72
- ## 5.5.17
73
-
74
- ### Patch Changes
75
-
76
- - Streamlined TS Config, reusing a shared file to reduce duplication and resolve issues where test files were being included in the bundle
77
- - Updated dependencies
78
- - @triptease/icons@1.3.11
79
-
80
- ## 5.5.16
81
-
82
- ### Patch Changes
83
-
84
- - 2d36888: Improve types such that only supported properties are included; Added support for `@triptease/html-jsx` framework
85
-
86
- ## 5.5.15
87
-
88
- ### Patch Changes
89
-
90
- - Fake release to force a fix
91
- - Updated dependencies
92
- - @triptease/icons@1.3.10
93
-
94
- ## 5.5.14
95
-
96
- ### Patch Changes
97
-
98
- - Removes @customElement because it's breaking runtime
99
-
100
- ## 5.5.13
101
-
102
- ### Patch Changes
103
-
104
- - e08d7ee: Improve Typescript support, removing the need for consumers to declare global
105
- - c681d7d: Add missing TS decorator
106
-
107
- ## 5.5.12
108
-
109
- ### Patch Changes
110
-
111
- - 2d89b50: Fix crash in JSDOM due to missing ) in CSS selector
112
-
113
- ## 5.5.11
114
-
115
- ### Patch Changes
116
-
117
- - Updated dependencies
118
- - @triptease/icons@1.3.9
119
-
120
- ## 5.5.10
121
-
122
- ### Patch Changes
123
-
124
- - Updated dependencies [c52217a]
125
- - @triptease/icons@1.3.8
126
-
127
- ## 5.5.9
128
-
129
- ### Patch Changes
130
-
131
- - Updated dependencies
132
- - @triptease/icons@1.3.7
133
-
134
- ## 5.5.8
135
-
136
- ### Patch Changes
137
-
138
- - Updated dependencies
139
- - @triptease/icons@1.3.6
140
-
141
- ## 5.5.7
142
-
143
- ### Patch Changes
144
-
145
- - Updated dependencies
146
- - @triptease/icons@1.3.5
147
-
148
- ## 5.5.6
149
-
150
- ### Patch Changes
151
-
152
- - Resolve internal versioning problem (packages were being deployed using workspaces:\*)
153
-
154
- ## 5.5.5
155
-
156
- ### Patch Changes
157
-
158
- - Fix packaging so that packages are dependent on published versions rather than workspace:\* versions.
159
- - Updated dependencies
160
- - @triptease/icons@1.3.4
161
-
162
- ## 5.5.4
163
-
164
- ### Patch Changes
165
-
166
- - Updated dependencies
167
- - @triptease/icons@1.3.3
168
-
169
- ## 5.5.3
170
-
171
- ### Patch Changes
172
-
173
- - 3262c7c: Various tweaks due to running a refreshed ESLint config and better Typescript usage
174
- - 465557b: Code formatting