@massimo-cassandro/minimo 1.29.6 → 1.31.0

package/charts/index.js

@@ -4,9 +4,9 @@ import { MinimoCharts } from './src/helpers/core.js';
 import { bars } from './src/bars.js';
 import { goal } from './src/goal.js';
 import { lines } from './src/lines.js';
+import { hbars } from './src/hbars.js';
 // import { ratingDisplay } from './src/rating-display/index.js';
 // import { pie } from './src/charts/pie.js';
-// import { hbars } from './src/charts/hbars.js';
 // import { signalBars } from './src/charts/signal-bars.js';
 // import { radialBars } from './src/charts/radial-bars.js';
 // import { settimanaleMensile } from './src/charts/settimanale-mensile.js';
@@ -17,6 +17,7 @@ import { lines } from './src/lines.js';
 export const barsChart = (chartInstance, params) => bars.call(chartInstance, params);
 export const goalChart = (chartInstance, params) => goal.call(chartInstance, params);
 export const linesChart = (chartInstance, params) => lines.call(chartInstance, params);
+export const hBarsChart = (chartInstance, params) => hbars.call(chartInstance, params);
 // export const ratingDisplayChart = (chartInstance, params) => ratingDisplay.call(chartInstance, params);
 
 export { MinimoCharts };

package/charts/src/bars.js

