structra-ui 0.1.79 → 0.1.81
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 +76 -41
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +33 -11
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -228,31 +228,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
228
228
|
args: [{ transform: booleanAttribute }]
|
|
229
229
|
}] } });
|
|
230
230
|
|
|
231
|
-
var
|
|
232
|
-
(function (
|
|
233
|
-
|
|
234
|
-
|
|
231
|
+
var ButtonVariant;
|
|
232
|
+
(function (ButtonVariant) {
|
|
233
|
+
ButtonVariant["Primary"] = "primary";
|
|
234
|
+
ButtonVariant["Secondary"] = "secondary";
|
|
235
235
|
/** Texto/ícone sem caixa — navegação secundária, “link” com aparência de botão acessível. */
|
|
236
|
-
|
|
236
|
+
ButtonVariant["Ghost"] = "ghost";
|
|
237
237
|
/**
|
|
238
238
|
* Ação destrutiva / apagar: tokens de erro do tema
|
|
239
239
|
* (`--app-color-error*`), mesmo padrão em toda a lib.
|
|
240
240
|
*/
|
|
241
|
-
|
|
242
|
-
})(
|
|
243
|
-
var
|
|
244
|
-
(function (
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
})(
|
|
241
|
+
ButtonVariant["Danger"] = "danger";
|
|
242
|
+
})(ButtonVariant || (ButtonVariant = {}));
|
|
243
|
+
var ButtonType;
|
|
244
|
+
(function (ButtonType) {
|
|
245
|
+
ButtonType["Button"] = "button";
|
|
246
|
+
ButtonType["Submit"] = "submit";
|
|
247
|
+
ButtonType["Reset"] = "reset";
|
|
248
|
+
})(ButtonType || (ButtonType = {}));
|
|
249
249
|
/**
|
|
250
250
|
* Base do botão; **não** exposta no barrel público `buttons`. Use `ButtonComponent` (`app-button`).
|
|
251
251
|
*/
|
|
252
252
|
class BaseButtonComponent {
|
|
253
253
|
constructor() {
|
|
254
254
|
/** `submit` envia o `<form>` ancestral; use `button` para ações sem submit. */
|
|
255
|
-
this.type =
|
|
255
|
+
this.type = ButtonType.Button;
|
|
256
256
|
this.disabled = false;
|
|
257
257
|
/**
|
|
258
258
|
* Não interage (como `disabled`), mas com aparência em cinza (tema somente leitura),
|
|
@@ -267,14 +267,14 @@ class BaseButtonComponent {
|
|
|
267
267
|
/** Placeholder de carregamento (skeleton no lugar do rótulo). */
|
|
268
268
|
this.loading = false;
|
|
269
269
|
/** Estilo visual base; pode ser estendido no SCSS do projeto. */
|
|
270
|
-
this.variant =
|
|
270
|
+
this.variant = ButtonVariant.Primary;
|
|
271
271
|
}
|
|
272
272
|
/** Alias de {@link variant} (nome comum em design systems). */
|
|
273
273
|
set appearance(value) {
|
|
274
|
-
if (value ===
|
|
275
|
-
value ===
|
|
276
|
-
value ===
|
|
277
|
-
value ===
|
|
274
|
+
if (value === ButtonVariant.Primary ||
|
|
275
|
+
value === ButtonVariant.Secondary ||
|
|
276
|
+
value === ButtonVariant.Ghost ||
|
|
277
|
+
value === ButtonVariant.Danger) {
|
|
278
278
|
this.variant = value;
|
|
279
279
|
}
|
|
280
280
|
}
|
|
@@ -5314,8 +5314,8 @@ class ConfirmDialogComponent {
|
|
|
5314
5314
|
constructor() {
|
|
5315
5315
|
this.ref = inject((DialogRef));
|
|
5316
5316
|
this.data = inject(DIALOG_DATA);
|
|
5317
|
-
this.
|
|
5318
|
-
this.
|
|
5317
|
+
this.ButtonType = ButtonType;
|
|
5318
|
+
this.ButtonVariant = ButtonVariant;
|
|
5319
5319
|
this.titleId = `app-confirm-dlg-title-${++ConfirmDialogComponent.seq}`;
|
|
5320
5320
|
this.descId = `app-confirm-dlg-desc-${ConfirmDialogComponent.seq}`;
|
|
5321
5321
|
}
|
|
@@ -5332,11 +5332,11 @@ class ConfirmDialogComponent {
|
|
|
5332
5332
|
this.ref.close(false);
|
|
5333
5333
|
}
|
|
5334
5334
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", viewQueries: [{ propertyName: "cancelBtn", first: true, predicate: ["cancelBtn"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"
|
|
5335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", viewQueries: [{ propertyName: "cancelBtn", first: true, predicate: ["cancelBtn"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.Secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onCancel()\"\r\n >\r\n {{ data.cancelLabel ?? 'Cancelar' }}\r\n </app-button>\r\n <app-button\r\n [type]=\"ButtonType.Button\"\r\n [variant]=\"\r\n data.variant === 'danger'\r\n ? ButtonVariant.Danger\r\n : ButtonVariant.Primary\r\n \"\r\n [fullWidth]=\"false\"\r\n (click)=\"onConfirm()\"\r\n >\r\n {{ data.confirmLabel ?? 'Confirmar' }}\r\n </app-button>\r\n </footer>\r\n</div>\r\n", styles: [".confirm-dialog{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;overflow:hidden}.confirm-dialog__header{flex:0 0 auto;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}.confirm-dialog__title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.confirm-dialog__body{flex:1 1 auto;min-height:0;padding:1rem;overflow:auto}.confirm-dialog__message{margin:0;font-size:.9rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3)}.confirm-dialog__footer{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5336
5336
|
}
|
|
5337
5337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
5338
5338
|
type: Component,
|
|
5339
|
-
args: [{ selector: 'app-confirm-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"
|
|
5339
|
+
args: [{ selector: 'app-confirm-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.Secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onCancel()\"\r\n >\r\n {{ data.cancelLabel ?? 'Cancelar' }}\r\n </app-button>\r\n <app-button\r\n [type]=\"ButtonType.Button\"\r\n [variant]=\"\r\n data.variant === 'danger'\r\n ? ButtonVariant.Danger\r\n : ButtonVariant.Primary\r\n \"\r\n [fullWidth]=\"false\"\r\n (click)=\"onConfirm()\"\r\n >\r\n {{ data.confirmLabel ?? 'Confirmar' }}\r\n </app-button>\r\n </footer>\r\n</div>\r\n", styles: [".confirm-dialog{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;overflow:hidden}.confirm-dialog__header{flex:0 0 auto;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}.confirm-dialog__title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.confirm-dialog__body{flex:1 1 auto;min-height:0;padding:1rem;overflow:auto}.confirm-dialog__message{margin:0;font-size:.9rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3)}.confirm-dialog__footer{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}\n"] }]
|
|
5340
5340
|
}], propDecorators: { cancelBtn: [{
|
|
5341
5341
|
type: ViewChild,
|
|
5342
5342
|
args: ['cancelBtn']
|
|
@@ -6238,8 +6238,8 @@ class ImagePreviewPanelComponent {
|
|
|
6238
6238
|
this.objectFit = 'cover';
|
|
6239
6239
|
this.remove = new EventEmitter();
|
|
6240
6240
|
this.change = new EventEmitter();
|
|
6241
|
-
this.
|
|
6242
|
-
this.
|
|
6241
|
+
this.ButtonType = ButtonType;
|
|
6242
|
+
this.ButtonVariant = ButtonVariant;
|
|
6243
6243
|
/** Mensagem reutilizada: falha de carga, tipo não suportado, etc. */
|
|
6244
6244
|
this.previewUnavailableMessage = FILE_PREVIEW_UNAVAILABLE_MESSAGE;
|
|
6245
6245
|
/** `blob:` a revogar ao trocar ou destruir. */
|
|
@@ -6359,11 +6359,11 @@ class ImagePreviewPanelComponent {
|
|
|
6359
6359
|
}
|
|
6360
6360
|
}
|
|
6361
6361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6362
|
-
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 (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\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]=\"
|
|
6362
|
+
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 (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\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]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.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]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.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__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 }); }
|
|
6363
6363
|
}
|
|
6364
6364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, decorators: [{
|
|
6365
6365
|
type: Component,
|
|
6366
|
-
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 (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\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]=\"
|
|
6366
|
+
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 (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\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]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.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]=\"ButtonType.Button\"\r\n [variant]=\"ButtonVariant.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__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"] }]
|
|
6367
6367
|
}], propDecorators: { title: [{
|
|
6368
6368
|
type: Input
|
|
6369
6369
|
}], subtitle: [{
|
|
@@ -6464,6 +6464,44 @@ var FormActionsAlign;
|
|
|
6464
6464
|
FormActionsAlign["SpaceBetween"] = "space-between";
|
|
6465
6465
|
})(FormActionsAlign || (FormActionsAlign = {}));
|
|
6466
6466
|
|
|
6467
|
+
/**
|
|
6468
|
+
* Linha separadora horizontal — mesmos tokens que `[divider]` em `app-form-actions`
|
|
6469
|
+
* e `[stackDivider]` em `app-layout-stack`.
|
|
6470
|
+
*
|
|
6471
|
+
* `tightTop`: sem `margin-top` extra (útil quando o `gap` do pai já separa o bloco anterior).
|
|
6472
|
+
*/
|
|
6473
|
+
class DividerComponent {
|
|
6474
|
+
constructor() {
|
|
6475
|
+
/**
|
|
6476
|
+
* Omite o `margin-top` de 0.25rem — alinhado ao antigo divisor interno de `app-layout-stack`
|
|
6477
|
+
* (evita duplicar respiro com o `gap` da secção em que a stack está).
|
|
6478
|
+
*/
|
|
6479
|
+
this.tightTop = false;
|
|
6480
|
+
this.hostClass = 'ui-divider';
|
|
6481
|
+
}
|
|
6482
|
+
get tightTopClass() {
|
|
6483
|
+
return this.tightTop;
|
|
6484
|
+
}
|
|
6485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DividerComponent, isStandalone: true, selector: "app-divider", inputs: { tightTop: ["tightTop", "tightTop", booleanAttribute] }, host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, properties: { "class": "this.hostClass", "class.ui-divider--tight-top": "this.tightTopClass" } }, ngImport: i0, template: "<!-- Separador (apar\u00EAncia em :host) -->\r\n", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box;margin-top:.25rem;padding-top:var(--ui-divider-padding-top, var(--ui-layout-stack-divider-pad, 1rem));border:0;border-top:1px solid var(--ui-divider-color, var(--ui-form-actions-divider-color, var(--ui-layout-stack-divider-color, #e8eaed)))}:host(.ui-divider--tight-top){margin-top:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6487
|
+
}
|
|
6488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DividerComponent, decorators: [{
|
|
6489
|
+
type: Component,
|
|
6490
|
+
args: [{ selector: 'app-divider', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6491
|
+
role: 'separator',
|
|
6492
|
+
'aria-orientation': 'horizontal',
|
|
6493
|
+
}, template: "<!-- Separador (apar\u00EAncia em :host) -->\r\n", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box;margin-top:.25rem;padding-top:var(--ui-divider-padding-top, var(--ui-layout-stack-divider-pad, 1rem));border:0;border-top:1px solid var(--ui-divider-color, var(--ui-form-actions-divider-color, var(--ui-layout-stack-divider-color, #e8eaed)))}:host(.ui-divider--tight-top){margin-top:0}\n"] }]
|
|
6494
|
+
}], propDecorators: { tightTop: [{
|
|
6495
|
+
type: Input,
|
|
6496
|
+
args: [{ transform: booleanAttribute }]
|
|
6497
|
+
}], hostClass: [{
|
|
6498
|
+
type: HostBinding,
|
|
6499
|
+
args: ['class']
|
|
6500
|
+
}], tightTopClass: [{
|
|
6501
|
+
type: HostBinding,
|
|
6502
|
+
args: ['class.ui-divider--tight-top']
|
|
6503
|
+
}] } });
|
|
6504
|
+
|
|
6467
6505
|
/**
|
|
6468
6506
|
* Faixa flexível com projeção de conteúdo.
|
|
6469
6507
|
*
|
|
@@ -6495,7 +6533,10 @@ class LayoutStackComponent {
|
|
|
6495
6533
|
* filhos em pilha, largura total, mesmo com `direction="row"`. Desative para manter fila no telemóvel.
|
|
6496
6534
|
*/
|
|
6497
6535
|
this.stackOnMobile = true;
|
|
6498
|
-
/**
|
|
6536
|
+
/**
|
|
6537
|
+
* Linha separadora acima da faixa — renderiza {@link DividerComponent} (`app-divider`)
|
|
6538
|
+
* com `[tightTop]="true"` (sem `margin-top` extra; o `gap` do contentor já separa o bloco anterior).
|
|
6539
|
+
*/
|
|
6499
6540
|
this.stackDivider = false;
|
|
6500
6541
|
/**
|
|
6501
6542
|
* Quando `true` (por defeito), em **`Row`** os filhos repartem a **largura** (`flex: 1`).
|
|
@@ -6516,20 +6557,17 @@ class LayoutStackComponent {
|
|
|
6516
6557
|
if (this.stackOnMobile) {
|
|
6517
6558
|
parts.push('layout-stack--stack-mobile');
|
|
6518
6559
|
}
|
|
6519
|
-
if (this.stackDivider) {
|
|
6520
|
-
parts.push('layout-stack--divider');
|
|
6521
|
-
}
|
|
6522
6560
|
if (this.stackFill) {
|
|
6523
6561
|
parts.push('layout-stack--fill');
|
|
6524
6562
|
}
|
|
6525
6563
|
return parts.join(' ');
|
|
6526
6564
|
}
|
|
6527
6565
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LayoutStackComponent, isStandalone: true, selector: "app-layout-stack", inputs: { align: "align", direction: "direction", itemAlign: "itemAlign", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], stackDivider: ["stackDivider", "stackDivider", booleanAttribute], stackFill: ["stackFill", "stackFill", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (stackDivider) {\r\n <app-divider [tightTop]=\"true\" />\r\n}\r\n<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:1.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host(:not(.layout-stack--fill))>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep .base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:1.25rem}:host(.layout-stack--stack-mobile.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "app-divider", inputs: ["tightTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6529
6567
|
}
|
|
6530
6568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, decorators: [{
|
|
6531
6569
|
type: Component,
|
|
6532
|
-
args: [{ selector: 'app-layout-stack', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:1.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host
|
|
6570
|
+
args: [{ selector: 'app-layout-stack', standalone: true, imports: [DividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (stackDivider) {\r\n <app-divider [tightTop]=\"true\" />\r\n}\r\n<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:1.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host(:not(.layout-stack--fill))>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep .base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:1.25rem}:host(.layout-stack--stack-mobile.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"] }]
|
|
6533
6571
|
}], propDecorators: { align: [{
|
|
6534
6572
|
type: Input
|
|
6535
6573
|
}], direction: [{
|
|
@@ -6571,20 +6609,17 @@ class FormActionsComponent {
|
|
|
6571
6609
|
if (this.stackOnMobile) {
|
|
6572
6610
|
parts.push('form-actions--stack-mobile');
|
|
6573
6611
|
}
|
|
6574
|
-
if (this.divider) {
|
|
6575
|
-
parts.push('form-actions--divider');
|
|
6576
|
-
}
|
|
6577
6612
|
if (this.fill) {
|
|
6578
6613
|
parts.push('form-actions--fill');
|
|
6579
6614
|
}
|
|
6580
6615
|
return parts.join(' ');
|
|
6581
6616
|
}
|
|
6582
6617
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6618
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormActionsComponent, isStandalone: true, selector: "app-form-actions", inputs: { align: "align", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], fill: ["fill", "fill", booleanAttribute], divider: ["divider", "divider", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (divider) {\n <app-divider />\n}\n<app-layout-stack\n class=\"form-actions__stack\"\n [align]=\"layoutAlign\"\n [stackOnMobile]=\"stackOnMobile\"\n [stackFill]=\"fill\"\n [stackDivider]=\"false\"\n>\n <ng-content />\n</app-layout-stack>\n", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-actions__stack{display:block;width:100%;min-width:0;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "app-divider", inputs: ["tightTop"] }, { kind: "component", type: LayoutStackComponent, selector: "app-layout-stack", inputs: ["align", "direction", "itemAlign", "stackOnMobile", "stackDivider", "stackFill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6584
6619
|
}
|
|
6585
6620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormActionsComponent, decorators: [{
|
|
6586
6621
|
type: Component,
|
|
6587
|
-
args: [{ selector: 'app-form-actions', imports: [LayoutStackComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-layout-stack\n class=\"form-actions__stack\"\n [align]=\"layoutAlign\"\n [stackOnMobile]=\"stackOnMobile\"\n [stackFill]=\"fill\"\n [stackDivider]=\"false\"\n>\n <ng-content />\n</app-layout-stack>\n", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-actions__stack{display:block;width:100%;min-width:0;box-sizing:border-box}
|
|
6622
|
+
args: [{ selector: 'app-form-actions', imports: [DividerComponent, LayoutStackComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (divider) {\n <app-divider />\n}\n<app-layout-stack\n class=\"form-actions__stack\"\n [align]=\"layoutAlign\"\n [stackOnMobile]=\"stackOnMobile\"\n [stackFill]=\"fill\"\n [stackDivider]=\"false\"\n>\n <ng-content />\n</app-layout-stack>\n", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-actions__stack{display:block;width:100%;min-width:0;box-sizing:border-box}\n"] }]
|
|
6588
6623
|
}], propDecorators: { align: [{
|
|
6589
6624
|
type: Input
|
|
6590
6625
|
}], stackOnMobile: [{
|
|
@@ -7247,11 +7282,11 @@ class FormRowComponent {
|
|
|
7247
7282
|
return parts.join(' ');
|
|
7248
7283
|
}
|
|
7249
7284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap;justify-content:space-between}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7251
7286
|
}
|
|
7252
7287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, decorators: [{
|
|
7253
7288
|
type: Component,
|
|
7254
|
-
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"] }]
|
|
7289
|
+
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap;justify-content:space-between}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}}\n"] }]
|
|
7255
7290
|
}], propDecorators: { gap: [{
|
|
7256
7291
|
type: Input
|
|
7257
7292
|
}], align: [{
|
|
@@ -10153,5 +10188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10153
10188
|
* Generated bundle index. Do not edit.
|
|
10154
10189
|
*/
|
|
10155
10190
|
|
|
10156
|
-
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA,
|
|
10191
|
+
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10157
10192
|
//# sourceMappingURL=structra-ui.mjs.map
|