@triptease/tt-combobox 5.5.2 → 5.5.4

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 (16) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +0 -1
  3. package/custom-elements.json +5 -320
  4. package/demo/index.html +18 -25
  5. package/dist/src/TtCombobox.js +83 -61
  6. package/dist/src/TtCombobox.js.map +1 -1
  7. package/dist/src/styles.js +15 -17
  8. package/dist/src/styles.js.map +1 -1
  9. package/dist/src/tt-combobox.js.map +1 -1
  10. package/dist/src/tt-option/TtOption.js +2 -3
  11. package/dist/src/tt-option/TtOption.js.map +1 -1
  12. package/dist/src/tt-option/styles.js +57 -56
  13. package/dist/src/tt-option/styles.js.map +1 -1
  14. package/dist/src/tt-option/tt-option.js.map +1 -1
  15. package/package.json +5 -46
  16. package/test/tt-combobox.test.ts +81 -69
package/dist/src/tt-option/TtOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TtOption.js","sourceRoot":"","sources":["../../../src/tt-option/TtOption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;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,CAAA;IAyBH,CAAC;IA1CC,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,IAAI,CAAA;;;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,IAAI,CAAA,mCAAmC,IAAI,CAAC,QAAQ;2EACW;YACjE,CAAC,CAAC,OAAO;;;;;KAKd,CAAA;IACH,CAAC;;AA/DM,eAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,0BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAChB;AAGX;IADC,QAAQ,CAAC,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}\n 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"]}
1
+ {"version":3,"file":"TtOption.js","sourceRoot":"","sources":["../../../src/tt-option/TtOption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;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,IAAI,CAAA;;;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,IAAI,CAAA,mCAAmC,IAAI,CAAC,QAAQ,uDAAuD;YAC7G,CAAC,CAAC,OAAO;;;;;KAKd,CAAC;IACJ,CAAC;;AA9DM,eAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,0BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAChB;AAGX;IADC,QAAQ,CAAC,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/src/tt-option/styles.js CHANGED
@@ -1,71 +1,72 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
- li {
4
- cursor: pointer;
5
- display: flex;
6
- padding: 0.5rem;
7
- box-sizing: border-box;
8
- text-align: left;
9
- text-overflow: ellipsis;
10
- text-wrap: nowrap;
11
- align-items: center;
12
- gap: 0.25rem;
13
- max-width: 100%;
14
- width: 100%;
15
- overflow-y: visible;
16
- flex: 1;
17
-
18
- input[type="checkbox"] {
19
- width: var(--checkbox-size, var(--space-scale-2));
20
- aspect-ratio: 1;
21
- flex: 0 0 auto;
22
- accent-color: var(--color-primary-400);
23
- pointer-events: none;
24
- }
25
-
26
- span {
27
- overflow: hidden;
3
+ li {
4
+ cursor: pointer;
5
+ display: flex;
6
+ padding: 0.5rem;
7
+ box-sizing: border-box;
8
+ text-align: left;
28
9
  text-overflow: ellipsis;
29
- white-space: nowrap;
10
+ text-wrap: nowrap;
11
+ align-items: center;
12
+ gap: 0.25rem;
13
+ max-width: 100%;
14
+ width: 100%;
15
+ overflow-y: visible;
30
16
  flex: 1;
31
- line-height: 1.1;
32
- }
33
17
 
34
- &[aria-hidden="true"] {
35
- visibility: hidden;
36
- display: none;
37
- }
18
+ input[type='checkbox'] {
19
+ width: var(--checkbox-size, var(--space-scale-2));
20
+ aspect-ratio: 1;
21
+ flex: 0 0 auto;
22
+ accent-color: var(--color-primary-400);
23
+ pointer-events: none;
24
+ }
38
25
 
39
- &[aria-disabled="true"] {
40
- pointer-events: none;
41
- opacity: 0.5;
42
- }
26
+ span {
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ white-space: nowrap;
30
+ flex: 1;
31
+ line-height: 1.1;
32
+ }
43
33
 
44
- &[aria-selected="true"]:not(:has(input[type="checkbox"])) {
45
- color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
46
- font-weight: var(--font-weight-medium);
47
- }
48
- }
34
+ &[aria-hidden='true'] {
35
+ visibility: hidden;
36
+ display: none;
37
+ }
49
38
 
50
- :host([active]), :host(:hover) {
51
- li {
52
- background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));
53
- color: var(--tt-combobox-option-color-hover, inherit);
54
- }
39
+ &[aria-disabled='true'] {
40
+ pointer-events: none;
41
+ opacity: 0.5;
42
+ }
55
43
 
56
- &:first-child li {
57
- border-top-left-radius: var(--border-radius);
58
- border-top-right-radius: var(--border-radius);
44
+ &[aria-selected='true']:not(:has(input[type='checkbox'])) {
45
+ color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
46
+ font-weight: var(--font-weight-medium);
47
+ }
59
48
  }
60
49
 
61
- &:last-child li {
62
- border-bottom-left-radius: var(--border-radius);
63
- border-bottom-right-radius: var(--border-radius);
50
+ :host([active]),
51
+ :host(:hover) {
52
+ li {
53
+ background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));
54
+ color: var(--tt-combobox-option-color-hover, inherit);
55
+ }
56
+
57
+ &:first-child li {
58
+ border-top-left-radius: var(--border-radius);
59
+ border-top-right-radius: var(--border-radius);
60
+ }
61
+
62
+ &:last-child li {
63
+ border-bottom-left-radius: var(--border-radius);
64
+ border-bottom-right-radius: var(--border-radius);
65
+ }
64
66
  }
65
- }
66
67
 
