@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/README.md

@@ -2,256 +2,74 @@
 
 # Maggioli Design System Web-Component
 
-## To generate a new web-component:
+Questa libreria fornisce una lista di componenti basati sullo standard web-component agnostici rispetto ai framework Javascript
 
-```
-nx run stencil:generate mds-component-name
-```
-
-## To build a web-component:
-
-```
-nx run stencil:build --skip-nx-cache
-```
-
-## To generate an independent `package.json`, needed to publish the new web-component
-
-```
-nx run stencil:publish.isolate.component --component=mds-component-name
-```
-
-## To publish the new web-component
-
-### Build Stencil first
-
-```
-npx nx run stencil:build
-```
-
-### Isolate component
-
-```
-npx nx run stencil:isolate-component --skip-nx-cache
-```
-
-And follow script instructions
-
-### Build and publish isolated component
-
-```
-cd .build/component-name
-npm run build
-npm publish --access public
-```
-
----
-
-## Tests
-
-All tests paths are from this project `design-system/projects/stencil/` path.
-
-### Regression tests
-
-To run regression tests you'll need to have Docker installed on your local machine, this will ensure to run the same Chrome render between local machines with different operative systems.
-
-#### Create references
-
-First, if you don't have a reference images `.loki/reference` path, you need to run:
-
-```
-nx run stencil:test.regression.reference
-```
-
-Then you should see images inside `.loki/reference`, these images will be used to check differences after your changes.
-
-You should do it AFTER a `git pull` and BEFORE starting to work:
-
-```
-git pull
-nx run stencil:test.regression.reference
-```
-
-#### Make changes to the code and then run regression tests
-
-When you have the reference images and you have worked
-
-```
-nx run stencil:test.regression.review
-```
+Fa uso della libreria [@maggioli-design-system/styles](https://www.npmjs.com/package/@maggioli-design-system/styles) per gli sitli dei componenti
 
-##### Clean to remove all image references
+## Installation
 
-If for some reason you need to clean loki image cache:
-
-```
-nx run stencil:test.regression.clean
-```
-
----
-
-## Semi-automatic versioning of the component package.json files
-
-We've added a list of terminal commands to ease the updating processo for all component.
-Updates the component and all components on which it is dependent.
-
-
-### Updating package version
-
-```
-nx run stencil:update -- --version={major | minor | patch} {component}
-```
-
-Assuming we have a `mds-foo` to default version `1.0.0` and a `mds-bar` which have a `mds-foo` as dependencie and version `2.2.3`, if you run:
-
-```
-nx run stencil:update -- --version=major mds-foo
-```
-
-Will become:
-
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "2.0.0"
-}
-```
-
-```json
-{
-  "name": "@maggioli-design-system/mds-bar",
-  "version": "3.0.0",
-  "dependencies": {
-    "mds-foo": "2.0.0"
-  }
-}
-```
-
-
-Assuming we have a `mds-foo` to default version `1.0.0`, if you run:
-
-```
-nx run stencil:update -- --version=minor mds-foo
-```
-
-Will become:
-
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.1.0"
-}
-```
-
-Assuming we have a `mds-foo` to default version `1.0.0`, if you run:
-
-```
-nx run stencil:update.version patch mds-foo
-```
-
-Will become:
-
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.0.1"
-}
-```
-
-### Update component dependencies
-
-To synchronize all version components dependencies launch
 ```
-nx run stencil:update
+npm i '@maggioli-design-system/magma'
 ```
 
-Assuming we have a `mds-foo` to default version `1.0.0`, with two dependencies to be updated to `mds-dep-1@1.3.1` and `mds-dep-2@1.1.2`, if you run:
+## Define Components
 
-```
-nx run stencil:update
-```
+```js
+// insert in bootstrap file of client part of your application
 
