structra-ui 0.2.17 → 0.2.18

package/fesm2022/structra-ui.mjs

@@ -1,6 +1,6 @@
 import '../structra-ui.css';
 import * as i0 from '@angular/core';
-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 } from '@angular/core';
+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, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -803,6 +803,7 @@ class ThemeDirective {
         this.theme = 'black';
         this.elementRef = inject((ElementRef));
         this.renderer = inject(Renderer2);
+        this.themeService = inject(AppThemeService);
         this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
     }
     ngOnChanges() {
@@ -812,6 +813,8 @@ class ThemeDirective {
             this.renderer.removeClass(element, themeClass);
         }
         this.renderer.addClass(element, getThemeTokenClass(this.theme));
+        /** Overlays / hosts que leem {@link AppThemeService} alinham com o mesmo tema do wrapper. */
+        this.themeService.setTheme(normalizeStructraTheme(this.theme));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ThemeDirective, isStandalone: true, selector: "[appTheme]", inputs: { theme: ["appTheme", "theme"] }, usesOnChanges: true, ngImport: i0 }); }
@@ -842,6 +845,24 @@ function injectEffectiveThemeId(appTheme) {
     });
 }
 
+/**
+ * Remove classes de tema do host e, se `explicitTheme` estiver definido, aplica `.app-library-theme`
+ * + `theme-*`. Caso contrário deixa o host sem paleta própria (herda do ancestral / wrapper).
+ */
+function applyOptionalThemeHostClasses(renderer, element, explicitTheme) {
+    renderer.removeClass(element, APP_THEME_BASE_CLASS);
+    for (const themeId of STRUCTRA_THEME_IDS) {
+        renderer.removeClass(element, `theme-${themeId}`);
+    }
+    if (explicitTheme !== undefined &&
+        explicitTheme !== null &&
+        String(explicitTheme).trim() !== '') {
+        const id = normalizeStructraTheme(explicitTheme);
+        renderer.addClass(element, APP_THEME_BASE_CLASS);
+        renderer.addClass(element, getThemeTokenClass(id));
+    }
+}
+
 /** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
 const DEFAULT_CONNECTED_POSITIONS = [
     {
@@ -10291,16 +10312,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  *
  * Use `exportAs: 'appShell'` e `toggleMobileNav` / `toggleSidebarCollapsed` a partir da topbar.
  *
- * Tema no host: `[appTheme]="'purple'"` como no resto da lib; omitir = {@link AppThemeService}.
+ * Tema no host opcional; sem ele, herda de ancestral com {@link ThemeDirective}.
  */
 class AppShellComponent {
     constructor() {
         this.bp = inject(BreakpointObserver);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        this.hostEl = inject((ElementRef));
+        this.renderer = inject(Renderer2);
         this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
-        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
-        this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
         /** Barra lateral estreita (ícones + compressão de texto na lista). */
         this.sidebarCollapsed = false;
         this.sidebarCollapsedChange = new EventEmitter();
@@ -10312,6 +10333,9 @@ class AppShellComponent {
         this.isMobileLayout = false;
         this.DrawerSide = DrawerSide;
         this.DrawerSize = DrawerSize;
+        effect(() => {
+            applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
+        });
     }
     /** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
     get sidebarTemplate() {
@@ -10356,14 +10380,12 @@ class AppShellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }, host: { properties: { "class": "hostThemeClass()" } }, 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      title=\"Navega\u00E7\u00E3o\"\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:0;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 }); }
+    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      title=\"Navega\u00E7\u00E3o\"\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:0;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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': 'hostThemeClass()',
-                    }, 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      title=\"Navega\u00E7\u00E3o\"\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:0;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"] }]
-        }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
+            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      title=\"Navega\u00E7\u00E3o\"\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:0;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"] }]
+        }], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
                 type: ContentChild,
                 args: [AppShellSidebarTemplateDirective]
             }], sidebarCollapsed: [{
@@ -10385,17 +10407,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Com `collapsed`, `app-menu-list` usa `compressText`: rótulos de grupo (ex. «Principal») ficam ocultos;
  * itens mostram só ícones com `title` / `aria-label` para acessibilidade.
  *
- * Tema: use `[appTheme]="'purple'"` (ou outro id) no host — igual ao `[appTheme]` da lib; sem input,
- * segue {@link AppThemeService}.
+ * Tema: `[appTheme]` opcional no host; sem ele, herda paleta de um ancestral com {@link ThemeDirective}
+ * (ex.: `<div appTheme="purple">`). Com input explícito, aplica as classes no host.
  */
 class AppSidebarComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        /** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita; omitir = tema global. */
+        this.hostEl = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        /** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita no host; omitir = herdar / serviço. */
         this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
-        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
-        this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
         this.menuId = 'app-shell-sidebar';
         /** Sincronizar com o item de navegação activo (realce persistente). */
         this.selectedItemId = null;
@@ -10409,6 +10431,9 @@ class AppSidebarComponent {
         this.listCompressText = signal(true, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
         this.listRevealTimeoutId = null;
         this.destroyRef.onDestroy(() => this.clearListRevealTimeout());
+        effect(() => {
+            applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
+        });
     }
     ngOnChanges(changes) {
         if (changes['selectedItemId'] || changes['items']) {
@@ -10440,13 +10465,11 @@ class AppSidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }, host: { properties: { "class": "hostThemeClass()" } }, 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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"effectiveThemeId()\"\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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;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:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\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 }); }
+    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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;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:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': 'hostThemeClass()',
-                    }, 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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"effectiveThemeId()\"\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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;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:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
+            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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;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:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10610,5 +10633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
+export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyOptionalThemeHostClasses, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
 //# sourceMappingURL=structra-ui.mjs.map