@massimo-cassandro/minimo 1.6.0 → 1.7.0

package/src/utilities/linked-dates.js

@@ -0,0 +1,64 @@
+// @ts-check
+
+/**
+ * Links date/datetime-local input fields so that one field constrains
+ * the min/max of another.
+ *
+ * The `data-max` attribute on a date field must contain the `id` of the field
+ * whose value sets the `max` constraint of the current field (start date).
+ * The `data-min` attribute on a date field must contain the `id` of the field
+ * whose value sets the `min` constraint of the current field (end date).
+ *
+ * If the linked field is disabled, the constraint is removed on focus
+ * and restored when the linked field is re-enabled.
+ *
+ * @param {Document|Element} context - root element to search within (defaults to `document`)
+ * @returns {void}
+ */
+export function linkedDates(context = document) {
+
+  // start date fields: constrained by a max value from a linked field
+  context.querySelectorAll('input[type="date"][data-max], input[type="datetime-local"][data-max]').forEach(el => {
+    const maxId = /** @type {HTMLInputElement} */ (el).dataset.max;
+    let linked_field = maxId ? document.getElementById(maxId) : null;
+
+    if(linked_field) {
+      el.setAttribute('max', /** @type {HTMLInputElement} */ (linked_field).value);
+
+      linked_field.addEventListener('change', () => {
+        el.setAttribute('max', /** @type {HTMLInputElement} */ (linked_field).value);
+      });
+
+      // remove max if the linked field is disabled; restore it when re-focused enabled
+      el.addEventListener('focus', () => {
+        if(/** @type {HTMLInputElement} */ (linked_field).disabled) {
+          el.removeAttribute('max');
+        } else {
+          el.setAttribute('max', /** @type {HTMLInputElement} */ (linked_field).value);
+        }
+      }, false);
+    }
+  });
+
+  // end date fields: constrained by a min value from a linked field
+  context.querySelectorAll('input[type="date"][data-min], input[type="datetime-local"][data-min]').forEach(el => {
+    const minId = /** @type {HTMLInputElement} */ (el).dataset.min;
+    let linked_field = minId ? document.getElementById(minId) : null;
+
+    if(linked_field) {
+      linked_field.addEventListener('change', () => {
+        el.setAttribute('min', /** @type {HTMLInputElement} */ (linked_field).value);
+      });
+
+      // remove min if the linked field is disabled; restore it when re-focused enabled
+      el.addEventListener('focus', () => {
+        if(/** @type {HTMLInputElement} */ (linked_field).disabled) {
+          el.removeAttribute('min');
+        } else {
+          el.setAttribute('min', /** @type {HTMLInputElement} */ (linked_field).value);
+        }
+      }, false);
+    }
+  });
+
+}

package/src/utilities/relative-date.js

