@massimo-cassandro/minimo 1.7.2 → 1.8.1

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/demo.js

@@ -0,0 +1,15 @@
+import { unsplashPageJS } from '../src/unsplash-page.js';
+
+unsplashPageJS({
+  targetElement    : document.getElementById('root'),
+  unsplashDataUrl  : window.location.origin.match('localhost')!== null ?
+    'http://localhost:8000/demo/demo-data.php' // local test
+    : 'https://primominuto.altervista.org/proxy/getUnsplashPhotos.php'
+  ,
+  utmSource        : 'vanilla-js-test',
+  title            : 'Message title',
+  text             : 'This is the message <strong>text</strong>',
+  backLink         : '<a href="https://github.com/massimo-cassandro/unsplash-page">Back to repository home</a>',
+  hidePhotoLink    : true,
+  cssModulesObj    : null
+});

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/rollup.config.mjs

@@ -0,0 +1,26 @@
+import terser  from '@rollup/plugin-terser';
+import node_resolve from '@rollup/plugin-node-resolve';
+import image from '@rollup/plugin-image';
+
+import p from '../package.json' assert { type: 'json' };
+
+export default [
+  {
+    input: './demo/demo.js',
+    plugins: [
+      node_resolve(),
+      // commonjs(),
+      image(),
+      terser({ compress: { passes: 2 } }),
+    ],
+    output: [
+      {
+        file: './demo/unsplash-page-demo.min.js',
+        format: 'iife',
+        sourcemap: true,
+        banner: `/*! Unsplash Page v.${p.version} - Massimo Cassandro ${new Date().toLocaleString('en-EN', {
+          year: 'numeric',  month: 'long', day: 'numeric' })} */`
+      }
+    ]
+  }
+];

package/src/components/unsplash-page/TODO unsplash-page-demo/unsplash-page/unsplash-page-demo.min.js