-Old dependencies:
+import { defineCustomElements } from "@maggioli-design-system/magma/loader";
 
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.0.0",
-  "dependencies": {
-    "@maggioli-design-system/mds-dep-1": "1.2.0",
-    "@maggioli-design-system/mds-dep-2": "1.0.0"
-  }
-}
+defineCustomElements();
 ```
 
-Will be updated to:
+Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.
 
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.0.1",
-  "dependencies": {
-    "@maggioli-design-system/mds-dep-1": "1.3.1",
-    "@maggioli-design-system/mds-dep-2": "1.1.2"
-  }
-}
+```html
+<html>
+  <head>
+    <script type="module">
+      import { defineCustomElements } from '@maggioli-design-system/magma/loader/index.es2017.mjs';
+      defineCustomElements();
+    </script>
+  </head>
+  <body>
+    <mds-text>Hello world</mds-text>
+  </body>
+</html>
 ```
 
-### Update component dependencies and core dependencies
+## Style
+Import style used by components
 
-The option `--common` will also update dependencies found also in `stencil/package.json` file for each component that have the updated dependencies.
+```css
+/* global.css */
 
-```
-nx run stencil:update --common
-```
+// color
+@import "@maggioli-design-system/styles/dist/css/colors-rgb.css";
 
-Note: if you want choose type of version you need to add `--` with nx run command:
-```
-nx run stencil:update -- --common --version=minor
+// font
+@import '@fontsource/karla/400.css';
+@import '@fontsource/karla/700.css';
+@import '@fontsource/merriweather/400.css';
+@import '@fontsource/merriweather/700.css';
+@import '@fontsource/roboto-mono/400.css';
+@import '@fontsource/roboto/500.css';
+@import '@fontsource/roboto/700.css';
+@import '@fontsource/roboto/900.css';
 ```
 
-This means if you have a component `mds-foo/package.json`:
+For more details see the [library](https://www.npmjs.com/package/@maggioli-design-system/styles)
 
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.0.0",
-  "dependencies": {
-    "@maggioli-design-system/mds-dep-1": "1.1.2",
-    "@maggioli-design-system/styles": "11.0.0",
-    "@stencil/core": "4.2.0"
-  }
-}
-```
 
-And this is `stencil/package.json`:
+## Icon
+Set the path where the `mds-icon` component will get the svg icons
 
-```json
-{
-  "name": "stencil",
-  "version": "1.0.0",
-  "dependencies": {
-    "clsx": "2.0.0",
-    "@maggioli-design-system/styles": "13.0.0",
-    "@stencil/core": "4.6.0",
-    "fitty": "2.3.7",
-    "idb-keyval": "6.2.1"
-  }
-}
+```js
+window.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');
 ```
 
-The command will update the dependecies both found on `stencil` and `mds-foo` only:
+If you are using React set this inside `UseEffet` otherwise window is not defined
 
-```json
-{
-  "name": "@maggioli-design-system/mds-foo",
-  "version": "1.0.1",
-  "dependencies": {
-    "@maggioli-design-system/mds-dep-1": "1.1.2",
-    "@maggioli-design-system/styles": "13.0.0",
-    "@stencil/core": "4.6.0"
-  }
-}
-```
 
