@maggioli-design-system/mds-modal 5.1.0 → 5.2.1

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-04T15:30:05",
+  "timestamp": "2024-12-19T14:37:09",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",
@@ -225,11 +225,21 @@
           "annotation": "prop",
           "docs": "Set the background color of the window"
         },
+        {
+          "name": "--mds-modal-window-distance",
+          "annotation": "prop",
+          "docs": "Set the distance between the modal window and the screen bounds"
+        },
         {
           "name": "--mds-modal-window-overflow",
           "annotation": "prop",
           "docs": "Set the overflow of the window"
         },
+        {
+          "name": "--mds-modal-window-radius",
+          "annotation": "prop",
+          "docs": "Set the border radius of the window"
+        },
         {
           "name": "--mds-modal-window-shadow",
           "annotation": "prop",
@@ -438,7 +448,7 @@
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
     "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'",
+      "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  | 'odf'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'odt'\n  | 'ole'\n  | 'p7m'\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  | 'tsd'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'xml'\n  | 'zip'",
       "docstring": "",
       "path": "src/type/file-types.ts"
     },
@@ -677,11 +687,6 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/type/date.ts::ISO8601Date": {
-      "declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
-      "docstring": "",
-      "path": "src/type/date.ts"
-    },
     "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
       "declaration": "string",
       "docstring": "",
@@ -712,6 +717,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/type/animation.ts::HorizontalActionsAnimationType": {
+      "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
+      "docstring": "",
+      "path": "src/type/animation.ts"
+    },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
       "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
@@ -732,6 +742,16 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table/meta/event-detail.ts::MdsTableSelectionEventDetail": {
+      "declaration": "export interface MdsTableSelectionEventDetail {\n  rows: MdsTableRowSelection[]\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/event-detail.ts"
+    },
+    "src/components/mds-table/meta/type.ts::MdsTableRowSelection": {
+      "declaration": "{\n  index: number\n  value?: string | number\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/type.ts"
+    },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
       "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "description": "mds-modal 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 JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.1.0",
+    "@maggioli-design-system/mds-button": "6.1.3",
     "@maggioli-design-system/styles": "15.5.0",
     "@stencil/core": "4.22.2",
     "clsx": "2.1.0"

package/readme.md

