structra-ui 0.1.41 → 0.1.43

package/README.md

@@ -1,13 +1,13 @@
 # structra-ui
 
-Biblioteca **Angular 21** (componentes Structra). Exemplos: [StructraLab](https://structralab.com/).
+Biblioteca de componentes para projetos **Angular**. 
+**Site oficial**: [StructraLab](https://structralab.com/).
 
 ## Instalar
 
 ```bash
 npm install structra-ui
 ```
-
 ## AG Grid (grid)
 
 Registre os módulos Community uma vez no main.ts (antes do bootstrapApplication):

package/fesm2022/structra-ui.mjs

@@ -552,16 +552,28 @@ const APP_THEME_IDS = [
     'black',
 ];
 /**
- * Estado global do tema da library: classe CSS `theme-*` em conjunto com `.app-library-theme`.
- * Os tokens `--app-color-*` são definidos em `src/app/_theme/`; paletas em `_theme-palettes.scss`.
+ * Estado global do tema da library: **sempre** `.app-library-theme` + `theme-*` juntos.
+ * Os tokens de paleta em `_theme-palettes.scss` usam o selector `.app-library-theme.theme-*`.
  */
 class AppThemeService {
     constructor() {
         this.activeId = signal('black', ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
         /** Identificador do tema activo (`blue`, `green`, …). */
         this.activeThemeId = this.activeId.asReadonly();
-        /** Classe CSS do tema (ex.: `theme-green`) para `[ngClass]` no host tematizado. */
-        this.themeClass = computed(() => `theme-${this.activeId()}`, ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
+        /**
+         * Classes separadas (ex.: CDK `panelClass` — uma string com espaço quebra `classList.add`).
+         */
+        this.themeClassList = computed(() => ['app-library-theme', `theme-${this.activeId()}`], ...(ngDevMode ? [{ debugName: "themeClassList" }] : /* istanbul ignore next */ []));
+        /**
+         * As duas classes numa string — útil para `[class]`, `[ngClass]` com string, ou hosts HTML.
+         * Ex.: `<div [ngClass]="libTheme.themeClass()">` aplica paleta completa no consumidor.
+         */
+        this.themeClass = computed(() => this.themeClassList().join(' '), ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
+        /** Mapa para `[ngClass]` com chaves dinâmicas (painéis overlay). */
+        this.themeClassMap = computed(() => {
+            const [base, token] = this.themeClassList();
+            return { [base]: true, [token]: true };
+        }, ...(ngDevMode ? [{ debugName: "themeClassMap" }] : /* istanbul ignore next */ []));
         /** Lista fixa de temas suportados pela library. */
         this.themeOptions = [
             { id: 'blue', label: 'Azul' },
@@ -609,18 +621,14 @@ class DropdownBaseComponent {
          * O overlay do CDK fica sob `body`; sem estas classes, `var(--app-color-*)` cai no `:root`.
          * Tem de ser **array**: uma única string com espaço quebra `classList.add` e as classes não aplicam.
          */
-        this.overlayPanelClasses = computed(() => ['app-library-theme', this.appTheme.themeClass()], ...(ngDevMode ? [{ debugName: "overlayPanelClasses" }] : /* istanbul ignore next */ []));
+        this.overlayPanelClasses = computed(() => [
+            ...this.appTheme.themeClassList(),
+        ], ...(ngDevMode ? [{ debugName: "overlayPanelClasses" }] : /* istanbul ignore next */ []));
         /**
          * O CDK não reaplica `cdkConnectedOverlayPanelClass` quando o overlay já existe.
          * As classes de tema no painel interno seguem o tema activo sempre.
          */
-        this.panelThemeNgClass = computed(() => {
-            const themeClass = this.appTheme.themeClass();
-            return {
-                'app-library-theme': true,
-                [themeClass]: true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
         this.open = false;
         this.openChange = new EventEmitter();
         /** Largura do painel em px (ex.: largura total do campo). */
@@ -850,16 +858,10 @@ class MenuListComponent {
         this.submenuOpenTimer = null;
         this.submenuCloseTimer = null;
         this.submenuPositions = submenuConnectedPositions();
-        this.panelThemeNgClass = computed(() => {
-            const themeClass = this.appTheme.themeClass();
-            return {
-                'app-library-theme': true,
-                [themeClass]: true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
     }
     overlayPanelClasses() {
-        return ['app-library-theme', this.appTheme.themeClass(), 'menu-submenu__cdk-panel'];
+        return [...this.appTheme.themeClassList(), 'menu-submenu__cdk-panel'];
     }
     onNestedItemSelect(id) {
         this.closeOpenSubmenu();
@@ -7409,7 +7411,7 @@ class AppDialogComponent {
      * valores de `:root` (azul); alinhamos ao CDK Dialog (`libDialogPanelClasses`).
      */
     get hostThemeClasses() {
-        return `app-library-theme ${this.appTheme.themeClass()}`;
+        return this.appTheme.themeClass();
     }
     ngOnInit() {
         this.stripHostNativeTitle();
@@ -7611,7 +7613,7 @@ class AppLibLightBlockScrollStrategy {
 /** Classes aplicadas ao painel CDK Dialog + tema da app. */
 function libDialogPanelClasses(theme, extra = []) {
     const rest = Array.isArray(extra) ? extra : [extra];
-    return ['app-lib-dialog-panel', 'app-library-theme', theme.themeClass(), ...rest];
+    return ['app-lib-dialog-panel', ...theme.themeClassList(), ...rest];
 }
 
 class ConfirmDialogService {
@@ -7847,13 +7849,7 @@ class ContextMenuComponent {
         this.overlayRef = null;
         this.escSub = null;
         this.generatedId = `app-ctx-${Math.random().toString(36).slice(2, 9)}`;
-        this.panelThemeNgClass = computed(() => {
-            const themeClass = this.appTheme.themeClass();
-            return {
-                'app-library-theme': true,
-                [themeClass]: true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
     }
     get resolvedMenuId() {
         return this.menuId.trim() || this.generatedId;
@@ -7873,11 +7869,10 @@ class ContextMenuComponent {
         this.disposeOverlay();
         const left = Math.min(clientX, window.innerWidth - PANEL_MIN_W - VIEWPORT_PAD);
         const top = Math.min(clientY, window.innerHeight - VIEWPORT_PAD);
-        const themeClass = this.appTheme.themeClass();
         this.overlayRef = this.overlay.create({
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: ['app-library-theme', themeClass],
+            panelClass: [...this.appTheme.themeClassList()],
             scrollStrategy: this.overlay.scrollStrategies.close(),
             positionStrategy: this.overlay
                 .position()
@@ -8158,14 +8153,11 @@ class AnchoredOverlayComponent {
          * Estratégia de scroll (predefinição: reposicionar; `close` para fechar ao scroll em certos modais).
          */
         this.scrollStrategy = null;
-        this.overlayPanelClasses = computed(() => ['app-library-theme', this.appTheme.themeClass(), 'anchored-overlay__pane'], ...(ngDevMode ? [{ debugName: "overlayPanelClasses" }] : /* istanbul ignore next */ []));
-        this.panelThemeNgClass = computed(() => {
-            const themeClass = this.appTheme.themeClass();
-            return {
-                'app-library-theme': true,
-                [themeClass]: true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.overlayPanelClasses = computed(() => [
+            ...this.appTheme.themeClassList(),
+            'anchored-overlay__pane',
+        ], ...(ngDevMode ? [{ debugName: "overlayPanelClasses" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
         this.defaultScrollStrategy = this.overlay.scrollStrategies.reposition();
     }
     get effectiveScrollStrategy() {
@@ -8671,7 +8663,7 @@ class AppShellComponent {
         this.DrawerSize = DrawerSize;
     }
     get hostThemeClasses() {
-        return `app-library-theme ${this.theme.themeClass()}`;
+        return this.theme.themeClass();
     }
     /** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
     get sidebarTemplate() {
@@ -8752,7 +8744,7 @@ class AppSidebarComponent {
      * herdarem a paleta activa (útil fora da demo ou sem antepassado tematizado).
      */
     get hostThemeClasses() {
-        return `app-library-theme ${this.theme.themeClass()}`;
+        return this.theme.themeClass();
     }
     constructor() {
         this.theme = inject(AppThemeService);