sapenlinea-components 0.6.67 → 0.6.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1247,6 +1247,7 @@ Zona de arrastrar y soltar (Drag & Drop) para la **recepción de imágenes** de
|
|
|
1247
1247
|
- `description: string = "Formatos admitidos..."` – Helper text inferior.
|
|
1248
1248
|
- `titleIcon: string = ""` – Renderiza una clase CSS particular de ícono sobre el título.
|
|
1249
1249
|
- `iconUpload: boolean = false` – Ajuste de la gráfica in-caja que induce a la subida de un archivo.
|
|
1250
|
+
- `imageUrl: string = ""` – Permite inyectar y visualizar nativamente una imagen preexistente obtenida desde una URL externa (ideal para editar la entidad de un bucket).
|
|
1250
1251
|
|
|
1251
1252
|
**Outputs:**
|
|
1252
1253
|
- `imageLoaded: EventEmitter<File | null>` – Entrega el archivo File procesado para subidas directas del usuario o `null` si lo borró.
|
|
@@ -5351,6 +5351,12 @@ class LoadImage {
|
|
|
5351
5351
|
recommendedSize = 'PNG · JPG · SVG · Recomendado: 300x100 px';
|
|
5352
5352
|
// Ícono del título modificable por el usuario
|
|
5353
5353
|
titleIcon = 'icon-upload';
|
|
5354
|
+
// URL de imagen por defecto (útil para mostrar imágenes traídas desde un bucket/backend)
|
|
5355
|
+
set imageUrl(url) {
|
|
5356
|
+
if (url) {
|
|
5357
|
+
this.imageSrc = url;
|
|
5358
|
+
}
|
|
5359
|
+
}
|
|
5354
5360
|
imageLoaded = new EventEmitter();
|
|
5355
5361
|
fileInput;
|
|
5356
5362
|
imageSrc = null;
|
|
@@ -5426,7 +5432,7 @@ class LoadImage {
|
|
|
5426
5432
|
this.zoomScale = 1;
|
|
5427
5433
|
}
|
|
5428
5434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">{{ title }} <span *ngIf=\"imageSrc\" class=\"badge-cargado\">CARGADO</span></h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n <div class=\"upload-state\" *ngIf=\"!imageSrc\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n\n <!-- Estado: Cargado (Preview) -->\n <div class=\"preview-state\" *ngIf=\"imageSrc\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n <div class=\"footer-text\" *ngIf=\"!imageSrc\">\n </div>\n <div class=\"footer-text-loaded\" *ngIf=\"imageSrc\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n <button class=\"btn-subir\" *ngIf=\"!imageSrc\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n<div class=\"lightbox-overlay\" *ngIf=\"isExpanded\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">✕</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n</div>\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
|
|
5435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">{{ title }} <span *ngIf=\"imageSrc\" class=\"badge-cargado\">CARGADO</span></h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n <div class=\"upload-state\" *ngIf=\"!imageSrc\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n\n <!-- Estado: Cargado (Preview) -->\n <div class=\"preview-state\" *ngIf=\"imageSrc\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n <div class=\"footer-text\" *ngIf=\"!imageSrc\">\n </div>\n <div class=\"footer-text-loaded\" *ngIf=\"imageSrc\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n <button class=\"btn-subir\" *ngIf=\"!imageSrc\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n<div class=\"lightbox-overlay\" *ngIf=\"isExpanded\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">✕</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n</div>\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
|
|
5430
5436
|
}
|
|
5431
5437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, decorators: [{
|
|
5432
5438
|
type: Component,
|
|
@@ -5439,6 +5445,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5439
5445
|
type: Input$1
|
|
5440
5446
|
}], titleIcon: [{
|
|
5441
5447
|
type: Input$1
|
|
5448
|
+
}], imageUrl: [{
|
|
5449
|
+
type: Input$1
|
|
5442
5450
|
}], imageLoaded: [{
|
|
5443
5451
|
type: Output
|
|
5444
5452
|
}], fileInput: [{
|