structra-ui 0.1.94 → 0.1.95
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/fesm2022/structra-ui.mjs
CHANGED
|
@@ -6349,6 +6349,16 @@ class ImagePreviewPanelComponent {
|
|
|
6349
6349
|
}
|
|
6350
6350
|
return (this.fileKind === 'image');
|
|
6351
6351
|
}
|
|
6352
|
+
/**
|
|
6353
|
+
* Mantém o `<img>` montado (para disparar load/error) mesmo quando remoto ainda não terminou de carregar.
|
|
6354
|
+
* Evita flick de ações e permite cair no fallback amarelo quando a URL falha.
|
|
6355
|
+
*/
|
|
6356
|
+
get shouldRenderImage() {
|
|
6357
|
+
return (!this.loading &&
|
|
6358
|
+
(this.fileKind === 'image' || this.fileKind === 'remote') &&
|
|
6359
|
+
!!this.displaySrc &&
|
|
6360
|
+
!this.imageLoadError);
|
|
6361
|
+
}
|
|
6352
6362
|
get showPdf() {
|
|
6353
6363
|
return (!this.loading &&
|
|
6354
6364
|
this.fileKind === 'pdf' &&
|
|
@@ -6417,11 +6427,11 @@ class ImagePreviewPanelComponent {
|
|
|
6417
6427
|
}
|
|
6418
6428
|
}
|
|
6419
6429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImagePreviewPanelComponent, isStandalone: true, selector: "app-image-preview-panel", inputs: { title: "title", subtitle: "subtitle", imageUrl: "imageUrl", file: "file", emptyText: "emptyText", loading: ["loading", "loading", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], showImageActions: ["showImageActions", "showImageActions", booleanAttribute], objectFit: "objectFit" }, outputs: { remove: "remove", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (
|
|
6430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImagePreviewPanelComponent, isStandalone: true, selector: "app-image-preview-panel", inputs: { title: "title", subtitle: "subtitle", imageUrl: "imageUrl", file: "file", emptyText: "emptyText", loading: ["loading", "loading", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], showImageActions: ["showImageActions", "showImageActions", booleanAttribute], objectFit: "objectFit" }, outputs: { remove: "remove", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (shouldRenderImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [class.image-preview-panel__img--hidden]=\"!showImage\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__img--hidden{visibility:hidden}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }, { kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6421
6431
|
}
|
|
6422
6432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, decorators: [{
|
|
6423
6433
|
type: Component,
|
|
6424
|
-
args: [{ selector: 'app-image-preview-panel', standalone: true, imports: [ButtonComponent, SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (
|
|
6434
|
+
args: [{ selector: 'app-image-preview-panel', standalone: true, imports: [ButtonComponent, SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (shouldRenderImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [class.image-preview-panel__img--hidden]=\"!showImage\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__img--hidden{visibility:hidden}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"] }]
|
|
6425
6435
|
}], propDecorators: { title: [{
|
|
6426
6436
|
type: Input
|
|
6427
6437
|
}], subtitle: [{
|