@@ -0,0 +1,3 @@
+/*! Unsplash Page v.2.0.2 - Massimo Cassandro May 1, 2024 */
+!function(){"use strict";const t=[{name:"xxl",mq:"(min-width: 1400px)",w:1920,h:1080,dpr2:!1},{name:"xl",mq:"(min-width: 1200px) and (max-width: 1399px)",w:1400,h:788,dpr2:!1},{name:"lg",mq:"(min-width: 992px) and (max-width: 1199px)",w:1200,h:675,dpr2:!1},{name:"md",ar:"16/9",mq:"(min-width: 768px) and (max-width: 991px)",w:992,h:558,dpr2:!0},{name:"sm",ar:"16/9",mq:"(min-width: 576px) and (max-width: 767px)",w:768,h:432,dpr2:!0},{name:"xs-portrait",ar:"16/9",mq:"(orientation: portrait) and (max-width: 575px)",w:324,h:576,dpr2:!0},{name:"xs-landscape",ar:"16/9",mq:"(orientation: landscape) and (max-width: 575px)",w:576,h:324,dpr2:!0}];var e=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],a=t=>{let a=0;for(let c=0;c<t.length;c++){let r=t[c];a=83*a+e.indexOf(r)}return a},c=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},r=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.trunc(12.92*e*255+.5):Math.trunc(255*(1.055*Math.pow(e,.4166666666666667)-.055)+.5)},n=(t,e)=>(t=>t<0?-1:1)(t)*Math.pow(Math.abs(t),e),s=class extends Error{constructor(t){super(t),this.name="ValidationError",this.message=t}},l=t=>{let e=t>>8&255,a=255&t;return[c(t>>16),c(e),c(a)]},o=(t,e)=>{let a=Math.floor(t/361),c=Math.floor(t/19)%19,r=t%19;return[n((a-9)/9,2)*e,n((c-9)/9,2)*e,n((r-9)/9,2)*e]};!function(e){const c=["targetElement","unsplashDataUrl","utmSource","title"];e={targetElement:null,className:null,unsplashDataUrl:null,utmSource:null,title:null,text:null,backLink:null,hidePhotoLink:!0,cssModulesObj:null,...e};try{if(c.map((t=>e[t])).filter((t=>null!==t&&""!==t)).length!==c.length)throw new Error(`I parametri ${c.map((t=>`\`${t}\``)).join(",")} sono obbligatori`);const n=t=>e.cssModulesObj?e.cssModulesObj[t]:t;e.targetElement.innerHTML=`<div class="${n("upContainer")+(e.className?` ${e.className}`:"")}"></div>`;const i=e.targetElement.querySelector("."+n("upContainer"));i.innerHTML=`<div class="${n("upLoaderWrapper")}"><div class="${n("upLoader")}"></div></div>`,async function(t){t={unsplash_data_url:null,...t};try{if(!t.unsplash_data_url)throw new Error("Unsplash data url must be defined");return await(async()=>{const e=await fetch(t.unsplash_data_url);if(!e.ok)throw console.error("Ajax error on: "+t.unsplash_data_url),console.error(e),new Error(`Loading error: ${e.status}`);return await e.json()})().then((t=>({id:t.id,color:t.color,width:t.width,height:t.height,alt_description:t.alt_description,date:t.created_at,base_url:t.urls.raw,unsplash_url:t.links.html,author:t.user.name??t.user.username,author_profile:t.user.links.html,blur_hash:t.blur_hash,image_description:(()=>{let e=t.location.name,a=t.description??t.alt_description;return t.description&&e&&(e=new RegExp(e,"i").test(a)?null:e),[a,e].filter((t=>null!=t)).join(" / ")})()})))}catch(t){console.error(t)}}({unsplash_data_url:e.unsplashDataUrl}).then((c=>{const h=((t,e,c,n)=>{(t=>{if(!t||t.length<6)throw new s("The blurhash string must be at least 6 characters");let e=a(t[0]),c=Math.floor(e/9)+1,r=e%9+1;if(t.length!==4+2*r*c)throw new s(`blurhash length mismatch: length is ${t.length} but it should be ${4+2*r*c}`)})(t),n|=1;let i=a(t[0]),h=Math.floor(i/9)+1,u=i%9+1,p=(a(t[1])+1)/166,d=new Array(u*h);for(let e=0;e<d.length;e++)if(0===e){let c=a(t.substring(2,6));d[e]=l(c)}else{let c=a(t.substring(4+2*e,6+2*e));d[e]=o(c,p*n)}let m=4*e,g=new Uint8ClampedArray(m*c);for(let t=0;t<c;t++)for(let a=0;a<e;a++){let n=0,s=0,l=0;for(let r=0;r<h;r++)for(let o=0;o<u;o++){let i=Math.cos(Math.PI*a*o/e)*Math.cos(Math.PI*t*r/c),h=d[o+r*u];n+=h[0]*i,s+=h[1]*i,l+=h[2]*i}let o=r(n),i=r(s),p=r(l);g[4*a+0+t*m]=o,g[4*a+1+t*m]=i,g[4*a+2+t*m]=p,g[4*a+3+t*m]=255}return g})(c.blur_hash,i.offsetWidth,i.offsetHeight),u=document.createElement("canvas");u.className=n("upCanvas"),u.width=i.offsetWidth,u.height=i.offsetHeight;const p=u.getContext("2d"),d=p.createImageData(i.offsetWidth,i.offsetHeight);d.data.set(h),p.putImageData(d,0,0),i.insertAdjacentElement("afterbegin",u);const m=["avif","webp","pjpg"];i.insertAdjacentHTML("beforeend","<picture>"+t.map(((e,a)=>{const r=a===t.length-1;return m.map((t=>{const a=t===m.at(-1);let s=c.base_url+(/\?/.test(c.base_url)?"&":"?")+"fit=crop&crop=focalpoint&q=60"+`&w=${e.w}&h=${e.h}`+`&fm=${t}`;return r&&a?`<img class="${n("unsplashPhoto")}" src="${s}" srcset="${s}${e.dpr2?` 1x, ${s}&dpr=2 2x`:""}" alt="${c.alt_description??`${c.author} / Unsplash`}" width="${e.w}" height="${e.h}">`:`<source srcset="${s}${e.dpr2?` 1x, ${s}&dpr=2 2x`:""}" `+(a?"":`type="image/${t}" `)+`media="${e.mq}" `+`width="${e.w}" height="${e.h}">`})).join("")})).join("")+"</picture>"),i.querySelector("."+n("unsplashPhoto")).onload=()=>{i.querySelector("."+n("upLoaderWrapper")).remove(),i.classList.add(n("show")),i.insertAdjacentHTML("beforeend",`<div class="${n("upMessageBox")}">\n            <div class="${n("upMessage")}">\n              <h1>${e.title}</h1>\n              ${e.text?`<p>${e.text}</p>`:""}\n              ${e.backLink?`<p class="${n("upBackLink")}">${e.backLink}</p>`:""}\n\n              <div class="${n("upArrowWrapper")}" role="button">\n                <img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M152%2c80v96H120v48L24%2c128l96-96V80Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M152%2c72H128V32a8%2c8%2c0%2c0%2c0-13.66-5.66l-96%2c96a8%2c8%2c0%2c0%2c0%2c0%2c11.32l96%2c96A8%2c8%2c0%2c0%2c0%2c128%2c224V184h24a8%2c8%2c0%2c0%2c0%2c8-8V80A8%2c8%2c0%2c0%2c0%2c152%2c72Zm-8%2c96H120a8%2c8%2c0%2c0%2c0-8%2c8v28.69L35.31%2c128%2c112%2c51.31V80a8%2c8%2c0%2c0%2c0%2c8%2c8h24Zm80-88v96a8%2c8%2c0%2c0%2c1-16%2c0V80a8%2c8%2c0%2c0%2c1%2c16%2c0Zm-32%2c0v96a8%2c8%2c0%2c0%2c1-16%2c0V80a8%2c8%2c0%2c0%2c1%2c16%2c0Z'%3e%3c/path%3e%3c/svg%3e" alt="Icona freccia">\n              </div>\n            </div>\n\n            <div class="${n("upCredits")}">\n              <em>${c.image_description}</em>\n              <span>Photo\n                <a href="${c.author_profile}?utmSource=${e.utmSource}&utm_medium=referral">\n                  ${c.author} / Unsplash\n                </a>\n              </span>\n            </div>\n          </div>\n          <div class="${n("unsplashPhotoLink")}${e.hidePhotoLink?` ${n("upShowOnHover")}`:""}">\n            <a href="${c.unsplash_url}?utm_source=${e.utmSource}&utm_medium=referral" target="_blank" rel="noopener noreferrer">\n              <img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M224%2c56V178.06l-39.72-39.72a8%2c8%2c0%2c0%2c0-11.31%2c0L147.31%2c164%2c97.66%2c114.34a8%2c8%2c0%2c0%2c0-11.32%2c0L32%2c168.69V56a8%2c8%2c0%2c0%2c1%2c8-8H216A8%2c8%2c0%2c0%2c1%2c224%2c56Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M216%2c40H40A16%2c16%2c0%2c0%2c0%2c24%2c56V200a16%2c16%2c0%2c0%2c0%2c16%2c16H216a16%2c16%2c0%2c0%2c0%2c16-16V56A16%2c16%2c0%2c0%2c0%2c216%2c40Zm0%2c16V158.75l-26.07-26.06a16%2c16%2c0%2c0%2c0-22.63%2c0l-20%2c20-44-44a16%2c16%2c0%2c0%2c0-22.62%2c0L40%2c149.37V56ZM40%2c172l52-52%2c80%2c80H40Zm176%2c28H194.63l-36-36%2c20-20L216%2c181.38V200ZM144%2c100a12%2c12%2c0%2c1%2c1%2c12%2c12A12%2c12%2c0%2c0%2c1%2c144%2c100Z'%3e%3c/path%3e%3c/svg%3e" alt="Icona immagine" />\n            </a>\n          </div>`),i.querySelector("."+n("upArrowWrapper")).addEventListener("click",(t=>{t.target.closest(`.${n("upMessage")}`).classList.toggle(n("hidden"))}),!1)}}))}catch(t){console.error(t)}}({targetElement:document.getElementById("root"),unsplashDataUrl:null!==window.location.origin.match("localhost")?"http://localhost:8000/demo/demo-data.php":"https://primominuto.altervista.org/proxy/getUnsplashPhotos.php",utmSource:"vanilla-js-test",title:"Message title",text:"This is the message <strong>text</strong>",backLink:'<a href="https://github.com/massimo-cassandro/unsplash-page">Back to repository home</a>',hidePhotoLink:!0,cssModulesObj:null})}();
+//# sourceMappingURL=unsplash-page-demo.min.js.map