@@ -0,0 +1,153 @@
+// @ts-check
+
+// Displays a date in relative form to the current date if within the set limits.
+// Relative dates are automatically updated every minute.
+
+/**
+ * @typedef {object} RelativeDateOptions
+ * @property {boolean} [useRelativeTime=true] - Show times near the date as "in xx minutes" (before) or "now" (within `relativeTimeMinutesAfter`)
+ * @property {string} [nowString] - String to display when the date is right now
+ * @property {number} [relativeTimeMinutesBefore] - Minutes before the date within which to show "in xx minutes"
+ * @property {number} [relativeTimeMinutesAfter] - Minutes after the date within which to show the now string
+ * @property {boolean} [relativeTimeShowTime] - Show the actual time alongside relative date labels
+ * @property {string} [relativeTimeShowTimeMarkup] - HTML markup for the time portion; `@@time@@` is replaced with the localized time string
+ * @property {boolean} [firstLetterUpperCase] - Capitalize the first letter of the returned string
+ * @property {Intl.DateTimeFormatOptions} [dateFormat] - Format for non-relative dates (beyond day after tomorrow)
+ * @property {Intl.DateTimeFormatOptions} [timeFormat] - Format for time displayed in relative date labels
+ * @property {string[]} [relativeStrings] - Labels for yesterday / today / tomorrow / day after tomorrow (in chronological order)
+ * @property {string} [locale] - Locale string for date/time formatting
+ */
+
+/**
+ * Returns an HTML `<time>` element string displaying the date in relative or absolute form.
+ * Relative dates are auto-refreshed every minute via a shared `setInterval`.
+ *
+ * @param {Date | string} date - Date to display (Date object or ISO string)
+ * @param {RelativeDateOptions} [options={}]
+ * @returns {string} HTML `<time>` element as a string
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+ */
+
+// TODO: Add option to include start time in relative dates
+// TODO: alternative solution in place of `@@time@@` placeholder
+// TODO reconsider and evaluate the use of Intl.RelativeTimeFormat Intl.RelativeTimeFormat
+
+export function relativeDate(date, options = {}) {
+
+  /** @type {Required<RelativeDateOptions>} */
+  const default_options = {
+    useRelativeTime: true,
+    nowString: 'adesso',
+    relativeTimeMinutesBefore: 30,
+    relativeTimeMinutesAfter: 30,
+    relativeTimeShowTime: true,
+    relativeTimeShowTimeMarkup: ' <span class="time-info">(alle @@time@@)</span>',
+    firstLetterUpperCase: true,
+    dateFormat: {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    },
+    timeFormat: {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    },
+    relativeStrings: [ // NB: in chronological order
+      'ieri alle', 'oggi alle', 'domani alle', 'dopodomani alle'
+    ],
+    locale: 'it-IT'
+  };
+
+  let isRelative = false;
+
+  /**
+   * @param {Date | string} dateInput
+   * @param {RelativeDateOptions} [overrideOptions={}]
+   * @returns {string}
+   */
+  const parseDate = (dateInput, overrideOptions = {}) => {
+
+    const opts = { ...default_options, ...overrideOptions };
+
+    const d = typeof dateInput === 'string' ? new Date(dateInput) : dateInput
+      , now = new Date()
+      , minutesDiff = (d.getTime() - now.getTime()) / 60000 // difference between the two dates in minutes
+      , daysDiff = (
+        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0).getTime() -
+        new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0).getTime()
+      ) / 86400000
+      , rtf = new Intl.RelativeTimeFormat('it', { style: 'long' })
+    ;
+
+    /** @type {string} */
+    let result;
+
+    if (opts.useRelativeTime && Math.floor(Math.abs(minutesDiff)) === 0) {
+
+      result = opts.nowString;
+      isRelative = true;
+
+    } else if (opts.useRelativeTime && (
+      (Math.abs(minutesDiff) <= opts.relativeTimeMinutesAfter && minutesDiff < 0) ||
+      (minutesDiff > 0 && minutesDiff <= opts.relativeTimeMinutesBefore)
+    )) {
+
+      // formatToParts + reduce needed to strip decimal fractions from the value
+      const parts = rtf.formatToParts(minutesDiff, 'minute').reduce((acc, curr) => {
+        if (curr.type !== 'decimal') { // decimal separator
+          if (curr.type === 'fraction') { // fractional part
+            const intPart = acc.find(i => i.type === 'integer');
+            if (intPart) intPart.value += `.${curr.value}`;
+          } else {
+            acc.push(curr);
+          }
+        }
+        return acc;
+      }, /** @type {Intl.RelativeTimeFormatPart[]} */ ([]));
+
+      result = parts.map(i => i.type !== 'literal' ? Math.round(+i.value) : i.value).join('') +
+        (opts.relativeTimeShowTime ? opts.relativeTimeShowTimeMarkup?.replace('@@time@@', d.toLocaleString(opts.locale, opts.timeFormat)) : '');
+
+      isRelative = true;
+
+    // between -1 day and +2 days
+    } else if (daysDiff >= -1 && daysDiff <= 2) {
+
+      result = opts.relativeStrings[daysDiff + 1] + ' ' + d.toLocaleString(opts.locale, opts.timeFormat);
+      isRelative = daysDiff === 0;
+
+    } else {
+      result = d.toLocaleString(opts.locale, opts.dateFormat);
+    }
+
+    if (opts.firstLetterUpperCase && result) {
+      result = result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
+    }
+
+    return `<time datetime="${d.toISOString()}"${isRelative ? ` data-relative-date-opts="${encodeURIComponent(JSON.stringify(overrideOptions))}"` : ''}>${result}</time>`;
+
+  }; // end parseDate
+
+  const result = parseDate(date, options);
+
+  if (isRelative && !(/** @type {any} */ (window)).relativeDateUpd) {
+    /** @type {any} */ (window).relativeDateUpd = true;
+    setInterval(() => {
+      document.querySelectorAll('time[data-relative-date-opts]').forEach(item => {
+        const datetime = item.getAttribute('datetime');
+        const optsAttr = /** @type {HTMLElement} */ (item).dataset.relativeDateOpts;
+        if (datetime && optsAttr) {
+          item.outerHTML = parseDate(datetime, JSON.parse(decodeURIComponent(optsAttr)));
+        }
+      });
+    }, 60000);
+  }
+
+  return result;
+}

