@eqproject/eqp-dynamic-module 2.10.69 → 2.10.71

package/README.md

@@ -12,6 +12,15 @@
 
 ## Changelog
 
+### v2.10.70
+- **Theming configurator — nuovi input:** aggiunto `[configuratorThemeCss]` che accetta direttamente il testo di un file CSS con le dichiarazioni delle variabili `--conf-*`. Permette di portare il tema dall'esterno come file statico senza hardcodare valori TypeScript. Se entrambi gli input sono presenti, `configuratorTheme` sovrascrive `configuratorThemeCss` per le chiavi in conflitto.
+- **Theming configurator — nuove variabili CSS:** `--conf-stepper-header-bg` (sfondo zona step superiore), `--conf-stepper-content-bg` (sfondo zona inferiore), `--conf-step-icon-edit-bg` (sfondo pallini step completati), `--conf-hint-btn-bg` / `--conf-hint-btn-hover-bg` (bottone suggerimento rapido), `--conf-btn-color` (colore testo bottoni con sfondo gradiente).
+- **Theming configurator — forzatura `!important`:** tutti i valori iniettati tramite tema esterno sono ora applicati con `!important`, rendendo il sistema di theming l'unico canale valido per sovrascrivere i colori.
+- **Theming configurator — `--conf-btn-color`:** il colore del testo dei bottoni attivi (sfondo gradiente) è ora templatizzabile e forzato con `!important` per resistere a override CSS provenienti dall'applicazione ospitante.
+- **New theming input:** added `[configuratorThemeCss]` accepting a CSS text string with `--conf-*` variable declarations. Enables external theme files without TypeScript hardcoding. When both inputs are present, `configuratorTheme` overrides `configuratorThemeCss` for conflicting keys.
+- **New CSS variables:** `--conf-stepper-header-bg`, `--conf-stepper-content-bg`, `--conf-step-icon-edit-bg`, `--conf-hint-btn-bg`, `--conf-hint-btn-hover-bg`, `--conf-btn-color`.
+- **`!important` enforcement:** all externally-injected theme values are now set with `!important`, making the theming system the sole valid override channel.
+
 ### v2.10.65
 - **TextField — icona opzionale:** aggiunta la possibilità di associare un'icona Material Icons al campo di testo. Le nuove proprietà `IconName` (stringa) e `IconPosition` (enum: `1`=Sinistra/prefix, `2`=Destra/suffix) sono opzionali e retrocompatibili (null sui form esistenti). Configurabili nel builder tramite il toggle "Icona" nella sezione Specifiche del campo.
 - **TextField — optional icon:** added support for a Material Icons icon on text fields. New properties `IconName` (string) and `IconPosition` (enum: `1`=Left/prefix, `2`=Right/suffix) are optional and backward-compatible (null on existing forms). Configurable in the builder via the "Icona" toggle in the field's Specifiche section.
@@ -257,6 +266,8 @@ this.config = new DynamicModuleConfiguratorConfig(general, specific);
 | `formulaObject` | `any` | — | Contesto per l'anteprima delle formule. |
 | `QueryEditorComponent` | `DynamicLoaderDirectiveData` | — | Componente query editor custom. |
 | `debugMode` | `boolean` | `false` | Abilita log dettagliati. |
+| `configuratorTheme` | `Record<string, string> \| null` | `null` | Override delle variabili CSS del tema tramite oggetto TypeScript. |
+| `configuratorThemeCss` | `string \| null` | `null` | Override delle variabili CSS del tema tramite stringa CSS (es. contenuto di un file `.css`). |
 
 **Output**
 
@@ -267,6 +278,56 @@ this.config = new DynamicModuleConfiguratorConfig(general, specific);
 | `(out)` | `eventOut` | Output generico per comunicazione esterna. |
 | `(fireTrigger)` | `FireTrigger` | Emesso quando scatta un trigger. |
 
