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

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,65 +14,8 @@
   * @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);
   --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);
   --mds-modal-window-background: theme('colors.tone-neutral');
@@ -89,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;
@@ -131,8 +77,8 @@
     top-0
     w-9;
 
-  transition-property: opacity, outline, outline-offset, transform;
   transform: translate(0, 24px) rotate(90deg);
+  transition-property: opacity, outline, outline-offset, transform;
 }
 
 .window {
@@ -165,3 +111,4 @@
 @import './css/mds-modal-animate-left.css';
 @import './css/mds-modal-animate-right.css';
 @import './css/mds-modal-animate-top.css';
+

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

@@ -12,9 +12,9 @@ import { ModalPositionType, ModalAnimationStateType } from './meta/types'
 export class MdsModal {
 
   private animationDeelay
-  private window: boolean = null
-  private top: boolean = null
-  private bottom: boolean = null
+  private window = false
+  private top = false
+  private bottom = false
   private animationState: ModalAnimationStateType = 'intro'
   private km = new KeyboardManager()
   @State() stateOpened: boolean
@@ -23,12 +23,12 @@ export class MdsModal {
   /**
    * Specifies if the modal is opened or not
    */
-  @Prop({ reflect: true, mutable: true }) opened?: boolean
+  @Prop({ reflect: true, mutable: true }) opened = false
 
   /**
    * Specifies the animation position of the modal window
    */
-  @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = null
+  @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = 'center'
 
   componentWillLoad (): void {
     this.bottom = this.host.querySelector('[slot="bottom"]') !== null
@@ -36,17 +36,12 @@ export class MdsModal {
     this.window = this.host.querySelector('[slot="window"]') !== null
     this.stateOpened = this.opened
 
-    if (this.window && this.position === null) {
-      this.position = 'center'
-    }
-
-    if (this.position === null) {
+    if (!this.window) {
       this.position = 'right'
     }
 
     if (this.window) {
-      const modal = this.host.querySelector('[slot="window"]')
-      modal.setAttribute('role', 'modal')
+      this.host.querySelector('[slot="window"]')?.setAttribute('role', 'modal')
     }
   }
 
@@ -66,7 +61,8 @@ export class MdsModal {
 
   componentDidLoad = (): void => {
     this.km.addElement(this.host, 'host')
-    this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close')
+    const close = this.host.shadowRoot?.querySelector('.close')
+    if (close) this.km.addElement(close as HTMLElement, 'close')
     this.km.attachEscapeBehavior(() => this.closeEvent.emit())
     this.km.attachClickBehavior('close')
   }
@@ -76,14 +72,14 @@ export class MdsModal {
     this.km.detachClickBehavior('close')
   }
 
-  private animationName = (customState: string = null, customPosition: string = null): string => {
-    return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`
+  private animationName = (customState = '', customPosition = ''): string => {
+    return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`
   }
 
   @Watch('position')
   positionChange (_newValue: string, oldValue: string): void {
     window.clearTimeout(this.animationDeelay)
-    this.host.classList.remove(this.animationName(null, oldValue))
+    this.host.classList.remove(this.animationName('', oldValue))
     this.host.classList.remove(this.animationName('intro', oldValue))
     this.host.classList.remove(this.animationName('outro', oldValue))
   }
@@ -99,7 +95,7 @@ export class MdsModal {
    */
   @Event({ bubbles: true, composed: true, eventName: 'mdsModalClose' }) closeEvent: EventEmitter<void>
 
-  private closeModal = (e:Event = null): void => {
+  private closeModal = (e:Event): void => {
     if ((e.target as HTMLElement)?.localName !== 'mds-modal') {
       return
     }
@@ -123,10 +119,8 @@ export class MdsModal {
     return (
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} class={clsx(this.stateOpened && this.animationName('opened'))} 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">
+          ? <slot name="window"/>
+          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog">
             { this.top &&
               <slot name="top"/>
             }

package/src/components/mds-modal/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/components/mds-modal/test/mds-modal.e2e.ts

@@ -9,7 +9,7 @@ describe('mds-modal', () => {
 
     // La riga seguente non è valida perché `animate-right-intro` viene impostato in `componentDidRender`
     // e quindi appena instanziato non è presente come classe
-    expect(element).toHaveClass('animate-right')
+    expect(element).toHaveClass('to-right')
     expect(element).toHaveAttribute('hydrated')
     expect(element).toHaveAttribute('position')
 

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

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import MdsModal from '@component/mds-modal/mds-modal'
+import MdsModal from "@component-dist/mds-modal/mds-modal";
 
 <Meta title="UI/Modal/Known issues" component={MdsModal} />
 
@@ -11,4 +11,3 @@ import MdsModal from '@component/mds-modal/mds-modal'
 ### Close event triggered in wrong moments
 
 If you trigger the event `onMouseDown` on the slot `top`, then you trigger `onMouseUp` slot `bottom`, the window closes insted of remaining opened.
-

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

@@ -62,10 +62,10 @@ const CustomTemplate = args =>
 const AriaTemplate = () => {
   // Click not working with reader
   const [opened, setOpened] = useState(false)
-  window.addEventListener('close', () => { setOpened(false) })
+  window.addEventListener('mdsModalClose', () => { setOpened(false) })
   return <div>
     <mds-button onClick={() => setOpened(true) }>Apri modale</mds-button>
-    <mds-modal opened={opened} onClose={() => setOpened(false)}>
+    <mds-modal opened={opened} onMdsModalClose={() => setOpened(false)}>
       <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
         <mds-text typography="detail">
           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.

package/src/components.d.ts

@@ -11,7 +11,7 @@ export namespace Components {
         /**
           * Specifies if the modal is opened or not
          */
-        "opened"?: boolean;
+        "opened": boolean;
         /**
           * Specifies the animation position of the modal window
          */

package/src/fixtures/icons.json

@@ -221,6 +221,7 @@
     "mi/baseline/navigate-next",
     "mi/baseline/panorama",
     "mi/baseline/person",
+    "mi/baseline/pets",
     "mi/baseline/radio-button-checked",
     "mi/baseline/radio-button-unchecked",
     "mi/baseline/route",

package/src/interface/input-value.ts

@@ -1,4 +1,4 @@
-import { InputValueType } from '../types/input-value-type'
+import { InputValueType } from '@type/input-value-type'
 
 export interface InputValue {
   value: InputValueType

package/www/build/mds-modal.esm.js

@@ -1 +1 @@
-import{p as e,b as o}from"./p-4fdbb5fc.js";export{s as setNonce}from"./p-4fdbb5fc.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-225eed54",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]]]]]],e)));
+import{p as e,b as o}from"./p-4fdbb5fc.js";export{s as setNonce}from"./p-4fdbb5fc.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-a7878434",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]]]]]],e)));

package/www/build/mds-modal.js

@@ -115,7 +115,7 @@ DOMTokenList
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
     // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-    var url = new URL('./p-f856db3e.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+    var url = new URL('./p-e2fdb863.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };