{"_id":"@cicciosgamino/qr-code-element","_rev":"4-1def9b19c7d64601bc0d3c6f8374b179","name":"@cicciosgamino/qr-code-element","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.3":{"name":"@cicciosgamino/qr-code-element","version":"0.0.3","keywords":["QrCode","WebComponent","CustomElement","lit","project nayuki"],"author":{"name":"@cicciosgamino"},"license":"GPL-3.0","_id":"@cicciosgamino/qr-code-element@0.0.3","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/qr-code-element#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/qr-code-element/issues"},"dist":{"shasum":"ceb550615c27a67a48c177956025e42ab25644c8","tarball":"https://registry.npmjs.org/@cicciosgamino/qr-code-element/-/qr-code-element-0.0.3.tgz","fileCount":7,"integrity":"sha512-dDJg/gmE/AiTKdNNZ6EM3a4bbBawVTVkCRO0um8vGDQtBIabGvRccWD78fIY4Apbv0ObjGUx2m1orcKs8MW4SA==","signatures":[{"sig":"MEUCIHbuw0s+6qfRpjrOHwHy0fd6H3qpsgFxwBgcyfea0pQHAiEAtyDvrtJnkZlGBZEp2XpX3vnEanelvwvJUiKkoh8Ewjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0nTWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocbxAAowG597rMrV4HEEhNIPer+tzMjeGeFTrZbSbj5pw+lKMsb/JV\r\nzKS6c0/c76Xht4RsuMr+QyBTJGlIMv9Z1uo7itdn++t8174+B9BX/Otncswb\r\n5HZA1yWiWrfW5m3ncSjQG3HZUd+nDCwWSkJad314JWeUQKy0ITIWBhbQONH4\r\n9sVgxYUAnhOCvMb80k4rMHyvpejnmXZEKp5sYMuneNDXPW4rOJ+IU2cB+kcN\r\nD4P4cbToBmwfuDuizpTQDyXadQpNK3+k9G7HB/glAU8g3I1WhjJwwcC7w93z\r\nh/+aPgLTVv82KfbhNfetykyssYiRW4MUZzOciLRhDhY6AVsxmVo3N/hXozSO\r\ncTp4yovU4mksjNPGAT6PyTYyphl2Z1op48EXuijmyqiG/i0U8xMKGGQ1pzNU\r\nZLoQVm47oAOUPmCqY9SaHbayc0LWmDucF1F3m7G92CP41Hu93bWDCXJ7ap72\r\nsdEvNB1LZx11QWATFMWtbG0gUS5ungXJonY3NPyLKX8LNUgjr9cCvSjTzR8a\r\n3d6zzClFQNhF7+oqh5I702ibnveKOA7DbUoKFwDlPNrBI2C5l1KaDJ4CNEXU\r\nvY4XjzPSGkeYXvQqxN8bAmTKhwkRGgb2EtUJ7I0uhFUV6Pu2f7hUuVMMYvGJ\r\nNZz8Pz1qfZfHbjZo2P5y6PeqmzKAQ60duYI=\r\n=GcRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"qr-code-element.js","type":"module","module":"qr-code-element.js","gitHead":"e4b336facf860126625f2bb82a602ae1460bd313","scripts":{"dev":"web-dev-server --node-resolve --app-index examples/index.html --watch --open","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/qr-code-element.git","type":"git"},"_npmVersion":"9.3.1","description":"QR-Code WebComponent based on Project Nayuki Qr Code Library","directories":{"example":"examples"},"_nodeVersion":"19.4.0","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"@web/dev-server":"^0.1.35"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-element_0.0.3_1674736854399_0.07967646309301779","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@cicciosgamino/qr-code-element","version":"0.0.5","keywords":["QrCode","WebComponent","CustomElement","lit","project nayuki"],"author":{"name":"@cicciosgamino"},"license":"GPL-3.0","_id":"@cicciosgamino/qr-code-element@0.0.5","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/qr-code-element#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/qr-code-element/issues"},"dist":{"shasum":"5fb2cea71415480081bb22eff9ce7746c2f97899","tarball":"https://registry.npmjs.org/@cicciosgamino/qr-code-element/-/qr-code-element-0.0.5.tgz","fileCount":7,"integrity":"sha512-U5FNaf59k0XSiDyxolvdQbssm6FFY/qJD1uy7CDirL7GJsrExFhHithDwgpcI59pAczb7SwnX37MxVo1L7oZSQ==","signatures":[{"sig":"MEUCIQC8pNKmtT7flYJqdw7+t/pncYVIbZXLOwGb8k/tGJ0kdwIgcttg5b9qJo6kMckq+ThLqzQAPL0RTRQuG60lOHiXSrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0+gYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbwBAAhSqFr1fyZHDFaKYIlPZ7oYlLuUQCTJAsGmrIoFkQC+m885wN\r\nVNI02R920wuXCjsszu2auOu1Rvn0ghcHLkqRDtaQWVso8hWJkW6myUqT3si+\r\nghvnvJfh6rms7VdWlv8eMdx5G0Ep6vs+SEUvps+hVolwAFLSpMdUj/4xuGSf\r\npOzskdrU5x3Q8ZK+Cp8IEhLZrkCBTMRFlx/VvBMgDxoMJnZ8y3gE/0iEgj3q\r\n3r/tU/jSebGMtxwO84JJDnVyrlzOEHViaO62mBFCVsaIN/HC1Enlsft9veT3\r\np/DFor7wKnzsIuqF5VCrN5SJZpmH2OzJVOHPn0IN+vJ4BztMgZ5xPjJNCdVc\r\nvn5p261Cte2sOVA/0W5qG1d3oRVCrhYW/kZFHWBOZEPF1Z/3hQsyew8FLXwD\r\n1uO251k3gCKE1rtooOaWrIt01fW7Fqu7j8FwvkhZRf6w8w4ZLsY9K7dSUYq3\r\nI7Nig041Uc2DJftGRGieQgF0w27BwKtbSWWWHIhnSLHnkT0cYQzMVTAC6RJD\r\ngyFmxkd1WWOxoumLApbcjSg1dMINeLu8kV72OL+M/VzjTQwGqz6oi4p2IiDT\r\n0L0bobIA9PP14qF3xyI4ifSei72cSk3Fr0ZnNnm2vWYy+UT8P+TeJEwTp9hK\r\njmNIVOTgQLAN8IshjHGraak5lxCUT7o0f24=\r\n=I31t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"qr-code-element.js","type":"module","module":"qr-code-element.js","gitHead":"8d020246cbc287a2cf435d3921bec872c750c1d2","scripts":{"dev":"web-dev-server --node-resolve --app-index examples/index.html --watch --open","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/qr-code-element.git","type":"git"},"_npmVersion":"9.3.1","description":"QR-Code WebComponent based on Project Nayuki Qr Code Library","directories":{"example":"examples"},"_nodeVersion":"19.4.0","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"@web/dev-server":"^0.1.35"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-element_0.0.5_1674831895865_0.11508093948482534","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@cicciosgamino/qr-code-element","version":"0.1.0","keywords":["QrCode","WebComponent","CustomElement","lit","project nayuki"],"author":{"name":"@cicciosgamino"},"license":"GPL-3.0","_id":"@cicciosgamino/qr-code-element@0.1.0","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/qr-code-element#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/qr-code-element/issues"},"dist":{"shasum":"2d8beaed74ae5000933dbcaedb4cd7dd7b2d9d27","tarball":"https://registry.npmjs.org/@cicciosgamino/qr-code-element/-/qr-code-element-0.1.0.tgz","fileCount":7,"integrity":"sha512-M9UZx32p1vcE3vvsB5MX9OB2NtPg5YBl6SKtbeo+zw4qUf3PnQ6I5TsbnPhkT3ZZOKt8g/JlpOaDpcJgwsyJmA==","signatures":[{"sig":"MEUCIAy0kfQbX5YzKqh98b7e6dprNjN7A2rLc8+klbBwDfprAiEA1DVe+TNibygkj3mACTmVzzLdbnp0rXPcpqds/Ummbpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9gCFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbNw//QdB+PytJ0zP5RVDp1uMzKu/4NwML59YxDU8JvZCt1hngJ/e/\r\nqepepbni4AS5eb8EakYF2Xf9hqwVtFvW7QnDlFN/P0C0Lfobbg7RMu10IgLX\r\n3Y+K8SsbBmeYaDWOtEvsZZbTRXiBDCWYGoZAL4CQ6wkl/OMw6n9t1WOAQLtf\r\npV2WY5BQCcYpip1v0EldhEQIJSQglm9vqmGHGsOUmv56O20YT6nzofQA03+0\r\n1UfzIV9sykD3+M4dGi5OsJOZow9lIKlKpN/larkXPcGRODyuj9VJnU8krs7r\r\njkHZ6TA4E04rRtBSnUrWD5ZjMqafwcA+0cA0Mf98WhSBBp3dEC5Q8ZI2Swgx\r\ncRbxwybfPKKdW4SzrLX5hLa1hoDRV3wez4+CCLXu68x2YOOCYnA34nOqn/11\r\nOltD355zCHCSp1q/yN00e5ApL9wFwZZQyiTxXJz9DlvBc44Dm436Z/0TGOAl\r\nHEesMcrXoj9/KI5tZDaOwvzeGP+0yKceikKhMOLOz88y/5ob8n011473lMD7\r\nq0zNX5hmsGMacA8lkulBrfQxSnOfJp7uf/jNF6rdKaCmUHIpmI37XCZtamid\r\n3wVlI2tDMlSNgdBn54dFtQjgp1UDIPLT0sVuDMGSRs6XCe1gC7Jw/HpLna9W\r\nICnbFpNeZHb2jI2d+LdLMfLLU4T7Xz1YtqY=\r\n=VHVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"qr-code-element.js","type":"module","module":"qr-code-element.js","gitHead":"3a6670e3a82ee48865b940fd830b4dafcaa65580","scripts":{"dev":"web-dev-server --node-resolve --app-index examples/index.html --watch --open","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/qr-code-element.git","type":"git"},"_npmVersion":"9.5.0","description":"QR-Code WebComponent based on Project Nayuki Qr Code Library","directories":{"example":"examples"},"_nodeVersion":"19.6.1","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"@web/dev-server":"^0.1.35"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-element_0.1.0_1677066373006_0.3467547925628742","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@cicciosgamino/qr-code-element","version":"1.0.1","description":"QR-Code WebComponent based on Project Nayuki Qr Code Library","main":"qr-code-element.js","type":"module","module":"qr-code-element.js","scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview --port 3000 --host"},"repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/qr-code-element.git"},"keywords":["QrCode","WebComponent","CustomElement","lit","project nayuki"],"author":{"name":"@cicciosgamino"},"license":"GPL-3.0","bugs":{"url":"https://github.com/CICCIOSGAMINO/qr-code-element/issues"},"homepage":"https://github.com/CICCIOSGAMINO/qr-code-element#readme","dependencies":{"lit":"*"},"devDependencies":{"vite":"^7.1.10"},"directories":{"example":"examples"},"gitHead":"bb9d2cf27e416876e7b14aeb1b6bb08e9f07597f","_id":"@cicciosgamino/qr-code-element@1.0.1","_nodeVersion":"24.9.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-4n7VLS0dsIX2JJebYPyrATrCO+sPPWe6rvVhfZe+S+dQ24agflg1D9ank4qXpswqEEZZ1EqKBhZxQ6+FYn235w==","shasum":"cd777168d86dfe8ce3223d15f4a8040bdf81ff21","tarball":"https://registry.npmjs.org/@cicciosgamino/qr-code-element/-/qr-code-element-1.0.1.tgz","fileCount":10,"unpackedSize":152047,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE0cpk1Feu/IhKIFPdAPDwZ6v+Ti316JJKrAmIFefdIEAiEAmnMV/kEi2KcOEHj5NlF39QgrubMLefyXEsf8e9KsgkY="}]},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/qr-code-element_1.0.1_1760561203326_0.40870459472207865"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-26T12:40:54.299Z","modified":"2025-10-15T20:46:43.733Z","0.0.3":"2023-01-26T12:40:54.569Z","0.0.5":"2023-01-27T15:04:56.070Z","0.1.0":"2023-02-22T11:46:13.157Z","1.0.1":"2025-10-15T20:46:43.542Z"},"bugs":{"url":"https://github.com/CICCIOSGAMINO/qr-code-element/issues"},"author":{"name":"@cicciosgamino"},"license":"GPL-3.0","homepage":"https://github.com/CICCIOSGAMINO/qr-code-element#readme","keywords":["QrCode","WebComponent","CustomElement","lit","project nayuki"],"repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/qr-code-element.git"},"description":"QR-Code WebComponent based on Project Nayuki Qr Code Library","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"readme":"![GitHub issues](https://img.shields.io/github/issues/CICCIOSGAMINO/qr-code-element)\n[![npm version](https://badgen.net/npm/v/@cicciosgamino/qr-code-element)](https://www.npmjs.com/package/@cicciosgamino/qr-code-element)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/cicciosgamino/qr-code-element)\n\n# 🦓 \\\n\nv1.0.1 - 15 October 2025\n\nQR-Code WebComponent based on Project Nayuki Qr Code Library. Nayuki project aims to be the best, clearest library for generating QR Codes. Get more info at official page:\n\nhttps://www.nayuki.io/page/qr-code-generator-library\n\nNayuki Qr Code Library v1.8.0 - Javascript\n\n# How to get the right code\nTo insert the code directly in your html page you need to clone the repository and build the Lit files with vite, or if you are hurried you can copy the files present in the dist folder and paste them in your project.\n\n## Build the component\n\n1. Clone the repository\n```bash\ngit clone https://github.com/CICCIOSGAMINO/qr-code-element.git\ncd qr-code-element\n\n# install the dependencies\nnpm install\n\n# build the component\nnpm run build\n```\n\nNow you can find the files you need in the dist folder.\n\n# How to use the component\nThe \\ is a WebComponent that render a Qr Code in SVG (default) or Canvas format. The Qr Code is generated with the Nayuki Qr Code Library v1.8.0 - Javascript.\n\n\n**SVG**\nSVG is the default graphic format the Qr Code is build-up in the \\ . Define the size of the WebComponent with a CSS custom properties: \n\n```css\n/* size the qr code if svg */\nqr-code-element {\n --size: 7rem;\n}\n```\n\nKeep in mind that you can style the background and tile colors of the Qr Code with the attribute *bkColor* and *tileColor* as you can see in attributes table.\n\nWhen the QrCode is render in SVG format the *scale* attribute can be use to set a ratio between the Qr Code dimension and the *border*. \n\n**Canvas**\nSet the attribute *graphic-element* to canvas and the qr code will be render in a HTMLCanvasElement. The size of the canvas is managed mainly from the *scale* attribute, so try to change the scale attribute until you find the right size. When you have the *scale* you want to use you can adjust the pixel size of the qr code with the CSS applied to the \\ , do NOT use only the CSS to get a big size of the qr code, penalty loss in graphic definition.\n\n```html\n\n\n```\n\n```css\nqr-code-element {\n --size: 11rem;\n}\n```\n\n\n

\n examples •\n usage •\n api •\n accessibility •\n TODO •\n

\n\n## Examples\n\n![Qr-Code-Element](https://cicciosgamino.web.app/images/qr-code.png)\n\n```html\n\n\n```\n\n## 🚀 Usage\n\n1. Install package\n```bash\nnpm install --save @cicciosgamino/qr-code-element\n```\n\n2. Import\n```html\n\n\n```\n\n3. Place in your HTML\n```html\n\n\n```\n\n4. Use the component with LitElement\n```javascript\nimport * from '@cicciosgamino/qr-code-element'\n\nrender () {\n return html`\n \n \n `\n}\n```\n\n5. Set the url attribute with\n\n```javascript\n// plain html\ndocument.querySelector('qr-code-element')\n\t\t\t.setAttribute('text','@NEW TEXT >TO ENCODE!')\n\n// in lit element\nthis.renderRoot.querySelector('qr-code-element')\n\t\t\t.setAttribute('text','@HELLO >> New new World!')\n```\n\n## 🐝 API\n\n### 📒 Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------- | ------------- | ---------- | -------------------------------\n| text | String | `'@cicciosgamino'`| The Unicode Text string to Encode\n| graphic-element | String | `'svg'` | Render Qr Code in SVG or Canvas element [svg | canvas]\n| scale | Number | `10` | Scale of Qr - Number greather than 1\n| border | Number | `1` | Border of Qr - Number greather or equal to 0\n| bk-color | String | `#fff` | Background Color\n| tile-color | String | `#000` | Tile Color \n| error-correction | String | `'MEDIUM'` | Error Correction level - LOW | MEDIUM | QARTILE | HIGH \n\n### Methods\n\n| Name | Description\n| ------------ | -------------\n| `getStatistics() => {}` | Get Statistics about the Qr Code generated\n\n### Events\n\nNo Events\n\n### 🧁 CSS Custom Properties\n\n| Name | Default | Description\n| --------------- | ------- | --------------------------------\n| `--size` | `11rem` | SIZExSIZE when graphic-element=svg\n| `--icon-size` | `15% of --size` | SIZExSIZE of centered icon | slotted svg icon\n\n### 🤖 Write HTML and JavaScript\nImport the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as `