package/src/web-components/TODO json-table/README.md

@@ -0,0 +1,67 @@
+# jsonTable
+
+HTML table generator from Ajax or static JSON. It can also add advanced functionality to static tables.
+
+> NB: **In this first version, the static json option is disabled**.
+
+> NB:  **This first release only provides the json-table source code, not the compiled version. To use ikson-tabble you'll need to process the code with your own bundler, which must be able to process SVG files and CSS modules (if you want to use the default css files).**.
+
+
+It allows you to create a table from a JSON file or stream, adding some extra features: search, sorting, pagination, etc.
+
+It's inspired by [jQuery Datatable](https://datatables.net/), but has far fewer features. However, it's much easier to use, highly customizable, and doesn't require jQuery.
+
+In most cases, you simply need to modify the configuration parameters and CSS properties.
+
+For more advanced customizations, you'll need to use the code in the `src` directory and customize the various CSS files.
+
+
+[Changelog](changelog.txt).
+
+
+## Installation
+
+```bash
+npm i -D @massimo-cassandro/json-table
+```
+
+## Use
+
+Create a *JsonTable*:
+
+```javascript
+const jt = new JsonTable(table_params, optional_custom_data_types_obj);
+```
+
+where: <!-- TODO  --> TODO
+
+
+## Use with `data-*` attributes and automatic rendering
+
+<!-- TODO --> TODO
+
+## Customizing CSS
+You can customize the default CSS setting using custom properties; for more details, see [Custom CSS Properties List](docs/custom-props-list.md).
+
+## Generate elements params object
+<!-- TODO --> TODO
+
+## Custom events
+
+The library dispatches a custom event `jt:ready` on the table container when the instance is ready. The event `detail` property contains an object like `{ jsonTable: instance }`.
+
+To make the event easier to catch, the library dispatches it asynchronously using `Promise.resolve().then(...)`. This schedules the dispatch in the microtask queue (that is, the callback runs after the current call stack finishes, but before the next macrotask). As a result, listeners registered immediately after calling `new JsonTable(...)` will still be able to intercept the event.
+
+Example — register the listener before instantiation for maximum safety:
+
+```javascript
+const container = document.getElementById('mytable');
+container.addEventListener('jt:ready', e => { console.log(e.detail.jsonTable); });
+new JsonTable({ container, ... });
+```
+
+
+## Limitations
+
+* Only one `tr` element is allowed for `thead`
+

package/src/web-components/TODO json-table/TODO.md

@@ -0,0 +1,12 @@
+# json-table
+
+## core
+* meccanismo acquisizione json per grandi quantità di records basato sulla paginazione
+* opzione `condition` per renderizzare o meno una colonna (vedi opzione `hidden` di simple-datatable)
+* in generale ogni elemento (cella) deve acceyyare contenuti in forma di stringa plain text, stringa html, elemento DOM, array domBuilder...
+* possibilità di utilizzare un campo solo a fini di ricerca senza mostrarlo nella tabella
+* possibilità di definire valori per ordinamento e ricerca diversi da quelli effettivamente presenti nel josn. Il default dovrebbe corrispondere a quanto mostrato
+  
+## altro
+* nei campi di tipo numerico prevedere classi di default text-end e text-numeric o classe ad hoc socrascrivibile
+* footerRender: possibilità di funzioni predefinite per calcoli base (somma, media ecc) di una determinata colonna

package/src/web-components/TODO json-table/_work/OLD/docs/custom-props-list.md

@@ -0,0 +1,69 @@
+# CSS Custom Properties List
+
+List of all CSS custom properties used in css files.
+
+If you don't want to use a new CSS, you can use the default one, just by customizing the values ​​of the custom properties.
+
+You can set the custom values ​​in the `:root` element, or directly in the json-table wrapper by assigning it a specific class:
+
+In the json-table config:
+
+```javascript
+new jsonTable({
+  container: '...',
+  mainWrapperExtraClassName: 'my-custom-classname',
+  
+  /* other config parameters */
+});
+```
+
+In your css:
+
+```css
+.my-custom-classname {
+  --jt-search-input-bg-color: #efefef;
+  --jt-search-input-border-color: #666;
+
+  /* other custom properties */
+}
+
+```
+
+
+## Properties
+| Property | Default value | Description |
+| :--- | :--- | :--- |
+| `--jt-bool-false-color` | `#c00` | color for _false_ boolean values icon |
+| `--jt-bool-icon-size` | `1.3em` | boolean icons size |
+| `--jt-bool-true-color` | `#0a7202` | color for _true_ boolean values icon |
+| `--jt-placeholder-color` | `#999` | color for placeholder text |
+| `--jt-search-input-bg-color` | `transparent` | background color for search input element |
+| `--jt-search-input-border-color` | `#999` | border color for search input element |
+| `--jt-search-input-font-size` | `clamp(.85rem, 6vw, 1rem)` | font size for search input element |
+| `--jt-search-input-padding-x` | `.75rem` | left and right padding for search input element |
+| `--jt-search-input-padding-y` | `.375rem` | top and bottom padding for search input element |
+| `--jt-search-input-text-color` | `currentColor` | text color for search input element |
+| `--jt-table-border-color` | `#999` | table `border-color` |
+| `--jt-table-border-style` | `solid` | table `border-style` |
+| `--jt-table-border-width` | `1px` | table `border-width` |
+| `--jt-table-caption-side` | `bottom` | table `caption-side` (`top` or `bottom`) |
+| `--jt-table-cell-bg-color` | `#fff` | td `background-color` |
+| `--jt-table-cell-border-color` | `#999` | td `border-color` |
+| `--jt-table-cell-border-style` | `solid` | td `border-style` |
+| `--jt-table-cell-border-width` | `1px` | td `border-width` |
+| `--jt-table-cell-padding-x` | `.5rem` | left and right padding for td |
+| `--jt-table-cell-padding-y` | `.5rem` | top and bottom padding for td |
+| `--jt-table-cell-vertical-border-width` | `1px` | td `border-width` for vertical borders |
+| `--jt-table-margin-block` | `1rem` | top and bottom margins for table |
+| `--jt-table-tfoot-cell-bg-color` | `#f4f4f4` | background color for tfoot cells |
+| `--jt-table-tfoot-cell-border-color` | `#666` | border color for tfoot cells (applied to the bottom border of the first tr of tfoot) |
+| `--jt-table-tfoot-cell-border-width` | `3px` | border width for tfoot cells (applied to the bottom border of the first tr of tfoot) |
+| `--jt-table-thead-cell-bg-color` | `#e4e4e4` | background color for thead cells |
+| `--jt-table-thead-cell-border-color` | `#666` | border color for thead cells (applied to the bottom border of the last tr of thead) |
+| `--jt-table-thead-cell-border-width` | `3px` | border width for thead cells (applied to the bottom border of the last tr of thead) |
+| `--jt-wrapper-margin-block` | `1rem` | top and bottom margins for main wrapper element |
+
+## Notes
+* `--jt-search-input-*`: you'll need that custom properties only if the `search`
+  parameter is set to `true` (default) and the `searchInputClassName`
+  (custom classname for search input, default `true`) parameter is not set.

