@massimo-cassandro/minimo 1.7.2 → 1.8.0

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

@@ -0,0 +1,155 @@
+import mAlert from '../src/modal-alert.js';
+
+const custom_defaults = {
+
+  //settings to be applied to all dialog types
+  globals: {
+    onOpen: () => {
+      // console.log('open'); // eslint-disable-line
+      document.body.classList.add('modal-alert-is-open');
+    },
+    onClose: () => {
+      // console.log('close'); // eslint-disable-line
+      document.body.classList.remove('modal-alert-is-open');
+    },
+    cssFile: null
+  },
+
+  success: {
+    title: 'Done!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: 'text-success',
+    ok_btn_class: 'btn',
+    timer: 4000, // ms
+  },
+  error: {
+    title: 'An error has occurred',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  warning: {
+    title: 'Attention!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  info: {
+    title: null,
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn',
+    timer: null,
+  },
+  confirm: {
+    title: 'Do you confirm?',
+    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-outline',
+    cancel_btn_class: 'btn',
+    callback: null,
+    timer: null,
+  }
+};
+
+document.querySelector('.demo-success').addEventListener('click', () => {
+  mAlert({
+    type  : 'success',
+    mes: 'Lorem ipsum dolor sit amet',
+    callback: () => alert('callback')
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-info').addEventListener('click', () => {
+  mAlert({
+    type  : 'info',
+    title: 'Info',
+    mes: '<strong>Lorem ipsum</strong> dolor sit amet'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-error').addEventListener('click', () => {
+  mAlert({
+    type  : 'error'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-error-extra-btn').addEventListener('click', () => {
+  mAlert({
+    type  : 'error',
+    ok_btn_class: 'btn btn-error btn btn-outline',
+    extra_btn: '<button type="button" data-malert-result="extra-btn-result" class="btn btn-error extra-btn">Extra btn</button>',
+    extra_btn_selector: '.extra-btn',
+    extra_btn_focus: true,
+    callback: result => alert(result === 'extra-btn-result'? 'Extra button pressed' : 'OK button pressed')
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-warning').addEventListener('click', () => {
+  mAlert({
+    type  : 'warning',
+    mes: '<p>Quo dolorum cumque quo placeat aperiam doloribus dolorum animi. Sunt et dolores quas autem. Porro inventore ratione. Ex facere doloremque. Consectetur enim dolor. Sint ut facere quidem et et dicta natus itaque.</p> <p>Odit in eos repellat exercitationem tempore blanditiis voluptate. Dignissimos est tempora qui ducimus at et expedita esse.</p>'
+  }, custom_defaults);
+}, false);
+
+document.querySelector('.demo-confirm').addEventListener('click', () => {
+  mAlert({
+    type  : 'confirm',
+    callback: result => alert(`${result? 'OK' : 'Cancel'} button pressed`)
+  }, custom_defaults);
+}, false);
+
+
+// forms
+// Confirm on form submit
+document.getElementById('test-form').addEventListener('submit', e => {
+  let choiceIsNeeded = true;
+
+  if(choiceIsNeeded) {
+    e.preventDefault();
+    mAlert({
+      type  : 'confirm',
+      title: 'A choice is needed',
+      mes: 'Some message...',
+      ok_btn_text: 'Continue submit',
+      cancel_btn_text: 'Stop',
+      callback: result => {
+        if(result) {
+          alert('submit');
+          e.target.submit();
+        } else {
+          alert('submit canceled');
+        }
+      }
+    }, custom_defaults);
+  }
+
+}, false);
+
+// Error on form submit
+document.getElementById('test-form2').addEventListener('submit', e => {
+  let isError = true;
+
+  if(isError) {
+    e.preventDefault();
+    mAlert({
+      type  : 'error',
+      title: 'Oh my! There is an error...',
+      mes: 'Some message'
+    }, custom_defaults);
+  }
+
+}, false);

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

@@ -1,7 +1,8 @@
 import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
 import { classnames } from '../../utilities/classnames.js';
 import { spinner } from '../spinner/spinner.js';
-import * as styles from './modal-popup.module.css';
+import * as _modalCss from './modal-popup.module.css';
+const styles = /** @type {Record<string, string>} */ (/** @type {any} */ (_modalCss).default ?? _modalCss);
 
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement

package/src/components/slide-up-down-toggle/slide-up-down-toggle.js

@@ -0,0 +1,246 @@
+// @ts-check
+
+import * as _css from './slide-up-down-toggle.module.css';
+
+/*
+ * css-loader exposes class names differently depending on webpack config:
+ *   modules.namedExport: true  → named exports  → import * as _css  → _css.slide
+ *   default (namedExport off)  → default export  → import styles     → styles.slide
+ *                                                                       (= _css.default.slide)
+ * The fallback chain below handles both without changing any other code.
+ */
+const styles = { slide: _css.slide ?? /** @type {any} */ (_css).default?.slide ?? 'slide' };
+
+/**
+ * @module slide-up-down-toggle
+ *
+ * Collapse/expand animation driven by CSS — JS only toggles a data attribute
+ * and manages a lightweight wrapper element. No pixel measurement anywhere.
+ *
+ * ─── How it works ─────────────────────────────────────────────────────────────
+ *
+ * The CSS module uses `interpolate-size: allow-keywords` (height: auto
+ * transitions), `allow-discrete` (display: none transition), and
+ * `@starting-style` (entry animation from display: none). See the CSS file
+ * for a full explanation of each feature.
+ *
+ * ─── wrap: true (default) ─────────────────────────────────────────────────────
+ *
+ * JS wraps the target in a generated <div class="slide"> and animates that
+ * wrapper. The target element is completely untouched and can have any
+ * display value, padding, margin, or flex/grid layout.
+ *
+ *   // target is free to be flex, have padding, etc.
+ *   slideToggle(document.querySelector('#panel'));
+ *
+ * Initial collapsed state — add data-slide="closed" to the TARGET in HTML
+ * before any JS call. The first call transfers it to the generated wrapper:
+ *
+ *   <div id="panel" data-slide="closed">
+ *     <div class="d-flex p-3">…content…</div>
+ *   </div>
+ *
+ * ─── wrap: false ──────────────────────────────────────────────────────────────
+ *
+ * JS adds the .slide class directly to the target. The target must be a plain
+ * block container with no padding, flex or grid of its own. All layout must
+ * live on an inner child element.
+ *
+ *   <!-- target: plain wrapper, no padding -->
+ *   <div id="panel" data-slide="closed">
+ *     <!-- inner: all layout here -->
+ *     <div class="d-flex p-3">…content…</div>
+ *   </div>
+ *
+ *   slideToggle(document.querySelector('#panel'), { wrap: false });
+ *
+ * ─── Options ──────────────────────────────────────────────────────────────────
+ *
+ * @typedef {{ wrap?: boolean, duration?: number, callback?: (() => void) | null }} SlideOptions
+ *
+ *   wrap     {boolean}          default true  — auto-generate wrapper (see above)
+ *   duration {number}           ms            — overrides --slide-duration CSS var;
+ *                                               if omitted the CSS value is used
+ *   callback {() => void|null}  default null  — invoked after the transition ends
+ *
+ * ─── Return value ─────────────────────────────────────────────────────────────
+ *
+ * All three functions return a Promise<void> that resolves when the transition ends.
+ */
+
+/**
+ * Default option values — single source of truth used in every slide function.
+ * @type {Required<SlideOptions>}
+ */
+const DEFAULT_OPTIONS = {
+  wrap: true,
+  duration: /** @type {any} */ (undefined),
+  callback: null,
+};
+
+/**
+ * Maps each target element to its slide element (generated wrapper or the
+ * target itself). Checked on every call so the setup runs only once per target.
+ * @type {WeakMap<HTMLElement, HTMLElement>}
+ */
+const registry = new WeakMap();
+
+/**
+ * Returns the slide element for `target`, creating it on the first call.
+ *
+ * wrap: true  — inserts a <div class="slide"> before the target, moves the
+ *               target inside it, and transfers any existing data-slide value.
+ *               Resolves after a requestAnimationFrame so the browser paints
+ *               the wrapper's initial state before any transition-triggering
+ *               attribute change. (offsetHeight forces layout but not a paint —
+ *               only rAF guarantees a rendered frame as the transition origin.)
+ * wrap: false — adds the .slide class directly to the target. Resolves immediately
+ *               since the element was already in the DOM.
+ *
+ * @param {HTMLElement} target
+ * @param {boolean} wrap
+ * @returns {Promise<HTMLElement>} the element that carries .slide and data-slide
+ */
+async function getSlideEl(target, wrap) {
+  if (registry.has(target)) return /** @type {HTMLElement} */ (registry.get(target));
+
+  let el;
+  if (wrap) {
+    el = document.createElement('div');
+    el.classList.add(styles.slide);
+    // transfer only 'closed' state to the wrapper; 'open' is the default for
+    // visible elements and must NOT be set — it would trigger @starting-style
+    // on insertion, causing an unwanted height:0 entry animation
+    if ('slide' in target.dataset) {
+      if (target.dataset.slide === 'closed') el.dataset.slide = 'closed';
+      delete target.dataset.slide;
+    }
+    target.replaceWith(el);
+    el.appendChild(target);
+    // two nested rAFs are required: the outer one fires before the first paint
+    // (wrapper inserted but not yet rendered), the inner one fires after that
+    // paint — only then does the browser have a committed "previous style" to
+    // use as the transition origin. A single rAF or offsetHeight is not enough
+    // because both still execute before the first paint completes.
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  } else {
+    // read computed display BEFORE adding .slide, which would alter it
+    const startsHidden = window.getComputedStyle(target).display === 'none';
+    target.classList.add(styles.slide);
+    el = target;
+
+    if (startsHidden && !('slide' in target.dataset)) {
+      // remove inline display: none so .slide and its [data-slide] rules own visibility;
+      // CSS-based display: none from other rules may still conflict — wrap: true avoids this
+      if (target.style.display === 'none') {
+        target.style.removeProperty('display');
+      }
+      target.dataset.slide = 'closed';
+    }
+  }
+
+  registry.set(target, el);
+  return el;
+}
+
+/**
+ * Waits for the `height` transition on `el` to complete.
+ * Called AFTER the state attribute has been set so the transition is already
+ * running; transitionend fires at the end of the animation duration.
+ * Optionally sets --slide-duration to override the CSS default.
+ *
+ * @param {HTMLElement} el
+ * @param {number | undefined} duration
+ * @returns {Promise<void>}
+ */
+async function awaitHeight(el, duration) {
+  if (duration !== undefined) {
+    el.style.setProperty('--slide-duration', `${duration}ms`);
+  }
+  await /** @type {Promise<void>} */ (new Promise(resolve => {
+    /** @param {TransitionEvent} e */
+    const handler = (e) => {
+      if (e.propertyName === 'height') {
+        el.removeEventListener('transitionend', handler);
+        resolve();
+      }
+    };
+    el.addEventListener('transitionend', handler);
+  }));
+}
+
+/**
+ * Tears down the slide setup for `target`.
+ *
+ * wrap was true  — removes the generated wrapper and restores the target
+ *                  to its original position in the DOM.
+ * wrap was false — removes the .slide class and the data-slide attribute
+ *                  from the target.
+ *
+ * In both cases --slide-duration is removed from the slide element.
+ *
+ * @param {HTMLElement} target
+ */
+export function disposeSliding(target) {
+  if (!registry.has(target)) return;
+  const el = /** @type {HTMLElement} */ (registry.get(target));
+
+  el.style.removeProperty('--slide-duration');
+
+  if (el !== target) {
+    el.replaceWith(target); // remove wrapper, put target back
+  } else {
+    target.classList.remove(styles.slide);
+    delete target.dataset.slide;
+  }
+
+  registry.delete(target);
+}
+
+/**
+ * Collapses `target`.
+ * CSS animates height to 0, then snaps display to none.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideUp(target, options = {}) {
+  const { wrap, duration, callback } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  el.dataset.slide = 'closed';
+  await awaitHeight(el, duration);
+  callback?.();
+}
+
+/**
+ * Expands `target`.
+ * display snaps to block, then CSS animates height from 0 (via @starting-style) to auto.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideDown(target, options = {}) {
+  const { wrap, duration, callback } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  el.dataset.slide = 'open';
+  await awaitHeight(el, duration);
+  callback?.();
+}
+
+/**
+ * Toggles the collapsed/expanded state of `target`.
+ * Reads the current data-slide value on the slide element to decide direction.
+ *
+ * @param {HTMLElement} target
+ * @param {SlideOptions} [options]
+ * @returns {Promise<void>}
+ */
+export async function slideToggle(target, options = {}) {
+  const { wrap } = { ...DEFAULT_OPTIONS, ...options };
+  const el = await getSlideEl(target, wrap);
+  return el.dataset.slide === 'closed'
+    ? slideDown(target, options)
+    : slideUp(target, options);
+}

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -0,0 +1,97 @@
+/*
+ * CSS Module for slide-up-down-toggle.js
+ *
+ * Three modern CSS features work together to animate height without JS measurement:
+ *
+ *   interpolate-size: allow-keywords
+ *     Enables transitioning to/from `height: auto` — the browser resolves the
+ *     intrinsic size, so JS never reads offsetHeight or scrollHeight.
+ *
+ *   transition-behavior: allow-discrete  (via `allow-discrete` in shorthand)
+ *     Allows `display` to participate in a transition. On collapse: height
+ *     animates to 0, then `display: none` snaps at the very end. On expand:
+ *     `display: block` snaps at the very start, then height animates to auto.
+ *
+ *   @starting-style
+ *     Defines the initial state for elements entering from `display: none`.
+ *     Without it, the browser has no "before" value to transition from and
+ *     the expand animation would not play.
+ *
+ * ─── Usage ────────────────────────────────────────────────────────────────────
+ *
+ *   wrap: true (default)
+ *     JS generates a wrapper <div class="slide"> around the target.
+ *     The target element is completely free — any display, padding, margin.
+ *     No changes to HTML required; initial open state is the default.
+ *     For an element that should start collapsed, add data-slide="closed" to
+ *     the target BEFORE calling any slide function — JS transfers it to the wrapper.
+ *
+ *   wrap: false
+ *     JS adds .slide directly to the target element.
+ *     The target must be a plain block wrapper (no padding, no flex/grid).
+ *     All layout, padding and margin must live on an inner child element.
+ *     Initial collapsed state: add data-slide="closed" directly to the target in HTML.
+ *
+ * ─── FOUC prevention ──────────────────────────────────────────────────────────
+ *
+ *   Elements with data-slide="closed" are hidden via a :global rule below,
+ *   so they start invisible even before JS adds the .slide class.
+ *
+ * ─── Duration override ────────────────────────────────────────────────────────
+ *
+ *   Set --slide-duration on the element or pass `duration` in JS options:
+ *     style="--slide-duration: 300ms"
+ */
+
+/* applied to the animation wrapper (generated or the target itself) */
+.slide {
+  interpolate-size: allow-keywords;
+  /*
+   * !important overrides any external display: none (inline or CSS rule without !important).
+   * .slide[data-slide='closed'] below has higher specificity (0,2,0 vs 0,1,0) so its
+   * display: none !important still wins when the element is collapsed.
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  display: block !important;
+  height: auto;
+  overflow: hidden;
+  transition:
+    height var(--slide-duration, 500ms) ease,
+    display var(--slide-duration, 500ms) allow-discrete;
+}
+
+/* collapsed state: height animates to 0, then display snaps to none */
+.slide[data-slide='closed'] {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+  height: 0;
+}
+
+/*
+ * Entry state for the expand transition.
+ * When .slide transitions from display:none → display:block, the browser needs
+ * a starting value for height. @starting-style provides height:0 so the
+ * animation plays from zero to auto instead of snapping instantly.
+ */
+/*
+ * @starting-style targets only [data-slide='open'] — not :not([data-slide='closed']).
+ * The broader selector would also match newly inserted wrappers (which have no
+ * data-slide attribute), causing an unwanted entry animation from height:0 that
+ * conflicts with the first collapse call and makes the transition invisible.
+ * Using [data-slide='open'] restricts this to the expand animation triggered by
+ * slideDown(), which always sets data-slide="open" on a previously hidden element.
+ */
+@starting-style {
+  .slide[data-slide='open'] {
+    height: 0;
+  }
+}
+
+/*
+ * FOUC prevention — global, no class required.
+ * Hides elements with data-slide="closed" before JS has run and added .slide.
+ * Uses :global so CSS Modules does not hash this selector.
+ */
+:global([data-slide='closed']) {
+  display: none;
+}

package/src/components/snackbar/snackbar.js

@@ -1,6 +1,7 @@
 import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
 import { classnames } from '../../utilities/classnames.js';
-import * as styles from './snackbar.module.css';
+import * as _snackbarCss from './snackbar.module.css';
+const styles = /** @type {Record<string, string>} */ (/** @type {any} */ (_snackbarCss).default ?? _snackbarCss);
 
 /*
 References

package/src/components/spinner/spinner.js

@@ -1,4 +1,5 @@
-import * as styles from './spinner.module.css';
+import * as _spinnerCss from './spinner.module.css';
+const styles = /** @type {Record<string, string>} */ (/** @type {any} */ (_spinnerCss).default ?? _spinnerCss);
 
 // The spinner class depends on the spinner type in use; the corresponding CSS file must be included.
 // TODO: system for configuring the spinner type to allow multiple spinner types in the same project