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

package/dist/collection/components/mds-modal/mds-modal.css

@@ -1,4 +1,7 @@
+/* stylelint-disable */
 @tailwind components;
+@tailwind utilities;
+
 
 .focus-off,
   .focusable,
@@ -14,6 +17,7 @@
     transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
 }
 
+
 .focus-on,
   .focusable-light:focus-visible,
   .focusable:focus-visible {
@@ -21,16 +25,19 @@
     --magma-outline-blur: var(--magma-outline-focus);
   }
 
+
 .focus-light-on,
   .focusable-light:focus-visible {
     --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
   }
 
+
 .svg{
 
     display: flex;
 }
 
+
 .svg svg{
 
     aspect-ratio: 1 / 1;
@@ -40,19 +47,6 @@
     width: 100%;
 }
 
-.animate-left,
-  .animate-right{
-
-    opacity: 0;
-
-    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 500ms;
-
-    transition-timing-function: cubic-bezier(1, 0, 0, 1);
-}
 
 .animate-right-intro,
   .animate-right-outro {
@@ -138,14 +132,14 @@
 
     background-color: transparent;
 }
-.p-8{
-
-    padding: 2rem;
-}
 .p-4{
 
     padding: 1rem;
 }
+.p-8{
+
+    padding: 2rem;
+}
 .text-tone-neutral-02{
 
     --tw-text-opacity: 1;
@@ -177,6 +171,7 @@
 */
 
 :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: rgb(var(--tone-neutral));
@@ -185,10 +180,7 @@
   --mds-modal-z-index: var(--magma-modal-z-index);
   pointer-events: none;
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -197,28 +189,28 @@
 
   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] ){
 
     align-items: flex-start;
 
     justify-content: center;
 }
 