@@ -101,9 +101,14 @@ const default_params = {
   xAxisTitleAttrs: {...default_font_attrs, size: 18},
   xAxisTitleFontFilePath: null,
 
-  /** valori minimi e massimi per l'asse Y, se null vengono calcolati automaticamente */
+  /**
+    valori minimi e massimi per l'asse Y, se null vengono calcolati automaticamente.
+    Il calcolo automatico di min_value usa 0 come soglia massima, per far sì che le
+    barre partano da 0 quando i dati sono tutti positivi, estendendo il minimo verso
+    il basso solo se sono presenti valori negativi
+  */
   max_value: null,
-  min_value: 0,
+  min_value: null,
 
   /**
     classi e attributi dei vari elementi.
@@ -173,6 +178,11 @@ export async function bars(params) {
       throw 'Tutti i valori dei sub-array di `values` devono essere numerici';
     }
 
+    // calcolo automatico di min_value: 0 se i dati sono tutti positivi,
+    // altrimenti il valore minimo effettivo (per includere le barre negative nell'area del grafico)
+    if(params.min_value == null) {
+      params.min_value = Math.min(0, ...flatValues.filter(v => v != null));
+    }
 
     // container
     [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
@@ -237,9 +247,11 @@ export async function bars(params) {
       max_value,
       min_value,
       chart_area,
+      stepY_count,
       stepY_value,
       stepY_size,
-      stepX_size
+      stepX_size,
+      zero_y
     } = parseStdAxisOpts({
       max_value: params.max_value,
       min_value: params.min_value,
@@ -266,10 +278,12 @@ export async function bars(params) {
         max_value,
         min_value,
         chart_area,
+        stepY_count,
         stepY_value,
         stepY_size,
         stepX_size,
-        stepX_count
+        stepX_count,
+        zero_y
       }
     });
 
@@ -281,7 +295,9 @@ export async function bars(params) {
 
     // calcolo larghezza barre
     const barsWidth = (stepX_size - params.seriesGap - (params.barsGap * (params.values.length - 1))) / params.values.length
-      ,barsCornerRadius = Math.min(params.barsCornerRadius, barsWidth / 2) // il reggio dell'angolo non può essere più grandedella barra stessa
+      // il raggio dell'angolo non può essere più grande della barra stessa, né negativo
+      // (barsWidth può risultare negativo se seriesGap/barsGap non lasciano spazio sufficiente per tutte le serie)
+      ,barsCornerRadius = Math.max(0, Math.min(params.barsCornerRadius, barsWidth / 2))
     ;
 
 
@@ -303,9 +319,15 @@ export async function bars(params) {
         const isLast = idx === thisStepValues.length - 1;
 
         if (itemValue != null) {
-          // calcolo coordinata Y e altezza assoluta della barra
-          const barY = chart_area.top + chart_area.height - (((itemValue - min_value) * chart_area.height) / (max_value - min_value)),
-            barH = chart_area.bottom - barY,
+          // valori negativi: la barra scende dalla linea dello zero verso il basso,
+          // invece di crescere dal basso verso l'alto
+          const isNegative = itemValue < 0,
+            // calcolo coordinata Y del valore e altezza assoluta della barra,
+            // usando come baseline la linea dello zero (zero_y) invece del fondo del grafico
+            itemY = chart_area.top + chart_area.height - (((itemValue - min_value) * chart_area.height) / (max_value - min_value)),
+            barTop = isNegative? zero_y : itemY,
+            barBottom = isNegative? itemY : zero_y,
+            barH = barBottom - barTop,
             parteVerticaleBarra = barH - barsCornerRadius;
           let path;
 
@@ -315,20 +337,36 @@ export async function bars(params) {
 
               const altezzaCornerRadius = barH;
 
-              path = `M${barX},${chart_area.bottom}` +
-                `q0,-${altezzaCornerRadius} ${barsCornerRadius},-${altezzaCornerRadius}` +
-                `h${barsWidth - barsCornerRadius * 2}` +
-                `q${barsCornerRadius},0 ${barsCornerRadius},${altezzaCornerRadius}` +
-                'z';
+              path = isNegative
+                // angoli arrotondati in basso (lato lontano dallo zero), spigolo vivo in alto
+                ? `M${barX},${barTop}` +
+                  `q0,${altezzaCornerRadius} ${barsCornerRadius},${altezzaCornerRadius}` +
+                  `h${barsWidth - barsCornerRadius * 2}` +
+                  `q${barsCornerRadius},0 ${barsCornerRadius},-${altezzaCornerRadius}` +
+                  'z'
+                // angoli arrotondati in alto (lato lontano dallo zero), spigolo vivo in basso
+                : `M${barX},${barBottom}` +
+                  `q0,-${altezzaCornerRadius} ${barsCornerRadius},-${altezzaCornerRadius}` +
+                  `h${barsWidth - barsCornerRadius * 2}` +
+                  `q${barsCornerRadius},0 ${barsCornerRadius},${altezzaCornerRadius}` +
+                  'z';
 
             } else {
-              path = `M${barX},${chart_area.bottom}` +
-                `v-${parteVerticaleBarra}` +
-                `q0,-${barsCornerRadius} ${barsCornerRadius},-${barsCornerRadius}` +
-                `h${barsWidth - barsCornerRadius * 2}` +
-                `q${barsCornerRadius},0 ${barsCornerRadius},${barsCornerRadius}` +
-                `v${parteVerticaleBarra}` +
-                'z';
+              path = isNegative
+                ? `M${barX},${barTop}` +
+                  `v${parteVerticaleBarra}` +
+                  `q0,${barsCornerRadius} ${barsCornerRadius},${barsCornerRadius}` +
+                  `h${barsWidth - barsCornerRadius * 2}` +
+                  `q${barsCornerRadius},0 ${barsCornerRadius},-${barsCornerRadius}` +
+                  `v-${parteVerticaleBarra}` +
+                  'z'
+                : `M${barX},${barBottom}` +
+                  `v-${parteVerticaleBarra}` +
+                  `q0,-${barsCornerRadius} ${barsCornerRadius},-${barsCornerRadius}` +
+                  `h${barsWidth - barsCornerRadius * 2}` +
+                  `q${barsCornerRadius},0 ${barsCornerRadius},${barsCornerRadius}` +
+                  `v${parteVerticaleBarra}` +
+                  'z';
             }
 
             barsGroup.path(path)

package/charts/src/hbars.js

@@ -0,0 +1,419 @@
+// barre orizzontali — analogo di bars.js con assi invertiti:
+// categorie sull'asse verticale (a sinistra), valori sull'asse orizzontale (in basso)
+
+import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
+import { parseContainer } from './helpers/chart-utils.js';
+import { cartesianAxis } from './helpers/cartesian-axis.js';
+import { legenda } from './helpers/legenda.js';
+
+const default_lines_attrs = {
+  stroke: '#999',
+  'stroke-width': 1,
+  'shape-rendering': 'crispEdges',
+  'stroke-linecap': 'round',
+  fill: 'none'
+};
+
+const default_font_attrs = {
+  // family: 'sans-serif',
+  size: 14,
+  // stretch: 'normal',
+  // style: 'normal',
+  // variant: 'normal',
+  weight: 400,
+  fill: '#999'
+};
+
+const default_params = {
+
+  /** mostra info utili per il debug */
+  debug: false,
+
+  /** container (selettore o elemento DOM), se null viene restituito il codice SVG */
+  container: null,
+
+  /**
+    larghezza e altezza del grafico (px),
+    Se il container è presente e i parametro `width` e `height` sono `null`,
+    vengono utilizzate le dimensioni  del container.
+    Se uno dei due valori non è impostato o ricavabile, viene generato un errore.
+    NB: il padding del container viene considerato nelle dimensioni del grafico,
+    è preferibile non impostarlo.
+  */
+  width: null, // null || <value>
+  height: 300, // <value> || null
+
+  /** attributi facoltativi per l'svg (classe, ecc) */
+  svgAttrs: {},
+
+  /**
+    valori numerici per la definizione delle barre
+    è un array di array, in cui ogni subarray contiene i valori di una singola serie di barre
+  */
+  values: [],
+
+  /** spazio tra una barra e l'altra, all'interno dello stesso gruppo di categoria */
+  barsGap: 5,
+
+  /** spazio tra un gruppo di categoria e l'altro */
+  seriesGap: 10,
+
+  /** bars corner radius (lato esterno, lontano dallo zero) */
+  barsCornerRadius: 6,
+
+  /**
+    etichette di categoria, una per ogni gruppo di barre. Sono posizionate sull'asse verticale (a sinistra)
+  */
+  xLabels: [],
+
+  /**  spazio extra attorno al bordo */
+  padding: 10,
+
+  /**  suddivisioni asse dei valori (in basso) */
+  stepY_count: 4,
+
+  /**  px, altezza o larghezza ticks (secondo l'orientamento) */
+  ticksLength: 8,
+
+  /**
+    opzioni  per legenda come da componente legenda sono impostati automaticamente)
+    NB: l'elemento `items` viene generato dinamicamente:
+      `shape` è sempre impostato su line
+      `attrs` è ricavato dagli attributi delle linee dati
+
+    Per utilizzare le impostazioni di default, è sufficiente impostare i valori `items.text`
+  */
+  legenda: {},
+
+  /**
+    larghezza area etichette di categoria (asse verticale, a sinistra)
+  */
+  yAxisLabelWidth: 60,
+
+  /**  altezza area etichette dell'asse dei valori (in basso) */
+  xAxisLabelHeight: 50,
+
+  /** titoli assi: yAxisTitle → asse categorie (a sinistra), xAxisTitle → asse valori (in basso) */
+  yAxisTitle: null,
+  yAxisTitleAttrs: {...default_font_attrs, size: 18},
+  yAxisTitleFontFilePath: null,
+
+  xAxisTitle: null,
+  xAxisTitleAttrs: {...default_font_attrs, size: 18},
+  xAxisTitleFontFilePath: null,
+
+  /**
+    valori minimi e massimi per l'asse dei valori, se null vengono calcolati automaticamente.
+    Il calcolo automatico di min_value usa 0 come soglia massima, per far sì che le
+    barre partano da 0 quando i dati sono tutti positivi, estendendo il minimo verso
+    sinistra solo se sono presenti valori negativi
+  */
+  max_value: null,
+  min_value: null,
+
+  /**
+    classi e attributi dei vari elementi.
+    Per gli attributi, ogni variabile è un oggetto di attributi svg.js, es =
+
+    {
+      stroke: '#414141',
+      'stroke-width': 1,
+      'shape-rendering': 'crispEdges',
+      class: 'xxxx'
+    }
+
+  */
+  axisAttrs: {...default_lines_attrs, 'stroke-width': 2},
+  ticksAttrs: default_lines_attrs,
+
+  /**
+    griglia: showXgrid → griglia orizzontale (asse categorie), showYgrid → griglia verticale (asse valori)
+  */
+  showXgrid: false,
+  showYgrid: true,
+  gridLinesAttrs: default_lines_attrs,
+
+  labelXAttrs: default_font_attrs, // etichette di categoria (a sinistra)
+  labelXFontFilePath: null,  // percorso font per textToPath
+
+  labelYAttrs: default_font_attrs, // etichette dell'asse dei valori (in basso)
+  labelYFontFilePath: null,  // percorso font per textToPath
+
+
+
+  /** colori delle barre */
+  data_colors: null,
+
+
+  /**
+    Funzione per formattare le etichette dell'asse dei valori (in basso).
+    Null per nessuna eleborazione.
+    La funzione di default assume che il valore sia di tipo numerico
+  */
+  labelYFormatter: etiValue =>  Math.ceil(etiValue / 1e3)
+    .toLocaleString('it-IT', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }) +
+    (etiValue > 0? '\u2009K' : ''), // \u2009: thin space (https://www.compart.com/en/unicode/U+2009)
+
+};
+export async function hbars(params) {
+
+  const chartInstance = this;
+
+  params = {...default_params, ...params};
+  params.data_colors??= chartInstance.defaults.colors;
+
+  try {
+
+    // controllo values
+    params.values.forEach(subarray => {
+      if(!Array.isArray(subarray)) {
+        throw 'L’elemento `values` deve essere un array di soli array';
+      }
+    });
+
+    const flatValues = params.values.flat(); // utilizzato anche in seguito
+    if(flatValues.filter(v => isNaN(v)).length) {
+      throw 'Tutti i valori dei sub-array di `values` devono essere numerici';
+    }
+
+    // calcolo automatico di min_value: 0 se i dati sono tutti positivi,
+    // altrimenti il valore minimo effettivo (per includere le barre negative nell'area del grafico)
+    if(params.min_value == null) {
+      params.min_value = Math.min(0, ...flatValues.filter(v => v != null));
+    }
+
+    // container
+    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+
+
+    if(!params.width || !params.height) {
+      throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
+    }
+
+    // =>> legenda
+    // costruzione delle opzioni per la legenda
+    const legenda_params = {
+
+      ...{
+        /** altezza legenda */
+        height: 20,
+
+        /** spazio tra gli elementi della legenda */
+        elements_gap: 25,
+
+        /** dimensioni delle forme della legenda (NB: solo tondi) */
+        circles_radius: 20,
+
+        /** attributi svg.js dei font del testo della legenda (null utilizza default) */
+        fontAttrs: {
+          fill: '#333',
+          'font-size': 14,
+          'font-weight': 400
+        },
+        fontFilePath: null,
+      },
+
+      ...params.legenda
+    };
+
+
+    // legenda.items (elementi della legenda)
+    legenda_params.items = params.legenda.items.map((item, idx) => {
+      return {
+        ...item,
+        shape: 'circle',
+        attrs: {
+          ...(item.attrs?? {}),
+          fill: params.data_colors[idx]?? '#666',
+        }
+      };
+    });
+
+
+    // numero di step dell'asse delle categorie
+    const stepX_count = params.values.reduce((prev, curr) => Math.max(prev, curr.length), 0) + 1;
+
+    const svgCanvas = chartInstance.createSvgCanvas(params.container, params.debug)
+      .viewbox(0, 0, params.width, params.height)
+      .attr({...params.svgAttrs});
+
+
+    // pre-elaborazione e calcolo di alcuni elementi (chartArea)
+    // nuove variabili definite da parseStdAxisOpts (orientation:'horizontal':
+    // stepY_* si riferiscono all'asse dei valori (X), stepX_* all'asse delle categorie (Y))
+    const {
+      max_value,
+      min_value,
+      chart_area,
+      stepY_count,
+      stepY_value,
+      stepY_size,
+      stepX_size,
+      zero_y: zero_x
+    } = parseStdAxisOpts({
+      orientation: 'horizontal',
+      max_value: params.max_value,
+      min_value: params.min_value,
+      values: flatValues,
+      legenda: legenda_params,
+      padding: params.padding,
+      width: params.width,
+      height: params.height,
+      eti_asseX_height: params.xAxisLabelHeight,
+      eti_asseY_width: params.yAxisLabelWidth,
+      stepY_count: params.stepY_count,
+      stepX_count: stepX_count,
+      ticksLength: params.ticksLength,
+    }); // elaborazione standard
+
+    // =>> costruzione assi e griglia.
+    // Gli argomenti di cartesianAxis sono uguali a quelli di hbars
+    // con l'aggiunta di quelli calcolati da parseStdAxisOpts
+    // non tutti sono necessari ma vengono passati lo stesso per comodità
+    const cartesianAxisGroup = await cartesianAxis(chartInstance, {
+      ...params,
+      orientation: 'horizontal',
+      xLabelsOnTicks: false, // posiziona l'etichetta di categoria al centro di ogni step
+      ...{
+        max_value,
+        min_value,
+        chart_area,
+        stepY_count,
+        stepY_value,
+        stepY_size,
+        stepX_size,
+        stepX_count,
+        zero_y: zero_x
+      }
+    });
+
+    svgCanvas.add(cartesianAxisGroup);
+
+    // *********************************
+    // =>> disegno barre
+    // *********************************
+
+    // calcolo altezza (spessore) barre
+    const barsHeight = (stepX_size - params.seriesGap - (params.barsGap * (params.values.length - 1))) / params.values.length
+      // il raggio dell'angolo non può essere più grande dello spessore della barra stessa, né negativo
+      // (barsHeight può risultare negativo se seriesGap/barsGap non lasciano spazio sufficiente per tutte le serie,
+      // frequente qui perché l'asse delle categorie è vincolato all'altezza del grafico, spesso più stretta della larghezza)
+      ,barsCornerRadius = Math.max(0, Math.min(params.barsCornerRadius, barsHeight / 2))
+    ;
+
+
+    const barsGroup = svgCanvas.group()
+      .attr({ 'data-debug-info': params.debug? 'Gruppo barre' : null });
+
+    let barY = chart_area.top + params.seriesGap / 2;
+
+    for (let thisStepIdx = 0; thisStepIdx < stepX_count; thisStepIdx++) {
+
+      const thisStepValues = params.values.reduce((result, curr) => {
+        result.push(curr[thisStepIdx]?? null);
+        return result;
+      }, []);
+
+      // stampa di ogni barra della serie
+      for (let idx = 0; idx < thisStepValues.length; idx++) {
+        const itemValue = thisStepValues[idx];
+        const isLast = idx === thisStepValues.length - 1;
+
+        if (itemValue != null) {
+          // valori negativi: la barra si estende dalla linea dello zero verso sinistra,
+          // invece di crescere da sinistra verso destra
+          const isNegative = itemValue < 0,
+            // calcolo coordinata X del valore, usando come baseline la linea dello zero (zero_x)
+            // invece del margine sinistro del grafico. Nessuna inversione: l'asse X cresce verso destra
+            itemX = chart_area.left + (((itemValue - min_value) * chart_area.width) / (max_value - min_value)),
+            barLeft = isNegative? itemX : zero_x,
+            barRight = isNegative? zero_x : itemX,
+            barW = barRight - barLeft,
+            parteOrizzontaleBarra = barW - barsCornerRadius;
+          let path;
+
+          if(parteOrizzontaleBarra > 0) {
+
+            if(barW <= barsCornerRadius) {
+
+              const larghezzaCornerRadius = barW;
+
+              path = isNegative
+                // angoli arrotondati a sinistra (lato lontano dallo zero), spigolo vivo a destra
+                ? `M${zero_x},${barY}` +
+                  `q-${larghezzaCornerRadius},0 -${larghezzaCornerRadius},${barsCornerRadius}` +
+                  `v${barsHeight - barsCornerRadius * 2}` +
+                  `q0,${barsCornerRadius} ${larghezzaCornerRadius},${barsCornerRadius}` +
+                  'z'
+                // angoli arrotondati a destra (lato lontano dallo zero), spigolo vivo a sinistra
+                : `M${zero_x},${barY}` +
+                  `q${larghezzaCornerRadius},0 ${larghezzaCornerRadius},${barsCornerRadius}` +
+                  `v${barsHeight - barsCornerRadius * 2}` +
+                  `q0,${barsCornerRadius} -${larghezzaCornerRadius},${barsCornerRadius}` +
+                  'z';
+
+            } else {
+              path = isNegative
+                ? `M${zero_x},${barY}` +
+                  `h-${parteOrizzontaleBarra}` +
+                  `q-${barsCornerRadius},0 -${barsCornerRadius},${barsCornerRadius}` +
+                  `v${barsHeight - barsCornerRadius * 2}` +
+                  `q0,${barsCornerRadius} ${barsCornerRadius},${barsCornerRadius}` +
+                  `h${parteOrizzontaleBarra}` +
+                  'z'
+                : `M${zero_x},${barY}` +
+                  `h${parteOrizzontaleBarra}` +
+                  `q${barsCornerRadius},0 ${barsCornerRadius},${barsCornerRadius}` +
+                  `v${barsHeight - barsCornerRadius * 2}` +
+                  `q0,${barsCornerRadius} -${barsCornerRadius},${barsCornerRadius}` +
+                  `h-${parteOrizzontaleBarra}` +
+                  'z';
+            }
+
+            barsGroup.path(path)
+              .attr({
+                fill: params.data_colors[idx]?? '#666',
+                'data-debug-info': params.debug? `value: ${itemValue}` : null
+              });
+          }
+        }
+
+        barY += barsHeight + (isLast ? 0 : params.barsGap);
+      }
+
+      barY += params.seriesGap;
+    }
+
+
+
+    // *********************************
+    // =>> Legenda
+    // *********************************
+    const legendaEl = await legenda(chartInstance, legenda_params);
+    legendaEl.attr({ 'data-cfg.debug-info': params.debug? 'Legenda' : null });
+    const legendaBbox = legendaEl.bbox();
+
+    legendaEl.dmove(
+      (params.width - legendaBbox.width) / 2,
+      params.padding
+    );
+    legendaEl.y(params.padding);
+
+    legendaEl.x((params.width - legendaBbox.width) / 2);
+
+    svgCanvas.add(legendaEl);
+
+
+    if(!params.container) {
+      return svgCanvas.svg();
+    }
+
+
+  } catch(e) {
+    console.error( 'MinimoCharts / hbars →', e ); // eslint-disable-line
+  }
+
+}

