@massimo-cassandro/minimo 1.18.4 → 1.19.1

package/src/components/unsplash-page/unsplash-page.minimo.tokens.mjs

@@ -37,49 +37,112 @@ export default {
       }
     }, // end base setup
 
-    // credit box
-    credits: {
+    // title
+    h1: {
+      color: {
+        $type: 'color',
+        $value: '{uspg.text.color}'
+      },
       font: {
         size: {
           $type: 'dimension',
-          $value: '{font.size.xs}'
+          $value: '{font.size.xl}'
         },
         weight: {
           $type: 'fontWeight',
-          $value: '{font.weight.regular}'
+          $value: '{font.weight.bold}'
         },
+        'variation-settings': {
+          $type: 'string',
+          $value: 'unset'
+        }
       },
       'line-height': {
         $type: 'number',
         $value: '{line-height.xs}'
       },
-    }, // end credits
+    }, // end h1
 
-    // title
-    h1: {
+
+    // links
+    link: {
       color: {
         $type: 'color',
-        $value: '{uspg.text.color}'
+        $value: '#fc0'
+      },
+      decoration: {
+        $type: 'string',
+        $value: 'none'
+      },
+      visited: {
+        color: {
+          $type: 'color',
+          $value: '#C711FF'
+        }
+      },
+      hover: {
+        color: {
+          $type: 'color',
+          $value: '{uspg.bg.color}'
+        },
+        background: {
+          color: {
+            $type: 'color',
+            $value: 'transparent'
+          }
+        },
+        decoration: {
+          $type: 'string',
+          $value: 'underline'
+        },
       },
+      active: {
+        color: {
+          $type: 'color',
+          $value: '#F49C29'
+        }
+      },
+      focus: {
+        outline: {
+          width: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          style: {
+            $value: 'solid',
+            $type: 'string'
+          },
+          color: {
+            $value: '{uspg.link.color}',
+            $type: 'color'
+          },
+          offset: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+        }
+      }
+
+    },
+
+    // credit box
+    credits: {
       font: {
         size: {
           $type: 'dimension',
-          $value: '{font.size.xl}'
+          $value: '{font.size.xs}'
         },
         weight: {
           $type: 'fontWeight',
-          $value: '{font.weight.bold}'
+          $value: '{font.weight.regular}'
         },
-        'variation-settings': {
-          $type: 'string',
-          $value: 'unset'
-        }
       },
       'line-height': {
         $type: 'number',
         $value: '{line-height.xs}'
       },
-    }, // end h1
+    }, // end credits
+
 
     // icons
     icon: {
@@ -105,30 +168,6 @@ export default {
       }
     }, // end icons
 
