@massimo-cassandro/minimo 1.7.1 → 1.8.0

package/src/components/unsplash-page/TODO unsplash-page-demo/README.md

@@ -0,0 +1,194 @@
+# Unsplash page
+
+> This repository will soon be integrated with [minimo](https://github.com/massimo-cassandro/minimo)
+
+**demo:** <https://massimo-cassandro.github.io/unsplash-page/demo>
+
+Single page with random photo from [Unsplash](https://unsplash.com/) to display some messages (useful for error pages).
+
+This component comes from some experiments I did with the Unsplash API. The initial purpose was to display more appealing error pages, but you can use it for any use.
+
+For best results, it is advisable to display images from a photo collection prepared on Unsplash. The demos in this repository use my collection ["World"](https://unsplash.com/collections/3660951/world).
+
+You need to create a server script to retrieve the JSON data of a random image from Unsplash (see [Get a Random Photo](https://unsplash.com/documentation#get-a-random-photo) on Unsplash API docs).
+
+The script also implements [BlurHash](https://blurha.sh/), to show a placeholder of the image until it loads.
+
+For more details and examples take a look at:
+
+* <https://unsplash.com/developers>
+* [A Random Image Slideshow With Unsplash and React](https://betterprogramming.pub/a-random-image-slideshow-with-unsplash-and-react-1b6aee698652)
+* [Unsplash Random Photo 1](https://github.com/massimo-cassandro/area-test/tree/main/2023-03-unsplash-random-photo-1)
+* [Random Unsplash Photos Slideshow](https://github.com/massimo-cassandro/area-test/tree/main/2023-05-unsplash-random-photo-2)
+* [A Split Image Effect in React](https://medium.com/better-programming/a-split-image-effect-in-react-beb2baa3fe5f) and [split image](https://github.com/massimo-cassandro/area-test/tree/main/2023-07-split-image)
+
+
+The SVG icons used in the script are from [Phosphor Icon](https://phosphoricons.com/). At the moment it is not possible to use different ones without modifying the source code.
+
+## Installation
+
+Install from NPM:
+
+```bash
+npm i -S  @massimo-cassandro/unsplash-page blurhash
+```
+
+Fro info about **blurhash**: <https://www.npmjs.com/package/blurhash>.
+
+## Running a local demo
+
+Launch a php server (php needed for data proxy), then go to the `demo` dir:
+
+```bash
+php -S localhost:8000
+```
+
+and then open `http://localhost:8000/demo/`.
+
+## Use
+
+Demo: <https://massimo-cassandro.github.io/unsplash-page/demo/vanilla-js/index.html>
+
+
+Add to your script:
+
+```javascript
+import { unsplashPageJS } from '@massimo-cassandro/unsplash-page';
+
+
+unsplashPageJS({
+  targetElement    : document.getElementById('root'),
+  className        : 'class',
+  unsplashDataUrl  : 'url',
+  utmSource        : 'source',
+  title            : 'Message title',
+  text             : 'This is the message <strong>text</strong>',
+  backLink         : '<a href="link/to/home">Back to home</a>',
+  hidePhotoLink    : true,
+  cssModules       : false,
+  cssModulesObj    : null
+});
+```
+
+where:
+
+* `className`, `unsplashDataUrl`, `utmSource` and `hidePhotoLink` correspond exactly to what is described in the React version
+* `title`, `text` and `backLink` are like the previous ones, but in this case they are always strings
+* `targetElement`: The DOM element in which to insert the necessary markup
+* `cssModules`: Set to true if your bundler uses CSS Modules (default `false`)
+* `cssModulesObj`: If you are using CSS Modules, assign to these parameter the imported styles object (see below).
+
+### CSS
+The JS file does not include any CSS, to maintain maximum flexibility of use.
+
+Then you can plug your CSS into the html (like I did in the demo) or manage it with Rollup, Webpack etc.
+
+If you are using CSS modules, you need to share the parsed CSS object with the script so that the processed class names can be used:
+
+
+```javascript
+import styles from '@massimo-cassandro/unsplash-page/src/unsplash-page.module.css';
+
+unsplashPageJS({
+  /* ... */
+  cssModules       : true,
+  cssModulesObj    : styles
+});
+```
+
+### SVG icons
+
+SVG icons are imported into the script, both in the React and Vanilla JS versions.
+
+In the latter, they need to be managed by your bundler to ensure they load correctly. In the demo, I used [@rollup/plugin-image](https://www.npmjs.com/package/@rollup/plugin-image) to import them as base64. Since they are very small, this seems to be the simplest solution.
+
+
+## CSS customization
+
+You can customize the CSS (fonts, colors, etc.) using some CSS custom properties.
+
+You need to provide them as a separate CSS file to change the default settings.
+
+Below you can see the list of properties set with their default values: simply reset the ones you want to change and ignore the others.
+
+You can do this by setting variables in the `:root` element, or you can narrow their scope to the component container by assigning it a class (thru the `className` parameter) and then using it in you CSS.
+
+For a complete list of all custom properties see `src/unsplash-page.modules.css`;
+
+```css
+/* needed if your script doesn't embed the css file */
+@import '@massimo-cassandro/unsplash-page/src/unsplash-page.module.css';
+
+.your-custom-class { /* or :root */
+
+  /* your css custom props */
+}
+```
+
+## Using http error codes
+
+Using HTTP Error Codes from your server can be a clever way to use this component.
+
+First, get the error code from your server (404, 500, etc.), for example by setting it as a `data` attribute somewhere, then pass it to the script that implements UnsplashPage.
+Matching the errorCode with an object of predefinited titles and text, can do the trick:
+
+
+```javascript
+const myErrorCode = +document.body.dataset.errorCode || 500;
+
+const errorTypes = {
+  403: {
+    title: 'Oops… You can’t access this page', 
+    // title: 'Ops… Non puoi accedere a questa pagina',
+    text: null
+  },
+  404: {
+    title: 'Oops… This page does not exist', 
+    // title: 'Ops… Questa pagina non esiste',
+    text: null
+  },
+  500: {
+    title: 'Oops… An error has occurred', 
+    // title: 'Ops… Si è verificato un errore',
+    text: null
+  },
+  503: {
+    title: 'Sorry, this site is temporarily under maintenance', 
+    // title: 'Siamo spiacenti, il sito è temporaneamente in manutenzione',
+    text: null
+  }
+};
+
+unsplashPageJS({
+  /* ... */
+  title: errorTypes[myErrorCode].title,
+  text: errorTypes[myErrorCode].text,
+  backLink: myErrorCode !== 503? <a href="link/to/home">Back to home</a> : null
+
+});
+```
+
+## Use with React
+The previous version of UP contained a React version of the script, but, to simplify maintenance and achieve maximum flexibility of use, I now prefer to use a React wrapper of the Vanilla JS script: you can find a template of the file in the `react` folder.
+
+The sample uses [React Router](https://reactrouter.com) to display error messages based on server results.
+
+In the same folder, you can find the previous, unmantained, React version,
+
+## Images breakpoints & sizes
+
+Images are uploaded at different sizes using the [Unsplash API](https://unsplash.com/documentation#dynamically-resizable-images). Other than a few differences, CSS media query breakpoints are the same as those in [Bootstrap 5](https://getbootstrap.com/docs/5.3/layout/breakpoints/).
+
+The following table reports the image size for each breakpoint:
+
+
+| BS5 breakpoint               |   xs  |    sm    |     md    |     lg     |      xl     |   xxl  |
+|------------------------------|:-----:|:--------:|:---------:|:----------:|:-----------:|:------:|
+| Page width                   | < 576 | 576 -767 | 768 - 991 | 992 - 1199 | 1200 - 1399 | >=1400 |
+| img width                    |  576  |    768   |    992    |    1200    |     1400    |  1920  |
+| img height (16/9)            |  324  |    432   |    558    |     675    |     788     |  1080  |
+| img height (4/3)             |  432  |    576   |    744    |     900    |     1050    |  1440  |
+| img height (9/21, portrait)  |  1344 |          |           |            |             |        |
+| img height (21/9, landscape) |  247  |          |           |            |             |        |
+
+Sizes and breakpoints are defined in the `img-breakpoints.js` file.

package/src/components/unsplash-page/TODO unsplash-page-demo/changelog.md

@@ -0,0 +1,5 @@
+# Changelog
+
+* 1.0.0 (29 nov 2023) - First Release
+* 2.0.0 (30 apr 2024) - Dropped react version and sass
+* 2.1.0 (04 mar 2025) - Separazione regole css per reset body tag

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/utilities/generate-pwd.js

@@ -0,0 +1,22 @@
+/**
+ * Generates a random password using uppercase letters and digits,
+ * excluding visually ambiguous characters (O, I, 0).
+ *
+ * @param {number} [min_length=8] - Minimum password length (matches `minlength` attribute).
+ * @returns {string} The generated password.
+ */
+export function generatePwd(min_length = 8) {
+
+  let chars='ABCDEFGHJKLMNPQRSTUVWXYZ123456789',
+    charsNum = chars.length,
+    min_lenght = min_length || 8,
+    pwd = '', i, x;
+
+  for( x = 0; x < min_lenght; x++ ) {
+    i = Math.floor(Math.random() * charsNum);
+    pwd += chars.charAt(i);
+  }
+
+  return pwd;
+
+}

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);
+}