structra-ui 0.2.24 → 0.2.26
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 +66 -10
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/structra-ui.css +1 -1
- package/types/structra-ui.d.ts +7 -1
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../structra-ui.css';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, effect, TemplateRef, ContentChild } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -9614,6 +9614,8 @@ class DrawerComponent {
|
|
|
9614
9614
|
this.cdr = inject(ChangeDetectorRef);
|
|
9615
9615
|
this.injector = inject(Injector);
|
|
9616
9616
|
this.hostEl = inject((ElementRef));
|
|
9617
|
+
this.renderer = inject(Renderer2);
|
|
9618
|
+
this.appTheme = inject(AppThemeService);
|
|
9617
9619
|
this.open = false;
|
|
9618
9620
|
this.side = DrawerSide.Right;
|
|
9619
9621
|
this.size = DrawerSize.Md;
|
|
@@ -9628,6 +9630,14 @@ class DrawerComponent {
|
|
|
9628
9630
|
/** Igual ao `app-dialog`: backdrop + painel no `body` para `backdrop-filter` correcto. */
|
|
9629
9631
|
this.bodyRestoreParent = null;
|
|
9630
9632
|
this.bodyRestoreNext = null;
|
|
9633
|
+
/**
|
|
9634
|
+
* O host pode ir para `document.body` ao abrir — sem isto, perde-se `.app-library-theme.theme-*`
|
|
9635
|
+
* herdado da app e os tokens voltam ao azul de `:root`.
|
|
9636
|
+
*/
|
|
9637
|
+
effect(() => {
|
|
9638
|
+
const id = this.appTheme.activeThemeId();
|
|
9639
|
+
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, id);
|
|
9640
|
+
});
|
|
9631
9641
|
}
|
|
9632
9642
|
get panelClasses() {
|
|
9633
9643
|
return {
|
|
@@ -9723,15 +9733,15 @@ class DrawerComponent {
|
|
|
9723
9733
|
this.focusPreOpen = null;
|
|
9724
9734
|
}
|
|
9725
9735
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9726
|
-
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
|
|
9736
|
+
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\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\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:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.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:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);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;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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 }); }
|
|
9727
9737
|
}
|
|
9728
9738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
9729
9739
|
type: Component,
|
|
9730
9740
|
args: [{ selector: 'app-drawer', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9731
9741
|
class: 'app-drawer-host',
|
|
9732
9742
|
'[class.app-drawer-host--open]': 'open',
|
|
9733
|
-
}, 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
|
|
9734
|
-
}], propDecorators: { open: [{
|
|
9743
|
+
}, 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\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\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:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.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:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);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;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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"] }]
|
|
9744
|
+
}], ctorParameters: () => [], propDecorators: { open: [{
|
|
9735
9745
|
type: Input,
|
|
9736
9746
|
args: [{ transform: booleanAttribute }]
|
|
9737
9747
|
}], side: [{
|
|
@@ -10380,11 +10390,11 @@ class AppShellComponent {
|
|
|
10380
10390
|
}
|
|
10381
10391
|
}
|
|
10382
10392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n
|
|
10393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\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:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:100vh;min-height:100dvh;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerComponent, selector: "app-drawer", inputs: ["open", "side", "size", "title", "showCloseButton"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10384
10394
|
}
|
|
10385
10395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
|
|
10386
10396
|
type: Component,
|
|
10387
|
-
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n
|
|
10397
|
+
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\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:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:100vh;min-height:100dvh;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
|
|
10388
10398
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
|
|
10389
10399
|
type: ContentChild,
|
|
10390
10400
|
args: [AppShellSidebarTemplateDirective]
|
|
@@ -10434,11 +10444,22 @@ class AppSidebarComponent {
|
|
|
10434
10444
|
effect(() => {
|
|
10435
10445
|
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10436
10446
|
});
|
|
10447
|
+
/**
|
|
10448
|
+
* CSS global no host (ex. flex utilitários com `!important`) pode sobrepor estilos encapsulados
|
|
10449
|
+
* e centrar o grupo marca+botão. `setProperty(..., 'important')` no DOM ganha na cascata.
|
|
10450
|
+
*/
|
|
10451
|
+
afterNextRender(() => this.scheduleSidebarHeadLayoutGuards());
|
|
10452
|
+
}
|
|
10453
|
+
ngAfterViewInit() {
|
|
10454
|
+
this.scheduleSidebarHeadLayoutGuards();
|
|
10437
10455
|
}
|
|
10438
10456
|
ngOnChanges(changes) {
|
|
10439
10457
|
if (changes['selectedItemId'] || changes['items']) {
|
|
10440
10458
|
this.cdr.markForCheck();
|
|
10441
10459
|
}
|
|
10460
|
+
if (changes['collapsed']) {
|
|
10461
|
+
this.scheduleSidebarHeadLayoutGuards();
|
|
10462
|
+
}
|
|
10442
10463
|
const collapsedCh = changes['collapsed'];
|
|
10443
10464
|
if (!collapsedCh) {
|
|
10444
10465
|
return;
|
|
@@ -10464,12 +10485,47 @@ class AppSidebarComponent {
|
|
|
10464
10485
|
this.listRevealTimeoutId = null;
|
|
10465
10486
|
}
|
|
10466
10487
|
}
|
|
10488
|
+
scheduleSidebarHeadLayoutGuards() {
|
|
10489
|
+
queueMicrotask(() => this.applySidebarHeadLayoutGuards());
|
|
10490
|
+
}
|
|
10491
|
+
applySidebarHeadLayoutGuards() {
|
|
10492
|
+
const root = this.hostEl.nativeElement;
|
|
10493
|
+
const head = root.querySelector('[data-app-sidebar-head]');
|
|
10494
|
+
if (!head) {
|
|
10495
|
+
return;
|
|
10496
|
+
}
|
|
10497
|
+
head.style.setProperty('flex-direction', 'row', 'important');
|
|
10498
|
+
head.style.setProperty('direction', 'ltr', 'important');
|
|
10499
|
+
if (this.collapsed) {
|
|
10500
|
+
head.style.setProperty('justify-content', 'center', 'important');
|
|
10501
|
+
}
|
|
10502
|
+
else {
|
|
10503
|
+
head.style.setProperty('justify-content', 'flex-start', 'important');
|
|
10504
|
+
}
|
|
10505
|
+
const brand = root.querySelector('.app-sidebar__brand');
|
|
10506
|
+
if (brand) {
|
|
10507
|
+
brand.style.setProperty('display', 'flex', 'important');
|
|
10508
|
+
brand.style.setProperty('text-align', 'start', 'important');
|
|
10509
|
+
brand.style.setProperty('justify-content', 'flex-start', 'important');
|
|
10510
|
+
brand.style.setProperty('align-items', 'center', 'important');
|
|
10511
|
+
}
|
|
10512
|
+
const toolbar = root.querySelector('.app-sidebar__toolbar');
|
|
10513
|
+
if (!toolbar || toolbar.children.length === 0) {
|
|
10514
|
+
return;
|
|
10515
|
+
}
|
|
10516
|
+
if (this.collapsed) {
|
|
10517
|
+
toolbar.style.setProperty('margin-inline-start', '0', 'important');
|
|
10518
|
+
}
|
|
10519
|
+
else {
|
|
10520
|
+
toolbar.style.setProperty('margin-inline-start', 'auto', 'important');
|
|
10521
|
+
}
|
|
10522
|
+
}
|
|
10467
10523
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.
|
|
10524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:center;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10469
10525
|
}
|
|
10470
10526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
10471
10527
|
type: Component,
|
|
10472
|
-
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.
|
|
10528
|
+
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:center;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}\n"] }]
|
|
10473
10529
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10474
10530
|
type: Input,
|
|
10475
10531
|
args: [{ required: true }]
|
|
@@ -10571,11 +10627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10571
10627
|
*/
|
|
10572
10628
|
class AppTopbarComponent {
|
|
10573
10629
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AppTopbarComponent, isStandalone: true, selector: "app-topbar", ngImport: i0, template: "<div class=\"app-topbar\" role=\"banner\">\r\n <div class=\"app-topbar__start\">\r\n <ng-content select=\"[appTopbarStart]\" />\r\n </div>\r\n <div class=\"app-topbar__title\">\r\n <ng-content select=\"[appTopbarTitle]\" />\r\n </div>\r\n <div class=\"app-topbar__end\">\r\n <ng-content select=\"[appTopbarEnd]\" />\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.app-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-height:3.25rem;padding:.5rem .85rem;box-sizing:border-box;background:var(--app-color-surface, #fff);border-bottom:1px solid var(--app-color-
|
|
10630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AppTopbarComponent, isStandalone: true, selector: "app-topbar", ngImport: i0, template: "<div class=\"app-topbar\" role=\"banner\">\r\n <div class=\"app-topbar__start\">\r\n <ng-content select=\"[appTopbarStart]\" />\r\n </div>\r\n <div class=\"app-topbar__title\">\r\n <ng-content select=\"[appTopbarTitle]\" />\r\n </div>\r\n <div class=\"app-topbar__end\">\r\n <ng-content select=\"[appTopbarEnd]\" />\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.app-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-height:3.25rem;padding:.5rem .85rem;box-sizing:border-box;background:var(--app-color-surface, #fff);border-bottom:1px solid var(--app-color-chrome-divider, color-mix(in srgb, var(--app-color-primary) 32%, #ffffff 68%));box-shadow:0 1px 2px var(--app-color-shell-shadow, rgba(26, 47, 69, .05))}.app-topbar__start,.app-topbar__end{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;min-width:0}.app-topbar__title{flex:1 1 auto;min-width:0;margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3}@media(max-width:767.98px){.app-topbar{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:.5rem;row-gap:.35rem;min-height:auto;padding:.45rem .65rem .55rem}.app-topbar__start{grid-column:1;grid-row:1}.app-topbar__end{grid-column:3;grid-row:1;justify-self:end}.app-topbar__title{grid-column:1/-1;grid-row:2;flex:unset;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10575
10631
|
}
|
|
10576
10632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTopbarComponent, decorators: [{
|
|
10577
10633
|
type: Component,
|
|
10578
|
-
args: [{ selector: 'app-topbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"app-topbar\" role=\"banner\">\r\n <div class=\"app-topbar__start\">\r\n <ng-content select=\"[appTopbarStart]\" />\r\n </div>\r\n <div class=\"app-topbar__title\">\r\n <ng-content select=\"[appTopbarTitle]\" />\r\n </div>\r\n <div class=\"app-topbar__end\">\r\n <ng-content select=\"[appTopbarEnd]\" />\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.app-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-height:3.25rem;padding:.5rem .85rem;box-sizing:border-box;background:var(--app-color-surface, #fff);border-bottom:1px solid var(--app-color-
|
|
10634
|
+
args: [{ selector: 'app-topbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"app-topbar\" role=\"banner\">\r\n <div class=\"app-topbar__start\">\r\n <ng-content select=\"[appTopbarStart]\" />\r\n </div>\r\n <div class=\"app-topbar__title\">\r\n <ng-content select=\"[appTopbarTitle]\" />\r\n </div>\r\n <div class=\"app-topbar__end\">\r\n <ng-content select=\"[appTopbarEnd]\" />\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.app-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-height:3.25rem;padding:.5rem .85rem;box-sizing:border-box;background:var(--app-color-surface, #fff);border-bottom:1px solid var(--app-color-chrome-divider, color-mix(in srgb, var(--app-color-primary) 32%, #ffffff 68%));box-shadow:0 1px 2px var(--app-color-shell-shadow, rgba(26, 47, 69, .05))}.app-topbar__start,.app-topbar__end{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;min-width:0}.app-topbar__title{flex:1 1 auto;min-width:0;margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3}@media(max-width:767.98px){.app-topbar{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:.5rem;row-gap:.35rem;min-height:auto;padding:.45rem .65rem .55rem}.app-topbar__start{grid-column:1;grid-row:1}.app-topbar__end{grid-column:3;grid-row:1;justify-self:end}.app-topbar__title{grid-column:1/-1;grid-row:2;flex:unset;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"] }]
|
|
10579
10635
|
}] });
|
|
10580
10636
|
|
|
10581
10637
|
/**
|