{"_id":"@dojo-ng/search-box","_rev":"2-9017e2a84e14d1f58ce137bb7745ead1","name":"@dojo-ng/search-box","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dojo-ng/search-box","version":"0.1.0","license":"BSD-3-Clause","_id":"@dojo-ng/search-box@0.1.0","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"dist":{"shasum":"e85bfef61f89f177a0e4637929bf92718e5bd95e","tarball":"https://registry.npmjs.org/@dojo-ng/search-box/-/search-box-0.1.0.tgz","fileCount":10,"integrity":"sha512-ems7QV8xG/B/kXrqkLdCV+dw/RmeXa0fkP4u03jgxfPGI5dmv//93TUfPrLmp+4Zmjt0VXlQknO1cui62/Uigw==","signatures":[{"sig":"MEYCIQDtDemXELlFrigDGyt+YyWQZrpKAGeTFvto1Oq5qqY+iQIhAN7ocHWWAZ/0yBbENGrEyco5+JosQFVguH31yyt/YxjO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30751},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"_npmVersion":"10.9.8","description":"Dojo NG search-box web component (free text plus typed key:value filters)","directories":{},"_nodeVersion":"22.23.1","dependencies":{"lit":"^3.3.0","@dojo-ng/chip":"^0.1.0","@dojo-ng/i18n":"^0.1.0","@dojo-ng/list":"^0.1.0","@dojo-ng/popup":"^0.1.0","@dojo-ng/dojo-element":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/search-box_0.1.0_1788374437571_0.6862151091674391","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"_id":"@dojo-ng/search-box@0.1.1","dist":{"shasum":"6e4827865f38334d15b479d3ed79a78a444dd6ba","tarball":"https://registry.npmjs.org/@dojo-ng/search-box/-/search-box-0.1.1.tgz","fileCount":10,"integrity":"sha512-HKnDPqJXu2K8UGqeITAPA1ExH/MKhcQGPWQbubApvdjT9ICbIKxXdt0BVL1eUglgJ/ED7R8az+ddV54TBIGUfg==","signatures":[{"sig":"MEYCIQC9t2m40k3DMyIol1zRCCvDGqIKeeY23evNRW+uLQTc1gIhAMUGpN8M6Cac5Sv+iI1/zDYKsY4TbL6c5G9nPf4HUY4D","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE7vbZaZ3E26zSj18dZ7r8PV4VPdXLtPxWiDWFu7UMvNAiBH5c8mM6CdG7rGMiyjU03j/SijbgxUiYWed6KqQFJGbA=="}],"unpackedSize":31029},"main":"./dist/index.js","name":"@dojo-ng/search-box","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","license":"BSD-3-Clause","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"version":"0.1.1","_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"_npmVersion":"10.9.8","description":"Dojo NG search-box web component (free text plus typed key:value filters)","directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_nodeVersion":"22.23.1","dependencies":{"lit":"^3.3.0","@dojo-ng/chip":"^0.1.0","@dojo-ng/i18n":"^0.1.0","@dojo-ng/list":"^0.1.0","@dojo-ng/popup":"^0.1.0","@dojo-ng/dojo-element":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/search-box_0.1.1_1789132081653_0.13969845621992283"}}},"time":{"created":"2026-09-02T18:40:37.239Z","modified":"2026-09-11T13:08:01.895Z","0.1.0":"2026-09-02T18:40:37.705Z","0.1.1":"2026-09-11T13:08:01.733Z"},"license":"BSD-3-Clause","description":"Dojo NG search-box web component (free text plus typed key:value filters)","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"readme":"# @dojo-ng/search-box\n\n`<dj-search-box>` — A search field: free text plus typed `key:value` filters.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nA search field: free text plus typed `key:value` filters. Typing a configured `key:` enters token mode; keys with `options` open a suggestion popup (pick to commit), keys without take a free-typed value committed by Enter or the terminating space (values may be `\"quoted\"` to hold spaces). A committed filter becomes a closeable `<dj-chip>` before the input; an unconfigured `word:` stays plain text. Backspace with the caret at the start removes the last chip. Read-only `query` = `{ text, tokens }`; set it with `setQuery`. Not form-associated.\n\n> Free text plus typed `key:value` filters. Configure `keys`: a key with `options` opens a suggestion popup when you type `key:` (pick to commit), a key without takes a free-typed value committed by Enter or the terminating space, and values may be `\"quoted\"` to hold spaces. A committed filter becomes a closeable chip before the input; an unconfigured `word:` stays plain text — no popup, no chip, no error. Backspace with the caret at the start removes the last chip. Read `query` (`{ text, tokens }`) or listen for `dj-query-change`; `dj-search` fires on Enter outside token mode. `setQuery()` sets it programmatically without emitting. The tokenizer IS the exported `parseQuery`, so a backend can reuse the same grammar (`import { parseQuery, formatQuery } from \"@dojo-ng/search-box\"`). Not form-associated — search is app-driven.\n\n## Install\n\n```bash\nnpm install @dojo-ng/search-box\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nConfigure `keys`; `has` carries `options`, so typing `has:` opens a suggestion popup. Read the structured query off `dj-query-change` (every change) or `dj-search` (Enter).\n\n```html\n<dj-search-box id=\"mail-search\" label=\"Search mail\" placeholder='Try from:ada or has:attachment or subject:\"weekly report\"'></dj-search-box>\n<pre id=\"query-out\">{ \"text\": \"\", \"tokens\": [] }</pre>\n<script type=\"module\">\n  import \"@dojo-ng/search-box\";\n  const box = document.getElementById(\"mail-search\");\n  box.keys = [\n    { key: \"from\", label: \"From\" },\n    { key: \"to\", label: \"To\" },\n    { key: \"tag\", label: \"Tag\" },\n    { key: \"has\", label: \"Has\", options: [\n      { value: \"attachment\", label: \"attachment\" },\n      { value: \"image\", label: \"image\" },\n    ] },\n  ];\n  const out = document.getElementById(\"query-out\");\n  const show = (e) => { out.textContent = JSON.stringify(e.detail.query, null, 2); };\n  box.addEventListener(\"dj-query-change\", show);\n  box.addEventListener(\"dj-search\", show);\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| `keys` | keys | `SearchKey[]` | `[]` |\n| `label` | label | `string` | — |\n| `placeholder` | placeholder | `string` | — |\n| `position` | position ↻ | `PopupPosition` | `\"below\"` |\n| `disabled` | disabled ↻ | `boolean` | `false` |\n\n**Parts:** `box`, `input`, `chip`, `clear`, `label`\n\n**Events:** `dj-query-change` (`{ query }`), `dj-search` (`{ query }`)\n\n**Methods:** `setQuery(q: SearchQuery)` (Set the query programmatically, rendering its chips and text. Does not emit.), `clear()` (Clear all text and filters, emitting `dj-query-change`.), `focus(options: FocusOptions)`\n\n**CSS properties:** `--dj-focus-ring` (Focus ring for the clear button (inherited token).)\n\n## Examples\n\n### Reuse the grammar on the server\n\nThe component's tokenizer is the exported pure parser, so the same query string parses identically outside the browser.\n\n```html\nimport { parseQuery, formatQuery } from \"@dojo-ng/search-box\";\n\nconst keys = [{ key: \"from\" }, { key: \"has\", options: [] }];\nconst q = parseQuery('from:ada has:attachment weekly report', keys);\n// q.tokens -> [{ key: \"from\", value: \"ada\" }, { key: \"has\", value: \"attachment\" }]\n// q.text   -> \"weekly report\"\nformatQuery(q); // round-trips back to the same string\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 at [play.dojo-ng.com](https://play.dojo-ng.com). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md"}