package/src/utilities/sentence-case.js

@@ -1,5 +1,8 @@
-
-// prima lettera maiuscola, il resto minuscolo
+/**
+ * Converts a string to sentence case (first letter uppercase, rest lowercase).
+ * @param {string | null | undefined} str
+ * @returns {string | null | undefined}
+ */
 export function sentenceCase(str) {
   if(str) {
     return  str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();

package/src/utilities/strip-tags.js

@@ -0,0 +1,8 @@
+/**
+ * Strips HTML tags from a string.
+ * @param {string | null | undefined} str
+ * @returns {string}
+ */
+export function stripTags(str) {
+  return (str || '')?.replace(/(<([^>]+)>)/gi, '').trim();
+}

package/src/utilities/title-case.js

@@ -1,4 +1,8 @@
-// imposta un testo in cui ogni parola è minuscola tranne la prima lettera
+/**
+ * Converts a string to title case (first letter of each word uppercase, rest lowercase).
+ * @param {string | null | undefined} str
+ * @returns {string | null | undefined}
+ */
 export function titleCase(str) {
 
   if(str) {
@@ -11,4 +15,4 @@ export function titleCase(str) {
   }
 
   return str;
-} // end title_case
+}

package/src/utilities/truncate-string.js

@@ -0,0 +1,22 @@
+
+// @ts-check
+
+/**
+ * Truncates a string to the desired length adding an option suffix
+ * from https://www.codegrepper.com/code-examples/javascript/javascript+truncate+string+full+word
+ *
+ * @param {string} str - string yo be truncated
+ * @param {number} maxLength - truncated string max length
+ * @param {string} suffix
+ * @returns {string|undefined} truncated string, or undefined if str is falsy
+ *
+ */
+
+export function truncateString(str, maxLength, suffix) {
+
+  suffix = suffix || '…';
+  if(str) {
+    return str.length < maxLength ? str :
+      `${str.substring(0, str.substring(0, maxLength - suffix.length).lastIndexOf(' '))}${suffix}`;
+  }
+}

package/src/utilities/validation-error-class.js

@@ -1,9 +1,8 @@
-
-// uso
-// throw new ValidationError('Sono presenti valori duplicati', campiErrore );
+// usage:
+// throw new ValidationError('Duplicate values found', errorFields);
 
 /*
-esempio:
+example:
 
 const form = document.getElementById('form-__xxxx___');
 form.addEventListener('submit', e => {
@@ -13,7 +12,7 @@ form.addEventListener('submit', e => {
   form.classList.add('was-validated');
   try {
     if( ... ) {
-      throw new ValidationError('__messaggio__', [campiErrore, ...] );
+      throw new ValidationError('__message__', [errorFields, ...] );
     }
   } catch( error ) {
     e.preventDefault();
@@ -35,10 +34,18 @@ form.addEventListener('submit', e => {
 });
 */
 
+/**
+ * Custom error class for form validation failures.
+ * Extends the native Error with an array of invalid form fields.
+ */
 export class ValidationError extends Error {
+  /**
+   * @param {string} message - Error message.
+   * @param {Element[]} fields - Array of invalid form field elements.
+   */
   constructor(message, fields) {
-    super(message); // Passa il messaggio alla classe Error originale
+    super(message);
     this.name = 'ValidationError';
-    this.fields = fields; // Parametro custom
+    this.fields = fields;
   }
 }

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { DataTable } from 'simple-datatables';
 
 import { parseCols } from './src/parse-cols.js';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 
 // pre-elaborazione tipi dati predefiniti
 // le chiavi che cominciano con '_' sono di questa applicazione, le altre sono di simple-datatable