ngx-dsxlibrary 2.21.41 → 2.21.42

package/fesm2022/ngx-dsxlibrary-src-lib-services.mjs

@@ -1,4 +1,47 @@
+import * as i0 from '@angular/core';
+import { Injectable } from '@angular/core';
+import QRCode from 'qrcode';
+
+class QrService {
+    /**
+     * Genera un código QR como Blob usando qrcode
+     * Sin necesidad de llamadas HTTP externas, evita problemas de CORS
+     */
+    async getQrBlob(textToEncode) {
+        try {
+            // Genera el QR como Data URL
+            const dataUrl = await QRCode.toDataURL(textToEncode, {
+                errorCorrectionLevel: 'H',
+                type: 'image/png',
+                width: 300,
+                margin: 1,
+                color: {
+                    dark: '#000000',
+                    light: '#FFFFFF',
+                },
+            });
+            // Convierte Data URL a Blob
+            const response = await fetch(dataUrl);
+            return response.blob();
+        }
+        catch (err) {
+            console.error('Error generando QR:', err);
+            throw err;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { QrService };
 //# sourceMappingURL=ngx-dsxlibrary-src-lib-services.mjs.map

package/fesm2022/ngx-dsxlibrary-src-lib-services.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-dsxlibrary-src-lib-services.mjs","sources":["../../../projects/ngx-dsx/src/lib/services/ngx-dsxlibrary-src-lib-services.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
+{"version":3,"file":"ngx-dsxlibrary-src-lib-services.mjs","sources":["../../../projects/ngx-dsx/src/lib/services/src/qr.service.ts","../../../projects/ngx-dsx/src/lib/services/ngx-dsxlibrary-src-lib-services.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport QRCode from 'qrcode';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class QrService {\r\n  /**\r\n   * Genera un código QR como Blob usando qrcode\r\n   * Sin necesidad de llamadas HTTP externas, evita problemas de CORS\r\n   */\r\n  async getQrBlob(textToEncode: string): Promise<Blob> {\r\n    try {\r\n      // Genera el QR como Data URL\r\n      const dataUrl = await QRCode.toDataURL(textToEncode, {\r\n        errorCorrectionLevel: 'H',\r\n        type: 'image/png',\r\n        width: 300,\r\n        margin: 1,\r\n        color: {\r\n          dark: '#000000',\r\n          light: '#FFFFFF',\r\n        },\r\n      });\r\n\r\n      // Convierte Data URL a Blob\r\n      const response = await fetch(dataUrl);\r\n      return response.blob();\r\n    } catch (err) {\r\n      console.error('Error generando QR:', err);\r\n      throw err;\r\n    }\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAMa,SAAS,CAAA;AACpB;;;AAGG;IACH,MAAM,SAAS,CAAC,YAAoB,EAAA;AAClC,QAAA,IAAI;;YAEF,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,gBAAA,oBAAoB,EAAE,GAAG;AACzB,gBAAA,IAAI,EAAE,WAAW;AACjB,gBAAA,KAAK,EAAE,GAAG;AACV,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,SAAS;AACf,oBAAA,KAAK,EAAE,SAAS;AACjB,iBAAA;AACF,aAAA,CAAC;;AAGF,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC;AACrC,YAAA,OAAO,QAAQ,CAAC,IAAI,EAAE;QACxB;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,GAAG,CAAC;AACzC,YAAA,MAAM,GAAG;QACX;IACF;wGA1BW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAT,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,SAAS,cAFR,MAAM,EAAA,CAAA;;4FAEP,SAAS,EAAA,UAAA,EAAA,CAAA;kBAHrB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/ngx-dsxlibrary.mjs

@@ -40,6 +40,7 @@ import * as i4 from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
+import QRCode from 'qrcode';
 import * as i6 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import * as i7 from 'primeng/password';
@@ -4877,6 +4878,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     ], template: "<p-menubar>\r\n  <ng-template #start>\r\n    <p-image\r\n      class=\"ms-15\"\r\n      [src]=\"urlLogo()\"\r\n      alt=\"Image\"\r\n      [width]=\"logoWidth()\"\r\n    />\r\n    <span class=\"version-text\">{{ appVersion() }}</span>\r\n  </ng-template>\r\n  <ng-template #end>\r\n    <div>\r\n      <!-- Datos del usuario -->\r\n      <div class=\"navbar-user-info\">\r\n        <icon-dsx name=\"verified_user\" class=\"navbar-user-icon\"></icon-dsx>\r\n        <div class=\"navbar-user-text\">\r\n          <span class=\"navbar-user-name\">\r\n            {{ _authorizeService.getTokenValues.userName }}\r\n          </span>\r\n          <span class=\"navbar-user-role\">\r\n            {{ currentRole }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Componente de estado de red -->\r\n      <app-network-status></app-network-status>\r\n\r\n      <!-- Actualizaci\u00F3n de permisos -->\r\n      <p-button\r\n        class=\"mr-2\"\r\n        label=\"Permisos\"\r\n        variant=\"text\"\r\n        severity=\"info\"\r\n        (click)=\"actualizarSeguridadIT()\"\r\n      >\r\n        <span class=\"material-symbols-outlined mr-1\">local_police</span>\r\n      </p-button>\r\n\r\n      <label class=\"ui-switch\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [(ngModel)]=\"checked\"\r\n          (click)=\"onThemeChange(!checked ? true : false)\"\r\n        />\r\n        <div class=\"slider\">\r\n          <div class=\"circle\"></div>\r\n        </div>\r\n      </label>\r\n      <!-- <p-inputSwitch\r\n        [(ngModel)]=\"checked\"\r\n        (onChange)=\"onThemeChange($event.checked)\"\r\n      ></p-inputSwitch> -->\r\n    </div>\r\n  </ng-template>\r\n</p-menubar>\r\n", styles: [":host ::ng-deep .p-menubar{display:flex;align-items:center!important;padding:.25rem 1.5rem!important;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#ffffff1f!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px #0f172a14;margin-left:4rem;margin-right:2.5rem}:host ::ng-deep .p-menubar-end>*{display:flex;align-items:center}.version-text{font-size:1.3rem;font-family:Montserrat,sans-serif!important;margin-left:.5rem;font-weight:600;background-image:linear-gradient(to right,#38bdf8,#630cb4);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1);padding:.2rem 0}.navbar-user-info{display:flex;align-items:center;gap:.35rem;padding:0 .75rem;border-radius:999px;background-color:#00000005}.navbar-user-icon{font-size:1.1rem;color:#374151}.navbar-user-name{font-size:.8rem;font-weight:500;color:#374151;white-space:nowrap}.navbar-user-text{display:flex;flex-direction:column;line-height:1.1}.navbar-user-role{font-size:.7rem;color:#6b7280;white-space:nowrap}.ui-switch{--switch-bg: rgb(135, 150, 165);--switch-width: 48px;--switch-height: 20px;--circle-diameter: 32px;--circle-bg: rgb(232, 89, 15);--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2)}.ui-switch input{display:none}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);border-radius:999px;position:relative;cursor:pointer}.slider .circle{top:calc(var(--circle-inset) * -1);left:0;width:var(--circle-diameter);height:var(--circle-diameter);position:absolute;background:var(--circle-bg);border-radius:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+);background-repeat:no-repeat;background-position:center center;-webkit-transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,-webkit-transform .15s cubic-bezier(.4,0,.2,1) 0ms;-o-transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,transform .15s cubic-bezier(.4,0,.2,1) 0ms;transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,transform .15s cubic-bezier(.4,0,.2,1) 0ms,-webkit-transform .15s cubic-bezier(.4,0,.2,1) 0ms;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.slider .circle:before{content:\"\";position:absolute;width:100%;height:100%;background:#ffffffbf;border-radius:inherit;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;opacity:0}.ui-switch input:checked+.slider .circle{left:calc(100% - var(--circle-diameter));background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=);background-color:#003892}.ui-switch input:active+.slider .circle:before{-webkit-transition:0s;-o-transition:0s;transition:0s;opacity:1;width:0;height:0}\n"] }]
         }], propDecorators: { appVersion: [{ type: i0.Input, args: [{ isSignal: true, alias: "appVersion", required: false }] }], logoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoWidth", required: false }] }], urlLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlLogo", required: false }] }] } });
 
