structra-ui 0.2.39 → 0.2.41

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, effect, TemplateRef, ContentChild } from '@angular/core';
+import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, Renderer2, effect, TemplateRef, ContentChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -807,11 +807,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class ThemeDirective {
-    constructor() {
+    constructor(elementRef, renderer, themeService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.themeService = themeService;
         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() {
@@ -824,7 +824,7 @@ class ThemeDirective {
         /** 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AppThemeService }], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, decorators: [{
@@ -833,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[appTheme]',
                     standalone: true,
                 }]
-        }], propDecorators: { theme: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AppThemeService }], propDecorators: { theme: [{
                 type: Input,
                 args: ['appTheme']
             }] } });
@@ -1056,8 +1056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 /**
- * Cabeçalho opcional de grupo — alinhado a `MenuItemGroup` (`kind: 'group'`).
- * Os itens do grupo continuam a ser renderizados pelo `menu-list` (renderização única).
+ * Cabeçalho opcional de grupo — alinhado a `MenuItemGroup` (`kind: 'group'`):
+ * `alwaysExpanded` = sempre aberto sem toggle; caso contrário `expanded` no modelo define o estado inicial.
  */
 class MenuGroupComponent {
     constructor() {
@@ -1069,54 +1069,54 @@ class MenuGroupComponent {
         this.toggleExpand = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute], collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: `
-    @if (label?.trim() && !hideLabel) {
-      @if (collapsible) {
-        <button
-          type="button"
-          class="menu-list__group-toggle"
-          [attr.aria-expanded]="expanded"
-          (click)="toggleExpand.emit()"
-        >
-          <span class="menu-list__group-toggle-label">{{ label }}</span>
-          <span class="menu-list__group-toggle-icon" aria-hidden="true">
-            @if (expanded) {
-              <i class="fa-solid fa-chevron-up"></i>
-            } @else {
-              <i class="fa-solid fa-chevron-down"></i>
-            }
-          </span>
-        </button>
-      } @else {
-        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
-      }
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute], collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: `
+    @if (label?.trim() && !hideLabel) {
+      @if (collapsible) {
+        <button
+          type="button"
+          class="menu-list__group-toggle"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand.emit()"
+        >
+          <span class="menu-list__group-toggle-label">{{ label }}</span>
+          <span class="menu-list__group-toggle-icon" aria-hidden="true">
+            @if (expanded) {
+              <i class="fa-solid fa-chevron-up"></i>
+            } @else {
+              <i class="fa-solid fa-chevron-down"></i>
+            }
+          </span>
+        </button>
+      } @else {
+        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      }
+    }
   `, isInline: true, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu-group', standalone: true, template: `
-    @if (label?.trim() && !hideLabel) {
-      @if (collapsible) {
-        <button
-          type="button"
-          class="menu-list__group-toggle"
-          [attr.aria-expanded]="expanded"
-          (click)="toggleExpand.emit()"
-        >
-          <span class="menu-list__group-toggle-label">{{ label }}</span>
-          <span class="menu-list__group-toggle-icon" aria-hidden="true">
-            @if (expanded) {
-              <i class="fa-solid fa-chevron-up"></i>
-            } @else {
-              <i class="fa-solid fa-chevron-down"></i>
-            }
-          </span>
-        </button>
-      } @else {
-        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
-      }
-    }
+            args: [{ selector: 'app-menu-group', standalone: true, template: `
+    @if (label?.trim() && !hideLabel) {
+      @if (collapsible) {
+        <button
+          type="button"
+          class="menu-list__group-toggle"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand.emit()"
+        >
+          <span class="menu-list__group-toggle-label">{{ label }}</span>
+          <span class="menu-list__group-toggle-icon" aria-hidden="true">
+            @if (expanded) {
+              <i class="fa-solid fa-chevron-up"></i>
+            } @else {
+              <i class="fa-solid fa-chevron-down"></i>
+            }
+          </span>
+        </button>
+      } @else {
+        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      }
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
@@ -1172,7 +1172,7 @@ function buildMenuRows(nodes) {
                 label: n.label,
                 groupId: gid,
                 alwaysExpanded: n.alwaysExpanded === true,
-                expanded: n.expanded === true ? true : n.expanded === false ? false : undefined,
+                initialExpanded: n.expanded === true ? true : n.expanded === false ? false : undefined,
             });
             for (const child of n.items) {
                 addNode(child, gid);
@@ -1426,10 +1426,10 @@ class MenuListBodyComponent {
                 continue;
             }
             let open;
-            if (r.expanded === true) {
+            if (r.initialExpanded === true) {
                 open = true;
             }
-            else if (r.expanded === false) {
+            else if (r.initialExpanded === false) {
                 open = false;
             }
             else if (mode === 'all') {
@@ -10998,10 +10998,12 @@ class AppSidebarComponent {
         this.groupDefaultExpansion = 'all';
         this.itemSelect = new EventEmitter();
         /**
-         * Valor efectivo de `compressText` em `app-menu-list`: ao expandir, mantém-se comprimido
-         * até a lateral terminar a animação de largura (evita flicker de texto).
+         * Valor efectivo de `compressText` em `app-menu-list`: ao expandir a partir do modo rail,
+         * mantém-se comprimido até a animação de largura terminar (evita flicker de texto).
+         * Começa em `false` para a primeira pintura com lateral já expandida corresponder ao estado real
+         * e o `menu-list` aplicar bem `expanded` nos grupos.
          */
-        this.listCompressText = signal(true, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
+        this.listCompressText = signal(false, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
         this.listRevealTimeoutId = null;
         this.destroyRef.onDestroy(() => this.clearListRevealTimeout());
         effect(() => {