{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "qr-code", "title": "Qr Code", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/qr-code/qr-code.component.ts", "content": "import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n type OnChanges,\n type OnDestroy,\n Output,\n TemplateRef,\n ViewChild,\n booleanAttribute,\n effect,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore -- qrcode ships no types unless @types/qrcode (a devDependency) is installed; @ts-ignore stays valid either way\nimport QRCodeLib from 'qrcode'\nimport { cn } from '@/lib/utils'\nimport { UiRenderTemplateDirective } from '@/ui/popper/popper'\n\nexport type QRCodeType = 'canvas' | 'svg'\nexport type QRCodeStatus = 'active' | 'expired' | 'loading' | 'scanned'\nexport type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'\n\n/**\n * Angular port of UIPKGE QrCode (React `QrCode`). Generates the code with the `qrcode`\n * package (PNG data URL for `type=\"canvas\"`, inline SVG for `type=\"svg\"`) whenever the\n * value / size / colors / level / margin / status change, overlays an optional centre\n * icon, shows expired / scanned / loading overlays (expired offers Refresh when\n * `(refresh)` is bound, like React's `onRefresh`), and renders a Download link for active\n * canvas codes. `extra` (a TemplateRef, React's `extra` node) replaces the Download link.\n * Colors are hex because `qrcode` cannot resolve CSS variables.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-qr-code, [ui-qr-code]',\n standalone: true,\n imports: [UiRenderTemplateDirective],\n host: {\n '[attr.data-slot]': '\"qr-code\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.aria-busy]': 'status === \"loading\" ? true : null',\n '[class]': 'hostClass',\n },\n template: `\n \n @if (type === 'svg' && qrSvg()) {\n
\n } @else if (qrDataUrl()) {\n \n }\n\n @if (icon && status === 'active') {\n
\n \n \"\"\n
\n \n }\n\n @if (status !== 'active') {\n
\n @switch (status) {\n @case ('expired') {\n \n \n \n \n }\n @case ('scanned') {\n \n \n \n }\n @case ('loading') {\n \n \n \n }\n }\n {{ statusText }}\n @if (status === 'expired' && refresh.observed) {\n \n \n \n \n \n \n \n \n Refresh\n \n }\n
\n }\n \n\n @if (extra) {\n \n } @else if (type === 'canvas' && status === 'active' && qrDataUrl()) {\n \n Download\n \n }\n `,\n})\nexport class UiQRCodeComponent implements OnChanges, OnDestroy {\n @Input({ required: true }) value = ''\n @Input() type: QRCodeType = 'canvas'\n @Input() size = 160\n @Input() color = '#000000'\n @Input() bgColor = '#ffffff'\n @Input() icon?: string\n @Input() iconSize?: number | { width: number; height: number }\n @Input() errorLevel: QRCodeErrorLevel = 'M'\n @Input({ transform: booleanAttribute }) bordered = true\n @Input() status: QRCodeStatus = 'active'\n @Input() marginSize = 0\n @Input('class') className?: string\n /** Replaces the default Download link (React `extra`). */\n @Input() extra?: TemplateRef\n /** Fired by the expired overlay's Refresh button; the button only shows when this is bound. */\n @Output() refresh = new EventEmitter()\n\n @ViewChild('svgHost') set svgHost(ref: ElementRef | undefined) {\n this._svgHost.set(ref?.nativeElement)\n }\n\n /** Signals: generation resolves asynchronously, so zoneless apps need them to repaint. */\n readonly qrDataUrl = signal('')\n readonly qrSvg = signal('')\n private readonly _svgHost = signal(undefined)\n private run = 0\n\n constructor() {\n // Write the generated SVG markup directly (bypasses Angular's HTML sanitizer, which strips SVG).\n effect(() => {\n const host = this._svgHost()\n if (host) host.innerHTML = this.qrSvg()\n })\n }\n\n get iconDimensions(): { width: number; height: number } {\n if (typeof this.iconSize === 'number') return { width: this.iconSize, height: this.iconSize }\n return this.iconSize ?? { width: 40, height: 40 }\n }\n\n get statusText(): string {\n return this.status === 'expired' ? 'Expired' : this.status === 'scanned' ? 'Scanned' : 'Loading...'\n }\n\n get hostClass(): string {\n return cn(\n 'inline-flex flex-col items-center gap-2',\n this.bordered && 'bg-background rounded-lg border p-4',\n this.className,\n )\n }\n\n ngOnChanges(): void {\n void this.generate()\n }\n\n ngOnDestroy(): void {\n this.run++\n }\n\n private async generate(): Promise {\n const run = ++this.run\n if (!this.value || this.status === 'loading') return\n try {\n const options = {\n width: this.size,\n margin: this.marginSize,\n color: { dark: this.color, light: this.bgColor },\n errorCorrectionLevel: this.errorLevel,\n }\n if (this.type === 'svg') {\n const svg: string = await QRCodeLib.toString(this.value, { type: 'svg', ...options })\n if (run === this.run) this.qrSvg.set(svg)\n } else {\n const url: string = await QRCodeLib.toDataURL(this.value, options)\n if (run === this.run) this.qrDataUrl.set(url)\n }\n } catch (e) {\n console.error('QR Code generation failed:', e)\n }\n }\n\n download(): void {\n const link = document.createElement('a')\n link.download = `qrcode-${this.value.slice(0, 20)}.png`\n link.href = this.qrDataUrl()\n link.click()\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/qr-code/qr-code.component.ts" }, { "path": "packages/registry-angular/components/qr-code/index.ts", "content": "export { UiQRCodeComponent, type QRCodeType, type QRCodeStatus, type QRCodeErrorLevel } from './qr-code.component'\n", "type": "registry:ui", "target": "~/src/app/components/ui/qr-code/index.ts" } ], "dependencies": [ "qrcode" ], "devDependencies": [ "@types/qrcode" ], "registryDependencies": [ "https://uipkge.dev/r/angular/popper.json" ], "description": "QR code renderer — pass `value` and a size, get a canvas PNG or SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. Depends on the `qrcode` package.", "categories": [ "data-display" ] }