@praxisui/dynamic-fields 1.0.0-beta.11 → 1.0.0-beta.13

package/README.md

@@ -21,6 +21,20 @@ Biblioteca de campos dinâmicos para aplicações Angular (v20+) com Material De
 npm install @praxisui/dynamic-fields
 ```
 
+### Estilos e tokens (opcional)
+
+- Largura dos campos: quando o host usa `providePraxisDynamicFields()`, a lib injeta um estilo escopado que garante `mat-form-field { width: 100% }` dentro dos componentes. Não é necessário repetir no app.
+- Gradiente de inputs/toolbar (se desejar): o host pode definir um gradiente de marca que alguns detalhes visuais consomem (ex.: inputs com gradiente configurado e toolbars de edição):
+
+```scss
+:root {
+  --p-primary-gradient: linear-gradient(90deg, #1f8a8a, #6c63ff);
+  --p-input-gradient: var(--p-primary-gradient);
+}
+```
+
+Sem essas variáveis, a aparência deriva do tema M3 (tokens `--mat-sys-*` / `--md-sys-*`).
+
 Peers (instale no app host):
 - `@angular/core` `^20.1.0`, `@angular/common` `^20.1.0`, `@angular/forms` `^20.1.0`
 - `@angular/material` `^20.1.0`, `@angular/cdk` `^20.1.0`, `@angular/router` `^20.1.0`

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/forms';
 import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, forwardRef, Component, ViewChild, LOCALE_ID, EventEmitter, Injectable, ViewContainerRef, HostListener, HostBinding, Output, ChangeDetectionStrategy, Inject, TemplateRef, ContentChild } from '@angular/core';
+import { inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, forwardRef, Component, ViewChild, LOCALE_ID, EventEmitter, Injectable, ViewContainerRef, HostListener, HostBinding, Output, ViewEncapsulation, ChangeDetectionStrategy, Inject, TemplateRef, ContentChild, APP_INITIALIZER } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { isCssTextTransform, getTextTransformer, GenericCrudService, GlobalConfigService, PraxisIconDirective, createCpfCnpjValidator, FieldControlType } from '@praxisui/core';
 import { BehaviorSubject, combineLatest, take as take$1, of, EMPTY, firstValueFrom, fromEvent, Subscription } from 'rxjs';
@@ -14918,11 +14918,11 @@ class FieldShellComponent {
 
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;cursor:pointer;width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-readonly-overlay{position:absolute;inset:0;pointer-events:all;cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:100%}:host{display:block;cursor:pointer;width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-readonly-overlay{position:absolute;inset:0;pointer-events:all;cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FieldShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-field-shell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-field-shell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div
       class="pfx-field-shell-wrapper"
       [attr.data-field-index]="index"
@@ -14975,7 +14975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
 
       </div>
     </div>
-  `, host: { class: 'pfx-field-shell' }, styles: [":host{display:block;cursor:pointer;width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-readonly-overlay{position:absolute;inset:0;pointer-events:all;cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"] }]
+  `, host: { class: 'pfx-field-shell' }, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:100%}:host{display:block;cursor:pointer;width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-readonly-overlay{position:absolute;inset:0;pointer-events:all;cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], index: [{
@@ -19027,6 +19027,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
  * Providers necessários para o funcionamento correto da biblioteca,
  * incluindo HttpClient e outros serviços essenciais.
  */
+/** Runtime init to inject a narrowly-scoped style that ensures
+ * Material form fields render full width inside praxis components.
+ * The selector is restricted to hosts that expose `data-component-id`,
+ * which all praxis field components set on the host element.
+ */
+function initPraxisDynamicFieldsStyles() {
+    return () => {
+        try {
+            const d = globalThis.document;
+            if (!d || !d.head)
+                return;
+            if (d.querySelector('style[data-praxis-df-fullwidth]'))
+                return;
+            const style = d.createElement('style');
+            style.setAttribute('data-praxis-df-fullwidth', 'true');
+            style.textContent = `
+        /* Applied by praxis-dynamic-fields: make form fields take full width */
+        [data-component-id] .mat-mdc-form-field,
+        [data-component-id] mat-form-field { width: 100%; }
+      `;
+            d.head.appendChild(style);
+        }
+        catch {
+            // no-op: style injection is best-effort
+        }
+    };
+}
 /**
  * Providers essenciais para praxis-dynamic-fields
  *
@@ -19049,6 +19076,8 @@ function providePraxisDynamicFields() {
     return [
         // HttpClient para data loading
         provideHttpClient(withInterceptorsFromDi()),
+        // Default style to ensure 100% width for mat-form-field inside praxis components
+        { provide: APP_INITIALIZER, useFactory: initPraxisDynamicFieldsStyles, deps: [], multi: true },
         // Outros providers podem ser adicionados aqui no futuro
     ];
 }