-    // links
-    link: {
-      color: {
-        $type: 'color',
-        $value: '#fc0'
-      },
-      decoration: {
-        $type: 'string',
-        $value: 'none'
-      },
-      hover: {
-        color: {
-          $type: 'color',
-          $value: '#fc0'
-        },
-        decoration: {
-          $type: 'string',
-          $value: 'underline'
-        },
-
-      }
-
-    }, // end link
-
     // loader
     loader: {
       color: {

package/src/components/unsplash-page/unsplash-page.module.css

@@ -68,16 +68,33 @@ html, body {
 
   background-color: #333;
 
-  a:is(:link, :visited) {
-    color: var(--uspg-link-color, #fc0);
-    text-decoration: var(--uspg-link-decoration, none);
-
+  a {
+    &:is(:link, :visited) {
+      text-decoration: var(--uspg-link-decoration);
+    }
+    &:link {
+      color: var(--uspg-link-color);
+    }
+    &:visited {
+      color: var(--uspg-link-visited-color);
+    }
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      outline: var(--uspg-link-focus-outline-width) var(--uspg-link-focus-outline-style) var(--uspg-link-focus-outline-color);
+      outline-offset: var(--uspg-link-focus-outline-offset);
+    }
     @media (hover: hover) {
       &:hover {
-        color: var(--uspg-link-hover-color, #fc0);
-        text-decoration: var(--uspg-link-hover-decoration, underline);
+        color: var(--uspg-link-hover-color);
+        text-decoration: var(--uspg-link-hover-decoration);
+        background-color: var(--uspg-link-hover-background-color);
       }
     }
+    &:active {
+      color: var(--uspg-link-active-color);
+    }
   }
 }
 
@@ -122,6 +139,8 @@ html, body {
   justify-content: center;
   width: 100%;
   overflow: hidden;
+
+
 }
 
 .message, .credits {

package/src/custom-properties.css

@@ -358,10 +358,17 @@
   --uspg-icon-fill-color: #333;
   --uspg-icon-hover-box-bg: #fff;
   --uspg-line-height: var(--line-height-sm);
+  --uspg-link-active-color: #f49c29;
   --uspg-link-color: #fc0;
   --uspg-link-decoration: none;
-  --uspg-link-hover-color: #fc0;
+  --uspg-link-focus-outline-color: var(--uspg-link-color);
+  --uspg-link-focus-outline-offset: .125rem;
+  --uspg-link-focus-outline-style: solid;
+  --uspg-link-focus-outline-width: .125rem;
+  --uspg-link-hover-background-color: transparent;
+  --uspg-link-hover-color: var(--uspg-bg-color);
   --uspg-link-hover-decoration: underline;
+  --uspg-link-visited-color: #c711ff;
   --uspg-loader-color: hsl(0deg 0% 100% / .6);
   --uspg-text-color: #fff;
   --z-index-overlay: 99;

package/src/minimo.css

@@ -1,7 +1,7 @@
 
 /* @import '@src/fonts.css'; */
 /* @import '@src/css/custom-media.css'; */ /* managed by postcss */
-@import '@src/custom-properties.css';
+/* @import '@src/custom-properties.css'; */ /* managed by postcss-jit-props */
 
 @import '@minimo/css/reset.css';
 @import '@minimo/css/layout-base.css';

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -1,4 +1,7 @@
 // @ts-nocheck
+
+/* global process */
+
 import { DataTable } from 'simple-datatables';
 
 import { parseCols } from './src/parse-cols.js';
@@ -219,7 +222,7 @@ class SimpleDatatableAdapter extends HTMLElement {
     super();
     // this.attachShadow({ mode: 'open' }); // commentare per light dom
 
-    if (!_deprecationWarned) {
+    if (!_deprecationWarned && process.env.NODE_ENV === 'development') {
       _deprecationWarned = true;
       // eslint-disable-next-line no-console
       console.warn('[s-datatable] componente deprecato');

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/index.js

@@ -1,92 +0,0 @@
-// NB: i grafici non utilizzati in questa verione della brochure sono disabilitati
-
-import { pie } from './src/charts/pie.js';
-// import { hbars } from './src/charts/hbars.js';
-import { signalBars } from './src/charts/signal-bars.js';
-import { ratingDisplay } from './src/charts/rating-display.js';
-// import { radialBars } from './src/charts/radial-bars.js';
-import { settimanaleMensile } from './src/charts/settimanale-mensile.js';
-import { mcn } from './src/charts/mcn.js';
-import { lines } from './src/charts/lines.js';
-import { bars } from './src/charts/bars.js';
-
-import { utils } from './src/chart-utils.js';
-import { default_colors } from './src/default-chart-colors.js';
-import { createSvgCanvas } from './src/create-svg-canvas.js';
-import { createTextEl } from './src/create-text-element.js';
-
-import { legenda } from './src/components/legenda.js';
-import { cartesianAxis } from './src/components/cartesian-axis.js';
-
-class AdaCharts {
-
-  constructor(customParams = {}) {
-
-    this.defaults??= {};
-
-    this.defaults.colors = customParams.defaults?.colors?? Object.values(default_colors);
-
-    this.defaults.font = {
-
-      // pattern per defaults.font
-      // i valori commentati sono quelli di default
-      // se non vanno modificati, non serve impostarli
-      ...{
-        // family: 'sans-serif',
-        // size: 14,
-        // stretch: 'normal',
-        // style: 'normal',
-        // variant: 'normal',
-        // weight: 400
-      },
-      ...(customParams.defaults?.font?? {})
-    };
-
-
-    /** se true converte i font in tracciati */
-    // NB: non usare per versioni browser (usa node)
-    this.textToPath = customParams.textToPath?? false;
-
-    this.debug = customParams.debug?? false;
-
-    // istanza svgjs per web
-    this.createSvgCanvas = customParams.createSvgCanvas?? createSvgCanvas;
-
-    // parametri generati condivisi
-    this.sharedParams = {};
-  }
-
-  setSharedParams(key, value = null) {
-    this.sharedParams[key] = value;
-  }
-
-  getSharedParams(key) {
-    return this.sharedParams[key];
-  }
-
-}
-
-AdaCharts.prototype.utils = utils;
-AdaCharts.prototype.createTextEl = createTextEl;
-AdaCharts.prototype.legenda = legenda;
-AdaCharts.prototype.cartesianAxis = cartesianAxis;
-
-
-AdaCharts.prototype.pie = pie;
-// AdaCharts.prototype.hbars = hbars;
-AdaCharts.prototype.signalBars = signalBars;
-AdaCharts.prototype.ratingDisplay = ratingDisplay;
-// AdaCharts.prototype.radialBars = radialBars;
-AdaCharts.prototype.settimanaleMensile = settimanaleMensile;
-AdaCharts.prototype.mcn = mcn;
-AdaCharts.prototype.lines = lines;
-AdaCharts.prototype.bars = bars;
-
-
-export { AdaCharts };
-
-
-// esportazione singoli metodi
-// https://cube.dev/blog/how-to-build-tree-shakeable-javascript-libraries
-// https://www.freecodecamp.org/news/what-is-a-pure-function-in-javascript-acb887375dfe/
-// export const barsChart = /* #__PURE__ */ AdaCharts.bars;

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/hbars.js

@@ -1,356 +0,0 @@
-// horizontal bars
-
-export async function hbars({
-
-  /** colori specifici */
-  colors = null,
-
-  /** 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.
-    Il valore 'auto' di height fa sì che l'altezza dell'svg sia calcolata sulla base
-    del numero di barre e dei valori `barsGap` e `barsHeight`
-  */
-  width = null, // null || <value>
-  height = 300, // <value> || null || 'auto'
-
-  /** valori numerici da associare alle barre del grafico */
-  values = [],
-
-  /** etichette delle varie barre, l'indice di ogni elemento corrisponde a quello di `values` a cui si riferisce */
-  labels = [],
-
-
-  /** Indica se mostrare o no i valori delle barre (mostrati dopo la barra) */
-  showValues = true,
-
-  /**
-    Modalità di rappresentazione del valore mostrato.
-    Se 'percent', il valore mostrato è la percentuale rispetto al totale dei valori
-  */
-  showValuesAs = 'number', // number, numbers, percent, euro
-
-  /** In caso di visualizzazione dei valori (showValues === true), numero di decimali da mostrare */
-  showValuesFractionDigits = 2,
-
-  /** In caso di visualizzazione dei valori (showValues === true), formattazione locale da utilizzare */
-  showValuesLocale =  'it-IT',
-
-  /**
-    Impostazioni font per le etichette e i valori
-    Impostare solo se non si vogliono usare i colori di default
-    se impostato è un oggetto analogo a quello definito in index.js
-    Possono essere impostati solo i valori che si vogliono modificare
-  */
-  labelsFont = null,
-  valuesFont = null,
-
-  /** path del file font per la conversione in tracciati */
-  labelsFontFilePath = null,
-  valuesFontFilePath = null,
-
-  /** text fill color */
-  labelsFill = '#000',
-  valuesFill = '#000',
-
-  /** direzione della barra */
-  barsDirection = 'right', // right || left
-
-  /** larghezza minima labels */
-  minLabelslWidth = 0,
-
-  /** spazio tra un'etichetta di testo e il grafico */
-  textBarsGap = 8,
-
-  /** spazio tra una barra e la successiva */
-  barsGap = 10,
-
-  /** altezza barre */
-  barsHeight = 40,
-
-  /** corner radius */
-  barsCornerRadius = 5,
-
-  /** spessore e colore traccia (0 per non visualizzare) */
-  barsStrokeWidth = 0,
-  barsStrokeColor = '#000',
-
-  /** se false le classi vengono ignorate */
-  useClasses = false,
-
-  /** array di eventuali classi da associare ai corrispondenti valori in base al loro indice */
-  valClasses = null,
-
-  // TODO animazione
-  /** se true, attiva l'animazione */ // NB non attivo
-  // animazione      = false, // non implementato
-
-  /** frame per secondo dell'animazione */ // NB non attivo
-  // fps = 60
-}) {
-
-  try {
-
-    if(values.filter(v => isNaN(v)).length) {
-      throw 'There are non-numeric values';
-    }
-
-    if(!values.length) {
-      throw 'At least one value is needed';
-    }
-
-    if(isNaN(barsStrokeWidth)) {
-      throw '`barsStrokeWidth` must be a number';
-    } else {
-      barsStrokeWidth = +barsStrokeWidth;
-    }
-
-    const toRight = barsDirection === 'right';
-
-    [, width, height] = this.utils.parseContainer(container, width, height);
-
-
-    if(barsGap == null) {
-      throw '`barsGap` must be set';
-    }
-
-    if(height === 'auto') {
-      height = (values.length * barsHeight) +
-        ((values.length - 1) * barsGap) +
-        // la traccia insiste per metà sulla parte interna della barra, quindi va calcolata una sola volta
-        (values.length * barsStrokeWidth);
-
-      if(!barsHeight) {
-        throw 'With `height = \'auto\'`, `barsHeight` must be set';
-      }
-
-    } else { // determinazione altezza barre
-      barsHeight = (
-        height -
-        ((values.length - 1) * barsGap)
-      ) / values.length - barsStrokeWidth;
-    }
-
-
-    if(!width || !height) {
-      throw `Missing width and/or height: width: ${width}, height: ${height}`;
-    }
-
-    // colori forniti o di default
-    colors??= this.defaults.colors;
-
-    // fonts
-    labelsFont = {...this.defaults.font, ...(labelsFont??{}) };
-    valuesFont = {...this.defaults.font, ...(valuesFont??{}) };
-
-    // somma di tutti i valori per calcolo persentuale
-    const totValues = values.reduce((tot, current) => tot + current, 0);
-
-    // definizione etichette valori
-    let valueLabels = [];
-    if(showValues) {
-      valueLabels = values.map(v => {
-
-        if(showValuesAs === 'percent') {
-          v = v / totValues;
-        }
-
-        let labelStyle;
-        switch (showValuesAs) {
-          case 'number':
-          case 'numbers':
-            labelStyle =  {
-              style: 'decimal'
-            };
-            break;
-
-          case 'percent':
-            labelStyle =  {
-              style: 'percent'
-            };
-            break;
-
-          case 'euro':
-            labelStyle =  {
-              currency: 'EUR',
-              style: 'currency'
-            };
-            break;
-
-          // no default
-        }
-
-        return v.toLocaleString(showValuesLocale, {
-          minimumFractionDigits: showValuesFractionDigits,
-          maximumFractionDigits: showValuesFractionDigits,
-          ...labelStyle
-        });
-      });
-    }
-
-    const svgCanvas = this.createSvgCanvas(container); //.size(width, height);
-    svgCanvas.viewbox(0, 0, width, height);
-
-    // =>> etichette (labels) & etichette valori (valueLabels)
-    // calcolo dimensioni del testo per ricavare lo spazio utile per le barre
-    // e posizionamento delle etichette
-
-    // valori per il calcolo dellìingombro massimo
-    let max_labels_width = 0, max_value_labels_width = 0;
-
-    // posizionamento iniziale, dopo il rendering verrà ridefinito in base all'altezza del testo
-    let labelY = (barsHeight + barsStrokeWidth) / 2;
-    // valore provvisorio, verrà reimpostato a fine ciclo (deve tenere conto di tutte le etichette)
-    const labelX = toRight? 0 : width;
-
-    const labels_elements = [], value_labels_elements = []; // per allineamenti successivi
-
-
-
-    for await (const [idx,] of values.entries()) {
-
-      // svgCanvas.line(0, labelY, width, labelY).stroke({ width: 1, color: '#f06'}); // linea di riferimento per allineamento
-
-      const thisLabel = labels[idx],
-        thisValueLabel = valueLabels[idx];
-
-      if(thisLabel) {
-
-
-        let [bbox, labelEl] = await this.createTextEl({
-          text: thisLabel,
-          textFill: labelsFill,
-          fontAttr: {
-            ...labelsFont,
-            // 'text-anchor': toRight? 'end' : null
-          },
-          fontFilePath: labelsFontFilePath,
-          parentElement: svgCanvas
-        });
-
-        labelEl.move(labelX, labelY - (bbox.height/2));
-
-        max_labels_width = Math.max(max_labels_width, bbox.width, minLabelslWidth);
-
-        labels_elements.push({label: labelEl, w: bbox.width}); // per il riposizionamento X successivo
-      }
-
-      // etichette valori
-      if(thisValueLabel && showValues) {
-
-        let [bbox, labelEl] = await this.createTextEl({
-          text: thisValueLabel,
-          textFill: valuesFill,
-          fontAttr: {
-            ...valuesFont,
-            // 'text-anchor': toRight? null : 'end'
-          },
-          fontFilePath: valuesFontFilePath,
-          parentElement: svgCanvas
-        });
-
-        labelEl.move(labelX, labelY - (bbox.height/2));
-
-        max_value_labels_width = Math.max(max_value_labels_width, bbox.width);
-        value_labels_elements.push({label: labelEl, w: bbox.width});
-      }
-
-
-      labelY += barsHeight + barsStrokeWidth + barsGap;
-    } // end for values
-
-    // linea di riferimento per allineamento:
-    // svgCanvas.line(max_labels_width, 0, max_labels_width, height).stroke({ width: 2, color: '#4faa0d'});
-
-    // =>> riposizionamento `labels_elements`
-    // da sx a dx: allineate a destra sull'asse Y dell'etichetta più lunga
-    // da dx a sx: allineate a sinistra sull'asse Y della larghezza dell'svg - lunghezza etichetta più lunga
-    // NB da effettuare prima dell'aggiunta di `textBarsGap`
-    // if(this.textToPath) {
-
-    // NB VERSIONE che in modalità testo usa il metodo ax, non applicabile con i tracciati
-    // eliminato per avere un'unica versione
-    //   labels_elements.forEach(l => {
-    //     l.label.x(toRight? max_labels_width - l.w : width - max_labels_width);
-    //   });
-
-    // } else {
-    //   labels_elements.forEach(l => {
-    //     l.ax(toRight? max_labels_width : width - max_labels_width);
-    //   });
-    // }
-    labels_elements.forEach(l => {
-      l.label.x(toRight? max_labels_width - l.w : width - max_labels_width);
-    });
-
-
-
-    // =>> aggiunta `textBarsGap` a `max_labels_width` e `max_value_labels_width`
-    if(max_labels_width) {
-      max_labels_width += textBarsGap;
-    }
-    if(max_value_labels_width) {
-      max_value_labels_width += textBarsGap;
-    }
-
-    // =>> costruzione barre e posizionamento etichette valori
-
-    // dimensioni barre
-    const maxBarsWidth = width - max_labels_width - max_value_labels_width,
-      maxBarsValue = values.reduce((max, current) => max > current? max : current, 0);
-
-    let barY = barsStrokeWidth / 2;
-    values.forEach((v, idx) => {
-
-      const barWidth = (v / maxBarsValue * maxBarsWidth) - barsStrokeWidth,
-
-        barX = toRight? max_labels_width : width - barWidth - max_labels_width,
-        bar = svgCanvas.rect({
-          x: barX,
-          y: barY,
-          width: barWidth,
-          height: barsHeight,
-          fill: colors[idx]?? '#ccc',
-        })
-          .radius(barsCornerRadius);
-
-      if( barsStrokeWidth > 0 && barsStrokeColor) {
-        bar.stroke({ color: barsStrokeColor, width: barsStrokeWidth });
-      }
-
-      if(useClasses && valClasses[idx]) {
-        bar.addClass(valClasses[idx]);
-      }
-
-      // =>> riposizionamento value_labels_elements (vedi precedente =>> riposizionamento `labels_elements`)
-      const thisValueLabel = value_labels_elements[idx];
-      if(thisValueLabel != null && showValues) {
-        thisValueLabel.label.x(
-          toRight
-            ? max_labels_width + barWidth + textBarsGap
-            : barX - textBarsGap - thisValueLabel.w
-        )
-          .front();
-      }
-
-
-      barY += barsHeight + barsGap + barsStrokeWidth;
-    });
-
-    if(!container) {
-      return svgCanvas.svg();
-    }
-
-
-  } catch(e) {
-    console.error( 'AdaCharts → hbars', e ); // eslint-disable-line
-  }
-
-}