structra-ui 0.1.42 → 0.1.44

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();
@@ -4917,14 +4919,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-/** Espaçamento horizontal/vertical entre itens da linha. */
-var FormRowGap;
-(function (FormRowGap) {
-    FormRowGap["Xs"] = "xs";
-    FormRowGap["Sm"] = "sm";
-    FormRowGap["Md"] = "md";
-    FormRowGap["Lg"] = "lg";
-})(FormRowGap || (FormRowGap = {}));
+/** Espaçamento entre itens da linha ou da pilha dentro de uma coluna. */
+var FormLayoutGap;
+(function (FormLayoutGap) {
+    FormLayoutGap["Xs"] = "xs";
+    FormLayoutGap["Sm"] = "sm";
+    FormLayoutGap["Md"] = "md";
+    FormLayoutGap["Lg"] = "lg";
+})(FormLayoutGap || (FormLayoutGap = {}));
 /** Alinhamento no eixo cruzado (itens da linha). */
 var FormRowAlign;
 (function (FormRowAlign) {
@@ -5071,53 +5073,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * Coluna no sistema de 12 trilhos da {@link FormRowComponent}.
- * Em viewports menores que `sm`, usa `xs` (por defeito largura total).
+ * Breakpoints (min-width): sm 40rem, md 48rem, lg 64rem, xl 80rem.
+ * Valores omitidos (ex.: só `xs` e `md`) propagam-se a partir do maior definido — ex.: `md` preenche `sm` quando `sm` não está definido.
  */
 class FormColComponent {
     constructor() {
         /** Colunas ocupadas em &lt; `sm` (por defeito 12 = linha inteira). */
         this.xs = 12;
-        /** Quando `true`, a coluna pode crescer para ocupar espaço livre na linha (flex futuro / composição). */
+        /** Quando `true`, a coluna preenche o espaço horizontal restante na grelha (`auto / -1`). */
         this.grow = false;
+        /** Espaço entre elementos projectados na mesma coluna (pilha vertical). */
+        this.gap = FormLayoutGap.Md;
+        this.align = FormRowAlign.Stretch;
+        /** No eixo vertical da pilha (`justify-content`). */
+        this.justify = FormRowJustify.Start;
     }
     get hostClass() {
-        return ['form-col', this.grow ? 'form-col--grow' : ''].filter(Boolean).join(' ');
+        const parts = [
+            'form-col',
+            `form-col--gap-${this.gap}`,
+            `form-col--align-${this.align}`,
+            `form-col--justify-${this.justify}`,
+        ];
+        if (this.grow) {
+            parts.push('form-col--grow');
+        }
+        return parts.join(' ');
     }
     get hostVars() {
-        const sm = this.normalizeOptionalSpan(this.sm, this.xs);
-        const md = this.normalizeOptionalSpan(this.md, sm);
-        const lg = this.normalizeOptionalSpan(this.lg, md);
-        const xl = this.normalizeOptionalSpan(this.xl, lg);
+        const { xs, sm, md, lg, xl } = this.resolvedSpans();
         const parts = [
-            `--form-col-xs:${this.clampSpan(this.xs)}`,
-            `--form-col-sm:${this.clampSpan(sm)}`,
-            `--form-col-md:${this.clampSpan(md)}`,
-            `--form-col-lg:${this.clampSpan(lg)}`,
-            `--form-col-xl:${this.clampSpan(xl)}`,
+            `--form-col-xs:${xs}`,
+            `--form-col-sm:${sm}`,
+            `--form-col-md:${md}`,
+            `--form-col-lg:${lg}`,
+            `--form-col-xl:${xl}`,
         ];
         if (this.order != null && !Number.isNaN(this.order)) {
             parts.push(`order:${this.order}`);
         }
         return parts.join(';');
     }
+    /**
+     * Cada patamar herda do próximo **maior** explicitamente definido quando o intermédio falta
+     * (ex.: só `xs` + `md` → `sm` usa `md`, evitando faixa 40–48rem presa em `xs`).
+     */
+    resolvedSpans() {
+        const xs = this.clampSpan(this.xs);
+        const smIn = this.optionalSpan(this.sm);
+        const mdIn = this.optionalSpan(this.md);
+        const lgIn = this.optionalSpan(this.lg);
+        const xlIn = this.optionalSpan(this.xl);
+        const sm = this.clampSpan(this.firstDefined(smIn, mdIn, lgIn, xlIn, xs));
+        const md = this.clampSpan(this.firstDefined(mdIn, lgIn, xlIn, sm, xs));
+        const lg = this.clampSpan(this.firstDefined(lgIn, xlIn, md, sm, xs));
+        const xl = this.clampSpan(this.firstDefined(xlIn, lg, md, sm, xs));
+        return { xs, sm, md, lg, xl };
+    }
+    optionalSpan(v) {
+        if (v == null || !Number.isFinite(v)) {
+            return undefined;
+        }
+        return this.clampSpan(v);
+    }
+    firstDefined(...candidates) {
+        for (const c of candidates) {
+            if (c != null && Number.isFinite(c)) {
+                return c;
+            }
+        }
+        return 12;
+    }
     clampSpan(n) {
         if (!Number.isFinite(n) || n < 1) {
             return 12;
         }
         return Math.min(12, Math.max(1, Math.round(n)));
     }
-    normalizeOptionalSpan(value, fallback) {
-        if (value == null || !Number.isFinite(value)) {
-            return fallback;
-        }
-        return this.clampSpan(value);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormColComponent, isStandalone: true, selector: "app-form-col", inputs: { xs: ["xs", "xs", numberAttribute], sm: "sm", md: "md", lg: "lg", xl: "xl", order: ["order", "order", numberAttribute], grow: ["grow", "grow", booleanAttribute] }, host: { properties: { "class": "this.hostClass", "attr.style": "this.hostVars" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;min-width:0;box-sizing:border-box;grid-column:span var(--form-col-xs, 12)}:host.form-col--grow{min-width:0}@media(min-width:40rem){:host{grid-column:span var(--form-col-sm, var(--form-col-xs, 12))}}@media(min-width:48rem){:host{grid-column:span var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))}}@media(min-width:64rem){:host{grid-column:span var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12))))}}@media(min-width:80rem){:host{grid-column:span var(--form-col-xl, var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormColComponent, isStandalone: true, selector: "app-form-col", inputs: { xs: ["xs", "xs", numberAttribute], sm: "sm", md: "md", lg: "lg", xl: "xl", order: ["order", "order", numberAttribute], grow: ["grow", "grow", booleanAttribute], gap: "gap", align: "align", justify: "justify" }, host: { properties: { "class": "this.hostClass", "attr.style": "this.hostVars" } }, ngImport: i0, template: "<div class=\"form-col__inner\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;box-sizing:border-box;grid-column:span var(--form-col-xs, 12)}.form-col__inner{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;min-width:0;min-height:0;box-sizing:border-box}:host(.form-col--gap-xs) .form-col__inner{gap:.35rem}:host(.form-col--gap-sm) .form-col__inner{gap:.5rem}:host(.form-col--gap-md) .form-col__inner{gap:.75rem}:host(.form-col--gap-lg) .form-col__inner{gap:1rem}:host(.form-col--align-start) .form-col__inner{align-items:flex-start}:host(.form-col--align-center) .form-col__inner{align-items:center}:host(.form-col--align-end) .form-col__inner{align-items:flex-end}:host(.form-col--align-stretch) .form-col__inner{align-items:stretch}:host(.form-col--justify-start) .form-col__inner{justify-content:flex-start}:host(.form-col--justify-center) .form-col__inner{justify-content:center}:host(.form-col--justify-end) .form-col__inner{justify-content:flex-end}:host(.form-col--justify-between) .form-col__inner{justify-content:space-between}@media(min-width:40rem){:host{grid-column:span var(--form-col-sm, var(--form-col-xs, 12))}}@media(min-width:48rem){:host{grid-column:span var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))}}@media(min-width:64rem){:host{grid-column:span var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12))))}}@media(min-width:80rem){:host{grid-column:span var(--form-col-xl, var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))))}}:host.form-col--grow{min-width:0;grid-column:auto/-1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormColComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-col', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;box-sizing:border-box;grid-column:span var(--form-col-xs, 12)}:host.form-col--grow{min-width:0}@media(min-width:40rem){:host{grid-column:span var(--form-col-sm, var(--form-col-xs, 12))}}@media(min-width:48rem){:host{grid-column:span var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))}}@media(min-width:64rem){:host{grid-column:span var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12))))}}@media(min-width:80rem){:host{grid-column:span var(--form-col-xl, var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))))}}\n"] }]
+            args: [{ selector: 'app-form-col', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-col__inner\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;box-sizing:border-box;grid-column:span var(--form-col-xs, 12)}.form-col__inner{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;min-width:0;min-height:0;box-sizing:border-box}:host(.form-col--gap-xs) .form-col__inner{gap:.35rem}:host(.form-col--gap-sm) .form-col__inner{gap:.5rem}:host(.form-col--gap-md) .form-col__inner{gap:.75rem}:host(.form-col--gap-lg) .form-col__inner{gap:1rem}:host(.form-col--align-start) .form-col__inner{align-items:flex-start}:host(.form-col--align-center) .form-col__inner{align-items:center}:host(.form-col--align-end) .form-col__inner{align-items:flex-end}:host(.form-col--align-stretch) .form-col__inner{align-items:stretch}:host(.form-col--justify-start) .form-col__inner{justify-content:flex-start}:host(.form-col--justify-center) .form-col__inner{justify-content:center}:host(.form-col--justify-end) .form-col__inner{justify-content:flex-end}:host(.form-col--justify-between) .form-col__inner{justify-content:space-between}@media(min-width:40rem){:host{grid-column:span var(--form-col-sm, var(--form-col-xs, 12))}}@media(min-width:48rem){:host{grid-column:span var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))}}@media(min-width:64rem){:host{grid-column:span var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12))))}}@media(min-width:80rem){:host{grid-column:span var(--form-col-xl, var(--form-col-lg, var(--form-col-md, var(--form-col-sm, var(--form-col-xs, 12)))))}}:host.form-col--grow{min-width:0;grid-column:auto/-1}\n"] }]
         }], propDecorators: { xs: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -5135,6 +5173,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], grow: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], gap: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], justify: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -5610,9 +5654,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class FormRowComponent {
     constructor() {
-        this.gap = FormRowGap.Md;
+        this.gap = FormLayoutGap.Md;
         this.align = FormRowAlign.Stretch;
         this.justify = FormRowJustify.Start;
+        /** Filhos sem `app-form-col` ocupam a linha inteira; `app-form-col` com `[grow]` preenche o espaço restante na grelha. */
+        this.grow = false;
         this.wrap = true;
         this.stackOnMobile = true;
     }
@@ -5623,6 +5669,9 @@ class FormRowComponent {
             `form-row--align-${this.align}`,
             `form-row--justify-${this.justify}`,
         ];
+        if (this.grow) {
+            parts.push('form-row--grow');
+        }
         if (this.wrap) {
             parts.push('form-row--wrap');
         }
@@ -5632,17 +5681,20 @@ class FormRowComponent {
         return parts.join(' ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}:host(.form-row--gap-xs) .form-row__grid{gap:.35rem .5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.5rem .75rem}:host(.form-row--gap-md) .form-row__grid{gap:.75rem 1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1rem 1.5rem}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}:host(.form-row--gap-xs) .form-row__grid{gap:.35rem .5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.5rem .75rem}:host(.form-row--gap-md) .form-row__grid{gap:.75rem 1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1rem 1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}:host(.form-row--gap-xs) .form-row__grid{gap:.35rem .5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.5rem .75rem}:host(.form-row--gap-md) .form-row__grid{gap:.75rem 1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1rem 1.5rem}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"] }]
+            args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n  <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}:host(.form-row--gap-xs) .form-row__grid{gap:.35rem .5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.5rem .75rem}:host(.form-row--gap-md) .form-row__grid{gap:.75rem 1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1rem 1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}}\n"] }]
         }], propDecorators: { gap: [{
                 type: Input
             }], align: [{
                 type: Input
             }], justify: [{
                 type: Input
+            }], grow: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], wrap: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -7409,7 +7461,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 +7663,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 +7899,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 +7919,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 +8203,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 +8713,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 +8794,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);
@@ -8969,5 +9011,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_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseButtonComponent, BaseButtonType, BaseButtonVariant, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormRowAlign, FormRowComponent, FormRowGap, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, InputMaskFieldComponent, IntegerFieldComponent, LayoutStackAlign, LayoutStackComponent, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fixedDigitsMaskCompleteValidator, formatDateTimePtBr, formatDecimalBr, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, 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_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseButtonComponent, BaseButtonType, BaseButtonVariant, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, InputMaskFieldComponent, IntegerFieldComponent, LayoutStackAlign, LayoutStackComponent, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fixedDigitsMaskCompleteValidator, formatDateTimePtBr, formatDecimalBr, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
 //# sourceMappingURL=structra-ui.mjs.map