@massimo-cassandro/minimo 0.1.2 → 0.1.3

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

@@ -1,85 +0,0 @@
-// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
-
-import modalAlert from '@massimo-cassandro/modal-alert';
-
-import checkIcon from './svg/check-circle-duotone.svg?inline';
-import infoIcon from './svg/info-duotone.svg?inline';
-import confirmIcon from './svg/question-duotone.svg?inline';
-import warningIcon from './svg/warning-duotone.svg?inline';
-import errorIcon from './svg/x-circle-duotone.svg?inline';
-
-const custom_defaults = {
-
-  globals: {
-    onOpen: () => {
-      document.body.classList.add('overflow-hidden');
-    },
-    onClose: () => {
-      document.body.classList.remove('overflow-hidden');
-    },
-    cssFile: null,
-    animation: true,
-    showMarks: true,
-  },
-
-  success: {
-    title: 'Operazione completata',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    ok_btn_class: 'btn btn-success',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'Si è verificato un errore',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-danger',
-    timer: null,
-  },
-  warning: {
-    title: 'Attenzione!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-info',
-    timer: null,
-  },
-  confirm: {
-    title: 'Confermi?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    cancel_btn_class: 'btn btn-outline-secondary',
-    callback: null,
-    timer: null
-  }
-};
-
-const marks = {
-  success: checkIcon,
-  error: errorIcon,
-  warning: warningIcon,
-  info: infoIcon,
-  confirm: confirmIcon
-};
-
-export function mAlert(params) {
-  modalAlert(params, custom_defaults, marks);
-}

package/src/components/modal-alert/svg/check-circle-duotone.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/src/components/modal-alert/svg/info-duotone.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"></path></svg>

package/src/components/modal-alert/svg/question-duotone.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/src/components/modal-alert/svg/warning-duotone.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>

package/src/components/modal-alert/svg/x-circle-duotone.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

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

@@ -1,152 +0,0 @@
-import { domBuilder, classnames } from '@node_modules/@massimo-cassandro/js-utilities/index.js';
-import { spinner } from '@minimo/spinner.js';
-import * as styles from './modal-content.module.css?inline';
-
-
-
-
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
-
-export function modalContent({
-
-  /** iframe | content */
-  mode = 'iframe',
-
-  /** dialog extra class */
-  dialogClassName = null,
-
-  /** iframe url */
-  iframeUrl = null,
-
-  /** content string (markup) o array */
-  content = null,
-
-  /** content extra classname */
-  contentClassName = null,
-
-  /** dimensione modal: full, large, medium o small */
-  size = 'large',
-
-  /** padding: std (var(--spacing-md) 0) o none */
-  padding = 'std'
-}) {
-
-  if(!['content', 'iframe'].includes(mode)) {
-    throw `modalContent: parametro 'mode' non corretto (${mode})`;
-  }
-  if(!iframeUrl && mode === 'iframe') {
-    throw 'modalContent: parametro `iframeUrl` mancante';
-  }
-  if(content == null && mode === 'content') {
-    throw 'modalContent: parametro `content` mancante';
-  }
-  if(!['full', 'large', 'medium', 'small'].includes(size)) {
-    throw `modalContent: parametro 'size' non corretto (${size})`;
-  }
-  if(!['std', 'none'].includes(padding)) {
-    throw `modalContent: parametro 'padding' non corretto (${padding})`;
-  }
-
-  let dialog_element, dialog_inner, iframe_element = null, content_element = null;
-  const iframeLoadEventHandler = () => {
-    dialog_element.classList.add(styles.on);
-  };
-
-  if(!dialog_element) {
-
-    domBuilder([
-      {
-        tag: 'dialog',
-        className: styles.dialog,
-        attrs: {
-          'closedby': 'any'
-        },
-        children: [
-          {
-            tag: 'button',
-            className: styles.closeButton, // TODO standardizzare close btn
-            attrs: {
-              'aria-label': 'Chiudi'
-            }
-          },
-          {
-            className: styles.dialogInner,
-            children: [
-              {
-                className: styles.modalSpinner,
-                content: spinner({container: null, withOverlay: false })
-              }
-
-            ]
-          }
-        ]
-      }
-    ], document.body);
-
-
-    dialog_element = document.querySelector(`.${styles.dialog}`);
-    dialog_inner = dialog_element.querySelector(`.${styles.dialogInner}`);
-
-    dialog_element.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
-      dialog_element.close();
-    }, false);
-
-    // listener chiusura
-    dialog_element.addEventListener('close', () => {
-
-      iframe_element?.removeEventListener('load', iframeLoadEventHandler, false);
-      iframe_element?.remove();
-      content_element?.remove();
-
-      document.body.classList.remove('overflow-hidden');
-      dialog_element.classList.remove(styles.on);
-    }, false);
-
-  }
-
-
-  // aggiunta classi extra
-  dialog_element.className = classnames(
-    styles.dialog,
-    dialogClassName,
-    styles[`size-${size}`],
-    styles[`padding-${padding}`]
-  );
-
-  domBuilder([
-    {
-      condition: mode === 'iframe',
-      className: styles.iframeEl,
-      tag: 'iframe',
-      attrs: {
-        src: ''
-      }
-    },
-    {
-      condition: mode === 'content',
-      className: classnames(styles.contentEl, contentClassName),
-      content: (content && !Array.isArray(content))? content : null,
-      children: (content && Array.isArray(content))? content : null
-    }
-  ], dialog_inner);
-
-
-  document.body.classList.add('overflow-hidden');
-  dialog_element.showModal();
-  dialog_element.focus();
-
-
-  if(mode === 'iframe') {
-    iframe_element = dialog_element.querySelector(`.${styles.iframeEl}`);
-    iframe_element.src = iframeUrl;
-
-    // listener load per i frame
-    iframe_element?.addEventListener('load', iframeLoadEventHandler, false);
-
-
-  } else if (mode === 'content') {
-    content_element = dialog_element.querySelector(`.${styles.contentEl}`);
-    dialog_element.classList.add(styles.on);
-  }
-
-}

