valtech-components 2.0.763 → 2.0.765

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.
Files changed (10) hide show
  1. package/esm2022/lib/components/atoms/container/container.component.mjs +2 -2
  2. package/esm2022/lib/components/organisms/avatar-upload/avatar-upload.component.mjs +15 -62
  3. package/esm2022/lib/services/firebase/storage.service.mjs +17 -5
  4. package/esm2022/lib/version.mjs +2 -2
  5. package/fesm2022/valtech-components.mjs +31 -66
  6. package/fesm2022/valtech-components.mjs.map +1 -1
  7. package/lib/components/atoms/rights-footer/rights-footer.component.d.ts +1 -1
  8. package/lib/components/templates/page-wrapper/page-wrapper.component.d.ts +2 -2
  9. package/lib/version.d.ts +1 -1
  10. package/package.json +1 -1
package/fesm2022/valtech-components.mjs CHANGED
@@ -52,7 +52,7 @@ import 'prismjs/components/prism-json';
52
52
  * Current version of valtech-components.
53
53
  * This is automatically updated during the publish process.
54
54
  */
55
- const VERSION = '2.0.763';
55
+ const VERSION = '2.0.765';
56
56
 
57
57
  /**
58
58
  * Servicio para gestionar presets de componentes.
@@ -574,11 +574,11 @@ class ContainerComponent {
574
574
  return this.align();
575
575
  }
576
576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
577
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ContainerComponent, isStandalone: true, selector: "val-container", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "this.sizeAttr", "attr.data-padding": "this.paddingAttr", "attr.data-align": "this.alignAttr" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:12px;padding-right:12px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }); }
577
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ContainerComponent, isStandalone: true, selector: "val-container", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "this.sizeAttr", "attr.data-padding": "this.paddingAttr", "attr.data-align": "this.alignAttr" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:8px;padding-right:8px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }); }
578
578
  }
579
579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContainerComponent, decorators: [{
580
580
  type: Component,
581
- args: [{ selector: 'val-container', standalone: true, template: `<ng-content></ng-content>`, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:12px;padding-right:12px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }]
581
+ args: [{ selector: 'val-container', standalone: true, template: `<ng-content></ng-content>`, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:8px;padding-right:8px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }]
582
582
  }], propDecorators: { sizeAttr: [{
583
583
  type: HostBinding,
584
584
  args: ['attr.data-size']
@@ -21321,7 +21321,7 @@ class StorageService {
21321
21321
  percentage: Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100),
21322
21322
  state: this.mapTaskState(snapshot.state),
21323
21323
  });
21324
- }, (error) => {
21324
+ }, error => {
21325
21325
  progress$.next({
21326
21326
  bytesTransferred: 0,
21327
21327
  totalBytes: file.size,
@@ -21356,6 +21356,7 @@ class StorageService {
21356
21356
  */
