@massimo-cassandro/minimo 1.21.1 → 1.21.3

package/src/minimo.css

@@ -1,9 +1,10 @@
+/* decomment layers if you want to use them */
 /* see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
-@layer reset, base, components, utilities, project, overrides;
+/* @layer reset, base, components, utilities, project, overrides; */
 
 /* @import '@src/fonts.css'; */
 /* @import '@src/css/custom-media.css'; */ /* managed by postcss */
-/* @import '@src/custom-properties.css'; */ /* managed by postcss-jit-props */
+/* @import '@src/custom-properties.css' layer('base'); */ /* managed by postcss-jit-props */
 
 @import '@minimo/css/reset.css';
 @import '@minimo/css/layout-base.css';

package/src/utilities/dom-builder-helpers/form-tags.js

@@ -1,6 +1,7 @@
 import { classnames } from '../classnames.js';
 import { randomId } from '../random-id.js';
 
+
 /**
  * Shared `.form-group` wrapper for the tag builders below: handles the
  * `condition` guard, `wrapperClass`, optional help text and `callback` in
@@ -45,6 +46,7 @@ function buildFormGroup({
  * @param {Object} args
  * @param {string} args.label - input label.
  * @param {string | null} args.name - input `name` attribute.
+ * @param {string | null} args.id - `id` attribute.
  * @param {string | number | null} args.value - input `value` attribute.
  * @param {string | null} [args.type='text'] - input `type` attribute.
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
@@ -58,6 +60,7 @@ function buildFormGroup({
 export function buildInput({
   label,
   name,
+  id = null,
   value = null,
   type = 'text',
   wrapperClass = null,
@@ -68,7 +71,7 @@ export function buildInput({
   callback = null
 }){
 
-  const id = randomId();
+  id = id || randomId();
 
   return buildFormGroup({
     condition,
@@ -92,6 +95,86 @@ export function buildInput({
   });
 }
 
+/**
+ * select tag builder
+ *
+ * @param {Object} args
+ * @param {string} args.label - select label.
+ * @param {string | null} args.name - select `name` attribute.
+ * @param {string | null} args.id - `id` attribute.
+ * @param {string | number | null} args.selectedValue - selected value
+ * @param {Array<[string|number, string]> | Array<Record<string, string>> | Record<string, string> | null} args.options -
+ *    options value/text pairs, as an array of two-element `[[value, text], ...]` arrays,
+ *    as an array of objects `[{somekey: value, somekey2: text},...]` objects, or as a single `{value: text, ...}` object
+ * @param {boolean} [args.addEmptyOption=true] - When true, and empty option tag is added at top
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
+ * @param {string | null} [args.className=null] - optional class to be added to the `input`.
+ * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {string | HTMLElement | null} args.help - Optional help text.
+ * @param {(function(HTMLElement): void) | null} args.callback - Optional callback function.
+ * @param {Record<string, any> | null}  [args.attrs={}] - Optional attributes object.
+ * @returns {DomBuilderItem|null} The `input` domBuilder item, or `null` when `condition` is false.
+ */
+export function buildSelect({
+  label,
+  name,
+  id = null,
+  selectedValue = null,
+  options = null,
+  addEmptyOption = true,
+  wrapperClass = null,
+  className = null,
+  condition = true,
+  help = null,
+  attrs = {},
+  callback = null
+}){
+
+  id = id || randomId();
+
+  // normalizing option as an array
+  if(options && !Array.isArray(options)) {
+    options = Object.entries(options);
+
+  } else if(options && !Array.isArray(options[0])) {
+    options =  options.map(o => Object.values(o));
+  }
+
+
+  return buildFormGroup({
+    condition,
+    wrapperClass,
+    help,
+    children: [
+      `label.form-label[for:${id}] ${label}`,
+      {
+        tag: 'select',
+        className: classnames('form-control', className, attrs?.class),
+        id: id,
+        attrs: {
+          ...(attrs??{}),
+          name: name,
+        },
+        children: [
+          ...(addEmptyOption? ['option[value:]'] : []),
+          ...(options
+            ? options.map(([value, text]) => ({
+              tag: 'option',
+              attrs: {
+                value: value,
+                selected: value === selectedValue
+              },
+              content: text
+            }))
+            : []
+          )
+        ],
+        callback: callback
+      }
+    ]
+  });
+}
+
 
 /**
  * Checkbox tag builder
@@ -99,6 +182,7 @@ export function buildInput({
  * @param {Object} args
  * @param {string} args.label - checkbox label.
  * @param {string | null} args.name - checkbox `name` attribute.
+ * @param {string | null} args.id - `id` attribute.
  * @param {string | number | null} [args.value=1] - checkbox `value` attribute.
  * @param {boolean} [args.checked=false] - checkbox `checked` attribute.
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper (used only when `addFormGroup` is true).
@@ -112,6 +196,7 @@ export function buildInput({
 export function buildCheckbox({
   label,
   name,
+  id = null,
   value = 1,
   checked = false,
   wrapperClass = null,
@@ -134,7 +219,7 @@ export function buildCheckbox({
     </div>
   </div>
   */
