@triptease/tt-combobox 5.0.3

package/dist/src/styles.js

@@ -0,0 +1,276 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    flex-direction: var(--tt-combobox-flex-direction, row);
+    align-items: var(--tt-combobox-align-items, center);
+    justify-content: var(--tt-combobox-justify-content, initial);
+    align-content: var(--tt-combobox-align-content, initial);
+    gap: var(--tt-combobox-gap, 0.5rem);
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+    color: var(--tt-combobox-color, var(--color-text-400));
+  }
+
+  :host([disabled]) .tt-combobox-container {
+    border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));
+    color: var(--tt-combobox-disabled-color, var(--color-text-200));
+    background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));
+    pointer-events: none;
+  }
+
+  .tt-combobox-container:focus-within {
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .tt-combobox-container:hover {
+    background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));
+  }
+
+  :host([invalid]) .tt-combobox-container,
+  :host(:state(interacted):invalid) .tt-combobox-container {
+    outline: 1px solid var(--color-alert-400,red);
+  }
+
+  .errormessage {
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    gap: var(--space-scale-0-5);
+    color: var(--color-alert-400, red);
+
+    &[data-hidden] {
+      display: none;
+    }
+  }
+
+  .errormessage svg path {
+    fill:  var(--color-alert-400, red);
+    height: 20px;
+  }
+
+  .tt-combobox-container:has([role="combobox"][aria-invalid="true"]) ~ .errormessage {
+    visibility: visible;
+  }
+
+  :has([role="combobox"][aria-invalid="true"]) ::slotted([slot="error"]) {
+    color: var(--color-alert-400,darkred);
+    font-size: var(--font-size-100);
+    margin: 0;
+    font-weight: var(--font-weight-regular);
+    line-height: 1.2;
+  }
+
+  slot[name="option"]::slotted(*) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+    font-family: var(--font-family-sans);
+    cursor: inherit;
+  }
+
+  .tt-combobox-container {
+    position: relative;
+    max-width: var(--tt-combobox-max-width, 300px);
+    min-width: var(--tt-combobox-min-width, 250px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--border-radius);
+    border-color: var(--tt-combobox-border-color, var(--color-border-400));
+    border-style: solid;
+    border-width: var(--tt-combobox-border-width, 1px);
+    background-color: var(--tt-combobox-background-color, var(--color-surface-100));
+    padding: 0.5rem;
+    gap: 0.25rem;
+    //width: 100%;
+  }
+
+  [role="listbox"] {
+    display: none;
+  }
+
+  [role="combobox"] {
+    width: 100%;
+    border-style: none;
+    background-color: transparent;
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+  }
+
+  .hide-caret {
+    caret-color: transparent;
+  }
+
+  [role="combobox"]::placeholder {
+    color: var(--tt-combobox-placeholder-color, var(--color-text-300));
+    font-family: var(--font-family-inter);
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+  }
+
+  :host([disabled]) [role="combobox"]::placeholder {
+    color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));
+  }
+
+  [role="combobox"]:placeholder-shown {
+    text-overflow: ellipsis;
+    overflow: clip;
+  }
+
+  [role="combobox"]:focus {
+    outline: none;
+  }
+
+  [role="combobox"] ~ button {
+    appearance: none;
+    padding: 0;
+    border-width: 0;
+    background-color: transparent;
+    aspect-ratio: 1;
+  }
+
+  [role="combobox"] ~ button svg {
+    transition: transform 0.2s ease-in-out;
+    color: var(--tt-combobox-dropdown-color, var(--color-text-400));
+  }
+
+  [role="combobox"][aria-expanded="true"] ~ button svg {
+    transform: rotate(180deg);
+  }
+
+  [role="combobox"][aria-expanded="true"] ~ [role="listbox"] {
+    display: block;
+    width: max-content;
+    max-width: var(--tt-combobox-list-max-width, 35ch);
+    min-width: 100%;
+    background-color: var(--color-surface-100);
+    border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-lg);
+    padding: 0;
+    position: absolute;
+    top: var(--tt-combobox-top, calc(100% + 0.5rem));
+    left: var(--tt-combobox-left, 0);
+    right: var(--tt-combobox-right, unset);
+    bottom: var(--tt-combobox-bottom, unset);
+    z-index: 2;
+    margin: 0;
+    list-style: none;
+    max-height: var(--tt-combobox-max-height, 400px);
+    overflow-y: auto;
+
+
+    li {
+      display: flex;
+      padding: 0.5rem;
+      box-sizing: border-box;
+      text-align: left;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
+      align-items: center;
+      gap: 0.25rem;
+      max-width: 100%;
+      width: 100%;
+      overflow-y: visible;
+      flex: 1;
+
+
+      input[type="checkbox"] {
+        width: var(--checkbox-size, var(--space-scale-2));
+        aspect-ratio: 1;
+        flex: 0 0 auto;
+      }
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        line-height: 1.1;
+      }
+
+      &.no-results {
+        display: none;
+      }
+
+      &[aria-hidden="true"] {
+        visibility: hidden;
+        display: none;
+      }
+    }
+
+    &:not(:has([role="option"]:not([data-value="select-all"]))) {
+      .no-results {
+        display: flex;
+      }
+
+      .select-all {
+        display: none;
+      }
+    }
+
+
+  }
+
+  slot[name="icon"] {
+    display: inline-block;
+    max-width: var(--tt-combobox-icon-size,1rem);
+    aspect-ratio: 1;
+  }
+
+  [role="option"].select-all {
+    border-bottom: 1px solid var(--color-border-300);
+  }
+
+  [aria-multiselectable="false"] [role="option"][aria-selected="true"] {
+    color: var(--color-primary-400);
+    font-weight: var(--font-weight-medium);
+  }
+
+  [role="option"]:is(:hover, [data-active="true"]) {
+    background-color: var(--color-surface-300);
+
+    &:first-child {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+
+  [role="option"]:hover {
+    cursor: pointer;
+  }
+
+  [role="option"][aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  [role="listbox"][aria-multiselectable="true"] [role="option"] input[type="checkbox"] {
+    accent-color: var(--color-primary-400);
+    width: var(--checkbox-size, var(--space-scale-2));
+    aspect-ratio: 1;
+    pointer-events: none;
+  }
+
+  [role="listbox"][aria-multiselectable="true"] [role="option"][aria-disabled="true"] input[type="checkbox"] {
+    pointer-events: none;
+  }
+
+  label {
+    font-size: var(--tt-combobox-label-font-size, inherit);
+    color: var(--tt-combobox-label-color, inherit);
+    font-weight: var(--tt-combobox-label-font-weight, inherit);
+
+    &[data-hidden] {
+      display: none;
+    }
+
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiRvB,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-400,red);\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-400, red);\n\n    &[data-hidden] {\n      display: none;\n    }\n  }\n\n  .errormessage svg path {\n    fill:  var(--color-alert-400, red);\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-400,darkred);\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(--color-surface-100);\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\n    li {\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\n      input[type=\"checkbox\"] {\n        width: var(--checkbox-size, var(--space-scale-2));\n        aspect-ratio: 1;\n        flex: 0 0 auto;\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      &.no-results {\n        display: none;\n      }\n\n      &[aria-hidden=\"true\"] {\n        visibility: hidden;\n        display: none;\n      }\n    }\n\n    &:not(:has([role=\"option\"]:not([data-value=\"select-all\"]))) {\n      .no-results {\n        display: flex;\n      }\n\n      .select-all {\n        display: none;\n      }\n    }\n\n\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  [role=\"option\"].select-all {\n    border-bottom: 1px solid var(--color-border-300);\n  }\n\n  [aria-multiselectable=\"false\"] [role=\"option\"][aria-selected=\"true\"] {\n    color: var(--color-primary-400);\n    font-weight: var(--font-weight-medium);\n  }\n\n  [role=\"option\"]:is(:hover, [data-active=\"true\"]) {\n    background-color: var(--color-surface-300);\n\n    &:first-child {\n      border-top-left-radius: var(--border-radius);\n      border-top-right-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n  }\n\n  [role=\"option\"]:hover {\n    cursor: pointer;\n  }\n\n  [role=\"option\"][aria-disabled=\"true\"] {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  [role=\"listbox\"][aria-multiselectable=\"true\"] [role=\"option\"] input[type=\"checkbox\"] {\n    accent-color: var(--color-primary-400);\n    width: var(--checkbox-size, var(--space-scale-2));\n    aspect-ratio: 1;\n    pointer-events: none;\n  }\n\n  [role=\"listbox\"][aria-multiselectable=\"true\"] [role=\"option\"][aria-disabled=\"true\"] input[type=\"checkbox\"] {\n    pointer-events: none;\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`;\n"]}

package/dist/src/tt-combobox.d.ts

@@ -0,0 +1,2 @@
+import { TtCombobox } from './TtCombobox.js';
+export { TtCombobox };

package/dist/src/tt-combobox.js

@@ -0,0 +1,6 @@
+import { TtCombobox } from './TtCombobox.js';
+if (!window.customElements.get('tt-combobox')) {
+    window.customElements.define('tt-combobox', TtCombobox);
+}
+export { TtCombobox };
+//# sourceMappingURL=tt-combobox.js.map

package/dist/src/tt-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;IAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AAC1D,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\nif (!window.customElements.get('tt-combobox')) {\n  window.customElements.define('tt-combobox', TtCombobox);\n}\n\nexport { TtCombobox };\n"]}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@triptease/tt-combobox",
+  "description": "Webcomponent tt-combobox following open-wc recommendations",
+  "license": "MIT",
+  "author": "@triptease",
+  "version": "5.0.3",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./tt-combobox.js": "./dist/src/tt-combobox.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
+    "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
+    "build:node": "tsc",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "prepare": "husky",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@triptease/icons": "^1.0.2",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.18.2",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}