package/charts/src/helpers/cartesian-axis.js

@@ -4,7 +4,18 @@
 import { G } from '@svgdotjs/svg.js';
 import { createTextEl } from './create-text-element.js';
 
-export async function cartesianAxis(chartInstance, {
+/**
+  dispatcher: orientation 'vertical' (barre/linee verticali, default) o 'horizontal' (barre orizzontali).
+  Gli argomenti sono gli stessi per entrambi gli orientamenti (vedi cartesianAxisVertical),
+  interpretati diversamente da ciascun ramo (vedi commenti in cartesianAxisHorizontal)
+*/
+export async function cartesianAxis(chartInstance, params) {
+  return params.orientation === 'horizontal'
+    ? cartesianAxisHorizontal(chartInstance, params)
+    : cartesianAxisVertical(chartInstance, params);
+}
+
+async function cartesianAxisVertical(chartInstance, {
   debug = false,
   chart_area = {},
   padding = 0,
@@ -20,6 +31,7 @@ export async function cartesianAxis(chartInstance, {
   stepY_size,
   stepY_value,
   min_value,
+  zero_y,
   stepX_size,
   stepX_count,
   ticksLength,
@@ -106,7 +118,8 @@ export async function cartesianAxis(chartInstance, {
       );
 
       // =>> griglia orizzontale (ortogonale all'asse Y)
-      if(showYgrid && stepIdx > 0) { // la prima linea coincide con l'asse X
+      // viene omessa solo la linea che coincide con l'asse X (la linea dello zero)
+      if(showYgrid && Math.abs(y - zero_y) > 0.01) {
         yGridGroup.line(
           chart_area.left, y,
           chart_area.right, y
@@ -147,8 +160,8 @@ export async function cartesianAxis(chartInstance, {
     xAxisGroup
       .attr({ 'data-debug-info': debug? 'Gruppo Asse X' : null })
       .line(
-        chart_area.left, chart_area.bottom,
-        chart_area.right, chart_area.bottom
+        chart_area.left, zero_y,
+        chart_area.right, zero_y
       )
       .attr({
         'data-debug-info': debug? 'Asse X' : null,
@@ -252,3 +265,248 @@ export async function cartesianAxis(chartInstance, {
     console.error( 'MinimoCharts → cartesianAxis', e ); // eslint-disable-line
   }
 }
+
+/**
+  Variante orizzontale (barre orizzontali): rispetto a cartesianAxisVertical i ruoli sono invertiti:
+    - l'asse dei VALORI (numerico, formattato con labelYFormatter) è fisso in basso (come l'asse X
+      di cartesianAxisVertical), con griglia verticale. La linea dello zero (baseline delle barre)
+      è una linea verticale che si sposta in base al segno dei dati (zero_y qui è una coordinata X)
+    - l'asse delle CATEGORIE (testuale, da xLabels) è fisso a sinistra (come l'asse Y di
+      cartesianAxisVertical), con griglia orizzontale
+  stepY_count/stepY_size/stepY_value/zero_y e stepX_size/stepX_count sono gli stessi campi
+  restituiti da parseStdAxisOpts con orientation:'horizontal' (vedi commenti lì)
+*/
+async function cartesianAxisHorizontal(chartInstance, {
+  debug = false,
+  chart_area = {},
+  padding = 0,
+  width,
+  height,
+  axisAttrs = {},
+  ticksAttrs = {},
+  labelYAttrs = {},
+  labelYFontFilePath = null,
+  labelXAttrs = {},
+  labelXFontFilePath = null,
+  stepY_count,
+  stepY_size,
+  stepY_value,
+  min_value,
+  zero_y: zero_x, // rinominato per chiarezza: qui è una coordinata X
+  stepX_size,
+  stepX_count,
+  ticksLength,
+  showXgrid = true, // griglia orizzontale (asse categorie)
+  showYgrid = true, // griglia verticale (asse valori)
+  gridLinesAttrs = {},
+
+  yAxisTitle = null, // titolo asse categorie (a sinistra)
+  yAxisTitleAttrs = {},
+  yAxisTitleFontFilePath = null,
+
+  xAxisTitle = null, // titolo asse valori (in basso)
+  xAxisTitleAttrs = {},
+  xAxisTitleFontFilePath = null,
+
+  xLabels, // array con le etichette di categoria, mostrate sull'asse verticale (a sinistra)
+  xLabelsOnTicks = true,
+  labelYFormatter = null, // funzione, formatta le etichette numeriche dell'asse valori (in basso)
+}) {
+
+  try {
+
+    const cartesianAxisGroup = new G();
+    cartesianAxisGroup.attr({ 'data-debug-info': debug? 'Gruppo Base Assi Cartesiani (orizzontale) ed elementi correlati' : null });
+
+    // =>> ASSE VALORI (in basso, fisso — analogo all'asse X di cartesianAxisVertical)
+    // *****************************************
+    const valueAxisGroup = cartesianAxisGroup.group();
+    valueAxisGroup
+      .attr({ 'data-debug-info': debug? 'Gruppo Asse Valori' : null })
+      .line(
+        chart_area.left, chart_area.bottom,
+        chart_area.right, chart_area.bottom
+      )
+      .attr({
+        'data-debug-info': debug? 'Asse Valori' : null,
+        ...axisAttrs
+      });
+
+    // =>> ticks ed etichette asse valori (da sinistra a destra)
+    const ticksValueGroup = valueAxisGroup.group().attr({
+      'data-debug-info': debug? 'Gruppo ticks Asse Valori' : null,
+    });
+    const labelsValueGroup = valueAxisGroup.group().attr({
+      'data-debug-info': debug? 'Gruppo etichette Asse Valori' : null,
+    });
+
+    // gruppo per griglia asse valori (verticale, ortogonale all'asse)
+    let valueGridGroup = null;
+    if(showYgrid) {
+      valueGridGroup = cartesianAxisGroup.group()
+        .attr({ 'data-debug-info': debug? 'Gruppo Griglia Asse Valori' : null });
+    }
+
+    for await (const stepIdx of Array.from(Array(stepY_count + 1).keys())) {
+
+      const x = chart_area.left + (stepY_size * stepIdx)
+        ,label = labelYFormatter(min_value + stepY_value * stepIdx);
+
+      // =>> ticks asse valori
+      ticksValueGroup
+        .line(
+          x, chart_area.bottom,
+          x, chart_area.bottom + ticksLength
+        )
+        .attr(ticksAttrs);
+
+      // =>> etichette asse valori
+      const labelEl = await createTextEl(chartInstance, {
+          text: label,
+          textFill: labelYAttrs.fill?? '#000',
+          fontAttr: labelYAttrs,
+          fontFilePath: labelYFontFilePath,
+          parentElement: labelsValueGroup
+        }),
+        label_bbox = labelEl.bbox();
+
+      labelEl.move(
+        x - label_bbox.width / 2,
+        chart_area.bottom + ticksLength + 2 // 2 è un distanziatore tra l'etichetta e la linea
+      );
+
+      // =>> griglia verticale (ortogonale all'asse valori)
+      // viene omessa solo la linea che coincide con l'asse categorie (la linea dello zero)
+      if(showYgrid && Math.abs(x - zero_x) > 0.01) {
+        valueGridGroup.line(
+          x, chart_area.top,
+          x, chart_area.bottom
+        ).attr(gridLinesAttrs);
+      }
+
+    } // end for await stepIdx
+
+    // =>> titolo asse valori (in basso)
+    if(xAxisTitle) {
+      const titleEl = await createTextEl (chartInstance, {
+          text: xAxisTitle,
+          textFill: xAxisTitleAttrs.fill?? '#000',
+          fontAttr: xAxisTitleAttrs,
+          fontFilePath: xAxisTitleFontFilePath,
+          parentElement: valueAxisGroup
+        }),
+        title_bbox = titleEl.bbox();
+
+      titleEl.move(
+        chart_area.left + (chart_area.width - title_bbox.width) / 2,
+        height - padding - title_bbox.height
+      );
+    }
+
+
+
+    // =>> ASSE CATEGORIE (a sinistra — analogo all'asse Y di cartesianAxisVertical;
+    // la linea dell'asse è quella dello zero, si sposta in base al segno dei dati)
+    // *****************************************
+    const categoryAxisGroup = cartesianAxisGroup.group();
+    categoryAxisGroup
+      .attr({ 'data-debug-info': debug? 'Gruppo Asse Categorie' : null })
+      .line(
+        zero_x, chart_area.top,
+        zero_x, chart_area.bottom
+      )
+      .attr({
+        'data-debug-info': debug? 'Asse Categorie' : null,
+        ...axisAttrs
+      });
+
+    // =>> ticks ed etichette asse categorie (dall'alto verso il basso)
+    const ticksCategoryGroup = categoryAxisGroup.group().attr({
+      'data-debug-info': debug? 'Gruppo ticks Asse Categorie' : null,
+    });
+    const labelsCategoryGroup = categoryAxisGroup.group().attr({
+      'data-debug-info': debug? 'Gruppo etichette Asse Categorie' : null,
+    });
+
+    // coordinata x per il posizionamento delle etichette (a sinistra dei ticks, fisse su chart_area.left)
+    const labelX = chart_area.left - ticksLength - 2; // 2 è un distanziatore tra l'etichetta e la linea
+
+    // gruppo per griglia asse categorie (orizzontale, ortogonale all'asse)
+    // il gruppo viene sempre creato, perché anche se non si stampa la griglia viene
+    // cmq aggiunta l'ultima linea in basso
+    const categoryGridGroup = cartesianAxisGroup.group()
+      .attr({ 'data-debug-info': debug? 'Gruppo Griglia Asse Categorie' : null });
+
+    for (let i = 0; i <= stepX_count - 1; i++) {
+
+      const thisLabel = (Array.isArray(xLabels) ? xLabels[i] : undefined) ?? '',
+        labelIdx = i,
+        isLastStep = labelIdx === stepX_count - 1,
+        y = chart_area.top + (stepX_size * labelIdx);
+
+      // =>> ticks categorie
+      ticksCategoryGroup
+        .line(
+          chart_area.left - ticksLength, y,
+          chart_area.left, y
+        )
+        .attr(ticksAttrs);
+
+      // =>> etichette categorie
+      const labelEl = await createTextEl (chartInstance, {
+          text: thisLabel,
+          textFill: labelXAttrs.fill?? '#000',
+          fontAttr: labelXAttrs,
+          fontFilePath: labelXFontFilePath,
+          parentElement: labelsCategoryGroup
+        }),
+        label_bbox = labelEl.bbox();
+
+      // posizionamento (allineate a destra sulla linea dei ticks)
+      labelEl.move(
+        labelX - label_bbox.width,
+        y - label_bbox.height / 2 + (xLabelsOnTicks? 0 : stepX_size / 2)
+      );
+
+      // =>> griglia orizzontale
+      // la prima linea coincide con l'asse valori (in basso, essendo la prima categoria in alto)
+      // l'ultima linea in basso viene stampata sempre
+      if((showXgrid && labelIdx > 0) || isLastStep ) {
+        categoryGridGroup.line(
+          chart_area.left, y,
+          chart_area.right, y
+        ).attr(gridLinesAttrs);
+      }
+
+    } // end for thisLabel
+
+    // =>> titolo asse categorie (a sinistra, ruotato)
+    if(yAxisTitle) {
+      const titleGroup = categoryAxisGroup.group(); // per la rotazione
+      titleGroup.attr({
+        'data-debug-info': debug? 'Titolo asse Categorie' : null,
+      });
+
+      const titleEl = await createTextEl(chartInstance, {
+        text: yAxisTitle,
+        textFill: yAxisTitleAttrs.fill?? '#000',
+        fontAttr: yAxisTitleAttrs,
+        fontFilePath: yAxisTitleFontFilePath,
+        parentElement: titleGroup
+      });
+
+      titleEl.rotate(-90);
+      const title_bbox = titleGroup.bbox();
+
+      titleGroup.move(
+        padding,
+        (chart_area.bottom - title_bbox.height) / 2
+      );
+    }
+
+    return cartesianAxisGroup;
+
+  } catch(e) {
+    console.error( 'MinimoCharts → cartesianAxis (horizontal)', e ); // eslint-disable-line
+  }
+}

package/charts/src/helpers/parse-std-axis-opts.js

@@ -33,6 +33,14 @@ export function parseStdAxisOpts(params = {} ) {
       stepX_count: null, // non può essere null, va verificato prima
       ticksLength: 0,
 
+      /**
+        'vertical' (barre/linee verticali, default): l'asse dei valori è l'asse Y, l'asse delle categorie è l'asse X.
+        'horizontal' (barre orizzontali): l'asse dei valori è l'asse X, l'asse delle categorie è l'asse Y.
+        Influisce solo sul calcolo geometrico di stepY_size/zero_y/stepX_size (vedi sotto),
+        non sul calcolo "nice zero" di min_value/max_value/stepY_count, che è indipendente dall'orientamento
+      */
+      orientation: 'vertical',
+
       ...params
     };
 
@@ -62,6 +70,23 @@ export function parseStdAxisOpts(params = {} ) {
       parsed.min_value = params.min_value;
     }
 
+    // se i valori attraversano lo zero (min negativo, max positivo), min_value/max_value/stepY_count
+    // vengono ricalcolati in modo che tutti gli step della griglia abbiano la stessa dimensione
+    // e che lo zero coincida esattamente con una delle suddivisioni (invece di cadere a metà tra due step)
+    let stepY_count = params.stepY_count;
+
+    if(parsed.min_value < 0 && parsed.max_value > 0) {
+      const rawStep = (parsed.max_value - parsed.min_value) / stepY_count,
+        positive_steps = Math.max(1, Math.round(parsed.max_value / rawStep)),
+        step = parsed.max_value / positive_steps,
+        negative_steps = Math.max(1, Math.ceil(Math.abs(parsed.min_value) / step));
+
+      parsed.max_value = positive_steps * step;
+      parsed.min_value = -negative_steps * step;
+      stepY_count = positive_steps + negative_steps;
+    }
+    parsed.stepY_count = stepY_count;
+
     const legenda_height = params.legenda?.height?? 0;
     const gap_legenda = legenda_height? 10 : 0; // spazio tra legenda e grafico
 
@@ -78,16 +103,32 @@ export function parseStdAxisOpts(params = {} ) {
     parsed.chart_area.width = parsed.chart_area.right - parsed.chart_area.left;
     parsed.chart_area.height = parsed.chart_area.bottom - parsed.chart_area.top;
 
-    // valore di ogni step asse y
-    // (usato per il calcolo delle etichette dell'asse Y)
-    parsed.stepY_value = (parsed.max_value - parsed.min_value) / params.stepY_count;
-
-    // lunghezza di ogni step asse y
-    parsed.stepY_size = parsed.chart_area.height / params.stepY_count;
-
-
-    parsed.stepX_size = parsed.chart_area.width / (params.stepX_count - 1);
-
+    // valore di ogni step dell'asse dei valori
+    // (usato per il calcolo delle etichette)
+    parsed.stepY_value = (parsed.max_value - parsed.min_value) / stepY_count;
+
+    const isHorizontal = params.orientation === 'horizontal';
+
+    // lunghezza di ogni step dell'asse dei valori e dell'asse delle categorie:
+    // con orientamento verticale l'asse dei valori è l'asse Y (chart_area.height) e quello delle
+    // categorie è l'asse X (chart_area.width); con orientamento orizzontale i ruoli sono invertiti
+    parsed.stepY_size = (isHorizontal? parsed.chart_area.width : parsed.chart_area.height) / stepY_count;
+    parsed.stepX_size = (isHorizontal? parsed.chart_area.height : parsed.chart_area.width) / (params.stepX_count - 1);
+
+    // coordinata corrispondente al valore 0 (asse Y con orientamento verticale, asse X con orientamento orizzontale)
+    // utile quando min_value è negativo: la baseline delle barre viene disegnata in corrispondenza
+    // dello zero invece che del valore minimo
+    let raw_zero_y;
+    if(isHorizontal) {
+      // l'asse X cresce naturalmente verso destra (nessuna inversione necessaria, a differenza dell'asse Y)
+      raw_zero_y = parsed.chart_area.left +
+        (((0 - parsed.min_value) * parsed.chart_area.width) / (parsed.max_value - parsed.min_value));
+      parsed.zero_y = Math.max(parsed.chart_area.left, Math.min(parsed.chart_area.right, raw_zero_y));
+    } else {
+      raw_zero_y = parsed.chart_area.top + parsed.chart_area.height -
+        (((0 - parsed.min_value) * parsed.chart_area.height) / (parsed.max_value - parsed.min_value));
+      parsed.zero_y = Math.min(parsed.chart_area.bottom, Math.max(parsed.chart_area.top, raw_zero_y));
+    }
 
     return parsed;
 

package/charts/src/lines.js

@@ -277,9 +277,11 @@ export async function lines(params) {
       max_value,
       min_value,
       chart_area,
+      stepY_count,
       stepY_value,
       stepY_size,
-      stepX_size
+      stepX_size,
+      zero_y
     } = parseStdAxisOpts({
       max_value: params.max_value,
       min_value: params.min_value,
@@ -305,10 +307,12 @@ export async function lines(params) {
         max_value,
         min_value,
         chart_area,
+        stepY_count,
         stepY_value,
         stepY_size,
         stepX_size,
-        stepX_count
+        stepX_count,
+        zero_y
       }
     });
 

package/design-tokens/tokens-config-sample.mjs

@@ -25,7 +25,7 @@ const config = {
   stylelintConfigPath: '../../stylelint.config.mjs',
 
   // Output directory for the CSS file generated by Style Dictionary
-  buildPath: '../src/css',
+  buildPath: './',
 
   // Output filename for the generated CSS file
   destFile: 'custom-properties.css',

package/dev-tools/README.md

@@ -10,9 +10,9 @@ A collection of standalone Node.js CLI utilities to help manage a web project's
 
 ## starter-kit
 
-`starter-kit/starter-install.sh` bootstraps a new frontend project: it copies the starter config files (`package.json`, `.gitignore`, `jsconfig.json`, eslint/stylelint configs, webpack config and modules, ...) and installs all the required dev dependencies.
+`starter-kit/starter-install.sh` bootstraps a new frontend project: it copies the starter config files (`package.json`, `.gitignore`, `jsconfig.json`, eslint/stylelint configs, webpack config and modules, ...) into the project root and the frontend files (webpack template, `CLAUDE.md`, `_root_htaccess`/`_root_robots.txt`, ...) into a fixed `./app` folder, then installs all the required dev dependencies.
 
-The script **requires zsh** (it exits with an error if launched with `sh` or `bash`). Existing files are never overwritten: root config files are copied with a `NEW-` prefix, while `package.json` and the `*.code-workspace` file are merged (template keys are appended at the end, prefixed with `_`).
+The script **requires zsh** (it exits with an error if launched with `sh` or `bash`). Existing files are never overwritten: they are copied alongside with a `NEW-` prefix (to be integrated manually or removed). If the `./app` folder already exists, the whole frontend file set is copied into `./NEW-app` instead.
 
 ### If minimo is already installed
 
@@ -22,7 +22,7 @@ The script is exposed as a `bin` of the package:
 npx starter-kit
 ```
 
-Since the installation is fully overwrite-safe, the script can also be **re-run at any time to update** an existing setup (e.g. to refresh the webpack modules or reinstall the dev dependencies): existing files are skipped or copied with the `NEW-` prefix, and the `package.json` / `*.code-workspace` merges are idempotent (running the script again neither duplicates nor overwrites anything).
+Since the installation is fully overwrite-safe, the script can also be **re-run at any time to update** an existing setup (e.g. to refresh the webpack modules or reinstall the dev dependencies): existing files are copied with the `NEW-` prefix, so running the script again never duplicates or overwrites anything.
 
 ### Without installing minimo
 
@@ -34,14 +34,6 @@ zsh package/dev-tools/starter-kit/starter-install.sh
 rm -rf package
 ```
 
-To test the installation skipping all `npm install` commands, use the `--no-npm` parameter:
-
-```bash
-curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
-zsh package/dev-tools/starter-kit/starter-install.sh --no-npm
-rm -rf package
-```
-
 ## SVG adn favicons tools
 
 ```bash

package/dev-tools/starter-kit/starter-install.sh

@@ -3,8 +3,9 @@
 # IMPORTANTE: questo script è idempotente e deve restare tale.
 # Può essere rilanciato più volte sullo stesso progetto (anche via `npx starter-kit`
 # per aggiornare un setup esistente) senza sovrascrivere nulla né creare duplicati:
-# i file esistenti vengono saltati o copiati con prefisso NEW- (o _ per
-# package.json e *.code-workspace).
+# i file esistenti vengono copiati con prefisso NEW- (da integrare manualmente
+# o rimuovere); la cartella di installazione del frontend, fissa su ./app, se
+# già esistente viene sostituita con ./NEW-app.
 # Ogni modifica futura deve conservare questa proprietà.
 
 RED='\033[0;31m'
@@ -12,7 +13,7 @@ YELLOW='\033[0;33m'
 GREEN='\033[0;32m'
 NC='\033[0m' # No Color
 
-DEBUG=TRUE
+DEBUG=FALSE
 
 # Questo script richiede zsh: se lanciato con sh/bash blocca l'esecuzione
 if [ -z "$ZSH_VERSION" ]; then

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.29.6",
+  "version": "1.31.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/components/modal-popup/modal-popup.js

@@ -27,6 +27,54 @@ function closeDialog(el) {
   }, { once: true });
 }
 
+/**
+ * Wraps a single domBuilder object (not an array, not a DOM Node) into an array,
+ * so `content`/`headerContent`/`footerContent` can be handled uniformly with domBuilder arrays.
+ * @param {*} value
+ * @returns {*}
+ */
+function normalizeContentParam(value) {
+  if(value != null && typeof value === 'object' && !Array.isArray(value) && !(value instanceof Node)) {
+    return [value];
+  }
+  return value;
+}
+
+/**
+ * @param {*} value - a non-null `content`/`headerContent`/`footerContent` value
+ * @returns {'domBuilder' | 'node' | 'function' | 'html'}
+ */
+function getContentKind(value) {
+  if(Array.isArray(value)) {
+    return 'domBuilder';
+  }
+  if(value instanceof Node) {
+    return 'node';
+  }
+  if(typeof value === 'function') {
+    return 'function';
+  }
+  return 'html';
+}
+
+/**
+ * Resolves the `content`/`children` domBuilder props for a `headerContent`/`footerContent` value.
+ * The `function` kind is not handled here: it is invoked separately, from the item's `callback`,
+ * once the container element exists.
+ * @param {*} value
+ * @returns {{content: string | Node | null, children: DomBuilderItem[] | undefined}}
+ */
+function getDomBuilderContentProps(value) {
+  if(value == null) {
+    return { content: null, children: undefined };
+  }
+  const kind = getContentKind(value);
+  return {
+    content: (kind === 'html' || kind === 'node') ? value : null,
+    children: kind === 'domBuilder' ? value : undefined
+  };
+}
+
 /**
  * modalPopup
  * Opens a popup dialog with the given content.
@@ -40,7 +88,7 @@ function closeDialog(el) {
  *
  * @param {Object} params
  * @param {string | null} [params.dialogExtraClassName=null] - Extra class added to the dialog element. (default: null)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.content=null] - Plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.content=null] - Plain text, HTML, a domBuilder object, a domBuilder array, a DOM node (appended as-is), or a function invoked with the content container element to populate it directly (`content(dialogContentEl)`). (default: null)
  * @param {string | null} [params.contentExtraClassName=null] - Extra class added to the content wrapper. (default: null)
  * @param {HTMLElement | null} [params.triggerElement=null] - Optional element that triggered the popup; when set, `aria-haspopup`, `aria-controls` and `aria-expanded` are managed on it. (default: null)
  * @param {boolean} [params.addFocus=true] - if true, dialog receives focus after opening (default: true)
@@ -58,8 +106,8 @@ function closeDialog(el) {
  * @param {((el: HTMLDialogElement) => void) | null} [params.closeCallback=null] - Called with the dialog element just before it is removed, receives the dialog element (`closeCallback(dialogEl)`). NB: `dialogEl` is removed immediately after closing. (default: null)
  * @param {((data: *, el: Element) => void) | null} [params.ajaxCallback=null] - Called with the Ajax response and the content element. (default: null)
  * @param {boolean} [params.addScrollbarPadding=false] - Adds right padding to compensate for the scrollbar. (default: false)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.headerContent=null] - Header content: plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.footerContent=null] - Footer content: plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.headerContent=null] - Header content: plain text, HTML, a domBuilder object, a domBuilder array, a DOM node, or a function invoked with the header container element to populate it directly. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.footerContent=null] - Footer content: same accepted types as `headerContent`, invoked with the footer container element. (default: null)
  * @returns {HTMLDialogElement} The dialog element.
  */
 
@@ -84,7 +132,7 @@ export function modalPopup({
   /** iframe url */
   iframeUrl = null,
 
-  /** content: plain text, html, domBuilder object or domBuilder array */
+  /** content: plain text, html, domBuilder object/array, DOM node, or function(container) */
   content = null,
 
   /** Ajax url and callback.
@@ -98,13 +146,13 @@ export function modalPopup({
   closeCallback = null,
   addScrollbarPadding = false, // adds extra right padding to compensate for the scrollbar
 
-  /** header content: plain text, HTML, domBuilder object or domBuilder array */
+  /** header content: plain text, HTML, domBuilder object/array, DOM node, or function(container) */
   headerContent = null,
 
   /** extra classname added to header */
   headerExtraClassName = null,
 
-  /** footer content: plain text, HTML, domBuilder object or domBuilder array */
+  /** footer content: plain text, HTML, domBuilder object/array, DOM node, or function(container) */
   footerContent = null,
 
   /** extra classname added to footer */
@@ -121,22 +169,13 @@ export function modalPopup({
   }
 
   // allow a single domBuilder object (in addition to a domBuilder array) by wrapping it in an array
-  if(content != null && typeof content === 'object' && !Array.isArray(content)) {
-    content = [content];
-  }
-  if(headerContent != null && typeof headerContent === 'object' && !Array.isArray(headerContent)) {
-    headerContent = [headerContent];
-  }
-  if(footerContent != null && typeof footerContent === 'object' && !Array.isArray(footerContent)) {
-    footerContent = [footerContent];
-  }
+  content = normalizeContentParam(content);
+  headerContent = normalizeContentParam(headerContent);
+  footerContent = normalizeContentParam(footerContent);
 
   let mode;
-  if(content != null && Array.isArray(content)) {
-    mode = 'domBuilder';
-
-  } else if (content != null) {
-    mode = 'html';
+  if(content != null) {
+    mode = getContentKind(content);
 
   } else if (ajaxUrl != null && ajaxCallback != null) {
     mode = 'ajax';
@@ -210,13 +249,17 @@ export function modalPopup({
               id: headerId,
               className: classnames(styles.header, headerExtraClassName),
               condition: headerContent != null,
-              content: Array.isArray(headerContent) ? null : headerContent,
-              children: Array.isArray(headerContent) ? headerContent : undefined
+              ...getDomBuilderContentProps(headerContent),
+              callback: el => {
+                if(headerContent != null && getContentKind(headerContent) === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (headerContent)(/** @type {HTMLElement} */ (el));
+                }
+              }
             },
             {
               className: classnames(styles.content, contentExtraClassName),
-              content: mode === 'html'
-                ? content
+              content: (mode === 'html' || mode === 'node')
+                ? /** @type {string | Node} */ (content)
                 : mode === 'ajax'
                   ? spinner()
                   : null,
@@ -233,7 +276,11 @@ export function modalPopup({
                 }
               ],
               callback: el => {
-                dialogContentEl = el;
+                dialogContentEl = /** @type {HTMLElement} */ (el);
+
+                if(mode === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (content)(dialogContentEl);
+                }
 
                 if(mode === 'ajax') {
                   try {
@@ -241,7 +288,7 @@ export function modalPopup({
                     (async () => {
                       const response = await fetch(safeAjaxUrl),
                         data = await response.json();
-                      el.innerHTML = '';
+                      dialogContentEl.innerHTML = '';
                       ajaxCallback?.(data, dialogContentEl);
                     })();
 
@@ -258,8 +305,12 @@ export function modalPopup({
             {
               className: classnames(styles.footer, footerExtraClassName),
               condition: footerContent != null,
-              content: Array.isArray(footerContent) ? null : footerContent,
-              children: Array.isArray(footerContent) ? footerContent : undefined
+              ...getDomBuilderContentProps(footerContent),
+              callback: el => {
+                if(footerContent != null && getContentKind(footerContent) === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (footerContent)(/** @type {HTMLElement} */ (el));
+                }
+              }
             },
           ]
         }

package/src/css/forms/forms.css

@@ -105,6 +105,11 @@ label:has(.form-control) {
   }
 }
 
+.form-control[type='number'] {
+  font-feature-settings: 'lnum', 'tnum';
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
 /* da bootstrap */
 select.form-control {