-  const id = randomId();
+  id = id || randomId();
 
   const tag = {
     className: classnames('form-check', !addFormGroup && !help && wrapperClass),
@@ -176,6 +261,7 @@ export function buildCheckbox({
  * @param {Object} args
  * @param {string} args.label - textarea label.
  * @param {string | null} args.name - textarea `name` attribute.
+ * @param {string | null} args.id - `id` attribute.
  * @param {string | number | null} args.value - textarea content.
  * @param {boolean} [args.autosize=true] - adds `autosize` class
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
@@ -189,6 +275,7 @@ export function buildCheckbox({
 export function buildTextarea({
   label,
   name,
+  id = null,
   value = null,
   wrapperClass = null,
   className = null,
@@ -199,7 +286,7 @@ export function buildTextarea({
   autosize = true
 }) {
 
-  const id = randomId();
+  id = id || randomId();
 
   return buildFormGroup({
     condition,

package/src/web-components/s-datatable-component/s-datatable-component.module.css

@@ -1,223 +1,220 @@
-@layer components {
 
-  /* frontend/src/web-components/s-datatable-component.module.css */
+/* frontend/src/web-components/s-datatable-component.module.css */
 
-  /* import delle custom properties gestito da jit-props */
+/* import delle custom properties gestito da jit-props */
 
 
-  /* purgecss start ignore */
+/* purgecss start ignore */
 
-  /* .datatable-wrapper.no-header .datatable-container {
-	border-top: 1px solid #d9d9d9;
+/* .datatable-wrapper.no-header .datatable-container {
+border-top: 1px solid #d9d9d9;
 } */
-  .datatableWrapper {
-    margin-block: var(--size-md);
-  }
+.datatableWrapper {
+  margin-block: var(--size-md);
+}
 
-  .topArea {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 2rem;
-    align-items: center;
-    justify-content: flex-end;
-    padding-block-end: var(--size-xs);
+.topArea {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 2rem;
+  align-items: center;
+  justify-content: flex-end;
+  padding-block-end: var(--size-xs);
 
-    /* stylelint-disable-next-line selector-class-pattern */
-    &:has(.info), &:has(:global(.datatable-top-slot)) {
-      justify-content: space-between;
-    }
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:has(.info), &:has(:global(.datatable-top-slot)) {
+    justify-content: space-between;
   }
+}
 
-  .searchWrapper {
-    max-width: 50%;
-  }
+.searchWrapper {
+  max-width: 50%;
+}
 
-  .table {
-    margin-block: 0;
-    border-block: var(--_border); /* definito in minimo table */
+.table {
+  margin-block: 0;
+  border-block: var(--_border); /* definito in minimo table */
 
-    thead {
-      th:has(.sortBtn) {
-        padding-inline-end: 0;
-      }
+  thead {
+    th:has(.sortBtn) {
+      padding-inline-end: 0;
     }
-
   }
 
-  /* cella unica per indicare l'assenza di record */
-  .empty {
-    /* stylelint-disable-next-line declaration-no-important */
-    padding-block: var(--size-sm) !important;
-    font-style: italic;
-    color: var(--text-muted);
-    /* stylelint-disable-next-line declaration-no-important */
-    text-align: center !important;
-  }
+}
 
-  .hasIcon {
-    /* stylelint-disable-next-line declaration-no-important */
-    text-align: center !important;
-    svg {
-      display: inline-block;
-      width: 1.05em;
-    }
-  }
+/* cella unica per indicare l'assenza di record */
+.empty {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-block: var(--size-sm) !important;
+  font-style: italic;
+  color: var(--text-muted);
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+}
 
+.hasIcon {
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+  svg {
+    display: inline-block;
+    width: 1.05em;
+  }
+}
 
-  [data-sortable='true'] {
 
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--sdt-thead-hover-background-color);
-      }
-    }
+[data-sortable='true'] {
 
-    .sortBtn {
-      padding: 0 1.5em 0 0;
-      &::after {
-        position: absolute;
-        top: 50%;
-        right: .1em;
-        display: block;
-        width: 1em;
-        height: 1em;
-        translate: 0 -50%;
-      }
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--sdt-thead-hover-background-color);
     }
+  }
 
-    &:not(.sortAscending):not(.sortDescending){
-      .sortBtn::after {
-        content: url('../../icons/arrows-down-up.svg?cssInline');
-        opacity: .4;
-      }
+  .sortBtn {
+    padding: 0 1.5em 0 0;
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: .1em;
+      display: block;
+      width: 1em;
+      height: 1em;
+      translate: 0 -50%;
     }
   }
-  .sortAscending {
+
+  &:not(.sortAscending):not(.sortDescending){
     .sortBtn::after {
-      content: url('../../icons/arrow-up.svg?cssInline');
+      content: url('../../icons/arrows-down-up.svg?cssInline');
+      opacity: .4;
     }
   }
-  .sortDescending {
-    .sortBtn::after {
-      content: url('../../icons/arrow-down.svg?cssInline');
-    }
+}
+.sortAscending {
+  .sortBtn::after {
+    content: url('../../icons/arrow-up.svg?cssInline');
+  }
+}
+.sortDescending {
+  .sortBtn::after {
+    content: url('../../icons/arrow-down.svg?cssInline');
   }
+}
 
-  .sortBtn {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 100%;
+.sortBtn {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
 
-    padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
-    line-height: var(--table-cell-line-height);
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  line-height: var(--table-cell-line-height);
 
-    text-align: start;
-  }
+  text-align: start;
+}
 
-  /* stylelint-disable selector-class-pattern */
-  :global(.text-start), :global(.text-left) {
-    .sortBtn {
-      text-align: start;
-    }
+/* stylelint-disable selector-class-pattern */
+:global(.text-start), :global(.text-left) {
+  .sortBtn {
+    text-align: start;
   }
-  :global(.text-end), :global(.text-right) {
-    .sortBtn {
-      text-align: end;
-    }
+}
+:global(.text-end), :global(.text-right) {
+  .sortBtn {
+    text-align: end;
   }
-  :global(.text-center) {
-    .sortBtn {
-      text-align: center;
-    }
+}
+:global(.text-center) {
+  .sortBtn {
+    text-align: center;
   }
-  /* stylelint-enable selector-class-pattern */
-
-  .bottomArea {
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--size-md);
-    align-content: center;
-    align-items: center;
-    justify-content: flex-end;
-    margin-block-start: var(--size-xs);
-  }
-  .info {
-    font-size: var(--font-size-sm);
-    font-style: italic;
-    color: var(--text-muted);
-  }
-
-  /* pagination */
-  /* .paginationNav {} */
-  .paginationList, .paginationListItem, .paginationListItemBtn {
-    padding: 0;
-    margin: 0;
-  }
-
-  .paginationList {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 0;
-    align-items: stretch;
-    justify-content: flex-start;
-    list-style: none;
-  }
-  .paginationListItem {
-    border: var(--sdt-pagination-border);
-    border-style: solid solid solid none;
-
-    &:first-child {
-      border-inline-start-style: solid;
-      border-radius: var(--radius-xxs) 0 0 var(--radius-xxs);
-    }
-    &:last-child {
-      border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
-    }
+}
+/* stylelint-enable selector-class-pattern */
+
+.bottomArea {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--size-md);
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  margin-block-start: var(--size-xs);
+}
+.info {
+  font-size: var(--font-size-sm);
+  font-style: italic;
+  color: var(--text-muted);
+}
 
-    @media (hover: hover) {
-      &:hover {
-        color: var(--sdt-hover-color);
-        background-color: var(--sdt-hover-background-color);
-      }
-    }
+/* pagination */
+/* .paginationNav {} */
+.paginationList, .paginationListItem, .paginationListItemBtn {
+  padding: 0;
+  margin: 0;
+}
 
-  }
+.paginationList {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  list-style: none;
+}
+.paginationListItem {
+  border: var(--sdt-pagination-border);
+  border-style: solid solid solid none;
 
-  .paginationDisabled {
-    pointer-events: none;
+  &:first-child {
+    border-inline-start-style: solid;
+    border-radius: var(--radius-xxs) 0 0 var(--radius-xxs);
+  }
+  &:last-child {
+    border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
+  }
 
-    .paginationListItemBtn {
-      opacity: .7;
+  @media (hover: hover) {
+    &:hover {
+      color: var(--sdt-hover-color);
+      background-color: var(--sdt-hover-background-color);
     }
   }
 
-  .paginationActive {
-    color: var(--sdt-hover-color);
-    background-color: var(--sdt-hover-background-color);
-  }
+}
 
-  .paginationListItemBtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: var(--sdt-pagination-padding-block) var(--sdt-pagination-padding-inline);
-    color: inherit;
-    background-color: transparent;
-    border: none;
-
-    &.hasSvg {
-      padding-inline: calc(var(--sdt-pagination-padding-inline) / 2);
-    }
+.paginationDisabled {
+  pointer-events: none;
 
-    svg {
-      width: 1em;
-      aspect-ratio: 1;
-      fill: currentColor;
-    }
+  .paginationListItemBtn {
+    opacity: .7;
   }
+}
+
+.paginationActive {
+  color: var(--sdt-hover-color);
+  background-color: var(--sdt-hover-background-color);
+}
 
-  /* purgecss end ignore */
+.paginationListItemBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--sdt-pagination-padding-block) var(--sdt-pagination-padding-inline);
+  color: inherit;
+  background-color: transparent;
+  border: none;
 
+  &.hasSvg {
+    padding-inline: calc(var(--sdt-pagination-padding-inline) / 2);
+  }
+
+  svg {
+    width: 1em;
+    aspect-ratio: 1;
+    fill: currentColor;
+  }
 }
+
+/* purgecss end ignore */

package/types/classes.d.ts

@@ -1169,6 +1169,7 @@ export type MinimoClass =
   | 'pis-xxs-lap'
   | 'pis-xxs-mob'
   | 'pis-xxs-tab'
+  | 'position-relative'
   | 'ps'
   | 'ps-0'
   | 'ps-0-dsk'