structra-ui 0.1.93 → 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
|
@@ -6297,6 +6297,8 @@ class ImagePreviewPanelComponent {
|
|
|
6297
6297
|
/** Só `image` local ou `imageUrl` remota. */
|
|
6298
6298
|
this.displaySrc = null;
|
|
6299
6299
|
this.imageLoadError = false;
|
|
6300
|
+
/** Remote URL só entra como "imagem visível" após evento de load. */
|
|
6301
|
+
this.imageLoaded = false;
|
|
6300
6302
|
/** PDF a partir de `File` (URL sanitizada). */
|
|
6301
6303
|
this.safePdfUrl = null;
|
|
6302
6304
|
this.pdfLoadError = false;
|
|
@@ -6307,6 +6309,7 @@ class ImagePreviewPanelComponent {
|
|
|
6307
6309
|
if (c['file'] || c['imageUrl']) {
|
|
6308
6310
|
this.revokeFileObjectUrl();
|
|
6309
6311
|
this.imageLoadError = false;
|
|
6312
|
+
this.imageLoaded = false;
|
|
6310
6313
|
this.pdfLoadError = false;
|
|
6311
6314
|
this.fileKind = 'remote';
|
|
6312
6315
|
this.displaySrc = null;
|
|
@@ -6319,10 +6322,12 @@ class ImagePreviewPanelComponent {
|
|
|
6319
6322
|
}
|
|
6320
6323
|
onImgError() {
|
|
6321
6324
|
this.imageLoadError = true;
|
|
6325
|
+
this.imageLoaded = false;
|
|
6322
6326
|
this.cdr.markForCheck();
|
|
6323
6327
|
}
|
|
6324
6328
|
onImgLoad() {
|
|
6325
6329
|
this.imageLoadError = false;
|
|
6330
|
+
this.imageLoaded = true;
|
|
6326
6331
|
this.cdr.markForCheck();
|
|
6327
6332
|
}
|
|
6328
6333
|
onPdfFrameError() {
|
|
@@ -6336,6 +6341,19 @@ class ImagePreviewPanelComponent {
|
|
|
6336
6341
|
this.remove.emit();
|
|
6337
6342
|
}
|
|
6338
6343
|
get showImage() {
|
|
6344
|
+
if (this.loading || !this.displaySrc || this.imageLoadError) {
|
|
6345
|
+
return false;
|
|
6346
|
+
}
|
|
6347
|
+
if (this.fileKind === 'remote') {
|
|
6348
|
+
return this.imageLoaded;
|
|
6349
|
+
}
|
|
6350
|
+
return (this.fileKind === 'image');
|
|
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() {
|
|
6339
6357
|
return (!this.loading &&
|
|
6340
6358
|
(this.fileKind === 'image' || this.fileKind === 'remote') &&
|
|
6341
6359
|
!!this.displaySrc &&
|
|
@@ -6409,11 +6427,11 @@ class ImagePreviewPanelComponent {
|
|
|
6409
6427
|
}
|
|
6410
6428
|
}
|
|
6411
6429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6412
|
-
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 }); }
|
|
6413
6431
|
}
|
|
6414
6432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, decorators: [{
|
|
6415
6433
|
type: Component,
|
|
6416
|
-
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"] }]
|
|
6417
6435
|
}], propDecorators: { title: [{
|
|
6418
6436
|
type: Input
|
|
6419
6437
|
}], subtitle: [{
|