package/src/web-components/TODO json-table/_work/OLD/script/create-css-custom-props-doc.mjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { styleText } from 'node:util';
+
+// parse all css files and extract all custom properties
+// then create a markdown document adding a description for each property
+
+// tke key is a camelCase version of the css property name (without leading --jt-)
+const descriptions = {
+
+  boolFalseColor                : 'color for _false_ boolean values icon',
+  boolIconSize                  : 'boolean icons size',
+  boolTrueColor                 : 'color for _true_ boolean values icon',
+  placeholderColor              : 'color for placeholder text',
+  searchInputBgColor            : 'background color for search input element',
+  searchInputBorderColor        : 'border color for search input element',
+  searchInputFontSize           : 'font size for search input element',
+  searchInputPaddingX           : 'left and right padding for search input element',
+  searchInputPaddingY           : 'top and bottom padding for search input element',
+  searchInputTextColor          : 'text color for search input element',
+  tableBorderColor              : 'table `border-color`',
+  tableBorderStyle              : 'table `border-style`',
+  tableBorderWidth              : 'table `border-width`',
+  tableCaptionSide              : 'table `caption-side` (`top` or `bottom`)',
+  tableCellBgColor              : 'td `background-color`',
+  tableCellBorderColor          : 'td `border-color`',
+  tableCellBorderStyle          : 'td `border-style`',
+  tableCellBorderWidth          : 'td `border-width`',
+  tableCellPaddingX             : 'left and right padding for td',
+  tableCellPaddingY             : 'top and bottom padding for td',
+  tableCellVerticalBorderWidth  : 'td `border-width` for vertical borders',
+  tableMarginBlock              : 'top and bottom margins for table',
+  tableTfootCellBgColor         : 'background color for tfoot cells',
+  tableTfootCellBorderColor     : 'border color for tfoot cells (applied to the bottom border of the first tr of tfoot)',
+  tableTfootCellBorderWidth     : 'border width for tfoot cells (applied to the bottom border of the first tr of tfoot)',
+  tableTheadCellBgColor         : 'background color for thead cells',
+  tableTheadCellBorderColor     : 'border color for thead cells (applied to the bottom border of the last tr of thead)',
+  tableTheadCellBorderWidth     : 'border width for thead cells (applied to the bottom border of the last tr of thead)',
+  wrapperMarginBlock            : 'top and bottom margins for main wrapper element',
+
+};
+
+
+const props = {},
+  css_folder = '../src/css',
+  target_file = path.resolve(new URL('.', import.meta.url).pathname, '../docs/custom-props-list.md'),
+  show_props_list = false // to create the descriptions
+;
+
+
+try {
+
+  fs.readdirSync(css_folder).forEach(file => {
+    if(file.endsWith('.css')) {
+      const css_content = fs.readFileSync(path.join(css_folder, file), 'utf8'),
+        matches = css_content.matchAll(/var\(--jt-(?<name>(.*?))(?:, (?<def>(.*?))\)[ ;])/g);
+
+      for (const match of matches) {
+        if(match?.groups) {
+
+          if(props[match.groups.name]) {
+            if(props[match.groups.name].default !== match.groups.def) {
+              throw new Error( `Default values of the same property cannot be different (${match.groups.name})` );
+            }
+            props[match.groups.name].files.push(file);
+
+          } else {
+            props[match.groups.name] = {
+              files: [file],
+              default: match.groups.def
+            };
+          }
+
+        }
+      }
+    }
+  });
+
+  let descriptionsKeys = '';
+
+  const table = '## Properties\n' +
+    '| Property | Default value | Description |\n' +
+    '| :--- | :--- | :--- |\n' +
+    Object.keys(props).toSorted((a, b) => a.localeCompare(b)).map(key => {
+
+      const descrKey = key.replace(/-([a-z])/g, function (part) { return part[1].toUpperCase(); });
+
+      if(show_props_list) {
+        descriptionsKeys +=`${descrKey}: '${descriptions[descrKey]??''}',\n`;
+      }
+
+      return `| \`--jt-${key}\` | \`${props[key].default}\` | ${descriptions[descrKey] ?? ''} |`;
+    }).join('\n')
+  ;
+
+  const start_text = fs.readFileSync( './src/custom-props-start.md', 'utf8' ),
+    end_text = fs.readFileSync( './src/custom-props-end.md', 'utf8' );
+
+  fs.writeFileSync( target_file, start_text + '\n\n' + table + '\n\n' + end_text );
+
+  if(show_props_list) {
+    console.log('\n' +styleText(['yellow'],  descriptionsKeys) + '\n'); // lista chiavi
+  }
+
+  console.log( '\n' + styleText(['bgGreen'], ' Done ' ) + '\n' );
+
+} catch(e) {
+  let message = styleText('bgRed', ` ${e} `);
+  console.error( '\n' + message + '\n');
+}

