@aquera/nile-elements 1.5.4 → 1.5.6

package/dist/src/nile-qr-code/nile-qr-code.js

@@ -0,0 +1,381 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './nile-qr-code.css.js';
+import { generateQR } from './nile-qr-code-utils.js';
+import NileElement from '../internal/nile-element.js';
+/**
+ * Nile QR Code component.
+ *
+ 
+ * @tag nile-qr-code
+ *
+ * @csspart base - The canvas element used to draw the QR code.
+ *
+ * @fires nile-qr-image-error - Emitted when the center image fails to load.
+ *
+ * @example
+ 
+ *
+ 
+ */
+let NileQrCode = class NileQrCode extends NileElement {
+    constructor() {
+        super(...arguments);
+        // -------------------------------------------------------------------------
+        // Properties
+        // -------------------------------------------------------------------------
+        /**
+         * The QR code's value — the text or URL to encode.
+         */
+        this.value = '';
+        /**
+         * The size of the QR code, in pixels.
+         */
+        this.size = 128;
+        /**
+         * The fill color. This can be any valid CSS color, but not a CSS custom property.
+         */
+        this.fill = 'black';
+        /**
+         * The background color. This can be any valid CSS color or `'transparent'`.
+         * It cannot be a CSS custom property.
+         */
+        this.background = 'white';
+        /**
+         * The edge radius of each module. Must be between 0 and 0.5.
+         * Use this to create a rounded effect.
+         */
+        this.radius = 0;
+        /**
+         * The level of error correction to use.
+         * - `'L'` — Low (~7%)
+         * - `'M'` — Medium (~15%)
+         * - `'Q'` — Quartile (~25%)
+         * - `'H'` — High (~30%)
+         *
+         * When using an image overlay, `'H'` is recommended so the QR remains scannable.
+         */
+        this.errorCorrection = 'H';
+        /**
+         * The label for assistive devices to announce.
+         * If unspecified, the `value` will be used instead.
+         */
+        this.label = '';
+        /**
+         * URL of an image to overlay in the center of the QR code (e.g. a logo).
+         * The image is drawn on top of the QR modules, so use `error-correction="H"`
+         * to ensure the code remains scannable.
+         */
+        this.image = '';
+        /**
+         * Size of the center image as a fraction of the overall QR code size
+         * (0.1 – 0.4). Defaults to 0.25 (25% of the QR code).
+         */
+        this.imageSize = 0.25;
+        /**
+         * Padding around the center image in pixels. Creates a clear area
+         * between the image and the surrounding QR modules.
+         */
+        this.imagePadding = 4;
+        /**
+         * Optional border radius for the center image in pixels.
+         * Set to a high value for a circular mask.
+         */
+        this.imageRadius = 4;
+        /**
+         * Apply a linear gradient to the QR modules instead of a flat color.
+         * Format: `"direction, color1, color2[, ...]"` where direction is an
+         * angle in degrees (e.g. `"135, #6366f1, #ec4899"`).
+         * When set, this overrides the `fill` property for module rendering.
+         */
+        this.fillGradient = '';
+        // -------------------------------------------------------------------------
+        // Internal state
+        // -------------------------------------------------------------------------
+        this._loadedImage = null;
+        this._imageLoadPromise = null;
+    }
+    /**
+     * The styles for QR Code.
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('image')) {
+            this._loadedImage = null;
+            this._imageLoadPromise = null;
+            if (this.image) {
+                this.loadImage(this.image);
+                return;
+            }
+        }
+        const relevantProps = [
+            'value', 'size', 'fill', 'background', 'radius', 'errorCorrection',
+            'imageSize', 'imagePadding', 'imageRadius', 'fillGradient',
+        ];
+        const needsRedraw = relevantProps.some(p => changedProperties.has(p));
+        if (needsRedraw) {
+            this.drawQrCode();
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Rendering
+    // -------------------------------------------------------------------------
+    render() {
+        const ariaLabel = this.label || this.value || 'QR Code';
+        return html `
+      <canvas
+        part="base"
+        role="img"
+        aria-label=${ariaLabel}
+        width=${this.size}
+        height=${this.size}
+      ></canvas>
+    `;
+    }
+    // -------------------------------------------------------------------------
+    // Public methods
+    // -------------------------------------------------------------------------
+    /**
+     * Downloads the QR code as a PNG image.
+     * @param filename - The name of the downloaded file (defaults to `'qr-code.png'`).
+     */
+    download(filename = 'qr-code.png') {
+        if (!this.canvas)
+            return;
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = this.canvas.toDataURL('image/png');
+        link.click();
+    }
+    /**
+     * Returns the QR code canvas content as a data URL.
+     * @param type - MIME type (defaults to `'image/png'`).
+     */
+    toDataURL(type = 'image/png') {
+        if (!this.canvas)
+            return '';
+        return this.canvas.toDataURL(type);
+    }
+    // -------------------------------------------------------------------------
+    // Private methods
+    // -------------------------------------------------------------------------
+    loadImage(src) {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        this._imageLoadPromise = new Promise((resolve) => {
+            img.onload = () => {
+                this._loadedImage = img;
+                this._imageLoadPromise = null;
+                this.drawQrCode();
+                resolve();
+            };
+            img.onerror = () => {
+                this._loadedImage = null;
+                this._imageLoadPromise = null;
+                this.emit('nile-qr-image-error', { src });
+                this.drawQrCode();
+                resolve();
+            };
+        });
+        img.src = src;
+    }
+    drawQrCode() {
+        if (!this.canvas)
+            return;
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const { size, fill, background, radius: rawRadius, errorCorrection, value } = this;
+        const clampedRadius = Math.max(0, Math.min(0.5, rawRadius));
+        const matrix = generateQR(value, errorCorrection);
+        const moduleCount = matrix.length;
+        const moduleSize = size / moduleCount;
+        ctx.clearRect(0, 0, size, size);
+        if (background && background !== 'transparent') {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, size, size);
+        }
+        const imgFraction = Math.max(0.1, Math.min(0.4, this.imageSize));
+        const imgPixelSize = this._loadedImage ? size * imgFraction : 0;
+        const padTotal = this._loadedImage ? this.imagePadding * 2 : 0;
+        const exclusionSize = imgPixelSize + padTotal;
+        const exclusionStart = (size - exclusionSize) / 2;
+        const exclusionEnd = exclusionStart + exclusionSize;
+        const useFill = this.resolveModuleFill(ctx, size);
+        ctx.fillStyle = useFill;
+        for (let row = 0; row < moduleCount; row++) {
+            for (let col = 0; col < moduleCount; col++) {
+                if (matrix[row][col] !== 1)
+                    continue;
+                const x = col * moduleSize;
+                const y = row * moduleSize;
+                if (this._loadedImage) {
+                    const modRight = x + moduleSize;
+                    const modBottom = y + moduleSize;
+                    if (x >= exclusionStart && modRight <= exclusionEnd &&
+                        y >= exclusionStart && modBottom <= exclusionEnd) {
+                        continue;
+                    }
+                }
+                if (clampedRadius > 0) {
+                    this.drawRoundedModule(ctx, x, y, moduleSize, moduleSize, clampedRadius * moduleSize);
+                }
+                else {
+                    ctx.fillRect(x, y, moduleSize, moduleSize);
+                }
+            }
+        }
+        if (this._loadedImage) {
+            this.drawCenterImage(ctx, size, imgPixelSize);
+        }
+    }
+    /**
+     * Returns the fill style for QR modules — either a gradient or the flat fill color.
+     */
+    resolveModuleFill(ctx, size) {
+        if (!this.fillGradient)
+            return this.fill;
+        const parts = this.fillGradient.split(',').map(s => s.trim());
+        if (parts.length < 3)
+            return this.fill;
+        const angleDeg = parseFloat(parts[0]);
+        if (Number.isNaN(angleDeg))
+            return this.fill;
+        const angleRad = (angleDeg * Math.PI) / 180;
+        const cx = size / 2;
+        const cy = size / 2;
+        const len = size / 2;
+        const x0 = cx - Math.cos(angleRad) * len;
+        const y0 = cy - Math.sin(angleRad) * len;
+        const x1 = cx + Math.cos(angleRad) * len;
+        const y1 = cy + Math.sin(angleRad) * len;
+        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+        const colors = parts.slice(1);
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(i / (colors.length - 1), colors[i]);
+        }
+        return gradient;
+    }
+    drawCenterImage(ctx, size, imgPixelSize) {
+        if (!this._loadedImage)
+            return;
+        const x = (size - imgPixelSize) / 2;
+        const y = (size - imgPixelSize) / 2;
+        const r = Math.min(this.imageRadius, imgPixelSize / 2);
+        const pad = this.imagePadding;
+        if (pad > 0 && this.background && this.background !== 'transparent') {
+            ctx.fillStyle = this.background;
+            const bx = x - pad;
+            const by = y - pad;
+            const bw = imgPixelSize + pad * 2;
+            const bh = imgPixelSize + pad * 2;
+            const br = r + pad * 0.5;
+            this.drawRoundedRect(ctx, bx, by, bw, bh, br);
+            ctx.fill();
+        }
+        ctx.save();
+        this.clipRoundedRect(ctx, x, y, imgPixelSize, imgPixelSize, r);
+        ctx.drawImage(this._loadedImage, x, y, imgPixelSize, imgPixelSize);
+        ctx.restore();
+    }
+    drawRoundedModule(ctx, x, y, w, h, r) {
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.arcTo(x + w, y, x + w, y + r, r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+        ctx.lineTo(x + r, y + h);
+        ctx.arcTo(x, y + h, x, y + h - r, r);
+        ctx.lineTo(x, y + r);
+        ctx.arcTo(x, y, x + r, y, r);
+        ctx.closePath();
+        ctx.fill();
+    }
+    drawRoundedRect(ctx, x, y, w, h, r) {
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.arcTo(x + w, y, x + w, y + r, r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+        ctx.lineTo(x + r, y + h);
+        ctx.arcTo(x, y + h, x, y + h - r, r);
+        ctx.lineTo(x, y + r);
+        ctx.arcTo(x, y, x + r, y, r);
+        ctx.closePath();
+    }
+    clipRoundedRect(ctx, x, y, w, h, r) {
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.arcTo(x + w, y, x + w, y + r, r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+        ctx.lineTo(x + r, y + h);
+        ctx.arcTo(x, y + h, x, y + h - r, r);
+        ctx.lineTo(x, y + r);
+        ctx.arcTo(x, y, x + r, y, r);
+        ctx.closePath();
+        ctx.clip();
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileQrCode.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileQrCode.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileQrCode.prototype, "fill", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileQrCode.prototype, "background", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileQrCode.prototype, "radius", void 0);
+__decorate([
+    property({ attribute: 'error-correction', reflect: true })
+], NileQrCode.prototype, "errorCorrection", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileQrCode.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileQrCode.prototype, "image", void 0);
+__decorate([
+    property({ attribute: 'image-size', type: Number, reflect: true })
+], NileQrCode.prototype, "imageSize", void 0);
+__decorate([
+    property({ attribute: 'image-padding', type: Number, reflect: true })
+], NileQrCode.prototype, "imagePadding", void 0);
+__decorate([
+    property({ attribute: 'image-radius', type: Number, reflect: true })
+], NileQrCode.prototype, "imageRadius", void 0);
+__decorate([
+    property({ attribute: 'fill-gradient', type: String, reflect: true })
+], NileQrCode.prototype, "fillGradient", void 0);
+__decorate([
+    query('canvas')
+], NileQrCode.prototype, "canvas", void 0);
+NileQrCode = __decorate([
+    customElement('nile-qr-code')
+], NileQrCode);
+export { NileQrCode };
+export default NileQrCode;
+//# sourceMappingURL=nile-qr-code.js.map

package/dist/src/nile-qr-code/nile-qr-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-qr-code.js","sourceRoot":"","sources":["../../../src/nile-qr-code/nile-qr-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styles } from './nile-qr-code.css.js';\nimport { generateQR, ErrorCorrectionLevel } from './nile-qr-code-utils.js';\nimport NileElement from '../internal/nile-element.js';\n\n/**\n * Nile QR Code component.\n *\n \n * @tag nile-qr-code\n *\n * @csspart base - The canvas element used to draw the QR code.\n *\n * @fires nile-qr-image-error - Emitted when the center image fails to load.\n *\n * @example\n \n *\n \n */\n@customElement('nile-qr-code')\nexport class NileQrCode extends NileElement {\n\n  /**\n   * The styles for QR Code.\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // -------------------------------------------------------------------------\n  // Properties\n  // -------------------------------------------------------------------------\n\n  /**\n   * The QR code's value — the text or URL to encode.\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * The size of the QR code, in pixels.\n   */\n  @property({ type: Number, reflect: true })\n  size = 128;\n\n  /**\n   * The fill color. This can be any valid CSS color, but not a CSS custom property.\n   */\n  @property({ type: String, reflect: true })\n  fill = 'black';\n\n  /**\n   * The background color. This can be any valid CSS color or `'transparent'`.\n   * It cannot be a CSS custom property.\n   */\n  @property({ type: String, reflect: true })\n  background = 'white';\n\n  /**\n   * The edge radius of each module. Must be between 0 and 0.5.\n   * Use this to create a rounded effect.\n   */\n  @property({ type: Number, reflect: true })\n  radius = 0;\n\n  /**\n   * The level of error correction to use.\n   * - `'L'` — Low (~7%)\n   * - `'M'` — Medium (~15%)\n   * - `'Q'` — Quartile (~25%)\n   * - `'H'` — High (~30%)\n   *\n   * When using an image overlay, `'H'` is recommended so the QR remains scannable.\n   */\n  @property({ attribute: 'error-correction', reflect: true })\n  errorCorrection: ErrorCorrectionLevel = 'H';\n\n  /**\n   * The label for assistive devices to announce.\n   * If unspecified, the `value` will be used instead.\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * URL of an image to overlay in the center of the QR code (e.g. a logo).\n   * The image is drawn on top of the QR modules, so use `error-correction=\"H\"`\n   * to ensure the code remains scannable.\n   */\n  @property({ type: String, reflect: true })\n  image = '';\n\n  /**\n   * Size of the center image as a fraction of the overall QR code size\n   * (0.1 – 0.4). Defaults to 0.25 (25% of the QR code).\n   */\n  @property({ attribute: 'image-size', type: Number, reflect: true })\n  imageSize = 0.25;\n\n  /**\n   * Padding around the center image in pixels. Creates a clear area\n   * between the image and the surrounding QR modules.\n   */\n  @property({ attribute: 'image-padding', type: Number, reflect: true })\n  imagePadding = 4;\n\n  /**\n   * Optional border radius for the center image in pixels.\n   * Set to a high value for a circular mask.\n   */\n  @property({ attribute: 'image-radius', type: Number, reflect: true })\n  imageRadius = 4;\n\n  /**\n   * Apply a linear gradient to the QR modules instead of a flat color.\n   * Format: `\"direction, color1, color2[, ...]\"` where direction is an\n   * angle in degrees (e.g. `\"135, #6366f1, #ec4899\"`).\n   * When set, this overrides the `fill` property for module rendering.\n   */\n  @property({ attribute: 'fill-gradient', type: String, reflect: true })\n  fillGradient = '';\n\n  // -------------------------------------------------------------------------\n  // Internal state\n  // -------------------------------------------------------------------------\n\n  private _loadedImage: HTMLImageElement | null = null;\n\n  private _imageLoadPromise: Promise<void> | null = null;\n\n  // -------------------------------------------------------------------------\n  // Refs\n  // -------------------------------------------------------------------------\n\n  @query('canvas')\n  private canvas!: HTMLCanvasElement;\n\n  // -------------------------------------------------------------------------\n  // Lifecycle\n  // -------------------------------------------------------------------------\n\n  protected override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('image')) {\n      this._loadedImage = null;\n      this._imageLoadPromise = null;\n      if (this.image) {\n        this.loadImage(this.image);\n        return;\n      }\n    }\n\n    const relevantProps: (keyof NileQrCode)[] = [\n      'value', 'size', 'fill', 'background', 'radius', 'errorCorrection',\n      'imageSize', 'imagePadding', 'imageRadius', 'fillGradient',\n    ];\n\n    const needsRedraw = relevantProps.some(p => changedProperties.has(p));\n    if (needsRedraw) {\n      this.drawQrCode();\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Rendering\n  // -------------------------------------------------------------------------\n\n  public render(): TemplateResult {\n    const ariaLabel = this.label || this.value || 'QR Code';\n\n    return html`\n      <canvas\n        part=\"base\"\n        role=\"img\"\n        aria-label=${ariaLabel}\n        width=${this.size}\n        height=${this.size}\n      ></canvas>\n    `;\n  }\n\n  // -------------------------------------------------------------------------\n  // Public methods\n  // -------------------------------------------------------------------------\n\n  /**\n   * Downloads the QR code as a PNG image.\n   * @param filename - The name of the downloaded file (defaults to `'qr-code.png'`).\n   */\n  public download(filename = 'qr-code.png'): void {\n    if (!this.canvas) return;\n    const link = document.createElement('a');\n    link.download = filename;\n    link.href = this.canvas.toDataURL('image/png');\n    link.click();\n  }\n\n  /**\n   * Returns the QR code canvas content as a data URL.\n   * @param type - MIME type (defaults to `'image/png'`).\n   */\n  public toDataURL(type = 'image/png'): string {\n    if (!this.canvas) return '';\n    return this.canvas.toDataURL(type);\n  }\n\n  // -------------------------------------------------------------------------\n  // Private methods\n  // -------------------------------------------------------------------------\n\n  private loadImage(src: string): void {\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n\n    this._imageLoadPromise = new Promise<void>((resolve) => {\n      img.onload = () => {\n        this._loadedImage = img;\n        this._imageLoadPromise = null;\n        this.drawQrCode();\n        resolve();\n      };\n      img.onerror = () => {\n        this._loadedImage = null;\n        this._imageLoadPromise = null;\n        this.emit('nile-qr-image-error', { src });\n        this.drawQrCode();\n        resolve();\n      };\n    });\n\n    img.src = src;\n  }\n\n  private drawQrCode(): void {\n    if (!this.canvas) return;\n\n    const ctx = this.canvas.getContext('2d');\n    if (!ctx) return;\n\n    const { size, fill, background, radius: rawRadius, errorCorrection, value } = this;\n\n    const clampedRadius = Math.max(0, Math.min(0.5, rawRadius));\n\n    const matrix = generateQR(value, errorCorrection);\n    const moduleCount = matrix.length;\n    const moduleSize = size / moduleCount;\n\n    ctx.clearRect(0, 0, size, size);\n\n    if (background && background !== 'transparent') {\n      ctx.fillStyle = background;\n      ctx.fillRect(0, 0, size, size);\n    }\n\n    const imgFraction = Math.max(0.1, Math.min(0.4, this.imageSize));\n    const imgPixelSize = this._loadedImage ? size * imgFraction : 0;\n    const padTotal = this._loadedImage ? this.imagePadding * 2 : 0;\n    const exclusionSize = imgPixelSize + padTotal;\n    const exclusionStart = (size - exclusionSize) / 2;\n    const exclusionEnd = exclusionStart + exclusionSize;\n\n    const useFill = this.resolveModuleFill(ctx, size);\n    ctx.fillStyle = useFill;\n\n    for (let row = 0; row < moduleCount; row++) {\n      for (let col = 0; col < moduleCount; col++) {\n        if (matrix[row][col] !== 1) continue;\n\n        const x = col * moduleSize;\n        const y = row * moduleSize;\n\n        if (this._loadedImage) {\n          const modRight = x + moduleSize;\n          const modBottom = y + moduleSize;\n          if (x >= exclusionStart && modRight <= exclusionEnd &&\n              y >= exclusionStart && modBottom <= exclusionEnd) {\n            continue;\n          }\n        }\n\n        if (clampedRadius > 0) {\n          this.drawRoundedModule(ctx, x, y, moduleSize, moduleSize, clampedRadius * moduleSize);\n        } else {\n          ctx.fillRect(x, y, moduleSize, moduleSize);\n        }\n      }\n    }\n\n    if (this._loadedImage) {\n      this.drawCenterImage(ctx, size, imgPixelSize);\n    }\n  }\n\n  /**\n   * Returns the fill style for QR modules — either a gradient or the flat fill color.\n   */\n  private resolveModuleFill(ctx: CanvasRenderingContext2D, size: number): string | CanvasGradient {\n    if (!this.fillGradient) return this.fill;\n\n    const parts = this.fillGradient.split(',').map(s => s.trim());\n    if (parts.length < 3) return this.fill;\n\n    const angleDeg = parseFloat(parts[0]);\n    if (Number.isNaN(angleDeg)) return this.fill;\n\n    const angleRad = (angleDeg * Math.PI) / 180;\n    const cx = size / 2;\n    const cy = size / 2;\n    const len = size / 2;\n    const x0 = cx - Math.cos(angleRad) * len;\n    const y0 = cy - Math.sin(angleRad) * len;\n    const x1 = cx + Math.cos(angleRad) * len;\n    const y1 = cy + Math.sin(angleRad) * len;\n\n    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);\n    const colors = parts.slice(1);\n    for (let i = 0; i < colors.length; i++) {\n      gradient.addColorStop(i / (colors.length - 1), colors[i]);\n    }\n    return gradient;\n  }\n\n  private drawCenterImage(ctx: CanvasRenderingContext2D, size: number, imgPixelSize: number): void {\n    if (!this._loadedImage) return;\n\n    const x = (size - imgPixelSize) / 2;\n    const y = (size - imgPixelSize) / 2;\n    const r = Math.min(this.imageRadius, imgPixelSize / 2);\n\n    const pad = this.imagePadding;\n    if (pad > 0 && this.background && this.background !== 'transparent') {\n      ctx.fillStyle = this.background;\n      const bx = x - pad;\n      const by = y - pad;\n      const bw = imgPixelSize + pad * 2;\n      const bh = imgPixelSize + pad * 2;\n      const br = r + pad * 0.5;\n      this.drawRoundedRect(ctx, bx, by, bw, bh, br);\n      ctx.fill();\n    }\n\n    ctx.save();\n    this.clipRoundedRect(ctx, x, y, imgPixelSize, imgPixelSize, r);\n    ctx.drawImage(this._loadedImage, x, y, imgPixelSize, imgPixelSize);\n    ctx.restore();\n  }\n\n  private drawRoundedModule(\n    ctx: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    w: number,\n    h: number,\n    r: number\n  ): void {\n    ctx.beginPath();\n    ctx.moveTo(x + r, y);\n    ctx.lineTo(x + w - r, y);\n    ctx.arcTo(x + w, y, x + w, y + r, r);\n    ctx.lineTo(x + w, y + h - r);\n    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);\n    ctx.lineTo(x + r, y + h);\n    ctx.arcTo(x, y + h, x, y + h - r, r);\n    ctx.lineTo(x, y + r);\n    ctx.arcTo(x, y, x + r, y, r);\n    ctx.closePath();\n    ctx.fill();\n  }\n\n  private drawRoundedRect(\n    ctx: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    w: number,\n    h: number,\n    r: number\n  ): void {\n    ctx.beginPath();\n    ctx.moveTo(x + r, y);\n    ctx.lineTo(x + w - r, y);\n    ctx.arcTo(x + w, y, x + w, y + r, r);\n    ctx.lineTo(x + w, y + h - r);\n    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);\n    ctx.lineTo(x + r, y + h);\n    ctx.arcTo(x, y + h, x, y + h - r, r);\n    ctx.lineTo(x, y + r);\n    ctx.arcTo(x, y, x + r, y, r);\n    ctx.closePath();\n  }\n\n  private clipRoundedRect(\n    ctx: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    w: number,\n    h: number,\n    r: number\n  ): void {\n    ctx.beginPath();\n    ctx.moveTo(x + r, y);\n    ctx.lineTo(x + w - r, y);\n    ctx.arcTo(x + w, y, x + w, y + r, r);\n    ctx.lineTo(x + w, y + h - r);\n    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);\n    ctx.lineTo(x + r, y + h);\n    ctx.arcTo(x, y + h, x, y + h - r, r);\n    ctx.lineTo(x, y + r);\n    ctx.arcTo(x, y, x + r, y, r);\n    ctx.closePath();\n    ctx.clip();\n  }\n}\n\nexport default NileQrCode;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-qr-code': NileQrCode;\n  }\n}\n"]}

package/dist/src/nile-qr-code/nile-qr-code.test.d.ts

@@ -0,0 +1 @@
+import './nile-qr-code';