+class QrService {
+    /**
+     * Genera un código QR como Blob usando qrcode
+     * Sin necesidad de llamadas HTTP externas, evita problemas de CORS
+     */
+    async getQrBlob(textToEncode) {
+        try {
+            // Genera el QR como Data URL
+            const dataUrl = await QRCode.toDataURL(textToEncode, {
+                errorCorrectionLevel: 'H',
+                type: 'image/png',
+                width: 300,
+                margin: 1,
+                color: {
+                    dark: '#000000',
+                    light: '#FFFFFF',
+                },
+            });
+            // Convierte Data URL a Blob
+            const response = await fetch(dataUrl);
+            return response.blob();
+        }
+        catch (err) {
+            console.error('Error generando QR:', err);
+            throw err;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class QrGenerator {
+    qrService = inject(QrService);
+    sanitizer = inject(DomSanitizer);
+    // Inputs del padre
+    codigoQr = input(null, ...(ngDevMode ? [{ debugName: "codigoQr" }] : /* istanbul ignore next */ [])); // Contenido a codificar en el QR
+    labelQr = input('SCAN ME', ...(ngDevMode ? [{ debugName: "labelQr" }] : /* istanbul ignore next */ [])); // Texto del banner inferior
+    // Señales internas (copias escribibles de los inputs)
+    qrImageUrl = signal(null, ...(ngDevMode ? [{ debugName: "qrImageUrl" }] : /* istanbul ignore next */ []));
+    labelText = signal('SCAN ME', ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    textToEncode = signal('', ...(ngDevMode ? [{ debugName: "textToEncode" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            // Sincronizar labelQr → labelText
+            this.labelText.set(this.labelQr());
+            // Sincronizar codigoQr → textToEncode y generar el QR
+            if (this.codigoQr()) {
+                this.textToEncode.set(this.codigoQr());
+                setTimeout(() => this.generateQrCode(), 100);
+            }
+        });
+    }
+    currentRawBlob = null;
+    generateQrCode() {
+        if (!this.textToEncode())
+            return;
+        this.qrService
+            .getQrBlob(this.textToEncode())
+            .then((blob) => {
+            this.currentRawBlob = blob;
+            this.generateDesignImage();
+        })
+            .catch((err) => console.error('Error generando QR:', err));
+    }
+    onLabelChange(value) {
+        this.labelText.set(value);
+        // Regenera la imagen de preview con la nueva etiqueta
+        this.generateDesignImage();
+    }
+    generateDesignImage() {
+        if (!this.currentRawBlob)
+            return;
+        const qrImage = new Image();
+        const qrUrl = URL.createObjectURL(this.currentRawBlob);
+        qrImage.src = qrUrl;
+        qrImage.onload = () => {
+            const qrSize = qrImage.width || 300;
+            const padding = 40;
+            const labelAreaHeight = 70;
+            const canvas = document.createElement('canvas');
+            canvas.width = qrSize + padding * 2;
+            canvas.height = qrSize + labelAreaHeight + padding;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            // Fondo blanco
+            ctx.fillStyle = '#FFFFFF';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // DIBUJAR LAS ESQUINAS DE ENFOQUE
+            ctx.strokeStyle = '#000000';
+            ctx.lineWidth = 5;
+            const lineLength = 25;
+            const xMin = padding - 10;
+            const yMin = padding - 10;
+            const xMax = padding + qrSize + 10;
+            const yMax = padding + qrSize + 10;
+            // Esquinas
+            ctx.beginPath();
+            ctx.moveTo(xMin + lineLength, yMin);
+            ctx.lineTo(xMin, yMin);
+            ctx.lineTo(xMin, yMin + lineLength);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xMax - lineLength, yMin);
+            ctx.lineTo(xMax, yMin);
+            ctx.lineTo(xMax, yMin + lineLength);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xMin + lineLength, yMax);
+            ctx.lineTo(xMin, yMax);
+            ctx.lineTo(xMin, yMax - lineLength);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xMax - lineLength, yMax);
+            ctx.lineTo(xMax, yMax);
+            ctx.lineTo(xMax, yMax - lineLength);
+            ctx.stroke();
+            // Dibujar el código QR
+            ctx.drawImage(qrImage, padding, padding, qrSize, qrSize);
+            // Configuración del banner
+            const rectWidth = qrSize * 0.8;
+            const rectHeight = 45;
+            const rectX = padding + (qrSize - rectWidth) / 2;
+            const rectY = yMax + 20;
+            // Caja negra
+            ctx.fillStyle = '#000000';
+            ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
+            // Triángulo indicador
+            ctx.beginPath();
+            ctx.moveTo(canvas.width / 2, rectY - 8);
+            ctx.lineTo(canvas.width / 2 - 10, rectY);
+            ctx.lineTo(canvas.width / 2 + 10, rectY);
+            ctx.closePath();
+            ctx.fill();
+            // Texto
+            ctx.fillStyle = '#FFFFFF';
+            ctx.font = 'bold 18px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(this.labelText().toUpperCase(), canvas.width / 2, rectY + rectHeight / 2);
+            // Convertir a URL para mostrar en preview
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    const previewUrl = URL.createObjectURL(blob);
+                    this.qrImageUrl.set(this.sanitizer.bypassSecurityTrustUrl(previewUrl));
+                }
+            }, 'image/png');
+        };
+    }
+    downloadWithLabel() {
+        if (!this.currentRawBlob)
+            return;
+        const qrImage = new Image();
+        const qrUrl = URL.createObjectURL(this.currentRawBlob);
+        qrImage.src = qrUrl;
+        qrImage.onload = () => {
+            const qrSize = qrImage.width || 300;
+            const padding = 40; // Aumentamos el margen para las esquinas de enfoque
+            const labelAreaHeight = 70;
+            const canvas = document.createElement('canvas');
+            canvas.width = qrSize + padding * 2;
+            canvas.height = qrSize + labelAreaHeight + padding;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            // Fondo blanco
+            ctx.fillStyle = '#FFFFFF';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // DIBUJAR LAS ESQUINAS DE ENFOQUE (Estilo de tu imagen de referencia)
+            ctx.strokeStyle = '#000000'; // Color negro para las líneas de enfoque
+            ctx.lineWidth = 5; // Grosor de las esquinas
+            const lineLength = 25; // Largo de cada segmento de la esquina
+            // Área delimitadora donde se posicionará el QR
+            const xMin = padding - 10;
+            const yMin = padding - 10;
+            const xMax = padding + qrSize + 10;
+            const yMax = padding + qrSize + 10;
+            // Esquina Superior Izquierda
+            ctx.beginPath();
+            ctx.moveTo(xMin + lineLength, yMin);
+            ctx.lineTo(xMin, yMin);
+            ctx.lineTo(xMin, yMin + lineLength);
+            ctx.stroke();
+            // Esquina Superior Derecha
+            ctx.beginPath();
+            ctx.moveTo(xMax - lineLength, yMin);
+            ctx.lineTo(xMax, yMin);
+            ctx.lineTo(xMax, yMin + lineLength);
+            ctx.stroke();
+            // Esquina Inferior Izquierda
+            ctx.beginPath();
+            ctx.moveTo(xMin + lineLength, yMax);
+            ctx.lineTo(xMin, yMax);
+            ctx.lineTo(xMin, yMax + lineLength);
+            ctx.stroke();
+            // Esquina Inferior Derecha
+            ctx.beginPath();
+            ctx.moveTo(xMax - lineLength, yMax);
+            ctx.lineTo(xMax, yMax);
+            ctx.lineTo(xMax, yMax + lineLength);
+            ctx.stroke();
+            // Dibujar el código QR original obtenido desde qrcoder.co.uk
+            ctx.drawImage(qrImage, padding, padding, qrSize, qrSize);
+            // Configuración geométrica de la etiqueta negra inferior
+            const rectWidth = qrSize * 0.8;
+            const rectHeight = 45;
+            const rectX = padding + (qrSize - rectWidth) / 2;
+            const rectY = yMax + 20; // Separado adecuadamente de la línea de enfoque inferior
+            // Dibujar caja contenedora de texto
+            ctx.fillStyle = '#000000';
+            ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
+            // Pequeño triángulo indicador (Flecha superior de la caja)
+            ctx.beginPath();
+            ctx.moveTo(canvas.width / 2, rectY - 8);
+            ctx.lineTo(canvas.width / 2 - 10, rectY);
+            ctx.lineTo(canvas.width / 2 + 10, rectY);
+            ctx.closePath();
+            ctx.fill();
+            // Renderizar Texto de Referencia
+            ctx.fillStyle = '#FFFFFF';
+            ctx.font = 'bold 18px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(this.labelText().toUpperCase(), canvas.width / 2, rectY + rectHeight / 2);
+            // Conversión final y descarga en JPEG
+            canvas.toBlob((finalBlob) => {
+                if (finalBlob) {
+                    const downloadUrl = URL.createObjectURL(finalBlob);
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    const now = new Date();
+                    const timestamp = now.getFullYear().toString() +
+                        (now.getMonth() + 1).toString().padStart(2, '0') +
+                        now.getDate().toString().padStart(2, '0') +
+                        now.getHours().toString().padStart(2, '0') +
+                        now.getMinutes().toString().padStart(2, '0') +
+                        now.getSeconds().toString().padStart(2, '0');
+                    link.download = `qr-${timestamp}.jpg`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(downloadUrl);
+                    URL.revokeObjectURL(qrUrl);
+                }
+            }, 'image/jpeg', 0.95);
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrGenerator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: QrGenerator, isStandalone: true, selector: "dsx-qr-generator", inputs: { codigoQr: { classPropertyName: "codigoQr", publicName: "codigoQr", isSignal: true, isRequired: false, transformFunction: null }, labelQr: { classPropertyName: "labelQr", publicName: "labelQr", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"text-sm font-semibold text-gray-700 mb-2\">\r\n    Generador de C\u00F3digo QR\r\n  </h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p>\r\n\r\n  <!-- Preview del QR con dise\u00F1o -->\r\n  @if (qrImageUrl()) {\r\n  <div class=\"flex flex-col items-center gap-3\">\r\n    <!-- Imagen generada con esquinas y banner -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n    >\r\n      <img\r\n        [src]=\"qrImageUrl()\"\r\n        alt=\"C\u00F3digo QR\"\r\n        class=\"w-44 h-auto block rounded\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n descarga -->\r\n    <button\r\n      style=\"\r\n        background: #059669;\r\n        color: #fff;\r\n        font-size: 0.8rem;\r\n        padding: 0.4rem 1rem;\r\n        border-radius: 0.5rem;\r\n      \"\r\n      class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n      (click)=\"downloadWithLabel()\"\r\n    >\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n        />\r\n      </svg>\r\n      Descargar JPEG\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: QrGenerator, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-qr-generator', imports: [FormsModule], template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"text-sm font-semibold text-gray-700 mb-2\">\r\n    Generador de C\u00F3digo QR\r\n  </h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p>\r\n\r\n  <!-- Preview del QR con dise\u00F1o -->\r\n  @if (qrImageUrl()) {\r\n  <div class=\"flex flex-col items-center gap-3\">\r\n    <!-- Imagen generada con esquinas y banner -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n    >\r\n      <img\r\n        [src]=\"qrImageUrl()\"\r\n        alt=\"C\u00F3digo QR\"\r\n        class=\"w-44 h-auto block rounded\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n descarga -->\r\n    <button\r\n      style=\"\r\n        background: #059669;\r\n        color: #fff;\r\n        font-size: 0.8rem;\r\n        padding: 0.4rem 1rem;\r\n        border-radius: 0.5rem;\r\n      \"\r\n      class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n      (click)=\"downloadWithLabel()\"\r\n    >\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 24 24\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n        />\r\n      </svg>\r\n      Descargar JPEG\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { codigoQr: [{ type: i0.Input, args: [{ isSignal: true, alias: "codigoQr", required: false }] }], labelQr: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelQr", required: false }] }] } });
+
 class TokenPurposeLogin {
     fb = inject(FormBuilder);
     _authorizeService = inject(AuthorizeService);
@@ -7039,5 +7301,5 @@ function minimumAgeValidator(minimumAge, referenceDate) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, ArrowNavigationDirective, AuthorizeService, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxButtonComponent, DsxEnableDisable, DsxStatusToggle, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, GTQFormatter, HttpHelpersService, INITIAL_PARAMETERS, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, SWEET_ALERT_THEMES, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, templateVariablesValidator, validateEnvironmentConfig };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, ArrowNavigationDirective, AuthorizeService, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxButtonComponent, DsxEnableDisable, DsxStatusToggle, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, GTQFormatter, HttpHelpersService, INITIAL_PARAMETERS, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, QrService, SWEET_ALERT_THEMES, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map