package/src/web-components/TODO json-table/_work/OLD/script/src/custom-props-end.md

@@ -0,0 +1,4 @@
+## Notes
+* `--jt-search-input-*`: you'll need that custom properties only if the `search`
+  parameter is set to `true` (default) and the `searchInputClassName`
+  (custom classname for search input, default `true`) parameter is not set.

package/src/web-components/TODO json-table/_work/OLD/script/src/custom-props-start.md

@@ -0,0 +1,30 @@
+# CSS Custom Properties List
+
+List of all CSS custom properties used in css files.
+
+If you don't want to use a new CSS, you can use the default one, just by customizing the values ​​of the custom properties.
+
+You can set the custom values ​​in the `:root` element, or directly in the json-table wrapper by assigning it a specific class:
+
+In the json-table config:
+
+```javascript
+new jsonTable({
+  container: '...',
+  mainWrapperExtraClassName: 'my-custom-classname',
+  
+  /* other config parameters */
+});
+```
+
+In your css:
+
+```css
+.my-custom-classname {
+  --jt-search-input-bg-color: #efefef;
+  --jt-search-input-border-color: #666;
+
+  /* other custom properties */
+}
+
+```

package/src/web-components/TODO json-table/_work/OLD/src/css/icons.module.css

@@ -0,0 +1,22 @@
+.icon { /* applied to the td */
+  text-align: center;
+
+  svg {
+    position: relative;
+    top: -3px;
+    width: var(--jt-bool-icon-size, 1.3em);
+    aspect-ratio: 1;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 8px;
+  }
+
+  &.true {
+    color: var(--jt-bool-true-color, #0a7202);
+  }
+  &.false {
+    color: var(--jt-bool-false-color, #c00);
+  }
+}

package/src/web-components/TODO json-table/_work/OLD/src/css/info.module.css

@@ -0,0 +1,42 @@
+.info {
+  display: flex;
+  align-items: center;
+
+}
+.resultInfo {
+  flex: 1;
+}
+.search {
+  flex: 0 1 15rem;
+}
+.searchInput {
+  display: block;
+  width: 100%;
+  padding: var(--jt-search-input-padding-y, .375rem) var(--jt-search-input-padding-x, .75rem);
+  font-size: var(--jt-search-input-font-size, clamp(.85rem, 6vw, 1rem));
+  color: var(--jt-search-input-text-color, currentColor);
+  background-color: var(--jt-search-input-bg-color, transparent);
+  border: 1px solid var(--jt-search-input-border-color, #999);
+  border-radius: .4rem;
+
+  &:focus {
+    outline: 2px solid hsl(192deg 84% 63% / .7);
+  }
+  &::placeholder {
+    color: var(--jt-placeholder-color, #999);
+    opacity: 1;
+  }
+  &[disabled] {
+    opacity: .6;
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+
+  /* @media (prefers-color-scheme: dark) {
+    border-color: var(--jt -search-input-border-color-dark, #ecede8);
+    &:focus {
+      outline-color: var(--green-2);
+    }
+  } */
+}

package/src/web-components/TODO json-table/_work/OLD/src/css/main-wrapper.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: block;
+  margin-block: var(--jt-wrapper-margin-block, 1rem);
+}

package/src/web-components/TODO json-table/_work/OLD/src/css/table.module.css

@@ -0,0 +1,154 @@
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable max-nesting-depth */
+.tableWrapper {
+  max-width: 100%;
+  overflow-x: auto;
+
+  /* TODO ombra su scroll vedi pannello staff e  https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */
+
+}
+
+.table {
+  width: 100%;
+  margin-block: var(--jt-table-margin-block, 1rem);
+  caption-side: var(--jt-table-caption-side, bottom);
+  border-spacing: 0;
+  border-collapse: collapse;
+  border-color: var(--jt-table-border-color, #999);
+  border-style: var(--jt-table-border-style, solid);
+  border-width: var(--jt-table-border-width, 1px);
+
+  caption {
+    padding-block: .2rem;
+    margin-block: 0;
+  }
+
+  th, td {
+    padding: var(--jt-table-cell-padding-y, .5rem) var(--jt-table-cell-padding-x, .5rem);
+    vertical-align: top;
+    background-color: var(--jt-table-cell-bg-color, #fff);
+    border-color: var(--jt-table-cell-border-color, #999);
+    border-style: var(--jt-table-cell-border-style, solid);
+    border-bottom-width: var(--jt-table-cell-border-width, 1px);
+
+    &:not(:last-child) {
+      border-right-width: var(--jt-table-cell-vertical-border-width, 1px);
+    }
+  }
+  thead {
+
+    th, td {
+      font-weight: 700;
+      vertical-align: bottom;
+      background-color: var(--jt-table-thead-cell-bg-color, #e4e4e4);
+    }
+
+    /* currently only one tr is expected for thead, but the pseudo class `:last-child`
+       is used anyway, for compatibility with any future developments */
+    tr:last-child {
+      th, td {
+        border-bottom-color: var(--jt-table-thead-cell-border-color, #666);
+        border-bottom-width: var(--jt-table-thead-cell-border-width, 4px);
+      }
+
+      th {
+        /* sort feature is available */
+        &.sort {
+          > div {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: .5rem;
+            align-items: flex-end;
+            justify-content: space-between;
+          }
+          @media (hover: hover) { /* @media (any-hover: hover) { */
+            &:has(.sortArrows > span:hover) {
+              background-color: var(--jt-table-thead-sort-cell-hover, #ebb8b8);
+            }
+          }
+        }
+
+        /* sorting has been activated */
+        &.sortingOn {
+          border-bottom-color: var(--jt-table-sort-color, #c00);
+        }
+
+        /* sorting ASC activated */
+        &.sortingAsc {
+          .sortArrowUp {
+            color: var(--jt-table-sort-arrow-on, #c00);
+          }
+        }
+
+        /* sorting DESC activated */
+        &.sortingDesc {
+          color: blue;
+        }
+
+      }
+    }
+  }
+
+  /*
+    sticky headers don't work if table wrapper is present since it has overflow
+    so this feature is added only if table is not wrapped
+  */
+  &.stickyHeaders {
+    position: relative;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  tfoot {
+    th, td {
+      font-weight: 700;
+      background-color: var(--jt-table-tfoot-cell-bg-color, #f4f4f4);
+    }
+    tr:first-child {
+      th, td {
+        border-top-color: var(--jt-table-tfoot-cell-border-color, #666);
+        border-top-width: var(--jt-table-tfoot-cell-border-width, 3px);
+      }
+    }
+  }
+}
+
+/* sort arrows container */
+.sortArrows {
+  display: flex;
+  flex: 0;
+  flex-flow: column nowrap;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  padding-block-end: .2em;
+  color: var(--jt-table-sort-arrow-off, #333);
+
+
+  > span {
+    flex: 0;
+    @media (hover: hover) { /* @media (any-hover: hover) { */
+      &:hover {
+        color: var(--jt-table-sort-arrow-hover, #c00);
+      }
+    }
+  }
+  svg {
+    display: block;
+    width: .5em;
+    aspect-ratio: 1;
+    cursor: pointer;
+    fill: currentColor;
+  }
+
+}
+/* inside `.sortArrows` element */
+/* .sortArrowUp {} */
+.sortArrowDn {
+  svg {
+    rotate: .5turn;
+  }
+}

package/src/web-components/TODO json-table/_work/OLD/src/css/utility.module.css

@@ -0,0 +1,9 @@
+.centerAlign {
+  text-align: center;
+}
+.endAlign {
+  text-align: end;
+}
+.nowrap {
+  white-space: nowrap;
+}

package/src/web-components/TODO json-table/_work/OLD/src/icons/false.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="M48 84c19.882 0 36-16.118 36-36S67.882 12 48 12 12 28.118 12 48s16.118 36 36 36zm16-52L33 63m31 0L33 32"/></svg>

package/src/web-components/TODO json-table/_work/OLD/src/icons/search-arrows.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="m39.9 0-39.9 80h80z"/></svg>

package/src/web-components/TODO json-table/_work/OLD/src/icons/true.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m64.5 39-22.013 21-10.987-10.5"/><path d="m48 84c19.8823 0 36-16.1177 36-36s-16.1177-36-36-36-36 16.1177-36 36 16.1177 36 36 36z"/></svg>

package/src/web-components/TODO json-table/_work/OLD/src/index.js

@@ -0,0 +1,56 @@
+/**
+ * JsonTable
+ * build a table from a static or ajax-imported JSON object.
+ *
+ * @param {object} params - parametri di configurazione.
+ * @author Massimo Cassandro
+ */
+
+import { parseParams } from './js/parse-params';
+import { mainBuilder } from './js/main-builder';
+import { infoSection } from './js/info-section';
+import { tableBuilder } from './js/table-builder';
+import { tableHead } from './js/table-head';
+import { tableFoot } from './js/table-foot';
+import { tableRow } from './js/table-row';
+import { setColumClassname } from './js/set-column-classname';
+
+
+class JsonTable {
+
+  constructor(custom_params, custom_data_types) {
+    this.params = parseParams({
+      custom_params: custom_params,
+      custom_data_types: custom_data_types,
+    });
+
+    if(this.params.debug) {
+      /* eslint-disable no-console */
+      console.groupCollapsed('JsonTable params');
+      console.log(this.params);
+      console.groupEnd();
+      /* eslint-enable no-console */
+    }
+
+
+    if(this.params.err) {
+      // eslint-disable-next-line no-console
+      console.error(this.params.err);
+
+    } else {
+      this.build();
+
+    }
+  }
+
+}
+
+JsonTable.prototype.build = mainBuilder;
+JsonTable.prototype.infoSection = infoSection;
+JsonTable.prototype.tableBuilder = tableBuilder;
+JsonTable.prototype.tableHead = tableHead;
+JsonTable.prototype.tableFoot = tableFoot;
+JsonTable.prototype.tableRow = tableRow;
+JsonTable.prototype.setColumClassname = setColumClassname;
+
+export default JsonTable;