+**Theming**
+
+Il configurator espone un sistema di temi basato su CSS custom properties. Tutti i valori iniettati tramite tema sono applicati con `!important` e non possono essere sovrascritti dall'esterno se non attraverso questi input.
+
+```html
+<!-- Opzione A: oggetto TypeScript -->
+<eqp-dynamic-module-configurator
+  [configurations]="config"
+  [configuratorTheme]="{ '--conf-gradient': 'linear-gradient(to right, #1565c0, #0288d1)', '--conf-bg-page': '#f0f6fb' }">
+</eqp-dynamic-module-configurator>
+
+<!-- Opzione B: file CSS caricato come stringa -->
+<eqp-dynamic-module-configurator
+  [configurations]="config"
+  [configuratorThemeCss]="themeCssString">
+</eqp-dynamic-module-configurator>
+```
+
+Formato del file CSS per `configuratorThemeCss` (nessun selettore richiesto):
+
+```css
+--conf-gradient:           linear-gradient(to right, #1565c0, #0288d1);
+--conf-bg-page:            #f0f6fb;
+--conf-btn-color:          #ffffff;
+```
+
+Variabili disponibili:
+
+| Variabile | Default | Descrizione |
+|-----------|---------|-------------|
+| `--conf-gradient` | gradiente viola-blu | Sfondo bottoni e header |
+| `--conf-bg-page` | `#f5f5f5` | Sfondo generale pagina/stepper |
+| `--conf-radius` | `10px` | Border radius bottoni |
+| `--conf-modal-radius` | `12px` | Border radius modali |
+| `--conf-accent` | `#693DDA` | Colore accento (bordi, focus) |
+| `--conf-primary` | `#1E31EB` | Colore primario |
+| `--conf-step-selected` | `#643cda` | Freccia step selezionato |
+| `--conf-step-edit` | `#3034e7` | Freccia step completato |
+| `--conf-stepper-header-bg` | ereditato da `--conf-bg-page` | Sfondo zona superiore (header stepper) |
+| `--conf-stepper-content-bg` | ereditato da `--conf-bg-page` | Sfondo zona inferiore (form e bottoni) |
+| `--conf-step-icon-edit-bg` | ereditato da `--conf-step-edit` | Sfondo pallini step completati |
+| `--conf-btn-color` | `#ffffff` | Colore testo bottoni attivi (sfondo gradiente) |
+| `--conf-hint-btn-bg` | `#2563eb` | Sfondo bottone suggerimento rapido (lampadina) |
+| `--conf-hint-btn-hover-bg` | `#1d4ed8` | Sfondo lampadina al hover |
+| `--conf-table-header-bg` | variabile SCSS | Sfondo header tabella campi |
+| `--conf-search-bg` | variabile SCSS | Sfondo campo di ricerca |
+| `--conf-table-bg` | `#ffffff` | Sfondo righe tabella |
+| `--conf-card-bg` | `#ffffff` | Sfondo card |
+| `--conf-font-family` | `inherit` | Font dell'intero configurator |
+
 ---
 
 ### Modelli di configurazione
@@ -593,6 +654,8 @@ generalConfig = new DynamicModuleGeneralConfig(
 | `formulaObject` | `any` | — | Context for formula preview. |
 | `QueryEditorComponent` | `DynamicLoaderDirectiveData` | — | Custom query editor component. |
 | `debugMode` | `boolean` | `false` | Enable verbose logging. |
+| `configuratorTheme` | `Record<string, string> \| null` | `null` | CSS variable overrides via TypeScript object. |
+| `configuratorThemeCss` | `string \| null` | `null` | CSS variable overrides via CSS text string (e.g. contents of a `.css` file). |
 
 **Outputs**
 
@@ -603,6 +666,56 @@ generalConfig = new DynamicModuleGeneralConfig(
 | `(out)` | `eventOut` | General-purpose external output. |
 | `(fireTrigger)` | `FireTrigger` | Emitted when a trigger fires. |
 
+**Theming**
+
+The configurator exposes a theming system based on CSS custom properties. All values injected via the theme inputs are applied with `!important` and cannot be overridden externally except through these inputs.
+
+```html
+<!-- Option A: TypeScript object -->
+<eqp-dynamic-module-configurator
+  [configurations]="config"
+  [configuratorTheme]="{ '--conf-gradient': 'linear-gradient(to right, #1565c0, #0288d1)' }">
+</eqp-dynamic-module-configurator>
+
+<!-- Option B: CSS file loaded as string -->
+<eqp-dynamic-module-configurator
+  [configurations]="config"
+  [configuratorThemeCss]="themeCssString">
+</eqp-dynamic-module-configurator>
+```
+
+CSS file format for `configuratorThemeCss` (no selector required):
+
+```css
+--conf-gradient:           linear-gradient(to right, #1565c0, #0288d1);
+--conf-bg-page:            #f0f6fb;
+--conf-btn-color:          #ffffff;
+```
+
+Available variables:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--conf-gradient` | purple-blue gradient | Button and header background |
+| `--conf-bg-page` | `#f5f5f5` | General page/stepper background |
+| `--conf-radius` | `10px` | Button border radius |
+| `--conf-modal-radius` | `12px` | Modal border radius |
+| `--conf-accent` | `#693DDA` | Accent colour (borders, focus) |
+| `--conf-primary` | `#1E31EB` | Primary colour |
+| `--conf-step-selected` | `#643cda` | Selected step arrow |
+| `--conf-step-edit` | `#3034e7` | Completed step arrow |
+| `--conf-stepper-header-bg` | inherited from `--conf-bg-page` | Upper zone background (stepper header) |
+| `--conf-stepper-content-bg` | inherited from `--conf-bg-page` | Lower zone background (form and buttons) |
+| `--conf-step-icon-edit-bg` | inherited from `--conf-step-edit` | Completed step icon background |
+| `--conf-btn-color` | `#ffffff` | Active button text colour (gradient background) |
+| `--conf-hint-btn-bg` | `#2563eb` | Quick-suggestion button (lightbulb) background |
+| `--conf-hint-btn-hover-bg` | `#1d4ed8` | Lightbulb button hover background |
+| `--conf-table-header-bg` | SCSS variable | Field table header background |
+| `--conf-search-bg` | SCSS variable | Search field background |
+| `--conf-table-bg` | `#ffffff` | Table row background |
+| `--conf-card-bg` | `#ffffff` | Card background |
+| `--conf-font-family` | `inherit` | Configurator-wide font family |
+
 ---
 
 ### Configuration Models