@maggioli-design-system/mds-table-row 4.8.1 → 5.0.1

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId
+  private readonly cssBackdropZIndex
+  private readonly cssBackdropDuration
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -0,0 +1,24 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
+  }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+  hasSlottedNodes,
+}

package/src/components/mds-table-row/css/mds-table-row-actions.css

@@ -8,8 +8,11 @@
 }
 
 .actions {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background);
+
   align-items: center;
-  background-color: var(--mds-table-cell-background);
+  background-color: var(--mds-table-row-actions-background);
   display: inline-flex;
   gap: var(--mds-table-row-actions-gap);
   inset: 0;
@@ -28,11 +31,15 @@
   transform: translateX(100%);
 }
 
-:host([overlay-actions]:not([overlay-actions="false"])) .actions {
+
+:host([overlay-actions]) .actions {
   padding-right: var(--mds-table-cell-padding);
   transform: translateX(100%);
 }
 
-:host([overlay-actions]:not([overlay-actions="false"]):hover) .actions {
+:host([overlay-actions]:hover) .actions {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background);
+
   transform: translateX(0);
 }

package/src/components/mds-table-row/css/mds-table-row-interactive.css

@@ -0,0 +1,6 @@
+:host([interactive]:hover) {
+
+  --mds-table-row-actions-background: var(--mds-table-row-background-hover);
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/css/mds-table-row-selected.css

@@ -0,0 +1,5 @@
+:host([selected]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/css/mds-table-row-sorted.css

@@ -0,0 +1,11 @@
+:host([sorted]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-alt);
+  --mds-table-row-color: var(--mds-table-row-color-alt);
+}
+
+:host([sorted][selected]) {
+
+  --mds-table-row-background: var(--mds-table-row-background-hover);
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}

package/src/components/mds-table-row/mds-table-row.css

@@ -2,11 +2,12 @@
 
 :host {
 
-  --mds-table-row-color-hover: var(--mds-table-color-hover, theme('colors.tone-neutral-02'));
-  --mds-table-row-color: var(--mds-table-color, theme('colors.tone-neutral-03'));
+  --mds-table-row-color-hover: var(--mds-table-color, theme('colors.tone-neutral-02'));
+  --mds-table-row-color-alt: var(--mds-table-color-alt, theme('colors.tone-neutral-02'));
+  --mds-table-row-background-hover: var(--mds-table-background, theme('colors.tone-neutral'));
+  --mds-table-row-background-alt: var(--mds-table-background-alt, theme('colors.tone-neutral'));
   --mds-table-row-actions-gap: var(--mds-table-actions-gap, theme('spacing.400'));
 
-
   @apply
     duration-200
     ease-out;
@@ -18,32 +19,16 @@
 
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell[sorted]) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
+.selection-cell {
+  vertical-align: middle;
 }
 
-:host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-body-background-hover);
-}
-
-:host([interactive]:not([interactive="false"]):hover) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-  --mds-table-row-color: var(--mds-table-row-color-hover);
-}
-
-
-:host([sorted][interactive]:not([interactive="false"]):hover) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-}
-
-:host([sorted]:not([interactive])) ::slotted(mds-table-cell:not([sorted])) {
-
-  --mds-table-cell-background: var(--mds-table-body-background-hover);
+.checkbox-wrapper {
+  display: flex;
 }
 
+@import './css/mds-table-row-interactive.css';
+@import './css/mds-table-row-selected.css';
+@import './css/mds-table-row-sorted.css';
 @import './css/mds-table-row-actions.css';
 @import './css/mds-table-row-pref-animation.css';

package/src/components/mds-table-row/mds-table-row.tsx

@@ -1,6 +1,9 @@
-import { Component, Host, h, Listen, Prop, Element } from '@stencil/core'
-// import { isMobileDevice } from '@common/device'
-// import clsx from 'clsx'
+import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core'
+import { Locale } from '@common/locale'
+import localeEl from './meta/locale.el.json'
+import localeEn from './meta/locale.en.json'
+import localeEs from './meta/locale.es.json'
+import localeIt from './meta/locale.it.json'
 
 /**
  * @slot default - Put `mds-table-cell` element/s.
@@ -17,17 +20,31 @@ export class MdsTableRow {
   private actions: HTMLDivElement
   private hasActions: boolean
   private sizerWidth: string
+  private t:Locale = new Locale({
+    el: localeEl,
+    en: localeEn,
+    es: localeEs,
+    it: localeIt,
+  })
+  @State() language: string
+  @Method()
+  async updateLang (): Promise<void> {
+    this.language = this.t.lang(this.host)
+    this.t.update()
+  }
 
-  @Prop({ mutable: true, reflect: true }) interactive: boolean
+  @Prop({ reflect: true }) readonly interactive?: boolean
 
-  @Prop({ mutable: true, reflect: true }) overlayActions: boolean
+  @Prop({ reflect: true }) readonly overlayActions: boolean
 
-  @Listen('mdsTableInteractiveChange', { target: 'document' })
-  tableInteractiveHandler (event: CustomEvent<boolean>): void {
-    this.interactive = event.detail
-  }
+  @Prop({ reflect: true }) readonly selectable?: boolean = undefined
+
+  @Prop({ mutable: true, reflect: true }) selected?: boolean
+
+  @Prop({ reflect: true }) readonly value?: string | number
 
   componentWillLoad (): void {
+    this.language = this.t.lang(this.host)
     this.hasActions = this.host.querySelector('[slot="action"]') !== null
   }
 
@@ -38,9 +55,21 @@ export class MdsTableRow {
     }
   }
 
+  private handleSelectionChange = (e: CustomEvent): void => {
+    this.selected = e.detail.checked
+    this.host.closest('mds-table')?.updateSelection()
+  }
+
   render () {
     return (
       <Host role="row">
+        { this.selectable &&
+          <mds-table-cell class="selection-cell">
+            <div class="checkbox-wrapper">
+              <mds-input-switch title={this.t.get(this.selected ? 'unselectRow' : 'selectRow')} lang={this.language} type="checkbox" checked={this.selected} onMdsInputSwitchChange={this.handleSelectionChange}></mds-input-switch>
+            </div>
+          </mds-table-cell>
+        }
         <slot/>
         { this.hasActions &&
           <mds-table-cell class="actions-cell">

package/src/components/mds-table-row/meta/locale.el.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Επιλογή γραμμής",
+  "unselectRow": "Αποεπιλογή γραμμής"
+}

package/src/components/mds-table-row/meta/locale.en.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Select row",
+  "unselectRow": "Deselect row"
+}

package/src/components/mds-table-row/meta/locale.es.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Seleccionar fila",
+  "unselectRow": "Deseleccionar fila"
+}

package/src/components/mds-table-row/meta/locale.it.json

@@ -0,0 +1,4 @@
+{
+  "selectRow": "Seleziona riga",
+  "unselectRow": "Deseleziona riga"
+}

package/src/components/mds-table-row/readme.md

@@ -7,10 +7,26 @@
 
 ## Properties
 
-| Property         | Attribute         | Description | Type      | Default     |
-| ---------------- | ----------------- | ----------- | --------- | ----------- |
-| `interactive`    | `interactive`     |             | `boolean` | `undefined` |
-| `overlayActions` | `overlay-actions` |             | `boolean` | `undefined` |
+| Property         | Attribute         | Description | Type                            | Default     |
+| ---------------- | ----------------- | ----------- | ------------------------------- | ----------- |
+| `interactive`    | `interactive`     |             | `boolean \| undefined`          | `undefined` |
+| `overlayActions` | `overlay-actions` |             | `boolean`                       | `undefined` |
+| `selectable`     | `selectable`      |             | `boolean \| undefined`          | `undefined` |
+| `selected`       | `selected`        |             | `boolean \| undefined`          | `undefined` |
+| `value`          | `value`           |             | `number \| string \| undefined` | `undefined` |
+
+
+## Methods
+
+### `updateLang() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ## Slots

package/src/components.d.ts

@@ -7,8 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface MdsTableRow {
-        "interactive": boolean;
+        "interactive"?: boolean;
         "overlayActions": boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "updateLang": () => Promise<void>;
+        "value"?: string | number;
     }
 }
 declare global {
@@ -26,6 +30,9 @@ declare namespace LocalJSX {
     interface MdsTableRow {
         "interactive"?: boolean;
         "overlayActions"?: boolean;
+        "selectable"?: boolean;
+        "selected"?: boolean;
+        "value"?: string | number;
     }
     interface IntrinsicElements {
         "mds-table-row": MdsTableRow;

package/src/dictionary/animation.ts

@@ -0,0 +1,8 @@
+const horizontalActionsAnimationDictionary = [
+  'fade',
+  'slide',
+]
+
+export {
+  horizontalActionsAnimationDictionary,
+}

package/src/dictionary/file-extensions.ts

@@ -26,8 +26,8 @@ const fileExtensionsDictionary: FileExtenstion = {
   exe: { format: 'executable', description: 'fileEXE' },
   flac: { format: 'audio', description: 'uncompressedAudio' },
   gif: { format: 'image', description: 'compressedImage', preview: true },
-  htm: { format: 'markup', description: 'documentWeb' },
   heic: { format: 'image', description: 'imageHEFF' },
+  htm: { format: 'markup', description: 'documentWeb' },
   html: { format: 'markup', description: 'documentWeb' },
   jpe: { format: 'image', description: 'compressedImage', preview: true },
   jpeg: { format: 'image', description: 'compressedImage', preview: true },
@@ -44,9 +44,12 @@ const fileExtensionsDictionary: FileExtenstion = {
   mpg4: { format: 'video', description: 'videoSD' },
   mpg: { format: 'video', description: 'videoSD' },
   mpga: { format: 'audio', description: 'compressedAudio' },
+  odf: { format: 'document', description: 'openDocumentFormat' },
   odp: { format: 'slide', description: 'slideLO' },
   ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
   odt: { format: 'text', description: 'documentLO' },
+  ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
+  p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
   pdf: { format: 'document', description: 'documentAdobe' },
   php: { format: 'code', description: 'filePHP' },
   png: { format: 'image', description: 'imagePNG', preview: true },
@@ -59,6 +62,7 @@ const fileExtensionsDictionary: FileExtenstion = {
   tar: { format: 'archive', description: 'uncompressedArchive' },
   tiff: { format: 'image', description: 'imageTIFF' },
   ts: { format: 'code', description: 'fileTS' },
+  tsd: { format: 'certificate', description: 'certificateTSD' },
   tsx: { format: 'code', description: 'fileTSX' },
   txt: { format: 'text', description: 'documentTXT' },
   wav: { format: 'audio', description: 'uncompressedAudio' },
@@ -66,68 +70,10 @@ const fileExtensionsDictionary: FileExtenstion = {
   xar: { format: 'archive', description: 'compressedArchive' },
   xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
   xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+  xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
   zip: { format: 'archive', description: 'compressedArchive' },
 }
 
-// const fileExtensionsDictionary: FileExtenstion = {
-//   '7z': { format: 'archive', description: 'Archivio compresso' },
-//   ace: { format: 'archive', description: 'Archivio compresso' },
-//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-//   dart: { format: 'code', description: 'Dart' },
-//   db: { format: 'data', description: 'File di database' },
-//   default: { format: 'attachment', description: 'Formato sconosciuto' },
-//   dmg: { format: 'executable', description: 'Apple Disk Image' },
-//   doc: { format: 'text', description: 'Documento Microsoft Word' },
-//   docm: { format: 'text', description: 'Documento Microsoft Word' },
-//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
-//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-//   exe: { format: 'executable', description: 'File eseguibile Windows' },
-//   flac: { format: 'audio', description: 'Audio non compresso' },
-//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
-//   htm: { format: 'markup', description: 'Pagina web' },
-//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
-//   html: { format: 'markup', description: 'Pagina web' },
-//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   js: { format: 'code', description: 'JavaScript' },
-//   json: { format: 'data', description: 'JavaScript Object Notation' },
-//   jsx: { format: 'code', description: 'JavaScript' },
-//   m2v: { format: 'video', description: 'Filmato SD' },
-//   mp2: { format: 'audio', description: 'Audio compresso' },
-//   mp3: { format: 'audio', description: 'Audio compresso' },
-//   mp4: { format: 'video', description: 'Filmato HD' },
-//   mp4v: { format: 'video', description: 'Filmato HD' },
-//   mpeg: { format: 'video', description: 'Filmato SD' },
-//   mpg4: { format: 'video', description: 'Filmato SD' },
-//   mpg: { format: 'video', description: 'Filmato SD' },
-//   mpga: { format: 'audio', description: 'Audio compresso' },
-//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-//   odt: { format: 'text', description: 'File di testo LibreOffice' },
-//   pdf: { format: 'document', description: 'Documento Adobe' },
-//   php: { format: 'code', description: 'Hypertext Preprocessor' },
-//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-//   rar: { format: 'archive', description: 'Archivio compresso' },
-//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-//   shtml: { format: 'markup', description: 'Pagina web' },
-//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-//   tar: { format: 'archive', description: 'Archivio non compresso' },
-//   tiff: { format: 'image', description: 'Tag Image File Format' },
-//   ts: { format: 'code', description: 'TypeScript' },
-//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-//   txt: { format: 'text', description: 'Documento di testo non formattato' },
-//   wav: { format: 'audio', description: 'Audio non compresso' },
-//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-//   xar: { format: 'archive', description: 'Archivio compresso' },
-//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   zip: { format: 'archive', description: 'Archivio compresso' },
-// }
-
 const genericMimeToExt: Map<string, string[]> = new Map([
   ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
   ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],