structra-ui 0.1.75 → 0.1.76
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
|
@@ -5934,6 +5934,19 @@ class ValidationSummaryComponent {
|
|
|
5934
5934
|
* nem alterar o scroll da página (útil em formulários muito longos).
|
|
5935
5935
|
*/
|
|
5936
5936
|
this.pinned = false;
|
|
5937
|
+
/**
|
|
5938
|
+
* Com resumo em fluxo (`pinned === false`), após o painel passar a visível, rola o scrollport
|
|
5939
|
+
* (ex.: `main` com overflow) até alinhar o painel no topo — necessário além de `window.scrollTo`
|
|
5940
|
+
* quando o layout aplica scroll num contentor (docs, modais, etc.).
|
|
5941
|
+
* Com `pinned === true` não tem efeito.
|
|
5942
|
+
*/
|
|
5943
|
+
this.autoScrollOnReveal = true;
|
|
5944
|
+
/**
|
|
5945
|
+
* Incrementar a cada submissão com erros (ex.: `++validarComErroSeq`) para voltar a rolar
|
|
5946
|
+
* o painel **em fluxo** quando já está visível. Sem ligação, mantém-se só o scroll da
|
|
5947
|
+
* primeira revelação.
|
|
5948
|
+
*/
|
|
5949
|
+
this.unpinnedScrollTick = 0;
|
|
5937
5950
|
this.variant = 'error';
|
|
5938
5951
|
this.compact = false;
|
|
5939
5952
|
/**
|
|
@@ -5959,6 +5972,8 @@ class ValidationSummaryComponent {
|
|
|
5959
5972
|
/** `true`: lista de erros visível; `false`: só cabeçalho + botões (menos altura). */
|
|
5960
5973
|
this.panelBodyExpanded = true;
|
|
5961
5974
|
this.wasShown = false;
|
|
5975
|
+
/** Evita loop em {@link scrollHostIntoNearestBlockScrollport} se o host ainda não tiver medidas. */
|
|
5976
|
+
this.unpinnedScrollMeasureAttempts = 0;
|
|
5962
5977
|
}
|
|
5963
5978
|
static { this.nextTitleUid = 0; }
|
|
5964
5979
|
static { this.nextListRegionUid = 0; }
|
|
@@ -5975,7 +5990,7 @@ class ValidationSummaryComponent {
|
|
|
5975
5990
|
}
|
|
5976
5991
|
return parts.join(' ');
|
|
5977
5992
|
}
|
|
5978
|
-
ngOnChanges(
|
|
5993
|
+
ngOnChanges(c) {
|
|
5979
5994
|
const shown = this.isShown;
|
|
5980
5995
|
if (this.pinned && shown && !this.wasShown) {
|
|
5981
5996
|
this.pinnedOpen = false;
|
|
@@ -5991,6 +6006,16 @@ class ValidationSummaryComponent {
|
|
|
5991
6006
|
this.pinnedOpen = false;
|
|
5992
6007
|
this.panelBodyExpanded = true;
|
|
5993
6008
|
}
|
|
6009
|
+
else if (this.autoScrollOnReveal && !this.pinned && shown) {
|
|
6010
|
+
const tch = c['unpinnedScrollTick'];
|
|
6011
|
+
const tickBumped = !!tch &&
|
|
6012
|
+
tch.currentValue !== tch.previousValue &&
|
|
6013
|
+
(tch.previousValue !== undefined ||
|
|
6014
|
+
(typeof tch.currentValue === 'number' && tch.currentValue > 0));
|
|
6015
|
+
if (tickBumped || !this.wasShown) {
|
|
6016
|
+
this.scheduleUnpinnedRevealScroll();
|
|
6017
|
+
}
|
|
6018
|
+
}
|
|
5994
6019
|
this.wasShown = shown;
|
|
5995
6020
|
}
|
|
5996
6021
|
get hostHidden() {
|
|
@@ -6180,6 +6205,70 @@ class ValidationSummaryComponent {
|
|
|
6180
6205
|
const inner = el.querySelector('input, select, textarea, button, [href], [tabindex]:not([tabindex="-1"])');
|
|
6181
6206
|
return inner ?? el;
|
|
6182
6207
|
}
|
|
6208
|
+
scheduleUnpinnedRevealScroll() {
|
|
6209
|
+
this.unpinnedScrollMeasureAttempts = 0;
|
|
6210
|
+
afterNextRender(() => {
|
|
6211
|
+
requestAnimationFrame(() => {
|
|
6212
|
+
requestAnimationFrame(() => this.scrollHostIntoNearestBlockScrollport());
|
|
6213
|
+
});
|
|
6214
|
+
}, { injector: this.injector });
|
|
6215
|
+
}
|
|
6216
|
+
/**
|
|
6217
|
+
* Rola o primeiro contentor com overflow (ex.: `main` da shell de docs) para mostrar o host.
|
|
6218
|
+
* `Element.scrollIntoView` em contentores aninhados é pouco fiável; usamos o rect do alvo
|
|
6219
|
+
* relativamente ao scrollport, como no foco a partir de um item.
|
|
6220
|
+
*/
|
|
6221
|
+
scrollHostIntoNearestBlockScrollport() {
|
|
6222
|
+
if (this.pinned) {
|
|
6223
|
+
return;
|
|
6224
|
+
}
|
|
6225
|
+
const el = this.hostRef.nativeElement;
|
|
6226
|
+
if (!el.isConnected) {
|
|
6227
|
+
return;
|
|
6228
|
+
}
|
|
6229
|
+
const { width, height } = el.getBoundingClientRect();
|
|
6230
|
+
if (width === 0 && height === 0) {
|
|
6231
|
+
if (this.unpinnedScrollMeasureAttempts++ < 5) {
|
|
6232
|
+
requestAnimationFrame(() => {
|
|
6233
|
+
requestAnimationFrame(() => this.scrollHostIntoNearestBlockScrollport());
|
|
6234
|
+
});
|
|
6235
|
+
}
|
|
6236
|
+
return;
|
|
6237
|
+
}
|
|
6238
|
+
const marginPx = 12;
|
|
6239
|
+
const scrollport = this.findFirstBlockScrollportAncestor(el) ??
|
|
6240
|
+
document.scrollingElement ??
|
|
6241
|
+
document.documentElement;
|
|
6242
|
+
const elRect = el.getBoundingClientRect();
|
|
6243
|
+
const portRect = scrollport.getBoundingClientRect();
|
|
6244
|
+
const deltaY = elRect.top - portRect.top - marginPx;
|
|
6245
|
+
if (Math.abs(deltaY) < 2) {
|
|
6246
|
+
return;
|
|
6247
|
+
}
|
|
6248
|
+
const nextTop = scrollport.scrollTop + deltaY;
|
|
6249
|
+
const maxTop = Math.max(0, scrollport.scrollHeight - scrollport.clientHeight);
|
|
6250
|
+
const clamped = Math.max(0, Math.min(maxTop, nextTop));
|
|
6251
|
+
scrollport.scrollTo({ top: clamped, behavior: this.scrollBehavior });
|
|
6252
|
+
}
|
|
6253
|
+
findFirstBlockScrollportAncestor(from) {
|
|
6254
|
+
let node = from.parentElement;
|
|
6255
|
+
let depth = 0;
|
|
6256
|
+
while (node && depth < 64) {
|
|
6257
|
+
if (node === document.body || node === document.documentElement) {
|
|
6258
|
+
return null;
|
|
6259
|
+
}
|
|
6260
|
+
const { overflowY } = getComputedStyle(node);
|
|
6261
|
+
if ((overflowY === 'auto' ||
|
|
6262
|
+
overflowY === 'scroll' ||
|
|
6263
|
+
overflowY === 'overlay') &&
|
|
6264
|
+
node.scrollHeight > node.clientHeight + 1) {
|
|
6265
|
+
return node;
|
|
6266
|
+
}
|
|
6267
|
+
node = node.parentElement;
|
|
6268
|
+
depth += 1;
|
|
6269
|
+
}
|
|
6270
|
+
return null;
|
|
6271
|
+
}
|
|
6183
6272
|
isFocusableElement(el) {
|
|
6184
6273
|
if (el.hasAttribute('disabled')) {
|
|
6185
6274
|
return false;
|
|
@@ -6195,11 +6284,11 @@ class ValidationSummaryComponent {
|
|
|
6195
6284
|
return tab != null && tab !== '-1';
|
|
6196
6285
|
}
|
|
6197
6286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationSummaryComponent, isStandalone: true, selector: "app-validation-summary", inputs: { messages: "messages", items: "items", summaryHeading: ["title", "summaryHeading"], visible: ["visible", "visible", booleanAttribute], pinned: ["pinned", "pinned", booleanAttribute], variant: "variant", compact: ["compact", "compact", booleanAttribute], panelMaxHeight: "panelMaxHeight", scrollBehavior: "scrollBehavior", beforeItemActivate: "beforeItemActivate", showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute], showListCollapseToggle: ["showListCollapseToggle", "showListCollapseToggle", booleanAttribute], closeButtonLabel: "closeButtonLabel", fieldNavigateHint: "fieldNavigateHint" }, outputs: { panelClose: "panelClose" }, host: { properties: { "class": "this.hostClass", "attr.hidden": "this.hostHidden" } }, usesOnChanges: true, ngImport: i0, template: "@if (isShown) {\r\n<div class=\"validation-summary__panel\" role=\"region\"\r\n [attr.aria-labelledby]=\"summaryHeading.trim() ? titleElementId : null\"\r\n [attr.aria-label]=\"summaryHeading.trim() ? null : 'Resumo de valida\u00E7\u00E3o'\"\r\n [class.validation-summary__panel--pinned]=\"pinned\"\r\n [class.validation-summary__panel--pinned-open]=\"pinned && pinnedOpen\"\r\n [class.validation-summary__panel--list-collapsed]=\"!panelBodyExpanded\">\r\n <div class=\"validation-summary__head\">\r\n @if (showListCollapseToggle) {\r\n <button type=\"button\" class=\"validation-summary__collapse-toggle\" (click)=\"toggleListBody()\"\r\n [attr.aria-expanded]=\"panelBodyExpanded\" [attr.aria-controls]=\"listRegionId\"\r\n [attr.aria-label]=\"panelBodyExpanded ? 'Recolher lista de erros' : 'Expandir lista de erros'\">\r\n <i class=\"fa-solid\" aria-hidden=\"true\" [class.fa-chevron-up]=\"panelBodyExpanded\"\r\n [class.fa-chevron-down]=\"!panelBodyExpanded\"></i>\r\n </button>\r\n }\r\n @if (summaryHeading.trim()) {\r\n <h3 class=\"validation-summary__title\" [id]=\"titleElementId\">\r\n {{ summaryHeading }}\r\n </h3>\r\n }\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"validation-summary__close\" (click)=\"onCloseClick()\">\r\n {{ closeButtonLabel }}\r\n </button>\r\n }\r\n </div>\r\n <div class=\"validation-summary__list-wrap\" [id]=\"listRegionId\"\r\n [class.validation-summary__list-wrap--scrollable]=\"!!panelMaxHeight && panelBodyExpanded\"\r\n [class.validation-summary__list-wrap--collapsed]=\"!panelBodyExpanded\"\r\n [style.max-height]=\"panelBodyExpanded ? (panelMaxHeight || null) : null\" [attr.title]=\"fieldNavigateHint\">\r\n <ul class=\"validation-summary__list\" role=\"list\">\r\n @for (row of resolvedItems; track itemTrackKey(row, $index)) {\r\n <li class=\"validation-summary__item\" role=\"listitem\" (click)=\"onSummaryLinkActivate($event, row)\">\r\n @if (row.fieldId) {\r\n <button type=\"button\" class=\"validation-summary__link\" [attr.title]=\"fieldNavigateHint\">\r\n {{ row.message }}\r\n </button>\r\n } @else {\r\n <span class=\"validation-summary__text\">{{ row.message }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;flex:0 0 auto;align-self:stretch}:host.validation-summary--pinned-host{position:static;display:block;box-sizing:border-box;flex:0 0 auto!important;width:100%;max-width:100%;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible;pointer-events:none}.validation-summary__panel.validation-summary__panel--pinned{position:fixed;z-index:var(--app-z-validation-summary-pinned, 1400);top:max(.65rem,env(safe-area-inset-top,0px));left:1rem;right:1rem;width:auto;max-width:min(100%,52rem);margin-left:auto;margin-right:auto;box-sizing:border-box;pointer-events:auto;box-shadow:0 4px 6px -1px #00000014,0 10px 24px -6px #0000001f;transform:none;opacity:0;transition:opacity .2s ease-out}.validation-summary__panel.validation-summary__panel--pinned.validation-summary__panel--pinned-open{opacity:1}.validation-summary__panel{width:100%;border-radius:10px;padding:.85rem 1rem;box-sizing:border-box;border:1px solid transparent}.validation-summary__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.45rem .75rem;margin-bottom:.55rem}.validation-summary__panel--list-collapsed .validation-summary__head{margin-bottom:0}.validation-summary__collapse-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.8rem;line-height:1;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__collapse-toggle:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__collapse-toggle:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__title{margin:0;flex:1 1 auto;min-width:0;font-size:1rem;font-weight:600;line-height:1.35;user-select:none;-webkit-user-select:none}.validation-summary__close{flex-shrink:0;margin:0 0 0 auto;padding:.3rem .7rem;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.85rem;font-weight:500;font-family:inherit;line-height:1.3;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__close:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__close:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__list-wrap{min-width:0;user-select:none;-webkit-user-select:none;overflow:hidden;transition:max-height .28s ease,opacity .22s ease,margin .2s ease}.validation-summary__list-wrap--collapsed{max-height:0!important;opacity:0;margin:0;padding:0;pointer-events:none}.validation-summary__list-wrap--scrollable{overflow-y:auto;overflow-x:hidden;padding-right:.15rem;scrollbar-gutter:stable}.validation-summary__list{margin:0;padding:0;list-style:none}.validation-summary__item{display:flex;align-items:flex-start;gap:.4rem;margin:.2rem 0;padding:0;line-height:1.45;color:var(--ui-validation-summary-text, #1a1a1a);user-select:none;-webkit-user-select:none}.validation-summary__item:before{content:\"\\2022\";flex-shrink:0;line-height:inherit;color:var(--ui-validation-summary-text, #1a1a1a)}.validation-summary__text{display:inline;font:inherit;user-select:none;-webkit-user-select:none}.validation-summary__link{flex:1;min-width:0;display:block;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:.12em;cursor:pointer;user-select:none;-webkit-user-select:none}.validation-summary__link:hover{color:var(--ui-validation-summary-link-hover, #0d47a1)}.validation-summary__link:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px;border-radius:4px}:host.validation-summary--error .validation-summary__link:hover{color:var(--app-color-error, #b91c1c)}:host.validation-summary--error .validation-summary__panel{background:var(--ui-validation-summary-bg-error, #ffebee);border-color:var(--ui-validation-summary-border-error, #ffcdd2)}:host.validation-summary--error .validation-summary__title{color:var(--ui-validation-summary-title-error, #b71c1c)}:host.validation-summary--warning .validation-summary__panel{background:var(--ui-validation-summary-bg-warning, #fff8e1);border-color:var(--ui-validation-summary-border-warning, #ffe082)}:host.validation-summary--warning .validation-summary__title{color:var(--ui-validation-summary-title-warning, #e65100)}:host.validation-summary--warning .validation-summary__close{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle:hover{border-color:#e651008c}:host.validation-summary--info .validation-summary__panel{background:var(--ui-validation-summary-bg-info, #e3f2fd);border-color:var(--ui-validation-summary-border-info, #90caf9)}:host.validation-summary--info .validation-summary__title{color:var(--ui-validation-summary-title-info, #0d47a1)}:host.validation-summary--info .validation-summary__close{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle:hover{border-color:#0d47a18c}:host.validation-summary--compact .validation-summary__panel{padding:.55rem .7rem}:host.validation-summary--compact .validation-summary__head{margin-bottom:.35rem}:host.validation-summary--compact .validation-summary__title{font-size:.92rem}:host.validation-summary--compact .validation-summary__list{padding-left:0}:host.validation-summary--compact .validation-summary__item{font-size:.88rem;margin:.12rem 0}:host.validation-summary--compact .validation-summary__collapse-toggle{width:1.75rem;height:1.75rem;font-size:.72rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationSummaryComponent, isStandalone: true, selector: "app-validation-summary", inputs: { messages: "messages", items: "items", summaryHeading: ["title", "summaryHeading"], visible: ["visible", "visible", booleanAttribute], pinned: ["pinned", "pinned", booleanAttribute], autoScrollOnReveal: ["autoScrollOnReveal", "autoScrollOnReveal", booleanAttribute], unpinnedScrollTick: "unpinnedScrollTick", variant: "variant", compact: ["compact", "compact", booleanAttribute], panelMaxHeight: "panelMaxHeight", scrollBehavior: "scrollBehavior", beforeItemActivate: "beforeItemActivate", showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute], showListCollapseToggle: ["showListCollapseToggle", "showListCollapseToggle", booleanAttribute], closeButtonLabel: "closeButtonLabel", fieldNavigateHint: "fieldNavigateHint" }, outputs: { panelClose: "panelClose" }, host: { properties: { "class": "this.hostClass", "attr.hidden": "this.hostHidden" } }, usesOnChanges: true, ngImport: i0, template: "@if (isShown) {\r\n<div class=\"validation-summary__panel\" role=\"region\"\r\n [attr.aria-labelledby]=\"summaryHeading.trim() ? titleElementId : null\"\r\n [attr.aria-label]=\"summaryHeading.trim() ? null : 'Resumo de valida\u00E7\u00E3o'\"\r\n [class.validation-summary__panel--pinned]=\"pinned\"\r\n [class.validation-summary__panel--pinned-open]=\"pinned && pinnedOpen\"\r\n [class.validation-summary__panel--list-collapsed]=\"!panelBodyExpanded\">\r\n <div class=\"validation-summary__head\">\r\n @if (showListCollapseToggle) {\r\n <button type=\"button\" class=\"validation-summary__collapse-toggle\" (click)=\"toggleListBody()\"\r\n [attr.aria-expanded]=\"panelBodyExpanded\" [attr.aria-controls]=\"listRegionId\"\r\n [attr.aria-label]=\"panelBodyExpanded ? 'Recolher lista de erros' : 'Expandir lista de erros'\">\r\n <i class=\"fa-solid\" aria-hidden=\"true\" [class.fa-chevron-up]=\"panelBodyExpanded\"\r\n [class.fa-chevron-down]=\"!panelBodyExpanded\"></i>\r\n </button>\r\n }\r\n @if (summaryHeading.trim()) {\r\n <h3 class=\"validation-summary__title\" [id]=\"titleElementId\">\r\n {{ summaryHeading }}\r\n </h3>\r\n }\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"validation-summary__close\" (click)=\"onCloseClick()\">\r\n {{ closeButtonLabel }}\r\n </button>\r\n }\r\n </div>\r\n <div class=\"validation-summary__list-wrap\" [id]=\"listRegionId\"\r\n [class.validation-summary__list-wrap--scrollable]=\"!!panelMaxHeight && panelBodyExpanded\"\r\n [class.validation-summary__list-wrap--collapsed]=\"!panelBodyExpanded\"\r\n [style.max-height]=\"panelBodyExpanded ? (panelMaxHeight || null) : null\" [attr.title]=\"fieldNavigateHint\">\r\n <ul class=\"validation-summary__list\" role=\"list\">\r\n @for (row of resolvedItems; track itemTrackKey(row, $index)) {\r\n <li class=\"validation-summary__item\" role=\"listitem\" (click)=\"onSummaryLinkActivate($event, row)\">\r\n @if (row.fieldId) {\r\n <button type=\"button\" class=\"validation-summary__link\" [attr.title]=\"fieldNavigateHint\">\r\n {{ row.message }}\r\n </button>\r\n } @else {\r\n <span class=\"validation-summary__text\">{{ row.message }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;scroll-margin-top:.75rem;flex:0 0 auto;align-self:stretch}:host.validation-summary--pinned-host{position:static;display:block;box-sizing:border-box;flex:0 0 auto!important;width:100%;max-width:100%;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible;pointer-events:none;scroll-margin-top:0}.validation-summary__panel.validation-summary__panel--pinned{position:fixed;z-index:var(--app-z-validation-summary-pinned, 1400);top:max(.65rem,env(safe-area-inset-top,0px));left:1rem;right:1rem;width:auto;max-width:min(100%,52rem);margin-left:auto;margin-right:auto;box-sizing:border-box;pointer-events:auto;box-shadow:0 4px 6px -1px #00000014,0 10px 24px -6px #0000001f;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;transition:opacity .2s ease-out}.validation-summary__panel.validation-summary__panel--pinned.validation-summary__panel--pinned-open{opacity:1}.validation-summary__panel{width:100%;border-radius:10px;padding:.85rem 1rem;box-sizing:border-box;border:1px solid transparent}.validation-summary__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.45rem .75rem;margin-bottom:.55rem}.validation-summary__panel--list-collapsed .validation-summary__head{margin-bottom:0}.validation-summary__collapse-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.8rem;line-height:1;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__collapse-toggle:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__collapse-toggle:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__title{margin:0;flex:1 1 auto;min-width:0;font-size:1rem;font-weight:600;line-height:1.35;user-select:none;-webkit-user-select:none}.validation-summary__close{flex-shrink:0;margin:0 0 0 auto;padding:.3rem .7rem;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.85rem;font-weight:500;font-family:inherit;line-height:1.3;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__close:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__close:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__list-wrap{min-width:0;user-select:none;-webkit-user-select:none;overflow:hidden;transition:max-height .28s ease,opacity .22s ease,margin .2s ease}.validation-summary__list-wrap--collapsed{max-height:0!important;opacity:0;margin:0;padding:0;pointer-events:none}.validation-summary__list-wrap--scrollable{overflow-y:auto;overflow-x:hidden;padding-right:.15rem;scrollbar-gutter:stable}.validation-summary__list{margin:0;padding:0;list-style:none}.validation-summary__item{display:flex;align-items:flex-start;gap:.4rem;margin:.2rem 0;padding:0;line-height:1.45;color:var(--ui-validation-summary-text, #1a1a1a);user-select:none;-webkit-user-select:none}.validation-summary__item:before{content:\"\\2022\";flex-shrink:0;line-height:inherit;color:var(--ui-validation-summary-text, #1a1a1a)}.validation-summary__text{display:inline;font:inherit;user-select:none;-webkit-user-select:none}.validation-summary__link{flex:1;min-width:0;display:block;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:.12em;cursor:pointer;user-select:none;-webkit-user-select:none}.validation-summary__link:hover{color:var(--ui-validation-summary-link-hover, #0d47a1)}.validation-summary__link:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px;border-radius:4px}:host.validation-summary--error .validation-summary__link:hover{color:var(--app-color-error, #b91c1c)}:host.validation-summary--error .validation-summary__panel{background:var(--ui-validation-summary-bg-error, #ffebee);border-color:var(--ui-validation-summary-border-error, #ffcdd2)}:host.validation-summary--error .validation-summary__title{color:var(--ui-validation-summary-title-error, #b71c1c)}:host.validation-summary--warning .validation-summary__panel{background:var(--ui-validation-summary-bg-warning, #fff8e1);border-color:var(--ui-validation-summary-border-warning, #ffe082)}:host.validation-summary--warning .validation-summary__title{color:var(--ui-validation-summary-title-warning, #e65100)}:host.validation-summary--warning .validation-summary__close{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle:hover{border-color:#e651008c}:host.validation-summary--info .validation-summary__panel{background:var(--ui-validation-summary-bg-info, #e3f2fd);border-color:var(--ui-validation-summary-border-info, #90caf9)}:host.validation-summary--info .validation-summary__title{color:var(--ui-validation-summary-title-info, #0d47a1)}:host.validation-summary--info .validation-summary__close{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle:hover{border-color:#0d47a18c}:host.validation-summary--compact .validation-summary__panel{padding:.55rem .7rem}:host.validation-summary--compact .validation-summary__head{margin-bottom:.35rem}:host.validation-summary--compact .validation-summary__title{font-size:.92rem}:host.validation-summary--compact .validation-summary__list{padding-left:0}:host.validation-summary--compact .validation-summary__item{font-size:.88rem;margin:.12rem 0}:host.validation-summary--compact .validation-summary__collapse-toggle{width:1.75rem;height:1.75rem;font-size:.72rem}@media(max-width:30rem){.validation-summary__title{font-size:.875rem}:host.validation-summary--compact .validation-summary__title{font-size:.82rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6199
6288
|
}
|
|
6200
6289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationSummaryComponent, decorators: [{
|
|
6201
6290
|
type: Component,
|
|
6202
|
-
args: [{ selector: 'app-validation-summary', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isShown) {\r\n<div class=\"validation-summary__panel\" role=\"region\"\r\n [attr.aria-labelledby]=\"summaryHeading.trim() ? titleElementId : null\"\r\n [attr.aria-label]=\"summaryHeading.trim() ? null : 'Resumo de valida\u00E7\u00E3o'\"\r\n [class.validation-summary__panel--pinned]=\"pinned\"\r\n [class.validation-summary__panel--pinned-open]=\"pinned && pinnedOpen\"\r\n [class.validation-summary__panel--list-collapsed]=\"!panelBodyExpanded\">\r\n <div class=\"validation-summary__head\">\r\n @if (showListCollapseToggle) {\r\n <button type=\"button\" class=\"validation-summary__collapse-toggle\" (click)=\"toggleListBody()\"\r\n [attr.aria-expanded]=\"panelBodyExpanded\" [attr.aria-controls]=\"listRegionId\"\r\n [attr.aria-label]=\"panelBodyExpanded ? 'Recolher lista de erros' : 'Expandir lista de erros'\">\r\n <i class=\"fa-solid\" aria-hidden=\"true\" [class.fa-chevron-up]=\"panelBodyExpanded\"\r\n [class.fa-chevron-down]=\"!panelBodyExpanded\"></i>\r\n </button>\r\n }\r\n @if (summaryHeading.trim()) {\r\n <h3 class=\"validation-summary__title\" [id]=\"titleElementId\">\r\n {{ summaryHeading }}\r\n </h3>\r\n }\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"validation-summary__close\" (click)=\"onCloseClick()\">\r\n {{ closeButtonLabel }}\r\n </button>\r\n }\r\n </div>\r\n <div class=\"validation-summary__list-wrap\" [id]=\"listRegionId\"\r\n [class.validation-summary__list-wrap--scrollable]=\"!!panelMaxHeight && panelBodyExpanded\"\r\n [class.validation-summary__list-wrap--collapsed]=\"!panelBodyExpanded\"\r\n [style.max-height]=\"panelBodyExpanded ? (panelMaxHeight || null) : null\" [attr.title]=\"fieldNavigateHint\">\r\n <ul class=\"validation-summary__list\" role=\"list\">\r\n @for (row of resolvedItems; track itemTrackKey(row, $index)) {\r\n <li class=\"validation-summary__item\" role=\"listitem\" (click)=\"onSummaryLinkActivate($event, row)\">\r\n @if (row.fieldId) {\r\n <button type=\"button\" class=\"validation-summary__link\" [attr.title]=\"fieldNavigateHint\">\r\n {{ row.message }}\r\n </button>\r\n } @else {\r\n <span class=\"validation-summary__text\">{{ row.message }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;flex:0 0 auto;align-self:stretch}:host.validation-summary--pinned-host{position:static;display:block;box-sizing:border-box;flex:0 0 auto!important;width:100%;max-width:100%;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible;pointer-events:none}.validation-summary__panel.validation-summary__panel--pinned{position:fixed;z-index:var(--app-z-validation-summary-pinned, 1400);top:max(.65rem,env(safe-area-inset-top,0px));left:1rem;right:1rem;width:auto;max-width:min(100%,52rem);margin-left:auto;margin-right:auto;box-sizing:border-box;pointer-events:auto;box-shadow:0 4px 6px -1px #00000014,0 10px 24px -6px #0000001f;transform:
|
|
6291
|
+
args: [{ selector: 'app-validation-summary', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isShown) {\r\n<div class=\"validation-summary__panel\" role=\"region\"\r\n [attr.aria-labelledby]=\"summaryHeading.trim() ? titleElementId : null\"\r\n [attr.aria-label]=\"summaryHeading.trim() ? null : 'Resumo de valida\u00E7\u00E3o'\"\r\n [class.validation-summary__panel--pinned]=\"pinned\"\r\n [class.validation-summary__panel--pinned-open]=\"pinned && pinnedOpen\"\r\n [class.validation-summary__panel--list-collapsed]=\"!panelBodyExpanded\">\r\n <div class=\"validation-summary__head\">\r\n @if (showListCollapseToggle) {\r\n <button type=\"button\" class=\"validation-summary__collapse-toggle\" (click)=\"toggleListBody()\"\r\n [attr.aria-expanded]=\"panelBodyExpanded\" [attr.aria-controls]=\"listRegionId\"\r\n [attr.aria-label]=\"panelBodyExpanded ? 'Recolher lista de erros' : 'Expandir lista de erros'\">\r\n <i class=\"fa-solid\" aria-hidden=\"true\" [class.fa-chevron-up]=\"panelBodyExpanded\"\r\n [class.fa-chevron-down]=\"!panelBodyExpanded\"></i>\r\n </button>\r\n }\r\n @if (summaryHeading.trim()) {\r\n <h3 class=\"validation-summary__title\" [id]=\"titleElementId\">\r\n {{ summaryHeading }}\r\n </h3>\r\n }\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"validation-summary__close\" (click)=\"onCloseClick()\">\r\n {{ closeButtonLabel }}\r\n </button>\r\n }\r\n </div>\r\n <div class=\"validation-summary__list-wrap\" [id]=\"listRegionId\"\r\n [class.validation-summary__list-wrap--scrollable]=\"!!panelMaxHeight && panelBodyExpanded\"\r\n [class.validation-summary__list-wrap--collapsed]=\"!panelBodyExpanded\"\r\n [style.max-height]=\"panelBodyExpanded ? (panelMaxHeight || null) : null\" [attr.title]=\"fieldNavigateHint\">\r\n <ul class=\"validation-summary__list\" role=\"list\">\r\n @for (row of resolvedItems; track itemTrackKey(row, $index)) {\r\n <li class=\"validation-summary__item\" role=\"listitem\" (click)=\"onSummaryLinkActivate($event, row)\">\r\n @if (row.fieldId) {\r\n <button type=\"button\" class=\"validation-summary__link\" [attr.title]=\"fieldNavigateHint\">\r\n {{ row.message }}\r\n </button>\r\n } @else {\r\n <span class=\"validation-summary__text\">{{ row.message }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;scroll-margin-top:.75rem;flex:0 0 auto;align-self:stretch}:host.validation-summary--pinned-host{position:static;display:block;box-sizing:border-box;flex:0 0 auto!important;width:100%;max-width:100%;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible;pointer-events:none;scroll-margin-top:0}.validation-summary__panel.validation-summary__panel--pinned{position:fixed;z-index:var(--app-z-validation-summary-pinned, 1400);top:max(.65rem,env(safe-area-inset-top,0px));left:1rem;right:1rem;width:auto;max-width:min(100%,52rem);margin-left:auto;margin-right:auto;box-sizing:border-box;pointer-events:auto;box-shadow:0 4px 6px -1px #00000014,0 10px 24px -6px #0000001f;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;transition:opacity .2s ease-out}.validation-summary__panel.validation-summary__panel--pinned.validation-summary__panel--pinned-open{opacity:1}.validation-summary__panel{width:100%;border-radius:10px;padding:.85rem 1rem;box-sizing:border-box;border:1px solid transparent}.validation-summary__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.45rem .75rem;margin-bottom:.55rem}.validation-summary__panel--list-collapsed .validation-summary__head{margin-bottom:0}.validation-summary__collapse-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.8rem;line-height:1;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__collapse-toggle:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__collapse-toggle:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__title{margin:0;flex:1 1 auto;min-width:0;font-size:1rem;font-weight:600;line-height:1.35;user-select:none;-webkit-user-select:none}.validation-summary__close{flex-shrink:0;margin:0 0 0 auto;padding:.3rem .7rem;border:1px solid rgba(183,28,28,.35);border-radius:8px;background:#ffffffbf;color:var(--ui-validation-summary-title-error, #b71c1c);font-size:.85rem;font-weight:500;font-family:inherit;line-height:1.3;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}.validation-summary__close:hover{background:#fff;border-color:#b71c1c8c}.validation-summary__close:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px}.validation-summary__list-wrap{min-width:0;user-select:none;-webkit-user-select:none;overflow:hidden;transition:max-height .28s ease,opacity .22s ease,margin .2s ease}.validation-summary__list-wrap--collapsed{max-height:0!important;opacity:0;margin:0;padding:0;pointer-events:none}.validation-summary__list-wrap--scrollable{overflow-y:auto;overflow-x:hidden;padding-right:.15rem;scrollbar-gutter:stable}.validation-summary__list{margin:0;padding:0;list-style:none}.validation-summary__item{display:flex;align-items:flex-start;gap:.4rem;margin:.2rem 0;padding:0;line-height:1.45;color:var(--ui-validation-summary-text, #1a1a1a);user-select:none;-webkit-user-select:none}.validation-summary__item:before{content:\"\\2022\";flex-shrink:0;line-height:inherit;color:var(--ui-validation-summary-text, #1a1a1a)}.validation-summary__text{display:inline;font:inherit;user-select:none;-webkit-user-select:none}.validation-summary__link{flex:1;min-width:0;display:block;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:.12em;cursor:pointer;user-select:none;-webkit-user-select:none}.validation-summary__link:hover{color:var(--ui-validation-summary-link-hover, #0d47a1)}.validation-summary__link:focus-visible{outline:2px solid var(--app-color-validation-focus-ring, rgba(185, 28, 28, .45));outline-offset:2px;border-radius:4px}:host.validation-summary--error .validation-summary__link:hover{color:var(--app-color-error, #b91c1c)}:host.validation-summary--error .validation-summary__panel{background:var(--ui-validation-summary-bg-error, #ffebee);border-color:var(--ui-validation-summary-border-error, #ffcdd2)}:host.validation-summary--error .validation-summary__title{color:var(--ui-validation-summary-title-error, #b71c1c)}:host.validation-summary--warning .validation-summary__panel{background:var(--ui-validation-summary-bg-warning, #fff8e1);border-color:var(--ui-validation-summary-border-warning, #ffe082)}:host.validation-summary--warning .validation-summary__title{color:var(--ui-validation-summary-title-warning, #e65100)}:host.validation-summary--warning .validation-summary__close{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-warning, #e65100);border-color:#e6510059}:host.validation-summary--warning .validation-summary__collapse-toggle:hover{border-color:#e651008c}:host.validation-summary--info .validation-summary__panel{background:var(--ui-validation-summary-bg-info, #e3f2fd);border-color:var(--ui-validation-summary-border-info, #90caf9)}:host.validation-summary--info .validation-summary__title{color:var(--ui-validation-summary-title-info, #0d47a1)}:host.validation-summary--info .validation-summary__close{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle{color:var(--ui-validation-summary-title-info, #0d47a1);border-color:#0d47a159}:host.validation-summary--info .validation-summary__collapse-toggle:hover{border-color:#0d47a18c}:host.validation-summary--compact .validation-summary__panel{padding:.55rem .7rem}:host.validation-summary--compact .validation-summary__head{margin-bottom:.35rem}:host.validation-summary--compact .validation-summary__title{font-size:.92rem}:host.validation-summary--compact .validation-summary__list{padding-left:0}:host.validation-summary--compact .validation-summary__item{font-size:.88rem;margin:.12rem 0}:host.validation-summary--compact .validation-summary__collapse-toggle{width:1.75rem;height:1.75rem;font-size:.72rem}@media(max-width:30rem){.validation-summary__title{font-size:.875rem}:host.validation-summary--compact .validation-summary__title{font-size:.82rem}}\n"] }]
|
|
6203
6292
|
}], propDecorators: { messages: [{
|
|
6204
6293
|
type: Input
|
|
6205
6294
|
}], items: [{
|
|
@@ -6213,6 +6302,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
6213
6302
|
}], pinned: [{
|
|
6214
6303
|
type: Input,
|
|
6215
6304
|
args: [{ transform: booleanAttribute }]
|
|
6305
|
+
}], autoScrollOnReveal: [{
|
|
6306
|
+
type: Input,
|
|
6307
|
+
args: [{ transform: booleanAttribute }]
|
|
6308
|
+
}], unpinnedScrollTick: [{
|
|
6309
|
+
type: Input
|
|
6216
6310
|
}], variant: [{
|
|
6217
6311
|
type: Input
|
|
6218
6312
|
}], compact: [{
|