{"_id":"@dojo-ng/chip-typeahead","name":"@dojo-ng/chip-typeahead","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/chip-typeahead","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG chip-typeahead web component","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"dependencies":{"@dojo-ng/dojo-element":"^0.1.0","@dojo-ng/chip":"^0.1.0","@dojo-ng/popup":"^0.1.0","@dojo-ng/list":"^0.1.0","@dojo-ng/label":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/chip-typeahead@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-/7Dv1h+rPtQbj5m+asHRoGic5auN+nSFXbkV2jBfYy4HXngb01cJ21B1D+iUoCTF//yB5zSKCkuMqxZ0lQO7hA==","shasum":"9e8331e524d0466516455f4f8152e5c401780ac9","tarball":"https://registry.npmjs.org/@dojo-ng/chip-typeahead/-/chip-typeahead-0.1.0.tgz","fileCount":8,"unpackedSize":17464,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCoa7NolNxDAaPzZ2YkRpn9q/I5BFyn18UtQ0MbNig+pwIgbDvnbWRJmyLVaPs4A/JyQed8tOjO2P+nvTwCygbCnEI="}]},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chip-typeahead_0.1.0_1788374423999_0.3011581747237775"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:40:23.781Z","0.1.0":"2026-09-02T18:40:24.385Z","modified":"2026-09-02T18:40:26.744Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG chip-typeahead web component","license":"BSD-3-Clause","readme":"# @dojo-ng/chip-typeahead\n\n`<dj-chip-typeahead>` — Multi-select typeahead: type to filter `options`, pick from the popup `<dj-list>`, selections render as removable `<dj-chip>`s.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nMulti-select typeahead: type to filter `options`, pick from the popup `<dj-list>`, selections render as removable `<dj-chip>`s. Backspace on an empty input removes the last chip. Form-associated (submits each value under `name`). Composes chip, list, popup, label. Event: `change` (detail: selected values). With `allow-new`, Enter on non-empty input text creates a chip from the literal trimmed value (a free-text tag), unless the popup has an active (highlighted) option — that keeps picking. New values respect `duplicates`, clear the input, and join the form value like picked ones. Only Enter commits; comma is left alone (it is a valid character in many locales).\n\n> By default only configured `options` can be chosen. Add `allow-new` for a tag editor: Enter on non-empty text that matches no option creates a chip from the literal value (respecting `duplicates`), while a highlighted popup option still picks the option. Only Enter commits — comma is left alone, since it is a valid character in many locales.\n\n## Install\n\n```bash\nnpm install @dojo-ng/chip-typeahead\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nSelections render as removable chips; submits each value under `name`.\n\n```html\n<dj-chip-typeahead label=\"Tags\" name=\"tags\" id=\"ct\"></dj-chip-typeahead>\n<script type=\"module\">\n  import \"@dojo-ng/chip-typeahead\";\n  document.getElementById(\"ct\").options = [\n    { value: \"red\", label: \"Red\" }, { value: \"green\", label: \"Green\" }, { value: \"blue\", label: \"Blue\" },\n  ];\n</script>\n```\n\n## Properties\n\n`↻` marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.\n\n| Property | Attribute | Type | Default |\n|---|---|---|---|\n| `options` | options | `ListOption[]` | `[]` |\n| `value` | value | `string[]` | `[]` |\n| `name` | name ↻ | `string` | — |\n| `label` | label | `string` | — |\n| `placeholder` | placeholder | `string` | — |\n| `disabled` | disabled ↻ | `boolean` | `false` |\n| `duplicates` | duplicates | `boolean` | `false` |\n| `allowNew` | allow-new ↻ | `boolean` | `false` |\n| `position` | position ↻ | `PopupPosition` | `\"below\"` |\n\n**Parts:** `label`, `box`\n\n**Events:** `change` (detail: selected values)\n\n**Methods:** `checkValidity(): boolean`, `focus(o: FocusOptions)`, `restoreFormState(state: File | string | FormData | null)`\n\n## Examples\n\n### Free-text tag editor (`allow-new`)\n\nWith `allow-new`, Enter on text that matches no option creates a chip from the literal value, so users can add tags that are not in the list. Suggestions still work: a highlighted option is picked instead of creating a literal.\n\n```html\n<dj-chip-typeahead allow-new label=\"Tags\" name=\"tags\" id=\"tags\"></dj-chip-typeahead>\n<script type=\"module\">\n  import \"@dojo-ng/chip-typeahead\";\n  document.getElementById(\"tags\").options = [\n    { value: \"urgent\", label: \"urgent\" }, { value: \"later\", label: \"later\" },\n  ];\n  // Type \"roadmap\" and press Enter to add a brand-new tag.\n</script>\n```\n\n## Theming\n\nStyled with Dojo NG `--dj-*` design tokens and exposes `::part()` hooks for targeted overrides.\n\n## Accessibility and i18n\n\nFollows the project's WCAG 2.2 AA and localization conventions.\n\n## More\n\nLive, interactive examples are in the playground (`playground/index.html`). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md","_rev":"1-0d0a69ca28265749ad08c8a697596e31"}