@@ -49,7 +49,9 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
 | `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
 | `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
 | `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
 | `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
 | `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
 

package/src/common/slot.ts

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

package/src/components/mds-modal/css/mds-modal-animate-left.css

@@ -4,7 +4,8 @@
 }
 
 :host([position="left"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-right.css

@@ -4,7 +4,8 @@
 }
 
 :host([position="right"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

package/src/components/mds-modal/css/mds-modal-animate.css

@@ -1,14 +1,4 @@
-:host {
-  @apply
-    mobile:p-400
-    p-800;
-}
-
 :host .window {
-  @apply
-    mobile:-m-400
-    -m-800;
-
   transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);
 }
 

package/src/components/mds-modal/mds-modal.css

@@ -10,6 +10,8 @@
  * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
  * @prop --mds-modal-window-background: Set the background color of the window
  * @prop --mds-modal-window-overflow: Set the overflow of the window
+ * @prop --mds-modal-window-radius: Set the border radius of the window
+ * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds
  * @prop --mds-modal-window-shadow: Set the box shadow of the window
  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
  */
@@ -23,7 +25,9 @@
   --mds-modal-transition-outro-ease: theme('transitionTimingFunction.in-out-quint');
   --mds-modal-window-background: theme('colors.tone-neutral');
   --mds-modal-window-overflow: auto;
+  --mds-modal-window-radius: 0;
   --mds-modal-window-shadow: theme('boxShadow.2xl');
+  --mds-modal-window-distance: 0;
   --mds-modal-z-index: var(--magma-modal-z-index);
 
   @apply ease-in-out-expo;
@@ -76,9 +80,11 @@
   @apply gap-0;
 
   background-color: var(--mds-modal-window-background);
+  border-radius: var(--mds-modal-window-radius);
   box-shadow: var(--mds-modal-window-shadow);
   display: grid;
   grid-template-rows: 1fr;
+  margin: var(--mds-modal-window-distance);
   overflow: var(--mds-modal-window-overflow);
 }
 

package/src/components/mds-modal/mds-modal.tsx

@@ -133,7 +133,7 @@ export class MdsModal {
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} onClick={(e: Event) => { this.closeModal(e) }}>
         { this.window
           ? <slot name="window"/>
-          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog" part="window">
+          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} part="window">
             { this.top &&
               <slot name="top"/>
             }

package/src/components/mds-modal/readme.md

@@ -47,7 +47,9 @@
 | `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
 | `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
 | `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
 | `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
 | `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
 | `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
 

package/src/components/mds-modal/test/mds-modal.stories.tsx

@@ -26,19 +26,19 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 
 const Template = args =>
   <mds-modal {...args}>
-    <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09">
+    <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-img class="w-1600" src="/logo-gruppo-maggioli-512w.webp"/>
       <div class="text-tone-neutral-02">
         <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
         <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
       </div>
     </header>
-    <div class="p-800">
+    <div class="p-800 max-w-[400px]">
       <mds-text>
         As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
       </mds-text>
     </div>
-    <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09">
+    <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-author class="flex-grow">
         <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="/avatar-01-200x200.jpeg"/>
         <mds-text typography="h6">{ fullName }</mds-text>
@@ -81,7 +81,13 @@ export const Default = Template.bind({})
 Default.args = {
   position: 'right',
 }
-export const CustomWindow = CustomTemplate.bind({})
+
+export const DefaultWindowCustomized = Template.bind({})
+DefaultWindowCustomized.args = {
+  position: 'right',
+  style: { '--mds-modal-window-distance': '1rem', '--mds-modal-window-radius': '1rem' },
+}
+export const CustomWindowElement = CustomTemplate.bind({})
 export const Interactive = InteractiveTemplate.bind({})
 export const ARIATest = CustomTemplate.bind({})
 ARIATest.args = {

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']],

package/src/fixtures/filenames.ts

@@ -55,6 +55,69 @@ const filesList = [
   'wooden.jsx',
 ]
 
+const namedFilesList = {
+  '7z': 'frozen_haptic.7z',
+  'No extension file': 'this_is_an_extensionless_file',
+  'png with URL': 'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+  ace: 'sky_marketing.ace',
+  ai: 'foreground_overriding.ai',
+  db: 'matrix_black_hat.db',
+  default: 'copying.default',
+  dmg: 'protocol_designer.dmg',
+  doc: 'forges.doc',
+  docm: 'officer_somalia.docm',
+  docx: 'upgradable_gold.docx',
+  eml: 'brunei_logistical.eml',
+  eps: 'alarm_circuit_plastic.eps',
+  exe: 'rss_systematic_avon.exe',
+  flac: 'liaison_panel_central.flac',
+  gif: 'initiatives_group.gif',
+  htm: 'books_monetize_arizona.htm',
+  html: 'flexibility_auto_money.html',
+  jpe: 'intelligent_radical.jpe',
+  jpeg: 'iowa_installation.jpeg',
+  jpg: 'buckinghamshire_macao.jpg',
+  js: 'monitor.js',
+  json: 'calculating.json',
+  jsx: 'wooden.jsx',
+  m2v: 'interface_bedfordshire_solid.m2v',
+  mp2: 'explicit.mp2',
+  mp3: 'optimization_radical.mp3',
+  mp4: 'nebraska.mp4',
+  mp4v: 'reduced_regional_greenland.mp4v',
+  mpeg: 'impactful_alarm_handmade.mpeg',
+  mpg4: 'revolutionize.mpg4',
+  mpg: 'complexity_deposit.mpg',
+  mpga: 'ports_copy_granite.mpga',
+  odf: 'This is a file_to_read.odf',
+  odp: 'needs_based_solid.odp',
+  ods: 'compressing_black_colorado.ods',
+  odt: 'salad_compressing.odt',
+  ole: 'Document-RPF_Open-new.ole',
+  p7m: 'file with certificate from government.pdf.p7m',
+  pdf: 'connect_local_visualize.pdf',
+  php: 'fish.php',
+  png: 'awesome_orchestration.png',
+  ppt: 'gorgeous_manager_savings.ppt',
+  rar: 'unbranded.rar',
+  rtf: 'pound.rtf',
+  sass: 'open_source_gorgeous.sass',
+  shtml: 'brand.shtml',
+  svg: 'b2c_tan_sports.svg',
+  tar: 'graphic_frozen_bedfordshire.tar',
+  ts: 'forge_face.ts',
+  tsd: 'Marked file-7483274hy6Fg6R8.tsd',
+  txt: 'bedfordshire_iceland_identity.txt',
+  wav: 'synergistic.wav',
+  webp: 'open_source.webp',
+  xar: 'wisconsin_bypassing_small.xar',
+  xls: 'metrics_lempira_account.xls',
+  xlsx: 'hdd_navigate_panama.xlsx',
+  xml: 'Markup language.xml',
+  zip: 'tuna_table_fall.zip',
+}
+
 export {
   filesList,
+  namedFilesList,
 }

package/src/fixtures/icons.json

@@ -8,6 +8,7 @@
     "mdi/email",
     "mdi/file-document-remove-outline",
     "mdi/harddisk",
+    "mdi/license",
     "mdi/map-marker",
     "mdi/replay",
     "mdi/vector-curve",

package/src/meta/file-format/locale.el.json

@@ -1,39 +1,44 @@
 {
   "appleDiskImage": "Εικόνα δίσκου Apple",
+  "certificateTSD": "Πιστοποιητικό χρονικής σήμανσης",
   "compressedArchive": "Συμπιεσμένο αρχείο",
-  "uncompressedArchive": "Μη συμπιεσμένο αρχείο",
   "compressedAudio": "Συμπιεσμένος ήχος",
-  "uncompressedAudio": "Μη συμπιεσμένος ήχος",
+  "compressedDocumentMS": "Συμπιεσμένο έγγραφο Microsoft Word",
+  "compressedImage": "Συμπιεσμένη εικόνα",
   "dart": "Αρχείο Dart",
   "documentAdobe": "Έγγραφο Adobe",
-  "compressedDocumentMS": "Συμπιεσμένο έγγραφο Microsoft Word",
+  "documentDigitalSingnature": "Έγγραφο με ψηφιακή υπογραφή",
+  "documentLO": "Έγγραφο LibreOffice",
   "documentMS": "Έγγραφο Microsoft Word",
   "documentRTF": "Έγγραφο μορφής εμπλουτισμένου κειμένου",
   "documentTXT": "Απλό έγγραφο κειμένου",
+  "documentWeb": "Ιστοσελίδα",
   "email": "Ηλεκτρονικό ταχυδρομείο",
+  "extensibleMarkupLanguage": "Γλώσσα σήμανσης για δεδομένα",
+  "fileAI": "Διανυσματικό αρχείο Adobe Illustrator",
   "fileDB": "Αρχείο βάσης δεδομένων",
-  "documentLO": "Έγγραφο LibreOffice",
+  "fileEPS": "Διανυσματικό αρχείο Corel Draw",
   "fileEXE": "Εκτελέσιμο αρχείο Windows",
-  "videoHD": "Βίντεο υψηλής ανάλυσης",
-  "videoSD": "Βίντεο χαμηλής ανάλυσης",
-  "spreadsheetLO": "Υπολογιστικό φύλλο LibreOffice",
-  "spreadsheetMS": "Υπολογιστικό φύλλο Microsoft Office",
-  "unknown": "Άγνωστη μορφή αρχείου",
-  "imageHEIC": "Μορφή αρχείου εικόνας υψηλής αποδοτικότητας",
+  "fileJS": "Αρχείο JavaScript",
+  "fileJSON": "Αρχείο JavaScript Object Notation",
   "filePHP": "Αρχείο Hypertext Preprocessor",
+  "fileSASS": "Αρχείο Syntactically Awesome StyleSheets",
+  "fileTS": "Αρχείο TypeScript",
+  "fileTSX": "Αρχείο TypeScript Extended Syntax",
+  "imageHEIC": "Μορφή αρχείου εικόνας υψηλής αποδοτικότητας",
   "imagePNG": "Εικόνα Portable Network Graphics",
-  "imageWEBP": "Εικόνα Google Web Picture",
-  "compressedImage": "Συμπιεσμένη εικόνα",
-  "fileJSON": "Αρχείο JavaScript Object Notation",
-  "fileJS": "Αρχείο JavaScript",
-  "documentWeb": "Ιστοσελίδα",
   "imageSVG": "Διανυσματική εικόνα Scalable Vector Graphics",
+  "imageTIFF": "Εικόνα Tag Image File Format",
+  "imageWEBP": "Εικόνα Google Web Picture",
+  "objectLinkingAndEmbedding": "Σύνδεση και ενσωμάτωση αντικειμένων",
+  "openDocumentFormat": "Έγγραφο OpenDocument",
   "slideLO": "Διαφάνεια παρουσίασης LibreOffice",
   "slidePowerPoint": "Διαφάνεια παρουσίασης PowerPoint",
-  "fileSASS": "Αρχείο Syntactically Awesome StyleSheets",
-  "imageTIFF": "Εικόνα Tag Image File Format",
-  "fileTSX": "Αρχείο TypeScript Extended Syntax",
-  "fileTS": "Αρχείο TypeScript",
-  "fileAI": "Διανυσματικό αρχείο Adobe Illustrator",
-  "fileEPS": "Διανυσματικό αρχείο Corel Draw"
+  "spreadsheetLO": "Υπολογιστικό φύλλο LibreOffice",
+  "spreadsheetMS": "Υπολογιστικό φύλλο Microsoft Office",
+  "uncompressedArchive": "Μη συμπιεσμένο αρχείο",
+  "uncompressedAudio": "Μη συμπιεσμένος ήχος",
+  "unknown": "Άγνωστη μορφή αρχείου",
+  "videoHD": "Βίντεο υψηλής ανάλυσης",
+  "videoSD": "Βίντεο χαμηλής ανάλυσης"
 }

package/src/meta/file-format/locale.en.json

@@ -1,39 +1,44 @@
 {
   "appleDiskImage": "Apple Disk Image",
+  "certificateTSD": "Timestamp Certificate",
   "compressedArchive": "Compressed Archive",
-  "uncompressedArchive": "Uncompressed Archive",
   "compressedAudio": "Compressed Audio",
-  "uncompressedAudio": "Uncompressed Audio",
+  "compressedDocumentMS": "Compressed Microsoft Word Document",
+  "compressedImage": "Compressed Image",
   "dart": "Dart File",
   "documentAdobe": "Adobe Document",
-  "compressedDocumentMS": "Compressed Microsoft Word Document",
+  "documentDigitalSingnature": "Document with digital signature",
+  "documentLO": "LibreOffice Document",
   "documentMS": "Microsoft Word Document",
   "documentRTF": "Rich Text Format Document",
   "documentTXT": "Plain Text Document",
+  "documentWeb": "Web Page",
   "email": "E-mail",
+  "extensibleMarkupLanguage": "Markup language for data",
+  "fileAI": "Adobe Illustrator Vector File",
   "fileDB": "Database File",
-  "documentLO": "LibreOffice Document",
+  "fileEPS": "Corel Draw Vector File",
   "fileEXE": "Windows Executable File",
-  "videoHD": "High Definition Video",
-  "videoSD": "Standard Definition Video",
-  "spreadsheetLO": "LibreOffice Spreadsheet",
-  "spreadsheetMS": "Microsoft Office Spreadsheet",
-  "unknown": "Unknown File Format",
-  "imageHEIC": "High Efficiency Image File Format",
+  "fileJS": "JavaScript File",
+  "fileJSON": "JavaScript Object Notation File",
   "filePHP": "Hypertext Preprocessor File",
+  "fileSASS": "Syntactically Awesome StyleSheets File",
+  "fileTS": "TypeScript File",
+  "fileTSX": "TypeScript Extended Syntax File",
+  "imageHEIC": "High Efficiency Image File Format",
   "imagePNG": "Portable Network Graphics Image",
-  "imageWEBP": "Google Web Picture Image",
-  "compressedImage": "Compressed Image",
-  "fileJSON": "JavaScript Object Notation File",
-  "fileJS": "JavaScript File",
-  "documentWeb": "Web Page",
   "imageSVG": "Scalable Vector Graphics Image",
+  "imageTIFF": "Tag Image File Format Image",
+  "imageWEBP": "Google Web Picture Image",
+  "objectLinkingAndEmbedding": "Object Linking and Embedding",
+  "openDocumentFormat": "OpenDocument Document",
   "slideLO": "LibreOffice Presentation Slide",
   "slidePowerPoint": "PowerPoint Presentation Slide",
-  "fileSASS": "Syntactically Awesome StyleSheets File",
-  "imageTIFF": "Tag Image File Format Image",
-  "fileTSX": "TypeScript Extended Syntax File",
-  "fileTS": "TypeScript File",
-  "fileAI": "Adobe Illustrator Vector File",
-  "fileEPS": "Corel Draw Vector File"
+  "spreadsheetLO": "LibreOffice Spreadsheet",
+  "spreadsheetMS": "Microsoft Office Spreadsheet",
+  "uncompressedArchive": "Uncompressed Archive",
+  "uncompressedAudio": "Uncompressed Audio",
+  "unknown": "Unknown File Format",
+  "videoHD": "High Definition Video",
+  "videoSD": "Standard Definition Video"
 }