{"_id":"@code_with_sachin/ngx-style-qr","name":"@code_with_sachin/ngx-style-qr","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@code_with_sachin/ngx-style-qr","version":"0.1.0","description":"Styled QR codes for Angular, rendered as SSR-safe SVG. Zero runtime dependencies — the QR encoder is built in.","keywords":["angular","qr","qrcode","qr-code","svg","ssr","styled","gradient","logo","standalone","signals"],"homepage":"https://sachinsingh.me/packages/qr","license":"MIT","author":{"name":"Sachin Singh","url":"https://sachinsingh.me"},"repository":{"type":"git","url":"git+https://github.com/CodeWithSachin/kshatriya-portfolio.git","directory":"projects/ngx-style-qr"},"bugs":{"url":"https://github.com/CodeWithSachin/kshatriya-portfolio/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"@angular/common":"^22.0.0","@angular/core":"^22.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/code_with_sachin-ngx-style-qr.mjs","typings":"types/code_with_sachin-ngx-style-qr.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/code_with_sachin-ngx-style-qr.d.ts","default":"./fesm2022/code_with_sachin-ngx-style-qr.mjs"}},"type":"module","gitHead":"060ebca6612769b29f91d6995dd150e137a6186e","_id":"@code_with_sachin/ngx-style-qr@0.1.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-4IHVgEjIAn+ew0KXsCft4IbTwX/hh/+yLZ0kjdrFzGhbold/PC/+fxIUH0R4OvisEOAzYjM6jt3NWFLlo8dZNA==","shasum":"4e514918c45df2a9861fd2c9079f2f28b6990a3a","tarball":"https://registry.npmjs.org/@code_with_sachin/ngx-style-qr/-/ngx-style-qr-0.1.0.tgz","fileCount":5,"unpackedSize":133748,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDtGap1FlYl18FAh5IrJ0c3QgKFEhbN512cB98/prVyGQIhAPvje3uVbDLqpQ6NOj61O0zOFO3XDLcOrTgyKMknLuwJ"}]},"_npmUser":{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"},"directories":{},"maintainers":[{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-style-qr_0.1.0_1786290225888_0.09159171564256363"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T15:43:45.727Z","0.1.0":"2026-08-09T15:43:46.065Z","modified":"2026-08-09T15:43:46.252Z"},"maintainers":[{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"}],"description":"Styled QR codes for Angular, rendered as SSR-safe SVG. Zero runtime dependencies — the QR encoder is built in.","homepage":"https://sachinsingh.me/packages/qr","keywords":["angular","qr","qrcode","qr-code","svg","ssr","styled","gradient","logo","standalone","signals"],"repository":{"type":"git","url":"git+https://github.com/CodeWithSachin/kshatriya-portfolio.git","directory":"projects/ngx-style-qr"},"author":{"name":"Sachin Singh","url":"https://sachinsingh.me"},"bugs":{"url":"https://github.com/CodeWithSachin/kshatriya-portfolio/issues"},"license":"MIT","readme":"# @code_with_sachin/ngx-style-qr\n\nStyled QR codes for Angular, rendered as SVG. **No runtime dependencies** — the QR\nencoder is built in.\n\n**[Live demo & docs → https://sachinsingh.me/packages/qr](https://sachinsingh.me/packages/qr)**\n\n- **Server-side rendered.** Encoding and drawing are pure functions, so the symbol\n  is in the HTML before hydration. No canvas, no `afterNextRender`, no flash.\n- **Styled, not just coloured.** Module and eye shapes, gradients, a centre logo\n  with automatic module erasure.\n- **Verified scannable.** Every shape combination is rasterised and read back with\n  a real decoder in CI, at three resolutions.\n\n## Install\n\n```bash\nnpm i @code_with_sachin/ngx-style-qr\n```\n\nRequires Angular 22+. No other dependency — not even a peer.\n\n## Requirements\n\nPeer ranges are wider than this; the **Tested** column is the exact combination the\n[live demo](https://sachinsingh.me/packages/qr) runs, so you have a known-good set to fall back on.\n\n| Package         | Peer range | Tested  | Notes                                                 |\n| --------------- | ---------- | ------- | ----------------------------------------------------- |\n| `@angular/core` | `^22.0.0`  | 22.0.5  | Standalone APIs, signal inputs and `afterNextRender`. |\n| `typescript`    | `~6.0.0`   | 6.0.3   | Whatever your Angular version supports.               |\n| `node`          | `>=20`     | 24.15.0 | Build and SSR only.                                   |\n\n## Providers\n\n**Nothing to register.** This package exposes no provider function and reads no injection\ntoken — import the component where you use it and you are done. Your `app.config.ts` needs\nno change.\n\n## Using NgModules\n\nEverything here is standalone, but standalone components and directives are importable from\nan `@NgModule` — put them in the module's `imports`, **not** `declarations`. No\n`importProvidersFrom` is needed: `@NgModule.providers` is typed\n`Array<Provider | EnvironmentProviders>`, so the `provide*()` functions drop straight in.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { StyleQrComponent } from '@code_with_sachin/ngx-style-qr';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  // Standalone components and directives go in `imports`.\n  imports: [BrowserModule, StyleQrComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## Use\n\n```ts\nimport { Component } from '@angular/core';\nimport { StyleQrComponent } from '@code_with_sachin/ngx-style-qr';\n\n@Component({\n  selector: 'app-share',\n  imports: [StyleQrComponent],\n  template: `<ngx-style-qr data=\"https://sachinsingh.me\" />`,\n})\nexport class Share {}\n```\n\nEverything styled at once:\n\n```html\n<ngx-style-qr\n  #code\n  data=\"https://sachinsingh.me\"\n  ecLevel=\"H\"\n  moduleShape=\"smooth\"\n  eyeShape=\"rounded\"\n  [size]=\"320\"\n  [color]=\"{\n    type: 'linear',\n    rotate: 45,\n    stops: [{ offset: 0, color: '#c21b2e' }, { offset: 1, color: '#f4771f' }]\n  }\"\n  bgColor=\"#0a0a0a\"\n  eyeColor=\"#c9a24b\"\n  [logo]=\"{ src: logoDataUri, size: 0.22, padding: 1, bgColor: '#f7f2e7' }\"\n  label=\"Scan for my portfolio\"\n/>\n\n<button (click)=\"code.download('portfolio', 'png')\">Download</button>\n```\n\n## Inputs\n\n| Input                 | Type                                                      | Default         |\n| --------------------- | --------------------------------------------------------- | --------------- |\n| `data` **(required)** | `string`                                                  | —               |\n| `size`                | `number` — rendered px; the SVG scales losslessly         | `256`           |\n| `ecLevel`             | `'L' \\| 'M' \\| 'Q' \\| 'H'`                                | `'M'`           |\n| `margin`              | `number` — quiet zone in modules                          | `4`             |\n| `moduleShape`         | `'square' \\| 'dots' \\| 'rounded' \\| 'smooth'`             | `'square'`      |\n| `eyeShape`            | `'square' \\| 'rounded' \\| 'circle' \\| 'leaf'`             | `'square'`      |\n| `color`               | `string \\| QrGradient`                                    | `'#000000'`     |\n| `bgColor`             | `string \\| QrGradient \\| 'transparent'`                   | `'transparent'` |\n| `eyeColor`            | `string \\| QrGradient \\| null` — falls back to `color`    | `null`          |\n| `eyeInnerColor`       | `string \\| QrGradient \\| null` — falls back to `eyeColor` | `null`          |\n| `logo`                | `QrLogo \\| null`                                          | `null`          |\n| `label`               | `string` — `<title>`; falls back to `data`                | `''`            |\n\n`download(filename?, format?: 'svg' \\| 'png')` saves the rendered code. It is a\nno-op during server-side rendering.\n\n### Notes\n\n- **`moduleShape=\"smooth\"`** rounds a module corner only when both adjacent modules\n  are empty, so runs merge into continuous blobs.\n- **A logo destroys the modules it covers**, which comes straight out of the error\n  correction budget. Use `ecLevel=\"H\"`; the component warns in dev mode otherwise.\n- **`logo.src` should be a data URI.** A cross-origin URL taints the export canvas\n  and makes `download(..., 'png')` fail with a `SecurityError`.\n- **Gradient ids are derived from the gradient's content**, not a counter, so the\n  server and client renders agree and `url(#…)` survives hydration.\n- **`dots` draws circles slightly wider than one module.** Tangent circles cover only\n  π/4 of a cell, which drops the local dark ratio far enough that adaptive binarisers\n  start misreading whole blocks.\n\n## Without the component\n\nThe encoder and renderer are exported on their own — useful for painting into a\ncanvas, a terminal, or a print pipeline:\n\n```ts\nimport { encodeQr, buildSvgModel } from '@code_with_sachin/ngx-style-qr';\n\nconst qr = encodeQr('https://sachinsingh.me', 'H');\nqr.version; // 3\nqr.size; // 29\nqr.modules[0][0]; // true\n```\n\n`encodeQr` throws if the payload cannot fit version 40 at the requested level\n(~2953 bytes at `'L'`, ~1273 at `'H'`). Numeric, alphanumeric and UTF-8 byte modes\nare selected automatically; kanji mode is not implemented.\n\n## Develop\n\n```bash\nng build ngx-style-qr\nng test ngx-style-qr\n```\n\nTests round-trip every version 1–40 through a decoder and check all 160\nversion × EC-level capacity boundaries, then rasterise the component's real SVG\noutput and read it back for each shape.\n\n## Licence\n\nMIT © Sachin Singh\n","readmeFilename":"README.md","_rev":"1-b5a88b6756cb2982f0f16269a6e361a0"}