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