@maggioli-design-system/mds-progress 2.8.3 → 2.9.0

package/dist/types/type/variant-file-format.d.ts

@@ -0,0 +1,11 @@
+interface FileFormatVariant {
+    color: string;
+    icon: string;
+    iconBackground: string;
+    variant: string;
+}
+interface FileFormatVariants {
+    [key: string]: FileFormatVariant;
+}
+declare const fileFormatsVariant: FileFormatVariants;
+export { fileFormatsVariant, FileFormatVariant, FileFormatVariants, };

package/dist/types/type/variant.d.ts

@@ -1,6 +1,7 @@
 export type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
 export type ThemeVariantType = 'dark' | 'error' | 'info' | 'light' | 'primary' | 'success' | 'warning';
 export type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
+export type ThemeFullVariantAvatarType = 'amaranth' | 'aqua' | 'blue' | 'error' | 'green' | 'info' | 'lime' | 'orange' | 'orchid' | 'primary' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
 export type ThemeLuminanceVariantType = 'dark' | 'light';
 export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export type ActionVariantType = 'primary' | 'dark' | 'light';

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-01-10T08:00:22",
+  "timestamp": "2024-02-09T14:18:39",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.9.1",
-    "typescriptVersion": "5.2.2"
+    "version": "4.10.0",
+    "typescriptVersion": "5.3.3"
   },
   "components": [
     {
@@ -184,6 +184,7 @@
       "dependents": [
         "mds-accordion-timer-item",
         "mds-benchmark-bar",
+        "mds-input-upload",
         "mds-stepper-bar-item"
       ],
       "dependencies": [],
@@ -194,6 +195,9 @@
         "mds-benchmark-bar": [
           "mds-progress"
         ],
+        "mds-input-upload": [
+          "mds-progress"
+        ],
         "mds-stepper-bar-item": [
           "mds-progress"
         ]
@@ -221,6 +225,16 @@
       "docstring": "",
       "path": "src/components/mds-accordion-timer-item/meta/event-detail.ts"
     },
+    "src/type/variant.ts::ToneMinimalVariantType": {
+      "declaration": "export type ToneMinimalVariantType =\n| 'strong'\n| 'weak'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
+    "src/type/variant.ts::ThemeFullVariantAvatarType": {
+      "declaration": "export type ThemeFullVariantAvatarType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'error'\n  | 'green'\n  | 'info'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'primary'\n  | 'sky'\n  | 'success'\n  | 'violet'\n  | 'warning'\n  | 'yellow'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/type/variant.ts::ThemeFullVariantType": {
       "declaration": "export type ThemeFullVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'dark'\n  | 'error'\n  | 'green'\n  | 'info'\n  | 'light'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'success'\n  | 'violet'\n  | 'warning'\n  | 'yellow'",
       "docstring": "",
@@ -326,16 +340,26 @@
       "docstring": "",
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
-    "src/components/mds-file/meta/types.ts::ExtensionSuffixType": {
-      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+    "src/type/file-types.ts::ExtensionSuffixType": {
+      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
       "docstring": "",
-      "path": "src/components/mds-file/meta/types.ts"
+      "path": "src/type/file-types.ts"
     },
     "src/components/mds-file/meta/event-detail.ts::MdsFileEventDetail": {
       "declaration": "export interface MdsFileEventDetail {\n  description: string\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n  type: string\n}",
       "docstring": "",
       "path": "src/components/mds-file/meta/event-detail.ts"
     },
+    "src/type/text.ts::TypographyTruncateType": {
+      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
+    "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
+      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-file-preview/meta/event-detail.ts"
+    },
     "src/components/mds-filter/meta/event-detail.ts::MdsFilterEventDetail": {
       "declaration": "export interface MdsFilterEventDetail {\n  children: NodeListOf<HTMLMdsFilterItemElement>\n  value: string\n}",
       "docstring": "",
@@ -471,6 +495,11 @@
       "docstring": "",
       "path": "src/type/input.ts"
     },
+    "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
+      "declaration": "enum AttachmentSort {\n  status = 'status',\n  date = 'date',\n}",
+      "docstring": "",
+      "path": "src/components/mds-input-upload/meta/types.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -511,6 +540,11 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
+    "src/components/mds-push-notification/meta/types.ts::NotificationPreviewType": {
+      "declaration": "export type NotificationPreviewType =\n  | 'avatar'\n  | 'image'",
+      "docstring": "",
+      "path": "src/components/mds-push-notification/meta/types.ts"
+    },
     "src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
       "declaration": "export interface MdsStepperBarEventDetail {\n  step: number\n  value: string\n}",
       "docstring": "",
@@ -522,7 +556,7 @@
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
-      "declaration": "export interface MdsTabEventDetail {\n  id: number\n}",
+      "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
       "path": "src/components/mds-tab/meta/event-detail.ts"
     },
@@ -536,6 +570,16 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/components/mds-tab-item/meta/event-detail.ts::MdsTabItemEventDetail": {
+      "declaration": "export interface MdsTabItemEventDetail {\n  target: HTMLMdsTabItemElement\n  value?: string\n}",
+      "docstring": "",
+      "path": "src/components/mds-tab-item/meta/event-detail.ts"
+    },
+    "src/components/mds-text/meta/types.ts::TextAnimationType": {
+      "declaration": "export type TextAnimationType =\n  | 'none'\n  | 'yugop'",
+      "docstring": "",
+      "path": "src/components/mds-text/meta/types.ts"
+    },
     "src/components/mds-text/meta/types.ts::TypographyTagType": {
       "declaration": "export type TypographyTagType =\n  | 'abbr'\n  | 'address'\n  | 'article'\n  | 'b'\n  | 'bdo'\n  | 'blockquote'\n  | 'cite'\n  | 'code'\n  | 'dd'\n  | 'del'\n  | 'details'\n  | 'dfn'\n  | 'div'\n  | 'dl'\n  | 'dt'\n  | 'em'\n  | 'figcaption'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'i'\n  | 'ins'\n  | 'kbd'\n  | 'label'\n  | 'legend'\n  | 'li'\n  | 'mark'\n  | 'ol'\n  | 'p'\n  | 'pre'\n  | 'q'\n  | 'rb'\n  | 'rt'\n  | 'ruby'\n  | 's'\n  | 'samp'\n  | 'small'\n  | 'span'\n  | 'strong'\n  | 'sub'\n  | 'summary'\n  | 'sup'\n  | 'time'\n  | 'u'\n  | 'ul'\n  | 'var'",
       "docstring": "",
@@ -546,11 +590,6 @@
       "docstring": "",
       "path": "src/type/variant.ts"
     },
-    "src/type/variant.ts::ToneMinimalVariantType": {
-      "declaration": "export type ToneMinimalVariantType =\n| 'strong'\n| 'weak'",
-      "docstring": "",
-      "path": "src/type/variant.ts"
-    },
     "src/components/mds-toast/meta/types.ts::ToastPosition": {
       "declaration": "export type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-progress",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "mds-progress is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "14.1.0",
-    "@stencil/core": "4.9.1"
+    "@maggioli-design-system/styles": "14.2.1",
+    "@stencil/core": "4.10.0"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -34,6 +34,7 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
  - [mds-accordion-timer-item](../mds-accordion-timer-item)
  - [mds-benchmark-bar](../mds-benchmark-bar)
+ - [mds-input-upload](../mds-input-upload)
  - [mds-stepper-bar-item](../mds-stepper-bar-item)
 
 ### Graph
@@ -41,6 +42,7 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 graph TD;
   mds-accordion-timer-item --> mds-progress
   mds-benchmark-bar --> mds-progress
+  mds-input-upload --> mds-progress
   mds-stepper-bar-item --> mds-progress
   style mds-progress fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/src/common/file.ts

@@ -0,0 +1,63 @@
+import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
+import { fileFormatsVariant } from '@type/variant-file-format'
+
+interface FileFormatsVariants {
+  color: string
+  icon: string
+  iconBackground: string
+  variant: string
+}
+
+const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {
+  if (filename === undefined ) {
+    throw console.error(error)
+  }
+  if (filename.includes('/')) {
+    return filename.split('/').pop() ?? ''
+  }
+  return filename
+}
+
+const sanitizeSuffix = (rawFilename: string) => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.').pop() ?? ''
+  }
+  return filename
+}
+
+const getName = (rawFilename: string): string => {
+  const filename = sanitizeFilename(rawFilename)
+  if (filename.includes('.')) {
+    return filename.split('.')[0] ?? ''
+  }
+  return filename
+}
+
+const getSuffix = (rawFilename: string, suffixOverride?: string): string => {
+  const suffix = sanitizeSuffix(rawFilename)
+  const filename = sanitizeFilename(rawFilename)
+  if (suffixOverride !== null && suffixOverride !== undefined) {
+    return suffixOverride.toLowerCase()
+  }
+  if (suffix !== filename) {
+    return suffix
+  }
+  return 'default'
+}
+
+const getExtensionInfos = (rawFilename: string, suffixOverride?: string): ExtensionInfo => {
+  const suffix = getSuffix(rawFilename, suffixOverride).toLocaleLowerCase()
+  return fileExtensionsDictionary[suffix] ?? fileExtensionsDictionary.default
+}
+
+const getFormatsVariant = (rawFilename: string, suffixOverride?: string): FileFormatsVariants => {
+  return fileFormatsVariant[getExtensionInfos(rawFilename, suffixOverride).format]
+}
+
+export {
+  getExtensionInfos,
+  getFormatsVariant,
+  getSuffix,
+  getName,
+}

package/src/common/icon.ts

@@ -0,0 +1,25 @@
+const BASE64_SVG_ICON = 'data:image/svg+xml;base64,'
+const MARKUP_SVG_ICON = '<svg '
+
+const isIconFormatIsBase64 = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(BASE64_SVG_ICON)
+}
+
+const isIconFormatIsSVG = (icon?: string): boolean => {
+  if (!icon) {
+    return false
+  }
+  return icon.startsWith(MARKUP_SVG_ICON)
+}
+
+
+
+export {
+  isIconFormatIsBase64,
+  isIconFormatIsSVG,
+  BASE64_SVG_ICON,
+  MARKUP_SVG_ICON,
+}

package/src/common/unit.ts

@@ -1,14 +1,33 @@
 const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
+
+  if (duration.includes('ms')) {
+    return Number(duration.replace('ms', ''))
+  }
+
   if (duration.includes('s')) {
     return Number(duration.replace('s', '')) * 1000
   }
 
-  if (duration.includes('ms')) {
-    return Number(duration.replace('s', ''))
+  return defaultValue
+}
+
+const cssSizeToNumber = (size: string, defaultValue = 0): number => {
+  if (size.includes('px')) {
+    return Number(size.replace('px', ''))
+  }
+
+  if (size.includes('rem')) {
+    return Number(size.replace('rem', '')) * 16
   }
 
+  if (size.includes('em')) {
+    return Number(size.replace('em', '')) * 16
+  }
+  
   return defaultValue
 }
+
 export {
   cssDurationToMilliseconds,
+  cssSizeToNumber,
 }

package/src/common/yugop/core.ts

@@ -0,0 +1,47 @@
+import { generator } from './utils/prng'
+import { strToCharCodeArray } from './utils/string'
+import { randomSign, minMaxLooped } from './utils/math'
+const rand = generator()
+
+const random: (arg0: number, arg1: number) => () => number = (
+  base,
+  offset,
+) => () => (base + rand.range(0, offset)) * randomSign()
+
+export const generateRandomCharCodeArray: (
+  arg0: number,
+  arg1: number
+) => (arg0: string) => number[] = (base, offset) => str =>
+  strToCharCodeArray(str).map(random(base, offset))
+type Options = {
+  str: string
+  minCharCode: number
+  maxCharCode: number
+  placeholderChar: string
+  charStep: number
+}
+export const charCodeArrayToString: (
+  arg0: Options
+) => (arg0: number[]) => string = ({
+  str,
+  minCharCode,
+  maxCharCode,
+  placeholderChar,
+  charStep,
+}) => charCodes =>
+  charCodes.reduce((acc, item, index) => {
+    if (item !== 0) {
+      if (Math.abs(item) > charStep) {
+        return acc + placeholderChar
+      }
+
+      return (
+        acc +
+        String.fromCharCode(
+          minMaxLooped(minCharCode, maxCharCode)(str.charCodeAt(index) + item),
+        )
+      )
+    }
+
+    return acc + str.charAt(index)
+  }, '')

package/src/common/yugop/index.ts

@@ -0,0 +1,4 @@
+// taken from https://github.com/zenoplex/random-text
+
+// @flow
+export { default } from './random-text'

package/src/common/yugop/random-text.ts

@@ -0,0 +1,95 @@
+import { generateRandomCharCodeArray, charCodeArrayToString } from './core'
+import { noop } from './utils/noop'
+
+type Options = {
+  str: string
+  speed?: number
+  placeholderChar?: string
+  frameOffset?: number
+  charOffset?: number
+  charStep?: number
+  minCharCode?: number
+  maxCharCode?: number
+  onProgress?: (arg0: string) => void
+  onComplete?: (arg0: string) => void
+}
+
+class RandomText {
+  static defaults: Options = {
+    str: '',
+    speed: 2,
+    placeholderChar: '_',
+    frameOffset: 30,
+    charOffset: 20,
+    charStep: 10,
+    minCharCode: 32,
+    maxCharCode: 122,
+    onProgress: noop,
+    onComplete: noop,
+  }
+  str: string
+  speed: number
+  placeholderChar: string
+  frameOffset: number
+  charOffset: number
+  charStep: number
+  minCharCode: number
+  maxCharCode: number
+  onProgress: (...args: Array<string>) => string
+  onComplete: (...args: Array<string>) => string
+  rafId: number // TODO: should be #rafId for private
+
+  constructor (options: Options) {
+    Object.assign(this, { ...RandomText.defaults, ...options })
+  }
+
+  start = (): void => {
+    const { frameOffset, charOffset, str, speed } = this
+    const randoms = generateRandomCharCodeArray(frameOffset, charOffset)(str)
+    this.stop()
+    this.rafId = requestAnimationFrame(() => {
+      this.step(randoms, speed, speed)
+    })
+  }
+
+  stop (): void {
+    cancelAnimationFrame(this.rafId)
+  }
+
+  step (randoms: number[], stepCount: number, speed: number): void {
+    const {
+      str,
+      charStep,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      onProgress,
+      onComplete,
+    } = this
+    const stepArray = randoms.slice(0, stepCount)
+    const steppedArray = stepArray.map(item => {
+      if (item > 0) return item - 1
+      if (item < 0) return item + 1
+      return 0
+    })
+    const output = charCodeArrayToString({
+      str,
+      minCharCode,
+      maxCharCode,
+      placeholderChar,
+      charStep,
+    })(steppedArray)
+    const updatedRandoms = [...steppedArray, ...randoms.slice(stepCount)]
+    onProgress(output)
+
+    if (output !== str) {
+      this.rafId = requestAnimationFrame(() => {
+        this.step(updatedRandoms, stepCount + speed, speed)
+      })
+    } else {
+      onComplete(output)
+    }
+  }
+}
+
+export default RandomText

package/src/common/yugop/utils/math.ts

@@ -0,0 +1,21 @@
+import { generator } from './prng'
+
+const rand = generator()
+export const randomSign: () => number = () =>
+  (Math.round(Math.random()) - 0.5) * 2
+export const generateRandomNumbers: (
+  arg0: number
+) => (
+  arg0: number
+) => (arg0: number) => number[] = base => charOffset => length =>
+  [...Array(length)].map(
+    () => (base + rand.range(0, charOffset)) * randomSign(),
+  )
+export const minMaxLooped: (
+  arg0: number,
+  arg1: number
+) => (arg0: number) => number = (min, max) => value => {
+  if (value > max) return min + (value - max)
+  if (value < min) return max + (value - min)
+  return value
+}

package/src/common/yugop/utils/noop.ts

@@ -0,0 +1 @@
+export const noop: (...rest: unknown[]) => unknown = () => {}

package/src/common/yugop/utils/prng.ts

@@ -0,0 +1,35 @@
+const int32 = 2147483647
+
+const gen: (arg0: number) => number = v => (v * 16807) % int32
+
+const randomFloat: (arg0: number) => number = v => gen(v) / int32
+
+const randomInt: (arg0: number) => number = v => gen(v)
+
+type Generator = (
+  _?: number
+) => {
+  random: () => number
+  randomFloat: () => number
+  range: (min: number, max: number) => number
+  rangeFloat: (min: number, max: number) => number
+}
+export const generator: Generator = (seed = 1) => {
+  let value = seed < 1 ? 1 : seed
+
+  const next: () => number = () => {
+    value = randomInt(value)
+    return value
+  }
+
+  return {
+    random: () => next(),
+    randomFloat: () => randomFloat(next()),
+    range: (min, max) => {
+      const minimum = min - 0.4999
+      const maximum = max + 0.4999
+      return Math.round(minimum + (maximum - minimum) * randomFloat(next()))
+    },
+    rangeFloat: (min, max) => min + (max - min) * randomFloat(next()),
+  }
+}

package/src/common/yugop/utils/string.ts

@@ -0,0 +1,4 @@
+// export const strToCharCodeArray: string => number[] = str => str.split('').map(item => item.charCodeAt(0));
+
+export const strToCharCodeArray: (arg0: string) => number[] = str =>
+  str.split('').map(item => item.charCodeAt(0))

package/src/dictionary/file-extensions.ts

@@ -0,0 +1,81 @@
+interface FileExtenstion {
+  [key: string]: ExtensionInfo
+}
+
+interface ExtensionInfo {
+  preview?: boolean
+  format: string
+  description: string
+}
+
+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']],
+  ['video', ['.mv2', '.mp4', '.mp4v', '.mpeg', '.mpg4', '.mpg']],
+])
+
+export {
+  FileExtenstion,
+  ExtensionInfo,
+  fileExtensionsDictionary,
+  genericMimeToExt,
+}

package/src/dictionary/icon.ts

@@ -2,8 +2,14 @@ import jsonIconsDictionary from '../fixtures/icons.json'
 import jsonMggIconsDictionary from '../fixtures/iconsauce.json'
 const iconsDictionary = jsonIconsDictionary
 const mggIconsDictionary = jsonMggIconsDictionary
+const svgIconsDictionary = [
+  `${location.origin}/svg/mi/baseline/email.svg`,
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yMzMtODAgNjUtMjgxTDgwLTU1MGwyODgtMjUgMTEyLTI2NSAxMTIgMjY1IDI4OCAyNS0yMTggMTg5IDY1IDI4MS0yNDctMTQ5TDIzMy04MFoiLz48L3N2Zz4=',
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>',
+]
 
 export {
   iconsDictionary,
   mggIconsDictionary,
+  svgIconsDictionary,
 }

package/src/dictionary/text.ts

@@ -0,0 +1,9 @@
+const truncateDictionary = [
+  'all',
+  'none',
+  'word',
+]
+
+export {
+  truncateDictionary,
+}