-So you can update `@stencil/core` based on `stencil/package.json` without add unwanted dependencies to `mds-foo/package.json`.
+For greater interoperability between components and frameworks, see the specific libraries for [Angular](https://www.npmjs.com/package/@maggioli-design-system/magma-angular) and [React](https://www.npmjs.com/package/@maggioli-design-system/magma-react)
 

package/dist/cjs/{_commonjsHelpers-0192c5b3.js → _commonjsHelpers-e6ff1d6e.js}

@@ -2,14 +2,9 @@
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function commonjsRequire (path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
 
 exports.commonjsGlobal = commonjsGlobal;
 exports.commonjsRequire = commonjsRequire;
-exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/cjs/{aria-8237fdab.js → aria-0b8ae8a3.js}

@@ -20,7 +20,22 @@ const setAttributeIfEmpty = (element, attribute, value) => {
     element.setAttribute(attribute, value);
     return value;
 };
-const hashValue = (value) => `${value}-${hash(value)}`;
+const removeAttributesIf = (element, attribute, valueCheck = 'true', cleanAttributes) => {
+    if (ifAttribute(element, attribute, valueCheck)) {
+        const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes];
+        attributesList.forEach(attributeToRemove => {
+            element.removeAttribute(attributeToRemove);
+        });
+        return true;
+    }
+    return false;
+};
+const ifAttribute = (element, attribute, valueCheck = 'true') => {
+    if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
+        return true;
+    }
+    return false;
+};
 const hashRandomValue = (value) => {
     const randomValue = randomInt(1000000);
     if (value) {
@@ -30,6 +45,7 @@ const hashRandomValue = (value) => {
 };
 
 exports.hashRandomValue = hashRandomValue;
-exports.hashValue = hashValue;
+exports.ifAttribute = ifAttribute;
+exports.removeAttributesIf = removeAttributesIf;
 exports.setAttributeIfEmpty = setAttributeIfEmpty;
 exports.unslugName = unslugName;

package/dist/cjs/file-extensions-cd2fa955.js

@@ -0,0 +1,126 @@
+'use strict';
+
+const fileExtensionsDictionary = {
+    '7z': { format: 'archive', description: 'compressedArchive' },
+    ace: { format: 'archive', description: 'compressedArchive' },
+    ai: { format: 'vector', description: 'fileAI' },
+    dart: { format: 'code', description: 'dart' },
+    db: { format: 'data', description: 'fileDB' },
+    default: { format: 'attachment', description: 'unknown' },
+    dmg: { format: 'executable', description: 'appleDiskImage' },
+    doc: { format: 'text', description: 'documentMS' },
+    docm: { format: 'text', description: 'documentMS' },
+    docx: { format: 'text', description: 'compressedDocumentMS' },
+    eml: { format: 'email', description: 'email' },
+    eps: { format: 'vector', description: 'fileEPS' },
+    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' },
+    html: { format: 'markup', description: 'documentWeb' },
+    jpe: { format: 'image', description: 'compressedImage', preview: true },
+    jpeg: { format: 'image', description: 'compressedImage', preview: true },
+    jpg: { format: 'image', description: 'compressedImage', preview: true },
+    js: { format: 'code', description: 'fileJS' },
+    json: { format: 'data', description: 'fileJSON' },
+    jsx: { format: 'code', description: 'fileJS' },
+    m2v: { format: 'video', description: 'videoSD' },
+    mp2: { format: 'audio', description: 'compressedAudio' },
+    mp3: { format: 'audio', description: 'compressedAudio' },
+    mp4: { format: 'video', description: 'videoHD' },
+    mp4v: { format: 'video', description: 'videoHD' },
+    mpeg: { format: 'video', description: 'videoSD' },
+    mpg4: { format: 'video', description: 'videoSD' },
+    mpg: { format: 'video', description: 'videoSD' },
+    mpga: { format: 'audio', description: 'compressedAudio' },
+    odp: { format: 'slide', description: 'slideLO' },
+    ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
+    odt: { format: 'text', description: 'documentLO' },
+    pdf: { format: 'document', description: 'documentAdobe' },
+    php: { format: 'code', description: 'filePHP' },
+    png: { format: 'image', description: 'imagePNG', preview: true },
+    ppt: { format: 'slide', description: 'slidePowerPoint' },
+    rar: { format: 'archive', description: 'compressedArchive' },
+    rtf: { format: 'text', description: 'documentRTF' },
+    sass: { format: 'code', description: 'fileSASS' },
+    shtml: { format: 'markup', description: 'documentWeb' },
+    svg: { format: 'vector', description: 'imageSVG', preview: true },
+    tar: { format: 'archive', description: 'uncompressedArchive' },
+    tiff: { format: 'image', description: 'imageTIFF' },
+    ts: { format: 'code', description: 'fileTS' },
+    tsx: { format: 'code', description: 'fileTSX' },
+    txt: { format: 'text', description: 'documentTXT' },
+    wav: { format: 'audio', description: 'uncompressedAudio' },
+    webp: { format: 'image', description: 'imageWEBP', preview: true },
+    xar: { format: 'archive', description: 'compressedArchive' },
+    xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    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 = new Map([
+    ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
+    ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],
+    ['video', ['.mv2', '.mp4', '.mp4v', '.mpeg', '.mpg4', '.mpg']],
+]);
+
+exports.fileExtensionsDictionary = fileExtensionsDictionary;
+exports.genericMimeToExt = genericMimeToExt;