package/src/components/modal-content/modal-content.module.css

@@ -1,142 +0,0 @@
-/* TODO custom props nel file generale */
-/* TODO prevedere opzione con bordo del pulsante di chiusura (NB: si disallinea) */
-/* TODO cambiare icona chiusura con svg? */
-/* TODO aggiungere wrapper intorno a dialogInner (a filo con il dialog) per la scroll bar */
-
-.dialog { /* dialog */
-  --modal-border-radius: var(--radius-md, 1.2rem);
-  position: fixed;
-  max-width: 80dvw;
-  max-height: 90dvh;
-  padding: 0;
-  margin: auto;
-  overflow: visible;
-  background-color: var(--body-bg-color, #fff);
-  border: none;
-  border-radius: var(--modal-border-radius);
-  box-shadow: 0 0 2rem .5rem rgb(0 0 0 / .5);
-  transition: scale .2s ease-out;
-  scale: 0;
-
-  /* stylelint-disable selector-class-pattern */
-  &.size-full {
-    width: 80dvw;
-    height: 90dvh;
-  }
-  /* dimensioni std -> size == 'large' */
-  &.size-large {
-    width: 50rem; /* 800px */
-    height: auto;
-  }
-  &.size-medium {
-    width: 37.5rem; /* 600px */
-    height: 37.5rem;
-  }
-  &.size-small {
-    width: 32rem; /* ~500 x 400 */
-    height: 25rem;
-  }
-  /* stylelint-enable selector-class-pattern */
-
-  &.on {
-    scale: 1;
-  }
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: rgb(0 0 0 / .7);
-  }
-
-}
-
-.dialogInner {
-  width: 100%;
-  height: 100%;
-  padding-inline-end: var(--spacing-md);
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* scrollbar-gutter: stable; */
-  border-radius: var(--modal-border-radius);
-
-  /* stylelint-disable selector-class-pattern */
-  .padding-std & {
-    padding: var(--spacing-md) 0;
-  }
-  .padding-none & {
-    padding: 0;
-  }
-  /* stylelint-enable selector-class-pattern */
-}
-
-.modalSpinner {
-  position: relative;
-  padding-block-start: var(--spacing-2xl);
-
-  .dialog.on & {
-    display: none;
-  }
-}
-
-.iframeEl, .contentEl {
-  width: 100%;
-  overscroll-behavior: contain;
-}
-
-.iframeEl {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.contentEl {
-  min-height: 100%;
-}
-
-.closeButton  {
-  --btn-color: var(--secondary-fg, #000);
-  --btn-bg-color: var(--secondary, #fff);
-  --btn-hover-color: var(--secondary, #fff);
-  --btn-hover-bg-color: var(--secondary-fg, #000);
-  --icon-size: 2.5rem;
-  --btn-padding: var(--spacing-xs, .5rem);
-  --icon-bars-thickness: 3px;
-
-  position: absolute;
-  top: calc(-1 * var(--icon-size) / 3);
-  right: calc(-1 * var(--icon-size) / 3);
-  display: block;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  padding: var(--btn-padding);
-  color: var(--btn-color);
-  cursor: pointer;
-  background-color: var(--btn-bg-color);
-  /* border: var(--icon-bars-thickness) solid currentColor; */
-  border: none;
-  border-radius: 50%;
-
-
-  &:hover {
-    --btn-color: var(--btn-hover-color);
-    --btn-bg-color: var(--btn-hover-bg-color);
-  }
-
-  &::before, &::after {
-    position: absolute;
-    top: 50%;
-    left: var(--btn-padding);
-    display: block;
-    width: calc(var(--icon-size) - (var(--btn-padding) * 2));
-    height: var(--icon-bars-thickness);
-    content: '';
-    background: currentColor;
-  }
-  &::before {
-    transform: translateY(-50%) rotate(45deg);
-  }
-  &::after {
-    transform: translateY(-50%) rotate(-45deg);
-  }
-}
-

package/src/components/recaptcha/recaptcha.css

@@ -1,74 +0,0 @@
-/*
-
-{%- set chiave_recaptcha_client = '6Le75-AZAAAAAO1sEV1JChhNg3nYw1HBn9AjaVSN' -%}
-<div class="recaptcha-form-wrapper disabled" data-key="{{ chiave_recaptcha_client }}">
-
-  <form id="form-xxx" action="" method="post">
-    ..
-  </form>
-
-
-  <div class="recaptcha-alert">Per abilitare questo form è necessario attivare
-    i cookie per le funzionalità aggiuntive modificando le tue
-    <button class="btn btn-link" type="button" data-cc="show-preferencesModal" aria-haspopup="dialog">preferenze per i cookie</button></div>
-
-  <p class="text-xs">Questo modulo è protetto da Google reCAPTCHA.
-    Per info consulta la <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> di Google
-    e i <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">termini di servizio</a>.</p>
-</div>
-
-*/
-
-.recaptcha-form-wrapper {
-
-  .recaptcha-alert {
-    display: none;
-  }
-
-  &.disabled {
-    position: relative;
-
-    .recaptcha-form-inner-wrapper {
-      filter: blur(2px);
-
-      &::after {
-        position: absolute;
-        inset: 0;
-        display: block;
-        content: '';
-        background-color: var(--recaptcha-alert-overlay, color-mix(in srgb, #000 50%, transparent));
-      }
-    }
-    input, select, textarea {
-      pointer-events: none;
-      user-select: none;
-    }
-
-    .recaptcha-alert {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: block;
-      padding: var(--spacing-xs);
-      color: var(--recaptcha-alert-fg, #fff);
-      background-color: var(--recaptcha-alert-bg, #000);
-      border: .5px solid currentColor;
-      border-radius: var(--radius-xs);
-      box-shadow: var(--box-shadow-base);
-      transform-origin: center;
-      translate: -50% -50%;
-    }
-  }
-}
-
-.grecaptcha-badge {
-  visibility: hidden;
-}
-
-.grecaptcha-info {
-  margin: 1rem 0 0;
-  font-size: .6rem;
-  font-style: italic;
-  font-weight: 300;
-  opacity: 75%;
-}

package/src/components/sf-macro/sf-macro.css

@@ -1,104 +0,0 @@
-
-.sf-macro-wrapper {
-  --sf-macro-rows-padding: .5rem;
-  --sf-macro-rows-margin-bottom: 1rem;
-  --sf-macro-rows-border-radius: .4rem;
-  --sf-macro-rows-hover-bg-color: color-mix(in srgb, var(--body-bg-color) 95%, #000);
-  --sf-macro-even-rows-bg-color: var(--body-bg-color); /* rgb(0 0 0 / .05); */
-  --sf-macro-rows-border: 1px solid var(--stone-5);
-  --sf-macro-close-btn-size: 2rem;
-
-
-  /* etichette campi righe successive alla prima */
-  @media (--desktop-up) {
-    &:not(.always-show-labels) {
-      .sf-macro-riga {
-        &:not(:first-child) {
-          .form-label, label {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
-  /*
-  // forza la visualizzazione delle etichette in tutte le righe
-  // a partire dal breakpont successivo a quello indicato
-  @each $brk in (xs, sm, md, lg, xl) {
-    &.sf-macro-show-label-down-#{$brk} {
-      @include media-breakpoint-down($brk) {
-        .form-label, label {
-          display: inline-block !important;
-        }
-      } // end @media
-    }
-  } // end @each
-  */
-
-}
-
-.sf-macro-riga {
-  position: relative;
-  padding: var(--sf-macro-rows-padding);
-  margin-bottom: var(--sf-macro-rows-margin-bottom);
-  border: var(--sf-macro-rows-border);
-  border-radius: var(--sf-macro-rows-border-radius);
-
-  &:nth-child(even) {
-    background-color: var(--sf-macro-even-rows-bg-color);
-  }
-
-
-  &:hover {
-    background-color: var(--sf-macro-rows-hover-bg-color);
-  }
-
-  .form-group {
-    margin-bottom: 0;
-
-    &:has([type='checkbox']) {
-      align-self: center;
-    }
-  }
-
-  .grid {
-    row-gap: .8rem;
-  }
-
-} /* end .sf-macro-riga */
-
-
-.sf-macro-close-btn { /* button */
-  position: absolute;
-  top: -.5rem;
-  right: -.5rem;
-  z-index: 1;
-  display: block;
-  width: var(--sf-macro-close-btn-size);
-  height: var(--sf-macro-close-btn-size);
-  padding: 1px;
-  color: currentColor;
-  background-color: var(--body-content-bg);
-  border-radius: 50%;
-
-
-  &[disabled], [disabled] & {
-    cursor: not-allowed;
-    opacity: .4;
-    transform: skew(-15deg);
-  }
-
-  svg {
-    width: 100%;
-    aspect-ratio: 1;
-  }
-}
-
-.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
-
-  outline: 2px dashed var(--status-danger-color);
-  .sf-macro-close-btn {
-    color: var(--status-danger-color);
-  }
-}

package/src/components/sf-macro/sf-macro.js

@@ -1,44 +0,0 @@
-import './sf-macro.css';
-
-export function sf_macro({
-  wrapper_selector = '.sf-macro-wrapper',
-  row_selector = '.sf-macro-riga',
-  add_callback = null,
-  del_callback = null
-}={}) {
-
-  document.querySelectorAll(wrapper_selector).forEach(fset => {
-    const macro_container = fset.querySelector('.sf-macro-container')
-      ,macro_template = macro_container.dataset.template
-    ;
-
-    // listeners
-    fset.addEventListener('click', e => {
-
-      if(e.target.closest('.sf-macro-riga-add')) {
-
-        const righe_macro = macro_container.querySelectorAll(row_selector).length;
-
-        macro_container.insertAdjacentHTML('beforeend',
-          macro_template.replace(/__indice\d?__/g, righe_macro + 1)
-        );
-
-        if(add_callback && typeof add_callback === 'function') {
-          add_callback(
-            macro_container.querySelector('.sf-macro-riga:last-child'),
-            e.target.closest('.sf-macro-riga-add')
-          );
-        }
-
-
-      } else if(e.target.closest('.sf-macro-close-btn')) {
-        e.target.closest(row_selector).remove();
-
-        if(del_callback && typeof del_callback === 'function') {
-          del_callback();
-        }
-      }
-
-    }, false);
-  }); // end foreach wrapper_selector
-}

package/src/components/vanilla-cookie-consent/cookie-consent.css

@@ -1,20 +0,0 @@
-/* stylelint-disable selector-max-id */
-@import 'vanilla-cookieconsent/dist/cookieconsent.css';
-
-/* stylelint-disable declaration-no-important */
-#cc-main {
-  h2 {
-    line-height: 1.3 !important;
-  }
-
-  .btn-link {
-    font-weight: var(--font-weight-semibold);
-
-    @media (hover: hover) {
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-/* stylelint-enable declaration-no-important */