{"id":19070237,"url":"https://github.com/bree7e/ngx-spotlight","last_synced_at":"2026-05-18T00:34:08.594Z","repository":{"id":38550219,"uuid":"255147798","full_name":"bree7e/ngx-spotlight","owner":"bree7e","description":"An angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page","archived":false,"fork":false,"pushed_at":"2022-06-03T02:46:18.000Z","size":791,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-04T21:39:44.027Z","etag":null,"topics":["angular","angular2","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bree7e.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-12T18:44:10.000Z","updated_at":"2020-04-15T17:24:52.000Z","dependencies_parsed_at":"2022-08-25T07:01:12.397Z","dependency_job_id":null,"html_url":"https://github.com/bree7e/ngx-spotlight","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bree7e/ngx-spotlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bree7e%2Fngx-spotlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bree7e%2Fngx-spotlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bree7e%2Fngx-spotlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bree7e%2Fngx-spotlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bree7e","download_url":"https://codeload.github.com/bree7e/ngx-spotlight/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bree7e%2Fngx-spotlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33160507,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"ssl_error","status_checked_at":"2026-05-17T22:39:10.741Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","typescript"],"created_at":"2024-11-09T01:17:42.479Z","updated_at":"2026-05-18T00:34:08.570Z","avatar_url":"https://github.com/bree7e.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGX Spotlight\n\nAn angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page\n\n[Demo application](https://bree7e.github.io/ngx-spotlight/)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-spotlight ngx-window-token --save\n```\n\nand then import module:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\nimport { NgxSpotlightModule } from 'ngx-spotlight'; // \u003c===\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    NgxSpotlightModule, // \u003c===\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## Usage\n\nSimple case\n\n```html\n\u003cdiv ngxSpotlight [auto]=\"true\"\u003e\n  ...\n\u003c/div\u003e\n```\n\nAdvanced case\n\n```html\n\u003cdiv\n  ngxSpotlight=\"some-id\"\n  #sl=\"spotlight\"\n  [overlay]=\"false\"\n  [border]=\"true\"\n  [borderWidth]=\"8\"\n  [indent]=\"15\"\n  (spotlightClick)=\"console.warn($event)\"\n\u003e\n  \u003cbutton (click)=\"sl.isShown ? sl.hide() : sl.show()\"\u003eToggle\u003c/button\u003e\n\u003c/div\u003e\n```\n\nDirective can be shown using `SpotlightService`.\n\n```ts\nconstructor(private spotlightService: SpotlightService) {}\n\nthis.spotlightService.getById('some-id').show();\nthis.spotlightService.getById('some-id').hide();\n```\n\n\n### Inputs\n\n| Name         | Type    | Default                      | Description                                                   |\n| ------------ | ------- | ---------------------------- | ------------------------------------------------------------- |\n| ngxSpotlight | string  | 'spotlight*at*' + Date.now() | id                                                            |\n| border       | boolean | false                        | draw border around spotlight element                          |\n| borderWidth  | number  | 4                            | border width in 'px'                                          |\n| indent       | number  | 0                            | space around spotlight element                                |\n| overlay      | boolean | false                        | disable click on spotlight element, fire spotlightClick event |\n| auto         | boolean | false                        | highlight element after view init                             |\n\n### Outputs\n\nThere is a `spotlightClick` event that occurs when a user click on directive elements.\n\n```ts\ntype SpotlightElementName =\n  | 'container'\n  | 'backdrop-top'\n  | 'backdrop-bottom'\n  | 'backdrop-left'\n  | 'backdrop-right'\n  | 'overlay'\n  | 'border-top'\n  | 'border-bottom'\n  | 'border-left'\n  | 'border-right';\n\ninterface SpotlightClick {\n  piece: SpotlightElementName;\n  mouse: MouseEvent;\n}\n```\n\n## Customization\n\nVariables should be declared for a global scope (:root or the body selector).\n\n| CSS variable                             | Default value         | Description                         |\n| ---------------------------------------- | --------------------- | ----------------------------------- |\n| --color\\_\\_spotlight-backdrop_background | rgba(52, 74, 94, 0.8) | Color of the backdrop               |\n| --color\\_\\_spotlight-border              | #c9c9c9               | Border color of highlighted element |\n\n```css\nbody {\n  --color__spotlight-backdrop_background: black;\n  --color__spotlight-border: lightgreen;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbree7e%2Fngx-spotlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbree7e%2Fngx-spotlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbree7e%2Fngx-spotlight/lists"}