@maggioli-design-system/mds-modal 4.1.0 → 4.2.0

package/documentation.json

@@ -0,0 +1,144 @@
+{
+  "timestamp": "2023-04-14T09:57:39",
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.22.3",
+    "typescriptVersion": "4.9.4"
+  },
+  "components": [
+    {
+      "filePath": "./src/components/mds-modal/mds-modal.tsx",
+      "encapsulation": "shadow",
+      "tag": "mds-modal",
+      "readme": "# mds-modal\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "opened",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "opened",
+          "reflectToAttr": true,
+          "docs": "Specifies if the modal is opened or not",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "position",
+          "type": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
+          "mutable": true,
+          "attr": "position",
+          "reflectToAttr": true,
+          "docs": "Specifies the animation position of the modal window",
+          "docsTags": [],
+          "default": "'center'",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "mdsModalClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emits when a modal is closed",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "mdsModalClose",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "mdsBannerClose",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [
+        {
+          "name": "--mds-modal-overlay-color",
+          "annotation": "prop",
+          "docs": "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`."
+        },
+        {
+          "name": "--mds-modal-overlay-opacity",
+          "annotation": "prop",
+          "docs": "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`."
+        },
+        {
+          "name": "--mds-modal-window-background",
+          "annotation": "prop",
+          "docs": "Set the background color of the window"
+        },
+        {
+          "name": "--mds-modal-window-overflow",
+          "annotation": "prop",
+          "docs": "Set the overflow of the window"
+        },
+        {
+          "name": "--mds-modal-window-shadow",
+          "annotation": "prop",
+          "docs": "Set the box shadow of the window"
+        },
+        {
+          "name": "--mds-modal-z-index",
+          "annotation": "prop",
+          "docs": "Set the z-index of the window when the component is opened"
+        }
+      ],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "mds-header"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "mds-header": [
+          "mds-modal"
+        ]
+      }
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "mds-modal is a web-component from Maggioli Design System Magma, 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",
@@ -12,6 +12,7 @@
   "unpkg": "dist/mds-modal/mds-modal.esm.js",
   "files": [
     "dist/",
+    "documentation.json",
     "loader/",
     "readme.md",
     "src/",
@@ -23,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^11.2.1",
-    "@stencil/core": "^2.22.2",
+    "@maggioli-design-system/styles": "^11.4.0",
+    "@stencil/core": "^2.22.3",
     "clsx": "^1.2.1"
   },
   "license": "MIT",
@@ -39,10 +40,15 @@
       "email": "andrea.pruccoli@maggioli.it",
       "role": "Software Engineer"
     },
+    {
+      "name": "Nicola Tamburini",
+      "email": "nicola.tamburini@maggioli.it",
+      "role": "Software Engineer"
+    },
     {
       "name": "Vittorio Vittori",
       "email": "vittorio.vittori@maggioli.it",
-      "role": "UX UI Designer"
+      "role": "Product Designer"
     }
   ]
 }

package/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                          | Type                                                 | Default     |
-| ---------- | ---------- | ---------------------------------------------------- | ---------------------------------------------------- | ----------- |
-| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                            | `undefined` |
-| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top"` | `null`      |
+| Property   | Attribute  | Description                                          | Type                                                              | Default    |
+| ---------- | ---------- | ---------------------------------------------------- | ----------------------------------------------------------------- | ---------- |
+| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                                         | `false`    |
+| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top" \| undefined` | `'center'` |
 
 
 ## Events

package/src/common/aria.ts

@@ -7,12 +7,12 @@ const hash = (s: string): string => {
 }
 
 const unslugName = (name: string): string => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+  return name.split('/')?.slice(-1).pop()?.replace(/-/g, ' ') ?? name
 }
 
 const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute)
+    return element.getAttribute(attribute) ?? ''
   }
   element.setAttribute(attribute, value)
   return value

package/src/common/keyboard-manager.ts