-:host ( [position=bottom] ){
+:host( [position=bottom] ){
 
     align-items: flex-end;
 
     justify-content: 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 ){
 
     pointer-events: auto;
 
@@ -255,8 +247,8 @@
 
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
-  transition-property: opacity, outline, outline-offset, transform;
   transform: translate(0, 24px) rotate(90deg);
+  transition-property: opacity, outline, outline-offset, transform;
 }
 
 .window{
@@ -286,7 +278,7 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host ( .animate-bottom ){
+:host( .to-bottom ){
 
     justify-content: center;
 
@@ -295,14 +287,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-bottom ){
+
+    :host( .to-bottom ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-bottom ) .window,
-:host ( .animate-bottom ) > ::slotted ( [slot=window] ){
+:host( .to-bottom ) .window,
+:host( .to-bottom ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -315,27 +308,27 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-bottom-intro ) .window,
-:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-intro ) .window,
+:host( .to-bottom-intro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-: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"] ){
 
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-bottom-outro ) .window,
-:host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-outro ) .window,
+:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-center ){
+:host( .to-center ){
 
     justify-content: center;
 
@@ -344,14 +337,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-center ){
+
+    :host( .to-center ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-center ) .window,
-:host ( .animate-center ) > ::slotted ( [slot=window] ){
+:host( .to-center ) .window,
+:host( .to-center ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -364,33 +358,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-center-intro ) .window,
-:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-intro ) .window,
+:host( .to-center-intro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-: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"] ){
 
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-center-outro ) .window,
-:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-outro ) .window,
+:host( .to-center-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-left ){
+:host( .to-left ){
 
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window,
-:host ( .animate-left ) > ::slotted ( [slot=window] ){
+:host( .to-left ) .window,
+:host( .to-left ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -403,52 +397,52 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window,
-:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-intro ) .window,
+:host( .to-left-intro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
-: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"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-: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{
 
     opacity: 1;
 
   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"] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
-:host ( .animate-left-outro ) .close {
+:host( .to-left-outro ) .close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close{
+:host( .to-left ) .close{
 
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ){
+:host( .to-right ){
 
     justify-content: flex-end;
 }
 
-:host ( .animate-right ) .window,
-:host ( .animate-right ) > ::slotted ( [slot=window] ){
+:host( .to-right ) .window,
+:host( .to-right ) > ::slotted([slot="window"]){
 
     opacity: 0;
 
@@ -461,46 +455,46 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-right-intro ) .window,
-:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-intro ) .window,
+:host( .to-right-intro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(100% + 50px));
   }
 
-: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"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-: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{
 
     opacity: 1;
 
   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"] ) {
     transform: translateX(calc(100% + 50px));
   }
 
-:host ( .animate-right-outro ) .close {
+:host( .to-right-outro ) .close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close{
+:host( .to-right ) .close{
 
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-top ){
+:host( .to-top ){
 
     justify-content: center;
 
@@ -509,14 +503,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-top ){
+
+    :host( .to-top ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-top ) .window,
-:host ( .animate-top ) > ::slotted ( [slot=window] ){
+:host( .to-top ) .window,
+:host( .to-top ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -529,31 +524,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-top-intro ) .window,
-:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-intro ) .window,
+:host( .to-top-intro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-: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"] ){
 
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-top-outro ) .window,
-:host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-outro ) .window,
+:host( .to-top-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
 @media (max-width: 767px){
 
+
     .mobile\:w-12{
 
         width: 3rem;
     }
 }
 
+

package/dist/collection/components/mds-modal/mds-modal.js

@@ -4,21 +4,24 @@ import { Host, h } from '@stencil/core';
 import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsModal {
   constructor() {
-    this.window = null;
-    this.top = null;
-    this.bottom = null;
+    this.window = false;
+    this.top = false;
+    this.bottom = false;
     this.animationState = 'intro';
     this.km = new KeyboardManager();
     this.componentDidLoad = () => {
+      var _a;
       this.km.addElement(this.host, 'host');
-      this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close');
+      const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
+      if (close)
+        this.km.addElement(close, 'close');
       this.km.attachEscapeBehavior(() => this.closeEvent.emit());
       this.km.attachClickBehavior('close');
     };
-    this.animationName = (customState = null, customPosition = null) => {
-      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    this.animationName = (customState = '', customPosition = '') => {
+      return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
     };
-    this.closeModal = (e = null) => {
+    this.closeModal = (e) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
         return;
@@ -29,23 +32,20 @@ export class MdsModal {
       }
     };
     this.stateOpened = undefined;
-    this.opened = undefined;
-    this.position = null;
+    this.opened = false;
+    this.position = 'center';
   }
   componentWillLoad() {
+    var _a;
     this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
     this.top = this.host.querySelector('[slot="top"]') !== null;
     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');
+      (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
     }
   }
   componentWillRender() {
@@ -66,7 +66,7 @@ export class MdsModal {
   }
   positionChange(_newValue, oldValue) {
     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));
   }
@@ -82,12 +82,10 @@ export class MdsModal {
   }
   render() {
     return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
-      ?
-        h("slot", { name: "window" })
-      :
-        h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
-          h("slot", { name: "top" }), h("slot", null), this.bottom &&
-          h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
+      ? h("slot", { name: "window" })
+      : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
+        h("slot", { name: "top" }), h("slot", null), this.bottom &&
+        h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
   }
   static get is() { return "mds-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -112,20 +110,21 @@ export class MdsModal {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies if the modal is opened or not"
         },
         "attribute": "opened",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "position": {
         "type": "string",
         "mutable": true,
         "complexType": {
           "original": "ModalPositionType",
-          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
           "references": {
             "ModalPositionType": {
               "location": "import",
@@ -141,7 +140,7 @@ export class MdsModal {
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "null"
+        "defaultValue": "'center'"
       }
     };
   }

package/dist/collection/components/mds-modal/test/mds-modal.stories.js

@@ -25,8 +25,8 @@ const CustomTemplate = args => h("mds-modal", Object.assign({}, args), h("mds-ba
 const AriaTemplate = () => {
   // Click not working with reader
   const [opened, setOpened] = useState(false);
-  window.addEventListener('close', () => { setOpened(false); });
-  return h("div", null, h("mds-button", { onClick: () => setOpened(true) }, "Apri modale"), h("mds-modal", { opened: opened, onClose: () => setOpened(false) }, h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("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\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "dark", tone: "quiet", onClick: () => setOpened(false) }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm"))));
+  window.addEventListener('mdsModalClose', () => { setOpened(false); });
+  return h("div", null, h("mds-button", { onClick: () => setOpened(true) }, "Apri modale"), h("mds-modal", { opened: opened, onMdsModalClose: () => setOpened(false) }, h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("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\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "dark", tone: "quiet", onClick: () => setOpened(false) }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm"))));
 };
 export const Default = Template.bind({});
 export const CustomWindow = CustomTemplate.bind({});