structra-ui 0.1.73 → 0.1.75
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
|
@@ -829,6 +829,28 @@ function buildMenuRows(nodes) {
|
|
|
829
829
|
function focusableActionCount(rows) {
|
|
830
830
|
return rows.filter((r) => (r.kind === 'action' || r.kind === 'submenu') && r.focusIndex !== null).length;
|
|
831
831
|
}
|
|
832
|
+
/**
|
|
833
|
+
* `true` se `selectedId` for id de um item de acção (folha) em qualquer profundidade.
|
|
834
|
+
* Usado para marcar o gatilho de submenu como selected quando a selecção actual é um filho.
|
|
835
|
+
*/
|
|
836
|
+
function menuNodeTreeContainsId(items, selectedId) {
|
|
837
|
+
for (const node of items) {
|
|
838
|
+
if (node.kind === 'divider') {
|
|
839
|
+
continue;
|
|
840
|
+
}
|
|
841
|
+
if (node.kind === 'item') {
|
|
842
|
+
if (node.id === selectedId) {
|
|
843
|
+
return true;
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
else {
|
|
847
|
+
if (menuNodeTreeContainsId(node.items, selectedId)) {
|
|
848
|
+
return true;
|
|
849
|
+
}
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
return false;
|
|
853
|
+
}
|
|
832
854
|
|
|
833
855
|
const GAP$1 = 4;
|
|
834
856
|
/**
|
|
@@ -907,6 +929,13 @@ class MenuListComponent {
|
|
|
907
929
|
this.activeIndex = -1;
|
|
908
930
|
}
|
|
909
931
|
}
|
|
932
|
+
if (changes['selectedItemId'] ||
|
|
933
|
+
changes['items'] ||
|
|
934
|
+
changes['compressText'] ||
|
|
935
|
+
changes['dense'] ||
|
|
936
|
+
changes['menuId']) {
|
|
937
|
+
this.cdr.markForCheck();
|
|
938
|
+
}
|
|
910
939
|
}
|
|
911
940
|
submenuRowKey(row, index) {
|
|
912
941
|
return row.kind === 'submenu' ? `sm-${String(row.item.id)}-${index}` : '';
|
|
@@ -1071,7 +1100,8 @@ class MenuListComponent {
|
|
|
1071
1100
|
return row.item.id === this.selectedItemId;
|
|
1072
1101
|
}
|
|
1073
1102
|
if (row.kind === 'submenu') {
|
|
1074
|
-
return row.item.id === this.selectedItemId
|
|
1103
|
+
return (row.item.id === this.selectedItemId ||
|
|
1104
|
+
menuNodeTreeContainsId(row.item.items, this.selectedItemId));
|
|
1075
1105
|
}
|
|
1076
1106
|
return false;
|
|
1077
1107
|
}
|
|
@@ -1195,7 +1225,7 @@ class MenuListComponent {
|
|
|
1195
1225
|
}
|
|
1196
1226
|
}
|
|
1197
1227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { items: "items", menuId: "menuId", dense: ["dense", "dense", booleanAttribute], nested: ["nested", "nested", booleanAttribute], selectedItemId: "selectedItemId", compressText: ["compressText", "compressText", booleanAttribute] }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"menu-list\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of rows; track idx; let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider />\n }\n @case ('group') {\n <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent;box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListComponent), selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { items: "items", menuId: "menuId", dense: ["dense", "dense", booleanAttribute], nested: ["nested", "nested", booleanAttribute], selectedItemId: "selectedItemId", compressText: ["compressText", "compressText", booleanAttribute] }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"menu-list\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of rows; track idx; let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider />\n }\n @case ('group') {\n <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListComponent), selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1199
1229
|
}
|
|
1200
1230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
1201
1231
|
type: Component,
|
|
@@ -1206,7 +1236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1206
1236
|
CdkOverlayOrigin,
|
|
1207
1237
|
MenuDividerComponent,
|
|
1208
1238
|
MenuGroupComponent,
|
|
1209
|
-
], template: "<div\n class=\"menu-list\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of rows; track idx; let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider />\n }\n @case ('group') {\n <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent;box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"] }]
|
|
1239
|
+
], template: "<div\n class=\"menu-list\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of rows; track idx; let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider />\n }\n @case ('group') {\n <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"] }]
|
|
1210
1240
|
}], propDecorators: { items: [{
|
|
1211
1241
|
type: Input,
|
|
1212
1242
|
args: [{ required: true }]
|
|
@@ -5704,11 +5734,11 @@ class FormGroupComponent {
|
|
|
5704
5734
|
this.prevRootFormSubmitted = submitted;
|
|
5705
5735
|
}
|
|
5706
5736
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "app-form-group", inputs: { titulo: "titulo", subtitulo: "subtitulo", collapsible: ["collapsible", "collapsible", booleanAttribute], foldable: ["foldable", "foldable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readonly", "readOnly", booleanAttribute], dense: ["dense", "dense", booleanAttribute], canMoveUp: ["canMoveUp", "canMoveUp", booleanAttribute], canMoveDown: ["canMoveDown", "canMoveDown", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], showDivider: ["showDivider", "showDivider", booleanAttribute], variant: "variant", destroyOnCollapse: ["destroyOnCollapse", "destroyOnCollapse", booleanAttribute], skipBodyChildStacking: ["skipBodyChildStacking", "skipBodyChildStacking", booleanAttribute], groupInvalid: ["groupInvalid", "groupInvalid", booleanAttribute], formGroupPath: "formGroupPath", uxSubmittedPass: ["uxSubmittedPass", "uxSubmittedPass", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange", moveUp: "moveUp", moveDown: "moveDown" }, host: { properties: { "class": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: "@if (showHeaderBar) {\n <div\n class=\"form-group__header\"\n [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n [class.form-group__header--interactive]=\"headerIsInteractive\"\n [attr.role]=\"headerIsInteractive ? 'button' : null\"\n [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onHeaderClick()\"\n (keydown)=\"onHeaderKeydown($event)\"\n >\n <div\n class=\"form-group__header-main\"\n [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n >\n <span\n class=\"form-group__chevron\"\n [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n aria-hidden=\"true\"\n >\n @if (collapsible && foldable && isCollapsed) {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n } @else {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n />\n </svg>\n }\n </span>\n <div class=\"form-group__titles\">\n @if (titulo.trim()) {\n <h3 class=\"form-group__title\">{{ titulo }}</h3>\n }\n @if (subtitulo.trim()) {\n <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n }\n </div>\n </div>\n <div class=\"form-group__header-trailing\">\n <span\n class=\"form-group__invalid-flag\"\n [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n >\n <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n />\n </svg>\n </span>\n @if (canMoveUp || canMoveDown) {\n <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n @if (canMoveUp) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para cima\"\n (click)=\"onMoveUpClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n />\n </svg>\n </button>\n }\n @if (canMoveDown) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para baixo\"\n (click)=\"onMoveDownClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n </div>\n}\n\n@if (renderBodyInDom) {\n <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n <div\n class=\"form-group__body-stack\"\n [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive .form-group__title,.form-group__header--interactive .form-group__subtitle{user-select:none;-webkit-user-select:none}:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__titles,:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__title,:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__subtitle{user-select:none;-webkit-user-select:none}:host.form-group--readonly .form-group__header .form-group__titles,:host.form-group--readonly .form-group__header .form-group__title,:host.form-group--readonly .form-group__header .form-group__subtitle{user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5737
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "app-form-group", inputs: { titulo: "titulo", subtitulo: "subtitulo", collapsible: ["collapsible", "collapsible", booleanAttribute], foldable: ["foldable", "foldable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readonly", "readOnly", booleanAttribute], dense: ["dense", "dense", booleanAttribute], canMoveUp: ["canMoveUp", "canMoveUp", booleanAttribute], canMoveDown: ["canMoveDown", "canMoveDown", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], showDivider: ["showDivider", "showDivider", booleanAttribute], variant: "variant", destroyOnCollapse: ["destroyOnCollapse", "destroyOnCollapse", booleanAttribute], skipBodyChildStacking: ["skipBodyChildStacking", "skipBodyChildStacking", booleanAttribute], groupInvalid: ["groupInvalid", "groupInvalid", booleanAttribute], formGroupPath: "formGroupPath", uxSubmittedPass: ["uxSubmittedPass", "uxSubmittedPass", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange", moveUp: "moveUp", moveDown: "moveDown" }, host: { properties: { "class": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: "@if (showHeaderBar) {\n <div\n class=\"form-group__header\"\n [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n [class.form-group__header--interactive]=\"headerIsInteractive\"\n [attr.role]=\"headerIsInteractive ? 'button' : null\"\n [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onHeaderClick()\"\n (keydown)=\"onHeaderKeydown($event)\"\n >\n <div\n class=\"form-group__header-main\"\n [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n >\n <span\n class=\"form-group__chevron\"\n [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n aria-hidden=\"true\"\n >\n @if (collapsible && foldable && isCollapsed) {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n } @else {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n />\n </svg>\n }\n </span>\n <div class=\"form-group__titles\">\n @if (titulo.trim()) {\n <h3 class=\"form-group__title\">{{ titulo }}</h3>\n }\n @if (subtitulo.trim()) {\n <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n }\n </div>\n </div>\n <div class=\"form-group__header-trailing\">\n <span\n class=\"form-group__invalid-flag\"\n [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n >\n <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n />\n </svg>\n </span>\n @if (canMoveUp || canMoveDown) {\n <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n @if (canMoveUp) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para cima\"\n (click)=\"onMoveUpClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n />\n </svg>\n </button>\n }\n @if (canMoveDown) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para baixo\"\n (click)=\"onMoveDownClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n </div>\n}\n\n@if (renderBodyInDom) {\n <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n <div\n class=\"form-group__body-stack\"\n [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header,.form-group__header *{user-select:none;-webkit-user-select:none;-moz-user-select:none}.form-group__header--interactive{cursor:pointer}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5708
5738
|
}
|
|
5709
5739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
5710
5740
|
type: Component,
|
|
5711
|
-
args: [{ selector: 'app-form-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeaderBar) {\n <div\n class=\"form-group__header\"\n [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n [class.form-group__header--interactive]=\"headerIsInteractive\"\n [attr.role]=\"headerIsInteractive ? 'button' : null\"\n [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onHeaderClick()\"\n (keydown)=\"onHeaderKeydown($event)\"\n >\n <div\n class=\"form-group__header-main\"\n [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n >\n <span\n class=\"form-group__chevron\"\n [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n aria-hidden=\"true\"\n >\n @if (collapsible && foldable && isCollapsed) {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n } @else {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n />\n </svg>\n }\n </span>\n <div class=\"form-group__titles\">\n @if (titulo.trim()) {\n <h3 class=\"form-group__title\">{{ titulo }}</h3>\n }\n @if (subtitulo.trim()) {\n <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n }\n </div>\n </div>\n <div class=\"form-group__header-trailing\">\n <span\n class=\"form-group__invalid-flag\"\n [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n >\n <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n />\n </svg>\n </span>\n @if (canMoveUp || canMoveDown) {\n <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n @if (canMoveUp) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para cima\"\n (click)=\"onMoveUpClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n />\n </svg>\n </button>\n }\n @if (canMoveDown) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para baixo\"\n (click)=\"onMoveDownClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n </div>\n}\n\n@if (renderBodyInDom) {\n <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n <div\n class=\"form-group__body-stack\"\n [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive .form-group__title,.form-group__header--interactive .form-group__subtitle{user-select:none;-webkit-user-select:none}:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__titles,:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__title,:host.form-group--collapsible.form-group--fold-locked .form-group__header .form-group__subtitle{user-select:none;-webkit-user-select:none}:host.form-group--readonly .form-group__header .form-group__titles,:host.form-group--readonly .form-group__header .form-group__title,:host.form-group--readonly .form-group__header .form-group__subtitle{user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"] }]
|
|
5741
|
+
args: [{ selector: 'app-form-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeaderBar) {\n <div\n class=\"form-group__header\"\n [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n [class.form-group__header--interactive]=\"headerIsInteractive\"\n [attr.role]=\"headerIsInteractive ? 'button' : null\"\n [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onHeaderClick()\"\n (keydown)=\"onHeaderKeydown($event)\"\n >\n <div\n class=\"form-group__header-main\"\n [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n >\n <span\n class=\"form-group__chevron\"\n [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n aria-hidden=\"true\"\n >\n @if (collapsible && foldable && isCollapsed) {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n } @else {\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n />\n </svg>\n }\n </span>\n <div class=\"form-group__titles\">\n @if (titulo.trim()) {\n <h3 class=\"form-group__title\">{{ titulo }}</h3>\n }\n @if (subtitulo.trim()) {\n <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n }\n </div>\n </div>\n <div class=\"form-group__header-trailing\">\n <span\n class=\"form-group__invalid-flag\"\n [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n >\n <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n />\n </svg>\n </span>\n @if (canMoveUp || canMoveDown) {\n <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n @if (canMoveUp) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para cima\"\n (click)=\"onMoveUpClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n />\n </svg>\n </button>\n }\n @if (canMoveDown) {\n <button\n type=\"button\"\n class=\"form-group__reorder-btn\"\n [disabled]=\"disabled\"\n aria-label=\"Mover grupo para baixo\"\n (click)=\"onMoveDownClick($event)\"\n >\n <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n </div>\n}\n\n@if (renderBodyInDom) {\n <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n <div\n class=\"form-group__body-stack\"\n [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header,.form-group__header *{user-select:none;-webkit-user-select:none;-moz-user-select:none}.form-group__header--interactive{cursor:pointer}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"] }]
|
|
5712
5742
|
}], propDecorators: { titulo: [{
|
|
5713
5743
|
type: Input,
|
|
5714
5744
|
args: [{ required: true }]
|
|
@@ -8159,7 +8189,13 @@ class DrawerComponent {
|
|
|
8159
8189
|
if (a instanceof HTMLElement && a !== document.body) {
|
|
8160
8190
|
this.focusPreOpen = a;
|
|
8161
8191
|
}
|
|
8192
|
+
/**
|
|
8193
|
+
* Garante CD na árvore projectada (sidebar / app-menu-list) com OnPush; sem isto, o
|
|
8194
|
+
* realce `option--selected` só surgia após p.ex. `mouseenter` na lista.
|
|
8195
|
+
*/
|
|
8196
|
+
this.cdr.markForCheck();
|
|
8162
8197
|
afterNextRender(() => {
|
|
8198
|
+
this.cdr.markForCheck();
|
|
8163
8199
|
if (this.open) {
|
|
8164
8200
|
this.panelRef?.nativeElement?.focus({ preventScroll: true });
|
|
8165
8201
|
}
|
|
@@ -8231,14 +8267,14 @@ class DrawerComponent {
|
|
|
8231
8267
|
this.focusPreOpen = null;
|
|
8232
8268
|
}
|
|
8233
8269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header class=\"app-drawer__header\">\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--app-color-border, #d4d4d4);background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header class=\"app-drawer__header\">\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--app-color-border, #d4d4d4);background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar{display:none}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8235
8271
|
}
|
|
8236
8272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
8237
8273
|
type: Component,
|
|
8238
8274
|
args: [{ selector: 'app-drawer', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
8239
8275
|
class: 'app-drawer-host',
|
|
8240
8276
|
'[class.app-drawer-host--open]': 'open',
|
|
8241
|
-
}, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header class=\"app-drawer__header\">\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--app-color-border, #d4d4d4);background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"] }]
|
|
8277
|
+
}, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header class=\"app-drawer__header\">\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--app-color-border, #d4d4d4);background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar{display:none}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"] }]
|
|
8242
8278
|
}], propDecorators: { open: [{
|
|
8243
8279
|
type: Input,
|
|
8244
8280
|
args: [{ transform: booleanAttribute }]
|
|
@@ -8924,6 +8960,7 @@ class AppSidebarComponent {
|
|
|
8924
8960
|
}
|
|
8925
8961
|
constructor() {
|
|
8926
8962
|
this.theme = inject(AppThemeService);
|
|
8963
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
8927
8964
|
this.destroyRef = inject(DestroyRef);
|
|
8928
8965
|
this.menuId = 'app-shell-sidebar';
|
|
8929
8966
|
/** Sincronizar com o item de navegação activo (realce persistente). */
|
|
@@ -8940,6 +8977,9 @@ class AppSidebarComponent {
|
|
|
8940
8977
|
this.destroyRef.onDestroy(() => this.clearListRevealTimeout());
|
|
8941
8978
|
}
|
|
8942
8979
|
ngOnChanges(changes) {
|
|
8980
|
+
if (changes['selectedItemId'] || changes['items']) {
|
|
8981
|
+
this.cdr.markForCheck();
|
|
8982
|
+
}
|
|
8943
8983
|
const collapsedCh = changes['collapsed'];
|
|
8944
8984
|
if (!collapsedCh) {
|
|
8945
8985
|
return;
|