{"_id":"@bloc-ui/text-highlight","_rev":"4-74d595f7ea4f371cad603e066d0aceaa","name":"@bloc-ui/text-highlight","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@bloc-ui/text-highlight","version":"1.0.0","_id":"@bloc-ui/text-highlight@1.0.0","maintainers":[{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"}],"homepage":"https://github.com/debasish1996/BLOC-UI#readme","bugs":{"url":"https://github.com/debasish1996/BLOC-UI/issues"},"dist":{"shasum":"db0ec573eb823334a8d24c476ae9611a1d0a5114","tarball":"https://registry.npmjs.org/@bloc-ui/text-highlight/-/text-highlight-1.0.0.tgz","fileCount":4,"integrity":"sha512-IQmn8Pao4WeZ0swt4qIyBVipHt02CYfkp8GfEU9E8eUEzuMLvmXf0eTqBkpMGq96+65lQMD1vC9quaHT9DeBww==","signatures":[{"sig":"MEMCH1+RNuK8ko84hnKxv4gz7NfouBaryMRQA1sOmuaxSikCIC2bmjw6ijvatR3vle13OZ+thOGThksqCkjwVDr8bFwl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17264},"module":"fesm2022/bloc-ui-text-highlight.mjs","exports":{".":{"types":"./types/bloc-ui-text-highlight.d.ts","default":"./fesm2022/bloc-ui-text-highlight.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"17983cd27942b6db2b299c6969903c7ea3d71ae4","typings":"types/bloc-ui-text-highlight.d.ts","_npmUser":{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"},"repository":{"url":"git+https://github.com/debasish1996/BLOC-UI.git","type":"git","directory":"projects/bloc-ui-text-highlight"},"_npmVersion":"11.9.0","directories":{},"sideEffects":false,"_nodeVersion":"24.14.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/common":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/text-highlight_1.0.0_1775834049593_0.47313560542598476","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bloc-ui/text-highlight","version":"1.0.2","_id":"@bloc-ui/text-highlight@1.0.2","maintainers":[{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"}],"homepage":"https://github.com/debasish1996/BLOC-UI#readme","bugs":{"url":"https://github.com/debasish1996/BLOC-UI/issues"},"dist":{"shasum":"6dd1de40f177d8812da9141e64092d465ad4c798","tarball":"https://registry.npmjs.org/@bloc-ui/text-highlight/-/text-highlight-1.0.2.tgz","fileCount":5,"integrity":"sha512-xpuk5e9NcEqWvNlyGa8n2oDehY19Aa3+Y1262I1ZFusX776Acz+ZNwEdTVl+vSOc55uGyD0U4fgbbd1xRGL29A==","signatures":[{"sig":"MEUCIErJ88bO14c6DuRfj0bXMW4ZJZ1l7k3PA31bBhnQ0vPEAiEAsg1jLhw65xPzd+RkUs4Opzzysr+WjWrLiLua86zjGx0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bloc-ui%2ftext-highlight@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":17760},"module":"fesm2022/bloc-ui-text-highlight.mjs","exports":{".":{"types":"./types/bloc-ui-text-highlight.d.ts","default":"./fesm2022/bloc-ui-text-highlight.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"c5feb2764bb5f1e5a7e8977b733a445b380fa792","typings":"types/bloc-ui-text-highlight.d.ts","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:973cf01c-15ac-414d-8dbf-7d5691e45099"}},"repository":{"url":"git+https://github.com/debasish1996/BLOC-UI.git","type":"git","directory":"projects/bloc-ui-text-highlight"},"_npmVersion":"11.11.0","description":"> **Latest:** v1.0.2","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/common":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/text-highlight_1.0.2_1775897484651_0.7977613891822541","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@bloc-ui/text-highlight","version":"1.0.4","keywords":["angular","angular-components","text-highlight","highlight","search","filter","standalone-components","bloc-ui"],"author":{"name":"Bloc Verse"},"license":"MIT","_id":"@bloc-ui/text-highlight@1.0.4","maintainers":[{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"}],"homepage":"https://ui.bloc-verse.com","bugs":{"url":"https://github.com/debasish1996/BLOC-UI/issues"},"dist":{"shasum":"61fd155bc323d94b33aff0df444d9f33ebb7bc9c","tarball":"https://registry.npmjs.org/@bloc-ui/text-highlight/-/text-highlight-1.0.4.tgz","fileCount":5,"integrity":"sha512-ZfzrB9ztI1WCnBAcXWRWirBruSnBF+ymC50yuDgJYvWbYvmrhjJEiCqOXXDWH4jQ4EOMI1ln8sNkm2+a1FNxHA==","signatures":[{"sig":"MEQCIFpvscs/v3D4cDk0HXnlf4Vu2HIwc0WjFUx0KCr0qK/fAiBoFg1H1rlzgxAEi6zTiYVgTZkYFYvCZgckGVl8REwVzg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bloc-ui%2ftext-highlight@1.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":18230},"module":"fesm2022/bloc-ui-text-highlight.mjs","exports":{".":{"types":"./types/bloc-ui-text-highlight.d.ts","default":"./fesm2022/bloc-ui-text-highlight.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"8345ba53a6062d6dd5bb1cf67f6852e62a0799c1","typings":"types/bloc-ui-text-highlight.d.ts","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:973cf01c-15ac-414d-8dbf-7d5691e45099"}},"repository":{"url":"git+https://github.com/debasish1996/BLOC-UI.git","type":"git","directory":"projects/bloc-ui-text-highlight"},"_npmVersion":"11.11.0","description":"Lightweight text highlighting directive for Angular — highlights search/filter matches inside rendered content.","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^21.2.0","@angular/common":"^21.2.0"},"_npmOperationalInternal":{"tmp":"tmp/text-highlight_1.0.4_1775918402667_0.8661390370421078","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@bloc-ui/text-highlight","version":"1.0.5","description":"Lightweight text highlighting directive for Angular — highlights search/filter matches inside rendered content.","keywords":["angular","angular-components","text-highlight","highlight","search","filter","standalone-components","bloc-ui"],"license":"MIT","author":{"name":"Bloc Verse"},"homepage":"https://ui.bloc-verse.com","bugs":{"url":"https://github.com/debasish1996/BLOC-UI/issues"},"repository":{"type":"git","url":"git+https://github.com/debasish1996/BLOC-UI.git","directory":"projects/bloc-ui-text-highlight"},"peerDependencies":{"@angular/common":"^21.2.0","@angular/core":"^21.2.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/bloc-ui-text-highlight.mjs","typings":"types/bloc-ui-text-highlight.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/bloc-ui-text-highlight.d.ts","default":"./fesm2022/bloc-ui-text-highlight.mjs"}},"gitHead":"abe1c2a9145e5a2a042a16ed2d52f35a653154dc","_id":"@bloc-ui/text-highlight@1.0.5","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-DA1DD1qGxvPfrToIP3S7borXVy7Dqyln96V3xmLMq+rjGWQS5F+cHFtbPdaPZOm1q11Csgdqu0YbbOBrZoyGZQ==","shasum":"57dff8af55e973950109164a99934508c18bbc3d","tarball":"https://registry.npmjs.org/@bloc-ui/text-highlight/-/text-highlight-1.0.5.tgz","fileCount":5,"unpackedSize":22086,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bloc-ui%2ftext-highlight@1.0.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAYcE0ueCVYdtWgyp5sx7KdPy+6kl94ToIFU4xTothUHAiAtJRwrQ3qFU0jYuF6tbI96B3u/ZuYSCVWfDFcbWnOsWw=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:973cf01c-15ac-414d-8dbf-7d5691e45099"}},"directories":{},"maintainers":[{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/text-highlight_1.0.5_1776135179881_0.08439588309524226"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T15:14:09.529Z","modified":"2026-04-14T02:53:00.292Z","1.0.0":"2026-04-10T15:14:09.744Z","1.0.2":"2026-04-11T08:51:24.788Z","1.0.4":"2026-04-11T14:40:02.804Z","1.0.5":"2026-04-14T02:53:00.042Z"},"bugs":{"url":"https://github.com/debasish1996/BLOC-UI/issues"},"author":{"name":"Bloc Verse"},"license":"MIT","homepage":"https://ui.bloc-verse.com","keywords":["angular","angular-components","text-highlight","highlight","search","filter","standalone-components","bloc-ui"],"repository":{"type":"git","url":"git+https://github.com/debasish1996/BLOC-UI.git","directory":"projects/bloc-ui-text-highlight"},"description":"Lightweight text highlighting directive for Angular — highlights search/filter matches inside rendered content.","maintainers":[{"name":"bloc_ui","email":"debasishsahoo444@gmail.com"}],"readme":"# @bloc-ui/text-highlight\n\n> **Latest:** v1.0.5\n\nLightweight Angular text-highlighting directive used to emphasize query matches inside rendered content. Ideal for search results, autocomplete dropdowns, and select option filtering.\n\n**[Live Documentation & Demos](https://ui.bloc-verse.com/text-highlight)**\n\n---\n\n## Installation\n\n```bash\nnpm install @bloc-ui/text-highlight\n```\n\n**Peer dependencies:** `@angular/common` and `@angular/core` >= 17.\n\n---\n\n## Selectors / API\n\n| Export                        | Selector              | Type      | Description                                    |\n| ----------------------------- | --------------------- | --------- | ---------------------------------------------- |\n| `BlocTextHighlightDirective`  | `[blocTextHighlight]` | Directive | Highlights matching text segments in an element |\n\n---\n\n## Usage\n\n### Basic\n\n```ts\nimport { BlocTextHighlightDirective } from '@bloc-ui/text-highlight';\n```\n\n```html\n<span [blocTextHighlight]=\"'Apple'\" query=\"App\"></span>\n```\n\n### Interactive search\n\n```ts\nreadonly searchTerm = signal('');\nreadonly fruits = ['Apple', 'Banana', 'Cherry'];\nreadonly filtered = computed(() => {\n  const term = this.searchTerm().toLowerCase();\n  if (!term) return this.fruits;\n  return this.fruits.filter(f => f.toLowerCase().includes(term));\n});\n```\n\n```html\n<input (input)=\"searchTerm.set($event.target.value)\" />\n\n@for (fruit of filtered(); track fruit) {\n  <span [blocTextHighlight]=\"fruit\" [query]=\"searchTerm()\"></span>\n}\n```\n\n---\n\n## Inputs — `BlocTextHighlightDirective`\n\n| Input              | Type      | Default | Description                                                                  |\n| ------------------ | --------- | ------- | ---------------------------------------------------------------------------- |\n| `blocTextHighlight`| `string`  | —       | **Required.** The full text to display. Replaces the element's innerHTML with sanitized, highlight-annotated content |\n| `query`            | `string`  | `''`    | The search term to highlight within the text. Empty string renders text without highlights |\n| `caseSensitive`    | `boolean` | `false` | When true, only exact-case matches are highlighted                           |\n| `highlighted`      | `boolean` | `false` | Applies a background colour to matched segments via the `--highlighted` class |\n\n---\n\n## CSS Custom Properties\n\nAll visual properties are token-driven. Override any token on a parent element or the host.\n\n| Token                                    | Default                              | Description                                           |\n| ---------------------------------------- | ------------------------------------ | ----------------------------------------------------- |\n| `--bloc-text-highlight-bg`               | `transparent` (`#fef08a` when highlighted) | Background colour of matched text                |\n| `--bloc-text-highlight-color`            | `inherit`                            | Text colour of matched segments                       |\n| `--bloc-text-highlight-radius`           | `2px`                                | Border radius of the highlight mark                   |\n| `--bloc-text-highlight-padding`          | `0` (`0 2px` when highlighted)       | Padding inside the highlight mark                     |\n| `--bloc-text-highlight-font-weight`      | `700`                                | Font weight applied to matched characters             |\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}