67
- :host([disabled]) {
68
- pointer-events: none;
69
- }
68
+ :host([disabled]) {
69
+ pointer-events: none;
70
+ }
70
71
  `;
71
72
  //# sourceMappingURL=styles.js.map
package/dist/src/tt-option/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tt-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\nli {\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]), :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"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tt-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/src/tt-option/tt-option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tt-option.js","sourceRoot":"","sources":["../../../src/tt-option/tt-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,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,EAAG,QAAQ,CAAC,CAAC;IACvD,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA","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"]}
1
+ {"version":3,"file":"tt-option.js","sourceRoot":"","sources":["../../../src/tt-option/tt-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,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,QAAQ,CAAC,CAAC;IACtD,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,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/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent tt-combobox following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "@triptease",
6
- "version": "5.5.2",
6
+ "version": "5.5.4",
7
7
  "type": "module",
8
8
  "main": "dist/src/index.js",
9
9
  "module": "dist/src/index.js",
@@ -17,18 +17,14 @@
17
17
  "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
18
18
  "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
19
19
  "build:node": "tsc",
20
+ "build:node:watch": "tsc --watch",
20
21
  "build:web": "node ../../scripts/esbuild.mjs",
21
22
  "prepublish": "tsc && npm run analyze -- --exclude dist",
22
- "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
23
- "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
24
- "prepare": "husky",
25
- "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 8080\"",
26
- "storybook:build": "tsc && npm run analyze -- --exclude dist && storybook build",
27
23
  "test": "tsc && wtr",
28
24
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
29
25
  },
30
26
  "dependencies": {
31
- "@triptease/icons": "1.3.1",
27
+ "@triptease/icons": "workspace:*",
32
28
  "lit": "^3.1.4"
33
29
  },
34
30
  "devDependencies": {
@@ -41,48 +37,11 @@
41
37
  "@web/dev-server": "^0.4.6",
42
38
  "@web/test-runner": "^0.18.2",
43
39
  "concurrently": "^8.2.2",
44
- "eslint": "^8.57.0",
45
- "eslint-config-prettier": "^9.1.0",
46
- "husky": "^9.0.11",
47
- "lint-staged": "^15.2.7",
48
- "prettier": "^3.3.2",
49
- "storybook": "^10.0.7",
50
40
  "tslib": "^2.6.3",
51
41
  "typescript": "^5.5.3"
52
42
  },
53
43
  "customElements": "custom-elements.json",
54
- "eslintConfig": {
55
- "parser": "@typescript-eslint/parser",
56
- "extends": [
57
- "@open-wc",
58
- "prettier"
59
- ],
60
- "plugins": [
61
- "@typescript-eslint"
62
- ],
63
- "rules": {
64
- "no-unused-vars": "off",
65
- "@typescript-eslint/no-unused-vars": [
66
- "error"
67
- ],
68
- "import/no-unresolved": "off",
69
- "import/extensions": [
70
- "error",
71
- "always",
72
- {
73
- "ignorePackages": true
74
- }
75
- ]
76
- }
77
- },
78
- "prettier": {
79
- "singleQuote": true,
80
- "arrowParens": "avoid"
81
- },
82
- "lint-staged": {
83
- "*.ts": [
84
- "eslint --fix",
85
- "prettier --write"
86
- ]
44
+ "publishConfig": {
45
+ "access": "public"
87
46
  }
88
47
  }
package/test/tt-combobox.test.ts CHANGED
@@ -10,19 +10,19 @@ describe('TtCombobox', () => {
10
10
  const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');
11
11
 
12
12
  const filterCombobox = (combobox: HTMLInputElement, text: string) => {
13
- // eslint-disable-next-line no-param-reassign
14
13
  combobox.value = text;
15
14
  combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
16
- }
15
+ };
17
16
 
18
17
  it('Should render with the default placeholder text', async () => {
19
- const el = await fixture<TtCombobox>(html`
20
- <tt-combobox id="combobox">
18
+ const el = await fixture<TtCombobox>(
19
+ html` <tt-combobox id="combobox">
21
20
  <span slot="label">Test combobox</span>
22
21
  <option slot="option" value="1">Option 1</option>
23
22
  <option slot="option" value="2">Option 2</option>
24
23
  <option slot="option" value="3">Option 3</option>
25
- </tt-combobox>`);
24
+ </tt-combobox>`
25
+ );
26
26
 
27
27
  const combobox = getCombobox(el);
28
28
 
@@ -30,13 +30,14 @@ describe('TtCombobox', () => {
30
30
  });
31
31
 
32
32
  it('should render with the options visible when clicking the combobox', async () => {
33
- const el = await fixture<TtCombobox>(html`
34
- <tt-combobox id="combobox">
33
+ const el = await fixture<TtCombobox>(
34
+ html` <tt-combobox id="combobox">
35
35
  <span slot="label">Test combobox</span>
36
36
  <option slot="option" value="1">Option 1</option>
37
37
  <option slot="option" value="2">Option 2</option>
38
38
  <option slot="option" value="3">Option 3</option>
39
- </tt-combobox>`);
39
+ </tt-combobox>`
40
+ );
40
41
 
41
42
  const combobox = getCombobox(el);
42
43
  combobox.click();
@@ -49,13 +50,14 @@ describe('TtCombobox', () => {
49
50
  });
50
51
 
51
52
  it('should update the placeholder with the selected option', async () => {
52
- const el = await fixture<TtCombobox>(html`
53
- <tt-combobox id="combobox">
53
+ const el = await fixture<TtCombobox>(
54
+ html` <tt-combobox id="combobox">
54
55
  <span slot="label">Test combobox</span>
55
56
  <option slot="option" value="1">Option 1</option>
56
57
  <option slot="option" value="2">Option 2</option>
57
58
  <option slot="option" value="3">Option 3</option>
58
- </tt-combobox>`);
59
+ </tt-combobox>`
60
+ );
59
61
 
60
62
  const combobox = getCombobox(el);
61
63
  combobox.click();
@@ -67,29 +69,30 @@ describe('TtCombobox', () => {
67
69
  });
68
70
 
69
71
  it('should update the placeholder with the selected option when setting it via selectedValues', async () => {
70
- const el = await fixture<TtCombobox>(html`
71
- <tt-combobox id="combobox" multiselect>
72
+ const el = await fixture<TtCombobox>(
73
+ html` <tt-combobox id="combobox" multiselect>
72
74
  <span slot="label">Test combobox</span>
73
75
  <option slot="option" value="1">Option 1</option>
74
76
  <option slot="option" value="2">Option 2</option>
75
77
  <option slot="option" value="3">Option 3</option>
76
- </tt-combobox>`);
78
+ </tt-combobox>`
79
+ );
77
80
 
78
81
  const combobox = getCombobox(el);
79
82
  el.value = ['2'];
80
83
  await elementUpdated(el);
81
84
  await expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');
82
-
83
85
  });
84
86
 
85
87
  it('should display select all option when multiselect is true and display-select-all is true, and select all options when clicked', async () => {
86
- const el = await fixture<TtCombobox>(html`
87
- <tt-combobox id="combobox" multiselect display-select-all>
88
+ const el = await fixture<TtCombobox>(
89
+ html` <tt-combobox id="combobox" multiselect display-select-all>
88
90
  <span slot="label">Test combobox</span>
89
91
  <option slot="option" value="1">Option 1</option>
90
92
  <option slot="option" value="2">Option 2</option>
91
93
  <option slot="option" value="3">Option 3</option>
92
- </tt-combobox>`);
94
+ </tt-combobox>`
95
+ );
93
96
 
94
97
  const combobox = getCombobox(el);
95
98
  await combobox.click();
@@ -107,13 +110,14 @@ describe('TtCombobox', () => {
107
110
  });
108
111
 
109
112
  it('should not allow a disabled option to be selected', async () => {
110
- const el = await fixture<TtCombobox>(html`
111
- <tt-combobox id="combobox">
113
+ const el = await fixture<TtCombobox>(
114
+ html` <tt-combobox id="combobox">
112
115
  <span slot="label">Test combobox</span>
113
116
  <option slot="option" value="1">Option 1</option>
114
117
  <option slot="option" value="2" disabled>Option 2</option>
115
118
  <option slot="option" value="3">Option 3</option>
116
- </tt-combobox>`);
119
+ </tt-combobox>`
120
+ );
117
121
 
118
122
  const combobox = getCombobox(el);
119
123
  await combobox.click();
@@ -132,27 +136,29 @@ describe('TtCombobox', () => {
132
136
  });
133
137
 
134
138
  it('should disable the combobox when the disabled attribute is set', async () => {
135
- const el = await fixture<TtCombobox>(html`
136
- <tt-combobox id="combobox" disabled>
139
+ const el = await fixture<TtCombobox>(
140
+ html` <tt-combobox id="combobox" disabled>
137
141
  <span slot="label">Test combobox</span>
138
142
  <option slot="option" value="1">Option 1</option>
139
143
  <option slot="option" value="2">Option 2</option>
140
144
  <option slot="option" value="3">Option 3</option>
141
- </tt-combobox>`);
145
+ </tt-combobox>`
146
+ );
142
147
 
143
148
  const combobox = getCombobox(el);
144
149
  expect(combobox.disabled).to.be.true;
145
150
  });
146
151
 
147
152
  xit('should render the error message', async () => {
148
- const el = await fixture<TtCombobox>(html`
149
- <tt-combobox id="combobox">
153
+ const el = await fixture<TtCombobox>(
154
+ html` <tt-combobox id="combobox">
150
155
  <span slot="label">Test combobox</span>
151
156
  <option slot="option" value="1">Option 1</option>
152
157
  <option slot="option" value="2">Option 2</option>
153
158
  <option slot="option" value="3">Option 3</option>
154
159
  <span slot="error">There was an error</span>
155
- </tt-combobox>`);
160
+ </tt-combobox>`
161
+ );
156
162
  await elementUpdated(el);
157
163
  const combobox = getCombobox(el);
158
164
  const ariaInvalid = combobox.getAttribute('aria-invalid');
@@ -170,13 +176,14 @@ describe('TtCombobox', () => {
170
176
  });
171
177
 
172
178
  it('should call the event handler when the value changes', async () => {
173
- const el = await fixture<TtCombobox>(html`
174
- <tt-combobox id="combobox">
179
+ const el = await fixture<TtCombobox>(
180
+ html` <tt-combobox id="combobox">
175
181
  <span slot="label">Test combobox</span>
176
182
  <option slot="option" value="1">Option 1</option>
177
183
  <option slot="option" value="2">Option 2</option>
178
184
  <option slot="option" value="3">Option 3</option>
179
- </tt-combobox>`);
185
+ </tt-combobox>`
186
+ );
180
187
 
181
188
  const combobox = getCombobox(el);
182
189
 
@@ -190,15 +197,15 @@ describe('TtCombobox', () => {
190
197
  expect(eventValue).to.be.an('array').that.includes('2');
191
198
  });
192
199
 
193
- it('Should prevent the form from submitting when it\'s required and no option is selected', async () => {
194
- const el = await fixture<TtCombobox>(html`
195
- <tt-combobox id="combobox" required>
200
+ it("Should prevent the form from submitting when it's required and no option is selected", async () => {
201
+ const el = await fixture<TtCombobox>(
202
+ html` <tt-combobox id="combobox" required>
196
203
  <span slot="label">Test combobox</span>
197
204
  <option slot="option" value="1">Option 1</option>
198
205
  <option slot="option" value="2">Option 2</option>
199
206
  <option slot="option" value="3">Option 3</option>
200
- </tt-combobox>`);
201
-
207
+ </tt-combobox>`
208
+ );
202
209
 
203
210
  const form = document.createElement('form');
204
211
  form.appendChild(el);
@@ -210,25 +217,24 @@ describe('TtCombobox', () => {
210
217
  await elementUpdated(el);
211
218
 
212
219
  expect(form.checkValidity()).to.be.false;
213
-
214
220
  });
215
221
 
216
222
  it('passes the a11y audit', async () => {
217
- const el = await fixture<TtCombobox>(html`
218
- <tt-combobox></tt-combobox>`);
223
+ const el = await fixture<TtCombobox>(html` <tt-combobox></tt-combobox>`);
219
224
 
220
225
  await expect(el).shadowDom.to.be.accessible();
221
226
  });
222
227
 
223
228
  it('should allow hidden options', async () => {
224
- const el = await fixture<TtCombobox>(html`
225
- <tt-combobox id="combobox" multiselect display-select-all>
229
+ const el = await fixture<TtCombobox>(
230
+ html` <tt-combobox id="combobox" multiselect display-select-all>
226
231
  <span slot="label">Test combobox</span>
227
232
  <option slot="option" value="1">Option 1</option>
228
233
  <option slot="option" value="2">Option 2</option>
229
234
  <option slot="option" value="3">Option 3</option>
230
235
  <option slot="option" value="4" hidden>Option 4</option>
231
- </tt-combobox>`);
236
+ </tt-combobox>`
237
+ );
232
238
 
233
239
  const combobox = getCombobox(el);
234
240
  combobox.click();
@@ -249,14 +255,15 @@ describe('TtCombobox', () => {
249
255
  });
250
256
 
251
257
  it('should not include hidden options in the placeholder text', async () => {
252
- const el = await fixture<TtCombobox>(html`
253
- <tt-combobox id="combobox" multiselect display-select-all>
258
+ const el = await fixture<TtCombobox>(
259
+ html` <tt-combobox id="combobox" multiselect display-select-all>
254
260
  <span slot="label">Test combobox</span>
255
261
  <option slot="option" value="1">Option 1</option>
256
262
  <option slot="option" value="2">Option 2</option>
257
263
  <option slot="option" value="3">Option 3</option>
258
264
  <option slot="option" value="4" hidden>Option 4</option>
259
- </tt-combobox>`);
265
+ </tt-combobox>`
266
+ );
260
267
 
261
268
  const combobox = getCombobox(el);
262
269
  combobox.click();
@@ -279,13 +286,14 @@ describe('TtCombobox', () => {
279
286
  });
280
287
 
281
288
  it('should close after selecting an option when multiselect is false', async () => {
282
- const el = await fixture<TtCombobox>(html`
283
- <tt-combobox id="combobox">
289
+ const el = await fixture<TtCombobox>(
290
+ html` <tt-combobox id="combobox">
284
291
  <span slot="label">Test combobox</span>
285
292
  <option slot="option" value="1">Option 1</option>
286
293
  <option slot="option" value="2">Option 2</option>
287
294
  <option slot="option" value="3">Option 3</option>
288
- </tt-combobox>`);
295
+ </tt-combobox>`
296
+ );
289
297
 
290
298
  const combobox = getCombobox(el);
291
299
  combobox.click();
@@ -293,7 +301,6 @@ describe('TtCombobox', () => {
293
301
  let options = el.shadowRoot!.querySelectorAll('tt-option');
294
302
  expect(options.length).to.equal(3);
295
303
 
296
-
297
304
  const option = el.shadowRoot!.querySelector('tt-option[value="2"]') as HTMLLIElement;
298
305
  option.click();
299
306
  await elementUpdated(el);
@@ -304,16 +311,16 @@ describe('TtCombobox', () => {
304
311
  });
305
312
  });
306
313
 
307
-
308
314
  it('should include selected options in the value', async () => {
309
- const el = await fixture<TtCombobox>(html`
310
- <tt-combobox id="combobox" multiselect display-select-all>
315
+ const el = await fixture<TtCombobox>(
316
+ html` <tt-combobox id="combobox" multiselect display-select-all>
311
317
  <span slot="label">Test combobox</span>
312
318
  <option slot="option" value="1">Option 1</option>
313
319
  <option slot="option" value="2">Option 2</option>
314
320
  <option slot="option" value="3">Option 3</option>
315
321
  <option slot="option" value="4" selected>Option 4</option>
316
- </tt-combobox>`);
322
+ </tt-combobox>`
323
+ );
317
324
 
318
325
  await elementUpdated(el);
319
326
  expect(el.value).to.deep.equal(['4']);
@@ -330,28 +337,30 @@ describe('TtCombobox', () => {
330
337
  it('should accept a JSON string as value', async () => {
331
338
  const value = ['1', '2'];
332
339
 
333
- const el = await fixture<TtCombobox>(html`
334
- <tt-combobox id="combobox" multiselect display-select-all value="${JSON.stringify(value)}">
340
+ const el = await fixture<TtCombobox>(
341
+ html` <tt-combobox id="combobox" multiselect display-select-all value="${JSON.stringify(value)}">
335
342
  <span slot="label">Test combobox</span>
336
343
  <option slot="option" value="1">Option 1</option>
337
344
  <option slot="option" value="2">Option 2</option>
338
345
  <option slot="option" value="3">Option 3</option>
339
- </tt-combobox>`);
346
+ </tt-combobox>`
347
+ );
340
348
 
341
349
  await expect(el.value).to.deep.equal(value);
342
350
  const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]') as NodeListOf<TtOption>;
343
351
  expect(selectedOptions).to.have.lengthOf(2);
344
- await expect(Array.from(selectedOptions).map(option => option.value)).to.deep.equal(value);
352
+ await expect(Array.from(selectedOptions).map((option) => option.value)).to.deep.equal(value);
345
353
  });
346
354
 
347
355
  it('should display the passed placeholder when all options are selected', async () => {
348
- const el = await fixture<TtCombobox>(html`
349
- <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
356
+ const el = await fixture<TtCombobox>(
357
+ html` <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
350
358
  <span slot="label">Test combobox</span>
351
359
  <option slot="option" value="1">Option 1</option>
352
360
  <option slot="option" value="2">Option 2</option>
353
361
  <option slot="option" value="3">Option 3</option>
354
- </tt-combobox>`);
362
+ </tt-combobox>`
363
+ );
355
364
 
356
365
  const combobox = getCombobox(el);
357
366
  combobox.click();
@@ -366,13 +375,14 @@ describe('TtCombobox', () => {
366
375
  });
367
376
 
368
377
  it('should render selected options correctly after filtering and deselecting', async () => {
369
- const el = await fixture<TtCombobox>(html`
370
- <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
378
+ const el = await fixture<TtCombobox>(
379
+ html` <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
371
380
  <span slot="label">Test combobox</span>
372
381
  <option slot="option" value="1">Option 1</option>
373
382
  <option slot="option" value="2">Option 2</option>
374
383
  <option slot="option" value="3">Option 3</option>
375
- </tt-combobox>`);
384
+ </tt-combobox>`
385
+ );
376
386
 
377
387
  const combobox = getCombobox(el);
378
388
  combobox.click();
@@ -407,13 +417,14 @@ describe('TtCombobox', () => {
407
417
  });
408
418
 
409
419
  it('should only add the visible options to the value when select all is clicked after filtering', async () => {
410
- const el = await fixture<TtCombobox>(html`
411
- <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
420
+ const el = await fixture<TtCombobox>(
421
+ html` <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
412
422
  <span slot="label">Test combobox</span>
413
423
  <option slot="option" value="1">Option 1</option>
414
424
  <option slot="option" value="2">Option 2</option>
415
425
  <option slot="option" value="3">Option 3</option>
416
- </tt-combobox>`);
426
+ </tt-combobox>`
427
+ );
417
428
 
418
429
  // Open the combobox
419
430
  const combobox = getCombobox(el);
@@ -442,13 +453,14 @@ describe('TtCombobox', () => {
442
453
  });
443
454
 
444
455
  it('should only remove the visible options from the value when deselecting select all after filtering', async () => {
445
- const el = await fixture<TtCombobox>(html`
446
- <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
456
+ const el = await fixture<TtCombobox>(
457
+ html` <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
447
458
  <span slot="label">Test combobox</span>
448
459
  <option slot="option" value="1">Option 1</option>
449
460
  <option slot="option" value="2">Option 2</option>
450
461
  <option slot="option" value="3">Option 3</option>
451
- </tt-combobox>`);
462
+ </tt-combobox>`
463
+ );
452
464
 
453
465
  // Open the combobox
454
466
  const combobox = getCombobox(el);
@@ -480,7 +492,7 @@ describe('TtCombobox', () => {
480
492
  // Create a form with the combobox component
481
493
  const form = await fixture<HTMLFormElement>(html`
482
494
  <form method="post" action="#">
483
- <input type="text" name="text_field" value="test_input">
495
+ <input type="text" name="text_field" value="test_input" />
484
496
  <tt-combobox name="country_select" id="combobox">
485
497
  <option slot="option" value="us">United States</option>
486
498
  <option slot="option" value="ca">Canada</option>