@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-qrcode.mjs

@@ -0,0 +1,564 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+
+/*
+ * Codificador QR propio de CaribeNG (ISO/IEC 18004), sin dependencias.
+ * Modos numérico, alfanumérico y byte (UTF-8), versiones 1–40, niveles de
+ * corrección L/M/Q/H y elección automática de la máscara con menor penalización.
+ */
+// --- Tablas del estándar, indexadas por [nivel][versión] (índice 0 sin uso) ---
+const EC_ORDER = ['L', 'M', 'Q', 'H'];
+/** Bits del nivel en la información de formato. */
+const EC_FORMAT_BITS = { L: 1, M: 0, Q: 3, H: 2 };
+const EC_CODEWORDS_PER_BLOCK = {
+    L: [0, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    M: [0, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+    Q: [0, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    H: [0, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+};
+const EC_BLOCKS = {
+    L: [0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+    M: [0, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+    Q: [0, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+    H: [0, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81],
+};
+const ALPHANUMERIC = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:';
+const MODE_INDICATOR = { numeric: 0b0001, alphanumeric: 0b0010, byte: 0b0100 };
+/** Bits del contador de caracteres para las versiones 1–9, 10–26 y 27–40. */
+const COUNT_BITS = {
+    numeric: [10, 12, 14],
+    alphanumeric: [9, 11, 13],
+    byte: [8, 16, 16],
+};
+// --- Aritmética en GF(256) con el polinomio x^8 + x^4 + x^3 + x^2 + 1 ---
+const GF_EXP = new Uint8Array(512);
+const GF_LOG = new Uint8Array(256);
+{
+    let x = 1;
+    for (let i = 0; i < 255; i++) {
+        GF_EXP[i] = x;
+        GF_LOG[x] = i;
+        x <<= 1;
+        if (x & 0x100)
+            x ^= 0x11d;
+    }
+    for (let i = 255; i < 512; i++)
+        GF_EXP[i] = GF_EXP[i - 255];
+}
+function gfMul(a, b) {
+    return a === 0 || b === 0 ? 0 : GF_EXP[GF_LOG[a] + GF_LOG[b]];
+}
+/** Coeficientes (sin el término principal) del generador Reed-Solomon de grado `degree`. */
+function rsGenerator(degree) {
+    let poly = [1];
+    for (let i = 0; i < degree; i++) {
+        const next = new Array(poly.length + 1).fill(0);
+        for (let j = 0; j < poly.length; j++) {
+            next[j] ^= poly[j];
+            next[j + 1] ^= gfMul(poly[j], GF_EXP[i]);
+        }
+        poly = next;
+    }
+    return poly.slice(1);
+}
+/** Codewords de corrección de `data` (resto de la división por el generador). */
+function cbQrReedSolomon(data, degree) {
+    const generator = rsGenerator(degree);
+    const remainder = new Array(degree).fill(0);
+    for (const byte of data) {
+        const factor = byte ^ remainder.shift();
+        remainder.push(0);
+        for (let i = 0; i < degree; i++)
+            remainder[i] ^= gfMul(generator[i], factor);
+    }
+    return remainder;
+}
+// --- Capacidad ---
+/** Módulos disponibles para datos y corrección (sin patrones de función ni formato). */
+function rawDataModules(version) {
+    let modules = (16 * version + 128) * version + 64;
+    if (version >= 2) {
+        const align = Math.floor(version / 7) + 2;
+        modules -= (25 * align - 10) * align - 55;
+        if (version >= 7)
+            modules -= 36;
+    }
+    return modules;
+}
+function dataCodewords(version, ec) {
+    return Math.floor(rawDataModules(version) / 8) - EC_CODEWORDS_PER_BLOCK[ec][version] * EC_BLOCKS[ec][version];
+}
+// --- Segmento de datos ---
+class BitBuffer {
+    constructor() {
+        this.bits = [];
+    }
+    push(value, length) {
+        for (let i = length - 1; i >= 0; i--)
+            this.bits.push((value >>> i) & 1);
+    }
+}
+function chooseMode(text) {
+    if (/^\d*$/.test(text))
+        return 'numeric';
+    if ([...text].every((c) => ALPHANUMERIC.includes(c)))
+        return 'alphanumeric';
+    return 'byte';
+}
+function countBits(mode, version) {
+    return COUNT_BITS[mode][version <= 9 ? 0 : version <= 26 ? 1 : 2];
+}
+/** Bits del contenido (sin modo ni contador) y número de caracteres a declarar. */
+function encodeContent(text, mode) {
+    const bits = new BitBuffer();
+    if (mode === 'numeric') {
+        for (let i = 0; i < text.length; i += 3) {
+            const group = text.slice(i, i + 3);
+            bits.push(Number(group), group.length * 3 + 1);
+        }
+        return { bits, count: text.length };
+    }
+    if (mode === 'alphanumeric') {
+        for (let i = 0; i < text.length; i += 2) {
+            const a = ALPHANUMERIC.indexOf(text[i]);
+            if (i + 1 < text.length)
+                bits.push(a * 45 + ALPHANUMERIC.indexOf(text[i + 1]), 11);
+            else
+                bits.push(a, 6);
+        }
+        return { bits, count: text.length };
+    }
+    const bytes = new TextEncoder().encode(text);
+    for (const b of bytes)
+        bits.push(b, 8);
+    return { bits, count: bytes.length };
+}
+// --- Matriz ---
+function alignmentPositions(version) {
+    if (version === 1)
+        return [];
+    const count = Math.floor(version / 7) + 2;
+    const size = version * 4 + 17;
+    const step = version === 32 ? 26 : Math.ceil((version * 4 + 4) / (count * 2 - 2)) * 2;
+    const positions = [6];
+    for (let i = 0, pos = size - 7; i < count - 1; i++, pos -= step)
+        positions.splice(1, 0, pos);
+    return positions;
+}
+/** Resto BCH: `value` desplazado `degree` bits módulo `generator`. */
+function bchRemainder(value, generator, degree) {
+    let rem = value << degree;
+    for (let bit = 31 - Math.clz32(rem); bit >= degree; bit--) {
+        if ((rem >>> bit) & 1)
+            rem ^= generator << (bit - degree);
+    }
+    return rem;
+}
+/** 15 bits de formato (nivel + máscara), ya con la máscara XOR del estándar. */
+function cbQrFormatBits(ec, mask) {
+    const data = (EC_FORMAT_BITS[ec] << 3) | mask;
+    return ((data << 10) | bchRemainder(data, 0x537, 10)) ^ 0x5412;
+}
+const MASKS = [
+    (x, y) => (x + y) % 2 === 0,
+    (_x, y) => y % 2 === 0,
+    (x) => x % 3 === 0,
+    (x, y) => (x + y) % 3 === 0,
+    (x, y) => (Math.floor(y / 2) + Math.floor(x / 3)) % 2 === 0,
+    (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+    (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+    (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+class Grid {
+    constructor(size) {
+        this.size = size;
+        this.dark = Array.from({ length: size }, () => new Array(size).fill(false));
+        this.reserved = Array.from({ length: size }, () => new Array(size).fill(false));
+    }
+    set(x, y, dark) {
+        this.dark[y][x] = dark;
+        this.reserved[y][x] = true;
+    }
+}
+function drawFunctionPatterns(grid, version) {
+    const size = grid.size;
+    // Patrones de posición (7×7) con su separador claro.
+    for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+        for (let dy = -4; dy <= 4; dy++) {
+            for (let dx = -4; dx <= 4; dx++) {
+                const x = cx + dx;
+                const y = cy + dy;
+                if (x < 0 || y < 0 || x >= size || y >= size)
+                    continue;
+                const ring = Math.max(Math.abs(dx), Math.abs(dy));
+                grid.set(x, y, ring !== 2 && ring !== 4);
+            }
+        }
+    }
+    // Patrones de alineación (5×5), salvo los que pisan los de posición.
+    const align = alignmentPositions(version);
+    for (const cy of align) {
+        for (const cx of align) {
+            if (grid.reserved[cy][cx])
+                continue;
+            for (let dy = -2; dy <= 2; dy++) {
+                for (let dx = -2; dx <= 2; dx++)
+                    grid.set(cx + dx, cy + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+            }
+        }
+    }
+    // Líneas de temporización.
+    for (let i = 8; i < size - 8; i++) {
+        grid.set(i, 6, i % 2 === 0);
+        grid.set(6, i, i % 2 === 0);
+    }
+    // Reserva del formato (se escribe después) y módulo oscuro fijo.
+    drawFormat(grid, 0);
+    // Información de versión (v7+).
+    if (version >= 7) {
+        const bits = (version << 12) | bchRemainder(version, 0x1f25, 12);
+        for (let i = 0; i < 18; i++) {
+            const dark = ((bits >>> i) & 1) === 1;
+            const a = size - 11 + (i % 3);
+            const b = Math.floor(i / 3);
+            grid.set(a, b, dark);
+            grid.set(b, a, dark);
+        }
+    }
+}
+function drawFormat(grid, bits) {
+    const size = grid.size;
+    const bit = (i) => ((bits >>> i) & 1) === 1;
+    // Copia junto al patrón superior izquierdo.
+    for (let i = 0; i <= 5; i++)
+        grid.set(8, i, bit(i));
+    grid.set(8, 7, bit(6));
+    grid.set(8, 8, bit(7));
+    grid.set(7, 8, bit(8));
+    for (let i = 9; i < 15; i++)
+        grid.set(14 - i, 8, bit(i));
+    // Copia repartida entre los otros dos patrones.
+    for (let i = 0; i < 8; i++)
+        grid.set(size - 1 - i, 8, bit(i));
+    for (let i = 8; i < 15; i++)
+        grid.set(8, size - 15 + i, bit(i));
+    grid.set(8, size - 8, true);
+}
+/** Coloca los codewords en zigzag de dos columnas, de derecha a izquierda, saltando la columna 6. */
+function drawCodewords(grid, codewords) {
+    const size = grid.size;
+    let index = 0;
+    const total = codewords.length * 8;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        const upward = ((right + 1) & 2) === 0;
+        for (let step = 0; step < size; step++) {
+            const y = upward ? size - 1 - step : step;
+            for (let k = 0; k < 2; k++) {
+                const x = right - k;
+                if (grid.reserved[y][x])
+                    continue;
+                if (index < total)
+                    grid.dark[y][x] = ((codewords[index >>> 3] >>> (7 - (index & 7))) & 1) === 1;
+                index++;
+            }
+        }
+    }
+}
+function applyMask(grid, mask) {
+    const test = MASKS[mask];
+    for (let y = 0; y < grid.size; y++) {
+        for (let x = 0; x < grid.size; x++) {
+            if (!grid.reserved[y][x] && test(x, y))
+                grid.dark[y][x] = !grid.dark[y][x];
+        }
+    }
+}
+/** Penalización del estándar (reglas N1–N4): menor es más legible. */
+function penalty(dark) {
+    const size = dark.length;
+    let score = 0;
+    const lines = [];
+    for (let i = 0; i < size; i++) {
+        lines.push([...dark[i]]);
+        lines.push(dark.map((row) => row[i]));
+    }
+    // N1: rachas de 5 o más módulos iguales. N3: patrones 1:1:3:1:1 con 4 claros a un lado.
+    const finderA = [true, false, true, true, true, false, true, false, false, false, false];
+    const finderB = [...finderA].reverse();
+    for (const line of lines) {
+        let run = 1;
+        for (let i = 1; i <= size; i++) {
+            if (i < size && line[i] === line[i - 1]) {
+                run++;
+            }
+            else {
+                if (run >= 5)
+                    score += run - 2;
+                run = 1;
+            }
+        }
+        const padded = [false, false, false, false, ...line, false, false, false, false];
+        for (let i = 0; i + 11 <= padded.length; i++) {
+            if (finderA.every((v, k) => padded[i + k] === v) || finderB.every((v, k) => padded[i + k] === v))
+                score += 40;
+        }
+    }
+    // N2: bloques 2×2 del mismo color.
+    for (let y = 0; y < size - 1; y++) {
+        for (let x = 0; x < size - 1; x++) {
+            const c = dark[y][x];
+            if (c === dark[y][x + 1] && c === dark[y + 1][x] && c === dark[y + 1][x + 1])
+                score += 3;
+        }
+    }
+    // N4: proporción de módulos oscuros lejos del 50 %.
+    const darkCount = dark.reduce((sum, row) => sum + row.filter(Boolean).length, 0);
+    const percent = (darkCount * 100) / (size * size);
+    score += Math.floor(Math.abs(percent - 50) / 5) * 10;
+    return score;
+}
+/**
+ * Codifica `text` como matriz QR. Elige el modo más compacto, la versión más
+ * pequeña que lo contiene y la máscara con menor penalización.
+ *
+ * @throws RangeError si el texto no cabe en la versión 40 con ese nivel.
+ */
+function cbQrEncode(text, options = {}) {
+    const ec = options.errorCorrection ?? 'M';
+    const mode = chooseMode(text);
+    const { bits: content, count } = encodeContent(text, mode);
+    let version = Math.max(1, Math.min(40, options.minVersion ?? 1));
+    for (;; version++) {
+        if (version > 40)
+            throw new RangeError(`cbQrEncode: el texto no cabe en un QR (nivel ${ec}).`);
+        const needed = 4 + countBits(mode, version) + content.bits.length;
+        if (count < 2 ** countBits(mode, version) && needed <= dataCodewords(version, ec) * 8)
+            break;
+    }
+    // Segmento + terminador + relleno hasta la capacidad.
+    const buffer = new BitBuffer();
+    buffer.push(MODE_INDICATOR[mode], 4);
+    buffer.push(count, countBits(mode, version));
+    buffer.bits.push(...content.bits);
+    const capacity = dataCodewords(version, ec) * 8;
+    buffer.push(0, Math.min(4, capacity - buffer.bits.length));
+    buffer.push(0, (8 - (buffer.bits.length % 8)) % 8);
+    const data = [];
+    for (let i = 0; i < buffer.bits.length; i += 8)
+        data.push(buffer.bits.slice(i, i + 8).reduce((acc, b) => (acc << 1) | b, 0));
+    for (let pad = 0xec; data.length < capacity / 8; pad ^= 0xec ^ 0x11)
+        data.push(pad);
+    // Bloques con su corrección, intercalados.
+    const blocks = EC_BLOCKS[ec][version];
+    const ecLength = EC_CODEWORDS_PER_BLOCK[ec][version];
+    const totalCodewords = Math.floor(rawDataModules(version) / 8);
+    const shortBlocks = blocks - (totalCodewords % blocks);
+    const shortLength = Math.floor(totalCodewords / blocks) - ecLength;
+    const dataBlocks = [];
+    const ecBlocks = [];
+    for (let b = 0, offset = 0; b < blocks; b++) {
+        const length = shortLength + (b < shortBlocks ? 0 : 1);
+        const block = data.slice(offset, offset + length);
+        offset += length;
+        dataBlocks.push(block);
+        ecBlocks.push(cbQrReedSolomon(block, ecLength));
+    }
+    const codewords = [];
+    for (let i = 0; i <= shortLength; i++) {
+        for (const block of dataBlocks)
+            if (i < block.length)
+                codewords.push(block[i]);
+    }
+    for (let i = 0; i < ecLength; i++) {
+        for (const block of ecBlocks)
+            codewords.push(block[i]);
+    }
+    // Matriz con la mejor máscara.
+    const size = version * 4 + 17;
+    let best = null;
+    for (let mask = 0; mask < 8; mask++) {
+        const grid = new Grid(size);
+        drawFunctionPatterns(grid, version);
+        drawCodewords(grid, codewords);
+        applyMask(grid, mask);
+        drawFormat(grid, cbQrFormatBits(ec, mask));
+        const score = penalty(grid.dark);
+        if (!best || score < best.score)
+            best = { mask, dark: grid.dark, score };
+    }
+    return { version, size, errorCorrection: ec, mask: best.mask, modules: best.dark };
+}
+/** Niveles ordenados de menor a mayor corrección. */
+const CB_QR_ERROR_CORRECTION_LEVELS = EC_ORDER;
+
+/**
+ * Código QR de CaribeNG, generado en SVG con un codificador propio (sin
+ * dependencias). Elige solo la versión y la máscara; admite color, fondo,
+ * margen y un logo centrado.
+ *
+ * @example
+ * ```html
+ * <cb-qrcode value="https://caribeng.dev" [size]="180" />
+ * <cb-qrcode [value]="pago" errorCorrection="H" image="assets/logo.svg" />
+ * ```
+ */
+class CbQrcode {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Texto o URL a codificar. */
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Lado en píxeles. */
+        this.size = input(160, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Corrección de errores. Usa `H` si pones un logo encima. */
+        this.errorCorrection = input('M', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorCorrection" }] : /* istanbul ignore next */ []));
+        /** Color de los módulos (cualquier color CSS). */
+        this.color = input('#000000', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Color de fondo. Mantén buen contraste con `color` para que se pueda leer. */
+        this.background = input('#ffffff', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+        /** Margen claro alrededor, en módulos (el estándar pide 4). */
+        this.margin = input(4, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+        /** Logo centrado (URL). Ocupa ~20 % del lado; combínalo con `errorCorrection="H"`. */
+        this.image = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible. Por defecto, "Código QR" del idioma activo. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Matriz codificada, o `null` si el valor está vacío o no cabe en un QR. */
+        this.matrix = computed(() => {
+            const value = this.value();
+            if (!value)
+                return null;
+            try {
+                return cbQrEncode(value, { errorCorrection: this.errorCorrection() });
+            }
+            catch {
+                return null;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matrix" }] : /* istanbul ignore next */ []));
+        this.extent = computed(() => (this.matrix()?.size ?? 0) + 2 * Math.max(0, this.margin()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "extent" }] : /* istanbul ignore next */ []));
+        this.viewBox = computed(() => `0 0 ${this.extent()} ${this.extent()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => this.ariaLabel() ?? this.t().qrCode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Módulos oscuros como un único path; une los consecutivos de cada fila. */
+        this.path = computed(() => {
+            const m = this.matrix();
+            if (!m)
+                return '';
+            const offset = Math.max(0, this.margin());
+            const parts = [];
+            m.modules.forEach((row, y) => {
+                for (let x = 0; x < m.size; x++) {
+                    if (!row[x])
+                        continue;
+                    const start = x;
+                    while (x + 1 < m.size && row[x + 1])
+                        x++;
+                    parts.push(`M${start + offset} ${y + offset}h${x - start + 1}v1h${-(x - start + 1)}z`);
+                }
+            });
+            return parts.join('');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+        /** Caja del logo (en módulos), centrada y alineada a la rejilla. */
+        this.logo = computed(() => {
+            const m = this.matrix();
+            if (!m || !this.image())
+                return null;
+            let box = Math.round(m.size * 0.22);
+            if ((m.size - box) % 2 !== 0)
+                box++;
+            return { box, pad: Math.max(0, this.margin()) + (m.size - box) / 2, inset: 0.5 };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+    }
+    /** Marcado SVG del QR, p. ej. para descargarlo (`new Blob([qr.toSvg()], { type: 'image/svg+xml' })`). */
+    toSvg() {
+        const size = this.extent();
+        if (!this.matrix())
+            return '';
+        const esc = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+        const logo = this.logo();
+        const logoMarkup = logo
+            ? `<rect x="${logo.pad}" y="${logo.pad}" width="${logo.box}" height="${logo.box}" fill="${esc(this.background())}" rx="1"/>` +
+                `<image href="${esc(this.image())}" x="${logo.pad + logo.inset}" y="${logo.pad + logo.inset}" width="${logo.box - 2 * logo.inset}" height="${logo.box - 2 * logo.inset}" preserveAspectRatio="xMidYMid meet"/>`
+            : '';
+        return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${this.size()}" height="${this.size()}" shape-rendering="crispEdges">` +
+            `<rect width="${size}" height="${size}" fill="${esc(this.background())}"/>` +
+            `<path d="${this.path()}" fill="${esc(this.color())}"/>` +
+            logoMarkup +
+            `</svg>`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbQrcode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbQrcode, isStandalone: true, selector: "cb-qrcode", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, errorCorrection: { classPropertyName: "errorCorrection", publicName: "errorCorrection", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()" }, classAttribute: "cb-qrcode" }, ngImport: i0, template: `
+    @if (matrix(); as m) {
+      <svg
+        class="cb-qrcode__svg"
+        xmlns="http://www.w3.org/2000/svg"
+        [attr.viewBox]="viewBox()"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        shape-rendering="crispEdges"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        <rect [attr.width]="extent()" [attr.height]="extent()" [attr.fill]="background()" />
+        <path [attr.d]="path()" [attr.fill]="color()" />
+        @if (logo(); as l) {
+          <rect [attr.x]="l.pad" [attr.y]="l.pad" [attr.width]="l.box" [attr.height]="l.box" [attr.fill]="background()" rx="1" />
+          <image [attr.href]="image()" [attr.x]="l.pad + l.inset" [attr.y]="l.pad + l.inset" [attr.width]="l.box - 2 * l.inset" [attr.height]="l.box - 2 * l.inset" preserveAspectRatio="xMidYMid meet" />
+        }
+      </svg>
+    }
+  `, isInline: true, styles: [":host{display:inline-block;flex:none;line-height:0}.cb-qrcode__svg{display:block;max-width:100%;height:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbQrcode, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-qrcode', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        class: 'cb-qrcode',
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                    }, template: `
+    @if (matrix(); as m) {
+      <svg
+        class="cb-qrcode__svg"
+        xmlns="http://www.w3.org/2000/svg"
+        [attr.viewBox]="viewBox()"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        shape-rendering="crispEdges"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        <rect [attr.width]="extent()" [attr.height]="extent()" [attr.fill]="background()" />
+        <path [attr.d]="path()" [attr.fill]="color()" />
+        @if (logo(); as l) {
+          <rect [attr.x]="l.pad" [attr.y]="l.pad" [attr.width]="l.box" [attr.height]="l.box" [attr.fill]="background()" rx="1" />
+          <image [attr.href]="image()" [attr.x]="l.pad + l.inset" [attr.y]="l.pad + l.inset" [attr.width]="l.box - 2 * l.inset" [attr.height]="l.box - 2 * l.inset" preserveAspectRatio="xMidYMid meet" />
+        }
+      </svg>
+    }
+  `, styles: [":host{display:inline-block;flex:none;line-height:0}.cb-qrcode__svg{display:block;max-width:100%;height:auto}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorCorrection: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorCorrection", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/qrcode
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_QR_ERROR_CORRECTION_LEVELS, CbQrcode, cbQrEncode, cbQrFormatBits, cbQrReedSolomon };

package/fesm2022/caribeng-ui-rating.mjs

@@ -117,7 +117,7 @@ class CbRating {
         this.changed.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbRating, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbRating, isStandalone: true, selector: "cb-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stars: { classPropertyName: "stars", publicName: "stars", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { attributes: { "role": "slider", "aria-valuemin": "0" }, listeners: { "keydown": "onKeydown($event)", "blur": "onBlur()", "mouseleave": "hover.set(0)" }, properties: { "class.cb-is-invalid": "fieldState.invalid()", "attr.aria-invalid": "fieldState.invalid() ? 'true' : null", "attr.aria-valuemax": "stars()", "attr.aria-valuenow": "value()", "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.tabindex": "isDisabled() || readonly() ? null : 0", "class.cb-is-disabled": "isDisabled()", "class.cb-is-readonly": "readonly()" }, classAttribute: "cb-rating" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbRating, isStandalone: true, selector: "cb-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stars: { classPropertyName: "stars", publicName: "stars", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { attributes: { "role": "slider", "aria-valuemin": "0" }, listeners: { "keydown": "onKeydown($event)", "blur": "onBlur()", "mouseleave": "hover.set(0)" }, properties: { "class.cb-is-invalid": "fieldState.invalid()", "attr.aria-invalid": "fieldState.invalid() ? 'true' : null", "attr.aria-valuemax": "stars()", "attr.aria-valuenow": "value()", "attr.aria-valuetext": "fmt(t().ratingOf, value(), stars())", "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.tabindex": "isDisabled() || readonly() ? null : 0", "class.cb-is-disabled": "isDisabled()", "class.cb-is-readonly": "readonly()" }, classAttribute: "cb-rating" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbRating),
@@ -125,19 +125,17 @@ class CbRating {
             },
         ], ngImport: i0, template: `
     @for (i of starList(); track i) {
-      <button
-        type="button"
+      <!-- Las estrellas son decorativas: el control accesible es el propio slider (sin controles anidados). -->
+      <span
         class="cb-rating__star"
         [class]="'cb-rating__star--' + size()"
         [class.cb-rating__star--on]="i <= display()"
-        [attr.aria-label]="fmt(t().ratingOf, i, stars())"
-        tabindex="-1"
-        [disabled]="isDisabled() || readonly()"
-        (click)="pick(i)"
+        aria-hidden="true"
+        (click)="isDisabled() || readonly() || pick(i)"
         (mouseenter)="hover.set(i)"
       >
-        <cb-icon name="star" [size]="iconPx()" aria-hidden="true" />
-      </button>
+        <cb-icon name="star" [size]="iconPx()" />
+      </span>
     }
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:var(--cb-space-1);border-radius:var(--cb-radius-sm);outline:none}:host:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-rating__star{display:inline-flex;padding:2px;border:none;background:transparent;color:var(--cb-color-surface-300);cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease),transform var(--cb-duration-fast) var(--cb-ease)}.cb-rating__star:hover{transform:scale(1.1)}.cb-rating__star--on{color:var(--cb-color-warning-400)}:host(.cb-is-readonly) .cb-rating__star,:host(.cb-is-disabled) .cb-rating__star{cursor:default}:host(.cb-is-readonly) .cb-rating__star:hover,:host(.cb-is-disabled) .cb-rating__star:hover{transform:none}:host(.cb-is-disabled){opacity:var(--cb-opacity-disabled, .55)}:host-context([data-theme=\"dark\"]) .cb-rating__star{color:var(--cb-color-surface-500)}:host-context([data-theme=\"dark\"]) .cb-rating__star--on{color:var(--cb-color-warning-400)}:host(.cb-is-invalid) .cb-rating__star:not(.cb-rating__star--on){color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -151,6 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         'aria-valuemin': '0',
                         '[attr.aria-valuemax]': 'stars()',
                         '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-valuetext]': 'fmt(t().ratingOf, value(), stars())',
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
                         '[attr.tabindex]': 'isDisabled() || readonly() ? null : 0',
@@ -161,19 +160,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(mouseleave)': 'hover.set(0)',
                     }, template: `
     @for (i of starList(); track i) {
-      <button
-        type="button"
+      <!-- Las estrellas son decorativas: el control accesible es el propio slider (sin controles anidados). -->
+      <span
         class="cb-rating__star"
         [class]="'cb-rating__star--' + size()"
         [class.cb-rating__star--on]="i <= display()"
-        [attr.aria-label]="fmt(t().ratingOf, i, stars())"
-        tabindex="-1"
-        [disabled]="isDisabled() || readonly()"
-        (click)="pick(i)"
+        aria-hidden="true"
+        (click)="isDisabled() || readonly() || pick(i)"
         (mouseenter)="hover.set(i)"
       >
-        <cb-icon name="star" [size]="iconPx()" aria-hidden="true" />
-      </button>
+        <cb-icon name="star" [size]="iconPx()" />
+      </span>
     }
   `, providers: [
                         {