valtech-components 4.0.975 → 4.0.977
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/esm2022/lib/components/molecules/profile-card/profile-card.component.mjs +86 -12
- package/esm2022/lib/components/organisms/attachment-uploader/attachment-uploader.component.mjs +3 -3
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +88 -14
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/atoms/rights-footer/rights-footer.component.d.ts +2 -2
- package/lib/components/molecules/load-more/load-more.component.d.ts +1 -1
- package/lib/components/molecules/profile-card/profile-card.component.d.ts +12 -0
- package/lib/components/organisms/article/article.component.d.ts +2 -2
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
|
|
|
70
70
|
* Current version of valtech-components.
|
|
71
71
|
* This is automatically updated during the publish process.
|
|
72
72
|
*/
|
|
73
|
-
const VERSION = '4.0.
|
|
73
|
+
const VERSION = '4.0.977';
|
|
74
74
|
|
|
75
75
|
function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
|
|
76
76
|
if (rule == null)
|
|
@@ -30344,7 +30344,35 @@ class ProfileCardComponent {
|
|
|
30344
30344
|
this.safeWhatsapp = computed(() => sanitizeUrl(this.data().links?.whatsapp));
|
|
30345
30345
|
this.safePhone = computed(() => sanitizeUrl(this.data().links?.phone));
|
|
30346
30346
|
this.safeEmail = computed(() => sanitizeUrl(this.data().links?.email));
|
|
30347
|
-
this.
|
|
30347
|
+
this.safeFacebook = computed(() => this.facebookUrl(this.data().links?.facebook));
|
|
30348
|
+
this.hasLinks = computed(() => !!(this.safeWebsite() ||
|
|
30349
|
+
this.safeInstagram() ||
|
|
30350
|
+
this.safeWhatsapp() ||
|
|
30351
|
+
this.safePhone() ||
|
|
30352
|
+
this.safeEmail() ||
|
|
30353
|
+
this.safeFacebook()));
|
|
30354
|
+
this.statsToShow = computed(() => {
|
|
30355
|
+
const stats = this.data().stats;
|
|
30356
|
+
if (stats)
|
|
30357
|
+
return stats;
|
|
30358
|
+
const stat = this.data().stat;
|
|
30359
|
+
return stat ? [stat] : null;
|
|
30360
|
+
});
|
|
30361
|
+
}
|
|
30362
|
+
facebookUrl(handle) {
|
|
30363
|
+
if (!handle)
|
|
30364
|
+
return null;
|
|
30365
|
+
if (handle.startsWith('http'))
|
|
30366
|
+
return sanitizeUrl(handle);
|
|
30367
|
+
return sanitizeUrl(`https://facebook.com/${handle}`);
|
|
30368
|
+
}
|
|
30369
|
+
formatPlace(place) {
|
|
30370
|
+
const parts = [];
|
|
30371
|
+
if (place.city)
|
|
30372
|
+
parts.push(place.city);
|
|
30373
|
+
if (place.region)
|
|
30374
|
+
parts.push(place.region);
|
|
30375
|
+
return parts.join(', ');
|
|
30348
30376
|
}
|
|
30349
30377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30350
30378
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProfileCardComponent, isStandalone: true, selector: "val-profile-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
@@ -30366,10 +30394,22 @@ class ProfileCardComponent {
|
|
|
30366
30394
|
@if (data().handle) {
|
|
30367
30395
|
<div class="profile-card__handle">{{ '@' + data().handle }}</div>
|
|
30368
30396
|
}
|
|
30369
|
-
@if (data().
|
|
30370
|
-
<div class="profile-
|
|
30371
|
-
|
|
30372
|
-
|
|
30397
|
+
@if (data().description) {
|
|
30398
|
+
<div class="profile-card__description">{{ data().description }}</div>
|
|
30399
|
+
}
|
|
30400
|
+
@if (data().place) {
|
|
30401
|
+
<div class="profile-card__place">
|
|
30402
|
+
{{ formatPlace(data().place) }}
|
|
30403
|
+
</div>
|
|
30404
|
+
}
|
|
30405
|
+
@if (statsToShow(); as stats) {
|
|
30406
|
+
<div class="profile-card__stats">
|
|
30407
|
+
@for (stat of stats; track $index) {
|
|
30408
|
+
<div class="profile-card__stat">
|
|
30409
|
+
<strong>{{ stat.value }}</strong
|
|
30410
|
+
> {{ stat.label }}
|
|
30411
|
+
</div>
|
|
30412
|
+
}
|
|
30373
30413
|
</div>
|
|
30374
30414
|
}
|
|
30375
30415
|
@if (hasLinks()) {
|
|
@@ -30417,11 +30457,22 @@ class ProfileCardComponent {
|
|
|
30417
30457
|
<ion-icon name="mail-outline" />
|
|
30418
30458
|
</a>
|
|
30419
30459
|
}
|
|
30460
|
+
@if (safeFacebook()) {
|
|
30461
|
+
<a
|
|
30462
|
+
class="profile-card__link"
|
|
30463
|
+
[href]="safeFacebook()!"
|
|
30464
|
+
target="_blank"
|
|
30465
|
+
rel="noopener noreferrer"
|
|
30466
|
+
aria-label="Facebook"
|
|
30467
|
+
>
|
|
30468
|
+
<ion-icon name="logo-facebook" />
|
|
30469
|
+
</a>
|
|
30470
|
+
}
|
|
30420
30471
|
</div>
|
|
30421
30472
|
}
|
|
30422
30473
|
</div>
|
|
30423
30474
|
</div>
|
|
30424
|
-
`, isInline: true, styles: [".profile-card{display:flex;align-items:flex-start;gap:14px}.profile-card__avatar-wrap{flex-shrink:0;position:relative}.profile-card__avatar{width:64px;height:64px;border-radius:50%;background:var(--ion-color-dark, #313131);display:flex;align-items:center;justify-content:center;font-size:1.625rem;font-weight:800;color:#fff;overflow:hidden;letter-spacing:-.5px}.profile-card__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-card__badge{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--ion-color-secondary, #fff600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;border:2px solid var(--ion-background-color, #fff)}.profile-card__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:4px}.profile-card__name{font-size:1.125rem;font-weight:700;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-card__handle{font-size:.8125rem;color:var(--ion-color-dark, #92949c)}.profile-
|
|
30475
|
+
`, isInline: true, styles: [".profile-card{display:flex;align-items:flex-start;gap:14px}.profile-card__avatar-wrap{flex-shrink:0;position:relative}.profile-card__avatar{width:64px;height:64px;border-radius:50%;background:var(--ion-color-dark, #313131);display:flex;align-items:center;justify-content:center;font-size:1.625rem;font-weight:800;color:#fff;overflow:hidden;letter-spacing:-.5px}.profile-card__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-card__badge{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--ion-color-secondary, #fff600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;border:2px solid var(--ion-background-color, #fff)}.profile-card__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:4px}.profile-card__name{font-size:1.125rem;font-weight:700;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-card__handle{font-size:.8125rem;color:var(--ion-color-dark, #92949c)}.profile-card__description{font-size:.875rem;color:var(--ion-color-dark, #92949c);line-height:1.4;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.profile-card__place{font-size:.75rem;color:var(--ion-color-dark, #92949c);margin-top:3px}.profile-card__stats{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}.profile-card__stat{font-size:.75rem;color:var(--ion-color-dark, #92949c)}.profile-card__stat strong{color:var(--ion-text-color, #000);font-weight:700}.profile-card__links{display:flex;gap:10px;margin-top:6px}.profile-card__link{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));color:var(--ion-text-color, #000);text-decoration:none;font-size:1rem;transition:opacity .15s}.profile-card__link:hover{opacity:.7}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
|
|
30425
30476
|
}
|
|
30426
30477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileCardComponent, decorators: [{
|
|
30427
30478
|
type: Component,
|
|
@@ -30444,10 +30495,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
30444
30495
|
@if (data().handle) {
|
|
30445
30496
|
<div class="profile-card__handle">{{ '@' + data().handle }}</div>
|
|
30446
30497
|
}
|
|
30447
|
-
@if (data().
|
|
30448
|
-
<div class="profile-
|
|
30449
|
-
|
|
30450
|
-
|
|
30498
|
+
@if (data().description) {
|
|
30499
|
+
<div class="profile-card__description">{{ data().description }}</div>
|
|
30500
|
+
}
|
|
30501
|
+
@if (data().place) {
|
|
30502
|
+
<div class="profile-card__place">
|
|
30503
|
+
{{ formatPlace(data().place) }}
|
|
30504
|
+
</div>
|
|
30505
|
+
}
|
|
30506
|
+
@if (statsToShow(); as stats) {
|
|
30507
|
+
<div class="profile-card__stats">
|
|
30508
|
+
@for (stat of stats; track $index) {
|
|
30509
|
+
<div class="profile-card__stat">
|
|
30510
|
+
<strong>{{ stat.value }}</strong
|
|
30511
|
+
> {{ stat.label }}
|
|
30512
|
+
</div>
|
|
30513
|
+
}
|
|
30451
30514
|
</div>
|
|
30452
30515
|
}
|
|
30453
30516
|
@if (hasLinks()) {
|
|
@@ -30495,11 +30558,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
30495
30558
|
<ion-icon name="mail-outline" />
|
|
30496
30559
|
</a>
|
|
30497
30560
|
}
|
|
30561
|
+
@if (safeFacebook()) {
|
|
30562
|
+
<a
|
|
30563
|
+
class="profile-card__link"
|
|
30564
|
+
[href]="safeFacebook()!"
|
|
30565
|
+
target="_blank"
|
|
30566
|
+
rel="noopener noreferrer"
|
|
30567
|
+
aria-label="Facebook"
|
|
30568
|
+
>
|
|
30569
|
+
<ion-icon name="logo-facebook" />
|
|
30570
|
+
</a>
|
|
30571
|
+
}
|
|
30498
30572
|
</div>
|
|
30499
30573
|
}
|
|
30500
30574
|
</div>
|
|
30501
30575
|
</div>
|
|
30502
|
-
`, styles: [".profile-card{display:flex;align-items:flex-start;gap:14px}.profile-card__avatar-wrap{flex-shrink:0;position:relative}.profile-card__avatar{width:64px;height:64px;border-radius:50%;background:var(--ion-color-dark, #313131);display:flex;align-items:center;justify-content:center;font-size:1.625rem;font-weight:800;color:#fff;overflow:hidden;letter-spacing:-.5px}.profile-card__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-card__badge{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--ion-color-secondary, #fff600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;border:2px solid var(--ion-background-color, #fff)}.profile-card__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:4px}.profile-card__name{font-size:1.125rem;font-weight:700;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-card__handle{font-size:.8125rem;color:var(--ion-color-dark, #92949c)}.profile-
|
|
30576
|
+
`, styles: [".profile-card{display:flex;align-items:flex-start;gap:14px}.profile-card__avatar-wrap{flex-shrink:0;position:relative}.profile-card__avatar{width:64px;height:64px;border-radius:50%;background:var(--ion-color-dark, #313131);display:flex;align-items:center;justify-content:center;font-size:1.625rem;font-weight:800;color:#fff;overflow:hidden;letter-spacing:-.5px}.profile-card__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-card__badge{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--ion-color-secondary, #fff600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;border:2px solid var(--ion-background-color, #fff)}.profile-card__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:4px}.profile-card__name{font-size:1.125rem;font-weight:700;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-card__handle{font-size:.8125rem;color:var(--ion-color-dark, #92949c)}.profile-card__description{font-size:.875rem;color:var(--ion-color-dark, #92949c);line-height:1.4;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.profile-card__place{font-size:.75rem;color:var(--ion-color-dark, #92949c);margin-top:3px}.profile-card__stats{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}.profile-card__stat{font-size:.75rem;color:var(--ion-color-dark, #92949c)}.profile-card__stat strong{color:var(--ion-text-color, #000);font-weight:700}.profile-card__links{display:flex;gap:10px;margin-top:6px}.profile-card__link{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));color:var(--ion-text-color, #000);text-decoration:none;font-size:1rem;transition:opacity .15s}.profile-card__link:hover{opacity:.7}\n"] }]
|
|
30503
30577
|
}] });
|
|
30504
30578
|
|
|
30505
30579
|
/**
|
|
@@ -37000,11 +37074,11 @@ class AttachmentUploaderComponent {
|
|
|
37000
37074
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
37001
37075
|
}
|
|
37002
37076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, viewQueries: [{ propertyName: "cameraPicker", first: true, predicate: ["cameraPicker"], descendants: true }, { propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\">\n @if (props().title) {\n <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n }\n\n <!-- file picker est\u00E1ndar -->\n <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n <input\n #cameraPicker\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n class=\"hidden-input\"\n (change)=\"onFilesSelected($event)\"\n />\n\n <div class=\"attachment-actions\">\n <ion-button\n class=\"attachment-action\"\n fill=\"outline\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (click)=\"filePicker.click()\"\n >\n <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n {{ i18n.t('attachAdd') }}\n </ion-button>\n <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCamera') }}\n </ion-button>\n </div>\n\n @if (
|
|
37077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, viewQueries: [{ propertyName: "cameraPicker", first: true, predicate: ["cameraPicker"], descendants: true }, { propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\">\n @if (props().title) {\n <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n }\n\n <!-- file picker est\u00E1ndar -->\n <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n <input\n #cameraPicker\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n class=\"hidden-input\"\n (change)=\"onFilesSelected($event)\"\n />\n\n <div class=\"attachment-actions\">\n <ion-button\n class=\"attachment-action\"\n fill=\"outline\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (click)=\"filePicker.click()\"\n >\n <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n {{ i18n.t('attachAdd') }}\n </ion-button>\n <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCamera') }}\n </ion-button>\n </div>\n\n @if (attachments().length > 0) {\n <div class=\"attachment-list\">\n @for (item of attachments(); track item.id) {\n <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n @if (!item.isExternal) {\n <ion-icon\n class=\"file-icon\"\n [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n ></ion-icon>\n }\n <div class=\"file-info\">\n @if (item.isExternal && item.url) {\n <img class=\"file-thumb\" [src]=\"item.url\" alt=\"foto\" loading=\"lazy\" (error)=\"thumbFailed(item.id)\" />\n } @else {\n <span class=\"file-name\">{{ item.file?.name ?? 'archivo' }}</span>\n <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n }\n </div>\n\n @if (item.status === 'uploading') {\n <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n } @else if (item.status === 'ready') {\n <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n } @else if (item.status === 'error') {\n <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n } @if (item.status !== 'uploading') {\n <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n </ion-button>\n } @if (item.status === 'error' && item.error) {\n <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n }\n </div>\n }\n </div>\n } @if (props().hint) {\n <p class=\"attachment-hint\">{{ props().hint }}</p>\n }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n <div class=\"camera-controls\">\n <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n {{ i18n.t('attachCancel') }}\n </ion-button>\n <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCapture') }}\n </ion-button>\n </div>\n </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
37004
37078
|
}
|
|
37005
37079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, decorators: [{
|
|
37006
37080
|
type: Component,
|
|
37007
|
-
args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-uploader\">\n @if (props().title) {\n <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n }\n\n <!-- file picker est\u00E1ndar -->\n <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n <input\n #cameraPicker\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n class=\"hidden-input\"\n (change)=\"onFilesSelected($event)\"\n />\n\n <div class=\"attachment-actions\">\n <ion-button\n class=\"attachment-action\"\n fill=\"outline\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (click)=\"filePicker.click()\"\n >\n <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n {{ i18n.t('attachAdd') }}\n </ion-button>\n <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCamera') }}\n </ion-button>\n </div>\n\n @if (
|
|
37081
|
+
args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-uploader\">\n @if (props().title) {\n <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n }\n\n <!-- file picker est\u00E1ndar -->\n <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n <input\n #cameraPicker\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n class=\"hidden-input\"\n (change)=\"onFilesSelected($event)\"\n />\n\n <div class=\"attachment-actions\">\n <ion-button\n class=\"attachment-action\"\n fill=\"outline\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (click)=\"filePicker.click()\"\n >\n <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n {{ i18n.t('attachAdd') }}\n </ion-button>\n <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCamera') }}\n </ion-button>\n </div>\n\n @if (attachments().length > 0) {\n <div class=\"attachment-list\">\n @for (item of attachments(); track item.id) {\n <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n @if (!item.isExternal) {\n <ion-icon\n class=\"file-icon\"\n [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n ></ion-icon>\n }\n <div class=\"file-info\">\n @if (item.isExternal && item.url) {\n <img class=\"file-thumb\" [src]=\"item.url\" alt=\"foto\" loading=\"lazy\" (error)=\"thumbFailed(item.id)\" />\n } @else {\n <span class=\"file-name\">{{ item.file?.name ?? 'archivo' }}</span>\n <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n }\n </div>\n\n @if (item.status === 'uploading') {\n <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n } @else if (item.status === 'ready') {\n <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n } @else if (item.status === 'error') {\n <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n } @if (item.status !== 'uploading') {\n <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n </ion-button>\n } @if (item.status === 'error' && item.error) {\n <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n }\n </div>\n }\n </div>\n } @if (props().hint) {\n <p class=\"attachment-hint\">{{ props().hint }}</p>\n }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n <div class=\"camera-controls\">\n <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n {{ i18n.t('attachCancel') }}\n </ion-button>\n <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n {{ i18n.t('attachCapture') }}\n </ion-button>\n </div>\n </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"] }]
|
|
37008
37082
|
}], ctorParameters: () => [], propDecorators: { cameraPicker: [{
|
|
37009
37083
|
type: ViewChild,
|
|
37010
37084
|
args: ['cameraPicker']
|