@@ -38,7 +38,7 @@ export class KeyboardManager {
   }
 
   detachEscapeBehavior = (): void => {
-    this.escapeCallback = null
+    this.escapeCallback = () => {return}
     if (typeof window !== undefined) {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }

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

@@ -0,0 +1,49 @@
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .animate {
+    @apply
+      duration-500
+      ease-in-out-expo
+      opacity-0
+      transition-cosmetic;
+  }
+
+  .animate-bottom-intro,
+  .animate-center-intro,
+  .animate-top-intro {
+    transform: rotateX(-22deg) scale(0.5) translateY(40%);
+  }
+
+  .animate-bottom-opened,
+  .animate-center-opened,
+  .animate-top-opened {
+    @apply opacity-100;
+
+    transform: rotateX(0) scale(1) translateY(0);
+  }
+
+  .animate-bottom-outro,
+  .animate-center-outro,
+  .animate-top-outro {
+    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
+  }
+
+  .animate-right-intro,
+  .animate-right-outro {
+    transform: translateX(calc(100% + 50px));
+  }
+
+  .animate-right-opened,
+  .animate-left-opened {
+    @apply opacity-100;
+
+    transform: translateX(0);
+  }
+
+  .animate-left-intro,
+  .animate-left-outro {
+    transform: translateX(calc(-100% - 50px));
+  }
+}

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

@@ -1,28 +1,28 @@
-:host ( .animate-bottom ) {
+:host( .to-bottom ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-bottom ) .window,
-:host ( .animate-bottom ) > ::slotted ( [slot=window] ) {
-  @apply animate-bottom;
+:host( .to-bottom ) .window,
+:host( .to-bottom ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-bottom-intro ) .window,
-:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-intro ) .window,
+:host( .to-bottom-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-intro;
 }
 
-:host ( .animate-bottom-opened.animate-bottom-outro ) .window,
-:host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ),
-:host ( .animate-bottom-opened ) .window,
-:host ( .animate-bottom-opened ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-opened.to-bottom-outro ) .window,
+:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),
+:host( .to-bottom-opened ) .window,
+:host( .to-bottom-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-opened;
 }
 
-:host ( .animate-bottom-outro ) .window,
-:host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-outro ) .window,
+:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-outro;
 }

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

@@ -1,28 +1,28 @@
-:host ( .animate-center ) {
+:host( .to-center ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-center ) .window,
-:host ( .animate-center ) > ::slotted ( [slot=window] ) {
-  @apply animate-center;
+:host( .to-center ) .window,
+:host( .to-center ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-center-intro ) .window,
-:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-intro ) .window,
+:host( .to-center-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-center-intro;
 }
 
-:host ( .animate-center-opened.animate-center-outro ) .window,
-:host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ),
-:host ( .animate-center-opened ) .window,
-:host ( .animate-center-opened ) > ::slotted ( [slot=window] ) {
+:host( .to-center-opened.to-center-outro ) .window,
+:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),
+:host( .to-center-opened ) .window,
+:host( .to-center-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-center-opened;
 }
 
-:host ( .animate-center-outro ) .window,
-:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-outro ) .window,
+:host( .to-center-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-center-outro;
 }

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

@@ -1,41 +1,41 @@
-:host ( .animate-left ) {
+:host( .to-left ) {
   @apply justify-start;
 }
 
-:host ( .animate-left ) .window,
-:host ( .animate-left ) > ::slotted ( [slot=window] ) {
-  @apply animate-left;
+:host( .to-left ) .window,
+:host( .to-left ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-left-intro ) .window,
-:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-intro ) .window,
+:host( .to-left-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-left-intro;
 }
 
-:host ( .animate-left-opened.animate-left-outro ) .window,
-:host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ),
-:host ( .animate-left-opened ) .window,
-:host ( .animate-left-opened ) > ::slotted ( [slot=window] ) {
+:host( .to-left-opened.to-left-outro ) .window,
+:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),
+:host( .to-left-opened ) .window,
+:host( .to-left-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-left-opened;
 }
 
-:host ( .animate-left-opened ) .close,
-:host ( .animate-left-opened.animate-left-outro ) .close {
+:host( .to-left-opened ) .close,
+:host( .to-left-opened.to-left-outro ) .close {
   @apply opacity-100;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-:host ( .animate-left-outro ) .window,
-:host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-outro ) .window,
+:host( .to-left-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-left-outro;
 }
 
-:host ( .animate-left-outro ) .close {
+:host( .to-left-outro ) .close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close {
+:host( .to-left ) .close {
   @apply right-0;
 
   transform: translate(36px, 24px) rotate(90deg);

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

@@ -1,41 +1,41 @@
-:host ( .animate-right ) {
+:host( .to-right ) {
   @apply justify-end;
 }
 
-:host ( .animate-right ) .window,
-:host ( .animate-right ) > ::slotted ( [slot=window] ) {
-  @apply animate-right;
+:host( .to-right ) .window,
+:host( .to-right ) > ::slotted([slot="window"]) {
+  @apply animate;
 }
 
-:host ( .animate-right-intro ) .window,
-:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-intro ) .window,
+:host( .to-right-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-right-intro;
 }
 
-:host ( .animate-right-opened.animate-right-outro ) .window,
-:host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ),
-:host ( .animate-right-opened ) .window,
-:host ( .animate-right-opened ) > ::slotted ( [slot=window] ) {
+:host( .to-right-opened.to-right-outro ) .window,
+:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),
+:host( .to-right-opened ) .window,
+:host( .to-right-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-right-opened;
 }
 
-:host ( .animate-right-opened ) .close,
-:host ( .animate-right-opened.animate-right-outro ) .close {
+:host( .to-right-opened ) .close,
+:host( .to-right-opened.to-right-outro ) .close {
   @apply opacity-100;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-:host ( .animate-right-outro ) .window,
-:host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-outro ) .window,
+:host( .to-right-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-right-outro;
 }
 
-:host ( .animate-right-outro ) .close {
+:host( .to-right-outro ) .close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close {
+:host( .to-right ) .close {
   @apply left-0;
 
   transform: translate(-36px, 24px) rotate(-90deg);

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

@@ -1,28 +1,28 @@
-:host ( .animate-top ) {
+:host( .to-top ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-top ) .window,
-:host ( .animate-top ) > ::slotted ( [slot=window] ) {
-  @apply animate-top;
+:host( .to-top ) .window,
+:host( .to-top ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-top-intro ) .window,
-:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-intro ) .window,
+:host( .to-top-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-top-intro;
 }
 
-:host ( .animate-top-opened.animate-top-outro ) .window,
-:host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ),
-:host ( .animate-top-opened ) .window,
-:host ( .animate-top-opened ) > ::slotted ( [slot=window] ) {
+:host( .to-top-opened.to-top-outro ) .window,
+:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),
+:host( .to-top-opened ) .window,
+:host( .to-top-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-top-opened;
 }
 
-:host ( .animate-top-outro ) .window,
-:host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-outro ) .window,
+:host( .to-top-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-top-outro;
 }

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

@@ -1,4 +1,7 @@
+/* stylelint-disable */
 @import '../../tailwind/components.css';
+@import './css/components.css';
+
 @tailwind components;
 @tailwind utilities;
 
@@ -11,64 +14,6 @@
   * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
 */
 
-@layer components {
-  .animate-bottom,
-  .animate-center,
-  .animate-top {
-    @apply
-      duration-500
-      ease-in-out-expo
-      opacity-0
-      transition-cosmetic;
-  }
-
-  .animate-bottom-intro,
-  .animate-center-intro,
-  .animate-top-intro {
-    transform: rotateX(-22deg) scale(0.5) translateY(40%);
-  }
-
-  .animate-bottom-opened,
-  .animate-center-opened,
-  .animate-top-opened {
-    @apply opacity-100;
-
-    transform: rotateX(0) scale(1) translateY(0);
-  }
-
-  .animate-bottom-outro,
-  .animate-center-outro,
-  .animate-top-outro {
-    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
-  }
-
-  .animate-left,
-  .animate-right {
-    @apply
-      duration-500
-      opacity-0
-      ease-in-out-expo
-      transition-cosmetic;
-  }
-
-  .animate-right-intro,
-  .animate-right-outro {
-    transform: translateX(calc(100% + 50px));
-  }
-
-  .animate-right-opened,
-  .animate-left-opened {
-    @apply opacity-100;
-
-    transform: translateX(0);
-  }
-
-  .animate-left-intro,
-  .animate-left-outro {
-    transform: translateX(calc(-100% - 50px));
-  }
-}
-
 :host {
 
   --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);
@@ -90,26 +35,26 @@
 
   background-color: rgba(var(--mds-modal-overlay-color) / 0);
   perspective: 600px;
-  z-index: var(--z-index, 1000);
+  z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host ( [position=top] ) {
+:host( [position=top] ) {
   @apply
     items-start
     justify-center;
 }
 
-:host ( [position=bottom] ) {
+:host( [position=bottom] ) {
   @apply
     items-end
     justify-center;
 }
 
-:host ( .animate-bottom-opened ),
-:host ( .animate-center-opened ),
-:host ( .animate-left-opened ),
-:host ( .animate-right-opened ),
-:host ( .animate-top-opened ) {
+:host( .to-bottom-opened ),
+:host( .to-center-opened ),
+:host( .to-left-opened ),
+:host( .to-right-opened ),
+:host( .to-top-opened ) {
   @apply
     duration-500
     pointer-events-auto;
@@ -166,3 +111,4 @@
 @import './css/mds-modal-animate-left.css';
 @import './css/mds-modal-animate-right.css';
 @import './css/mds-modal-animate-top.css';
+