21357
21357
  async uploadAndGetUrl(path, file, metadata) {
21358
21358
  const prefixedPath = this.prefixStoragePath(path, metadata?.skipPrefix);
21359
+ console.log('[Storage] uploadAndGetUrl start:', { path: prefixedPath, size: file.size });
21359
21360
  return new Promise((resolve, reject) => {
21360
21361
  this.upload(path, file, metadata).subscribe({
21361
21362
  complete: async () => {
@@ -21363,6 +21364,10 @@ class StorageService {
21363
21364
  const storageRef = ref(this.storage, prefixedPath);
21364
21365
  const downloadUrl = await getDownloadURL(storageRef);
21365
21366
  const storedMetadata = await getMetadata(storageRef);
21367
+ console.log('[Storage] upload OK:', {
21368
+ path: prefixedPath,
21369
+ url: downloadUrl.slice(0, 60) + '…',
21370
+ });
21366
21371
  resolve({
21367
21372
  downloadUrl,
21368
21373
  fullPath: storedMetadata.fullPath,
@@ -21373,10 +21378,17 @@ class StorageService {
21373
21378
  });
21374
21379
  }
21375
21380
  catch (error) {
21381
+ console.error('[Storage] getDownloadURL/metadata failed:', {
21382
+ path: prefixedPath,
21383
+ error,
21384
+ });
21376
21385
  reject(this.getErrorMessage(error));
21377
21386
  }
21378
21387
  },
21379
- error: (error) => reject(error),
21388
+ error: error => {
21389
+ console.error('[Storage] upload failed:', { path: prefixedPath, error });
21390
+ reject(error);
21391
+ },
21380
21392
  });
21381
21393
  });
21382
21394
  }
@@ -21501,7 +21513,7 @@ class StorageService {
21501
21513
  * ```
21502
21514
  */
21503
21515
  async deleteMultiple(paths) {
21504
- await Promise.all(paths.map((path) => this.delete(path)));
21516
+ await Promise.all(paths.map(path => this.delete(path)));
21505
21517
  }
21506
21518
  // ===========================================================================
21507
21519
  // LIST
@@ -21524,7 +21536,7 @@ class StorageService {
21524
21536
  const storageRef = ref(this.storage, prefixedPath);
21525
21537
  const result = await listAll(storageRef);
21526
21538
  return {
21527
- items: result.items.map((item) => item.fullPath),
21539
+ items: result.items.map(item => item.fullPath),
21528
21540
  nextPageToken: undefined, // listAll no soporta paginación
21529
21541
  };
21530
21542
  }
@@ -33573,6 +33585,7 @@ class AvatarUploadComponent {
33573
33585
  this.uploaded.emit(result);
33574
33586
  }
33575
33587
  catch (err) {
33588
+ console.error('[AvatarUpload] processAndUpload failed:', err);
33576
33589
  // Revert preview on error
33577
33590
  this.previewUrl.set(null);
33578
33591
  // Determine error message based on error type
@@ -33588,9 +33601,7 @@ class AvatarUploadComponent {
33588
33601
  }
33589
33602
  }
33590
33603
  else {
33591
- message =
33592
- this.i18n.t('uploadError', this.config().i18nNamespace) ||
33593
- 'Error al subir la imagen';
33604
+ message = this.i18n.t('uploadError', this.config().i18nNamespace) || 'Error al subir la imagen';
33594
33605
  }
33595
33606
  this.emitError('uploadFailed', message, err);
33596
33607
  }
@@ -33604,37 +33615,20 @@ class AvatarUploadComponent {
33604
33615
  }
33605
33616
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
33606
33617
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarUploadComponent, isStandalone: true, selector: "val-avatar-upload", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploaded: "uploaded", error: "error", uploadStart: "uploadStart" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
33607
- <div
33608
- class="avatar-upload"
33609
- [style.--avatar-size.px]="config().size"
33610
- [class.avatar-upload--loading]="loading()"
33611
- >
33618
+ <div class="avatar-upload" [style.--avatar-size.px]="config().size" [class.avatar-upload--loading]="loading()">
33612
33619
  <div class="avatar-container">
33613
33620
  <!-- Avatar Image or Initials -->
33614
33621
  @if (displayUrl()) {
33615
- <img
33616
- class="avatar-image"
33617
- [src]="displayUrl()"
33618
- alt="Avatar"
33619
- (error)="onImageError()"
33620
- />
33622
+ <img class="avatar-image" [src]="displayUrl()" alt="Avatar" (error)="onImageError()" />
33621
33623
  } @else {
33622
- <div
33623
- class="avatar-initials"
33624
- [style.background-color]="config().backgroundColor"
33625
- >
33624
+ <div class="avatar-initials" [style.background-color]="config().backgroundColor">
33626
33625
  {{ config().initials || '?' }}
33627
33626
  </div>
33628
33627
  }
33629
33628
 
33630
33629
  <!-- Edit Button -->
33631
33630
  @if (config().editable && !loading()) {
33632
- <button
33633
- class="edit-button"
33634
- type="button"
33635
- (click)="openFilePicker()"
33636
- [attr.aria-label]="editButtonLabel()"
33637
- >
33631
+ <button class="edit-button" type="button" (click)="openFilePicker()" [attr.aria-label]="editButtonLabel()">
33638
33632
  <ion-icon name="camera-outline"></ion-icon>
33639
33633
  </button>
33640
33634
  }
@@ -33648,13 +33642,7 @@ class AvatarUploadComponent {
33648
33642
  </div>
33649
33643
 
33650
33644
  <!-- Hidden File Input -->
33651
- <input
33652
- #fileInput
33653
- type="file"
33654
- accept="image/jpeg,image/png,image/webp"
33655
- (change)="onFileSelected($event)"
33656
- hidden
33657
- />
33645
+ <input #fileInput type="file" accept="image/jpeg,image/png,image/webp" (change)="onFileSelected($event)" hidden />
33658
33646
 
33659
33647
  <!-- Crop Modal -->
33660
33648
  <ion-modal
@@ -33683,37 +33671,20 @@ class AvatarUploadComponent {
33683
33671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarUploadComponent, decorators: [{
33684
33672
  type: Component,
33685
33673
  args: [{ selector: 'val-avatar-upload', standalone: true, imports: [CommonModule, IonIcon, IonSpinner, IonModal, ImageCropComponent], template: `
33686
- <div
33687
- class="avatar-upload"
33688
- [style.--avatar-size.px]="config().size"
33689
- [class.avatar-upload--loading]="loading()"
33690
- >
33674
+ <div class="avatar-upload" [style.--avatar-size.px]="config().size" [class.avatar-upload--loading]="loading()">
33691
33675
  <div class="avatar-container">
33692
33676
  <!-- Avatar Image or Initials -->
33693
33677
  @if (displayUrl()) {
33694
- <img
33695
- class="avatar-image"
33696
- [src]="displayUrl()"
33697
- alt="Avatar"
33698
- (error)="onImageError()"
33699
- />
33678
+ <img class="avatar-image" [src]="displayUrl()" alt="Avatar" (error)="onImageError()" />
33700
33679
  } @else {
33701
- <div
33702
- class="avatar-initials"
33703
- [style.background-color]="config().backgroundColor"
33704
- >
33680
+ <div class="avatar-initials" [style.background-color]="config().backgroundColor">
33705
33681
  {{ config().initials || '?' }}
33706
33682
  </div>
33707
33683
  }
33708
33684
 
33709
33685
  <!-- Edit Button -->
33710
33686
  @if (config().editable && !loading()) {
33711
- <button
33712
- class="edit-button"
33713
- type="button"
33714
- (click)="openFilePicker()"
33715
- [attr.aria-label]="editButtonLabel()"
33716
- >
33687
+ <button class="edit-button" type="button" (click)="openFilePicker()" [attr.aria-label]="editButtonLabel()">
33717
33688
  <ion-icon name="camera-outline"></ion-icon>
33718
33689
  </button>
33719
33690
  }
@@ -33727,13 +33698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
33727
33698
  </div>
33728
33699
 
33729
33700
  <!-- Hidden File Input -->
33730
- <input
33731
- #fileInput
33732
- type="file"
33733
- accept="image/jpeg,image/png,image/webp"
33734
- (change)="onFileSelected($event)"
33735
- hidden
33736
- />
33701
+ <input #fileInput type="file" accept="image/jpeg,image/png,image/webp" (change)="onFileSelected($event)" hidden />
33737
33702
 
33738
33703
  <!-- Crop Modal -->
33739
33704
  <ion-modal