@maggioli-design-system/mds-modal 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ced1b9b6.js');
+
+/*
+ Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/mds-modal.cjs.entry.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ced1b9b6.js');
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);text-shadow:0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}";
+
+let MdsModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    this.window = null;
+    this.top = null;
+    this.bottom = null;
+    this.animationState = 'intro';
+    /**
+     * Specifies the animation position of the modal window
+     */
+    this.position = null;
+    this.animationName = (customState = null, customPosition = null) => {
+      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    };
+    this.closeModal = (e = null) => {
+      this.opened = e.target !== e.currentTarget;
+      if (!this.opened) {
+        this.close.emit();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
+    this.top = this.hostElement.querySelector('[slot="top"]') !== null;
+    this.window = this.hostElement.querySelector('[slot="window"]') !== null;
+    if (this.window && this.position === null) {
+      this.position = 'center';
+    }
+    if (this.position === null) {
+      this.position = 'right';
+    }
+  }
+  componentWillRender() {
+    this.animationState = this.opened ? 'intro' : 'outro';
+    this.hostElement.classList.add(this.animationName());
+  }
+  componentDidRender() {
+    this.animationDeelay = window.setTimeout(() => {
+      this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
+      this.hostElement.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
+      this.hostElement.classList.add(this.animationName(this.animationState));
+      window.clearTimeout(this.animationDeelay);
+    }, 500);
+  }
+  positionChange(newValue, oldValue) {
+    window.clearTimeout(this.animationDeelay);
+    this.hostElement.classList.remove(this.animationName(null, oldValue));
+    this.hostElement.classList.remove(this.animationName('intro', oldValue));
+    this.hostElement.classList.remove(this.animationName('outro', oldValue));
+  }
+  openedChange() {
+    window.clearTimeout(this.animationDeelay);
+  }
+  onCloseListener() {
+    this.opened = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+      ?
+        index.h("slot", { name: "window" })
+      :
+        index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
+          index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
+          index.h("slot", { name: "bottom" })), !this.window && index.h("mds-icon", { name: "close", class: "close" })));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["positionChange"],
+    "opened": ["openedChange"]
+  }; }
+};
+MdsModal.style = mdsModalCss;
+
+exports.mds_modal = MdsModal;

package/dist/cjs/mds-modal.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-ced1b9b6.js');
+
+/*
+ Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/mds-modal/mds-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.10.0",
+    "typescriptVersion": "4.3.5"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,215 @@
+
+
+  .animate-left, .animate-right {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 150ms;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+  .animate-right-intro,
+  .animate-right-outro {
+    transform: translateX(calc(100% + 50px));
+  }
+.border {
+    border-width: 1px;
+}
+.shadow {
+    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:host {
+    pointer-events: none;
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
+    --tw-bg-opacity: 0;
+    transition-duration: 700ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+
+  perspective: 600px;
+}
+
+:host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ) {
+    pointer-events: auto;
+    --tw-bg-opacity: 0.5;
+    transition-duration: 500ms;
+}
+
+.close {
+    position: absolute;
+    top: 0px;
+    height: 2.25rem;
+    width: 2.25rem;
+    transform-origin: center;
+    cursor: pointer;
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+    --tw-text-opacity: 1;
+    color: rgba(var(--adjust-tone-10), var(--tw-text-opacity));
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 150ms;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+    text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);
+
+  transform: translate(0, 24px) rotate(90deg);
+}
+
+.window {
+    display: grid;
+    height: 100%;
+    gap: 0px;
+    overflow: auto;
+
+  background-color: var(--window-background, rgb(var(--adjust-tone)));
+  box-shadow: var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  grid-template-rows: 1fr;
+
+  /* grid-template-rows: var(--grid-template-rows, auto 1fr auto); */
+  max-width: calc(100vw - 80px);
+}
+
+.window--top {
+  grid-template-rows: auto 1fr;
+}
+
+.window--bottom {
+  grid-template-rows: 1fr auto;
+}
+
+.window--top-bottom {
+  grid-template-rows: auto 1fr auto;
+}
+
+:host ( .animate-center ) {
+    justify-content: center;
+    padding: 2rem;
+}
+
+@media (max-width: 767px) {
+
+    :host ( .animate-center ) {
+        padding: 1rem;
+    }
+}
+
+:host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ) {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 150ms;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+:host ( .animate-center-intro ) .window, :host ( .animate-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] ) {
+
+    transform: rotateX(0) scale(1) translateY(0);
+
+    opacity: 1;
+  }
+
+:host ( .animate-center-outro ) .window, :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
+  }
+
+:host ( .animate-right ) {
+    justify-content: flex-end;
+}
+
+:host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ) {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 150ms;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+:host ( .animate-right-intro ) .window, :host ( .animate-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] ) {
+
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+
+:host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close {
+    opacity: 1;
+
+  transform: translate(24px, 24px) rotate(0);
+}
+
+:host ( .animate-right-outro ) .window, :host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+    transform: translateX(calc(100% + 50px));
+  }
+
+:host ( .animate-right-outro ) .close {
+  transform: translate(-24px, 24px) rotate(90deg);
+}
+
+:host ( .animate-right ) .close {
+    left: 0px;
+
+  transform: translate(-36px, 24px) rotate(-90deg);
+}
+
+:host ( .animate-left ) {
+    justify-content: flex-start;
+}
+
+:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
+    opacity: 0;
+    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-duration: 150ms;
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+:host ( .animate-left-intro ) .window, :host ( .animate-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] ) {
+
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+
+:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
+    opacity: 1;
+
+  transform: translate(-24px, 24px) rotate(0);
+}
+
+:host ( .animate-left-outro ) .window, :host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+    transform: translateX(calc(-100% - 50px));
+  }
+
+:host ( .animate-left-outro ) .close {
+  transform: translate(24px, 24px) rotate(-90deg);
+}
+
+:host ( .animate-left ) .close {
+    right: 0px;
+
+  transform: translate(36px, 24px) rotate(90deg);
+}
+

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

@@ -0,0 +1,153 @@
+import { Component, Element, Event, Host, h, Listen, Prop, Watch } from '@stencil/core';
+import clsx from 'clsx';
+export class MdsModal {
+  constructor() {
+    this.window = null;
+    this.top = null;
+    this.bottom = null;
+    this.animationState = 'intro';
+    /**
+     * Specifies the animation position of the modal window
+     */
+    this.position = null;
+    this.animationName = (customState = null, customPosition = null) => {
+      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    };
+    this.closeModal = (e = null) => {
+      this.opened = e.target !== e.currentTarget;
+      if (!this.opened) {
+        this.close.emit();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
+    this.top = this.hostElement.querySelector('[slot="top"]') !== null;
+    this.window = this.hostElement.querySelector('[slot="window"]') !== null;
+    if (this.window && this.position === null) {
+      this.position = 'center';
+    }
+    if (this.position === null) {
+      this.position = 'right';
+    }
+  }
+  componentWillRender() {
+    this.animationState = this.opened ? 'intro' : 'outro';
+    this.hostElement.classList.add(this.animationName());
+  }
+  componentDidRender() {
+    this.animationDeelay = window.setTimeout(() => {
+      this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
+      this.hostElement.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
+      this.hostElement.classList.add(this.animationName(this.animationState));
+      window.clearTimeout(this.animationDeelay);
+    }, 500);
+  }
+  positionChange(newValue, oldValue) {
+    window.clearTimeout(this.animationDeelay);
+    this.hostElement.classList.remove(this.animationName(null, oldValue));
+    this.hostElement.classList.remove(this.animationName('intro', oldValue));
+    this.hostElement.classList.remove(this.animationName('outro', oldValue));
+  }
+  openedChange() {
+    window.clearTimeout(this.animationDeelay);
+  }
+  onCloseListener() {
+    this.opened = false;
+  }
+  render() {
+    return (h(Host, { class: clsx(this.opened && 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' : ''}`) },
+            this.top &&
+              h("slot", { name: "top" }),
+            h("slot", null),
+            this.bottom &&
+              h("slot", { name: "bottom" })),
+      !this.window && h("mds-icon", { name: "close", class: "close" })));
+  }
+  static get is() { return "mds-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-modal.css"]
+  }; }
+  static get properties() { return {
+    "opened": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies if the modal is opened or not"
+      },
+      "attribute": "opened",
+      "reflect": true
+    },
+    "position": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "ModalPositionType",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {
+          "ModalPositionType": {
+            "location": "import",
+            "path": "./meta/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the animation position of the modal window"
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "null"
+    }
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when a modal is closed"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "position",
+      "methodName": "positionChange"
+    }, {
+      "propName": "opened",
+      "methodName": "openedChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "close",
+      "method": "onCloseListener",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,6 @@
+const modalPositionDictionary = [
+  'center',
+  'left',
+  'right',
+];
+export { modalPositionDictionary, };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import faker from 'faker'
+import MdsModal from '@component/mds-modal/mds-modal'
+
+import { modalPositionDictionary } from '../meta/dictionary'
+
+export default {
+  title: 'UI / Modal',
+  component: MdsModal,
+  argTypes: {
+    opened: {
+      description: 'Specifies if the modal is opened or not',
+      type: { name: 'boolean', required: false },
+    },
+    position: {
+      control: { type: 'select' },
+      description: 'Specifies the animation position of the modal window',
+      options: modalPositionDictionary,
+      type: { name: 'string', required: false },
+    }
+  },
+}
+
+const buttonA = faker.hacker.verb()
+const buttonB = faker.hacker.verb()
+const text = faker.lorem.paragraphs(3)
+const firstName = faker.name.firstName(1)
+const lastName = faker.name.lastName(1)
+const fullName = `${firstName} ${lastName}`
+const email = faker.internet.email(firstName, lastName)
+
+const Template = args =>
+  <mds-modal {...args}>
+    <header slot="top" className="p-8 max-w-lg flex gap-4 items-center border-b border-adjust-tone-09">
+      <mds-img class="w-16" src="/logo-gruppo-maggioli-512w.webp"/>
+      <div className="text-adjust-tone-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 className="p-8 max-w-lg">
+      <mds-text>
+        { text }
+      </mds-text>
+    </div>
+    <footer slot="bottom" className="p-8 max-w-lg flex gap-4 text-adjust-tone-02 border-t border-adjust-tone-09">
+      <mds-author>
+        <mds-avatar slot="avatar" class="w-16 mobile:w-12" src="/avatar-01-200x200.jpeg"/>
+        <mds-text typography="h6" class="truncate min-w-0">{ fullName }</mds-text>
+        <mds-text typography="caption" class="text-adjust-tone-04 truncate min-w-0">{ email }</mds-text>
+      </mds-author>
+      <mds-button icon="menu-more" class="ml-auto bg-transparent text-adjust-tone-02 p-4 border border-adjust-tone-09 rounded-full"/>
+    </footer>
+  </mds-modal>
+
+const CustomTemplate = args =>
+  <mds-modal {...args}>
+    <mds-banner slot="window" class="max-w-xl" deletable headline="Action required">
+      <mds-text typography="detail">
+        { text }
+      </mds-text>
+      <mds-button slot="actions" variant="primary" tone="quiet">Cancel</mds-button>
+      <mds-button slot="actions" variant="primary">Confirm</mds-button>
+    </mds-banner>
+  </mds-modal>
+
+export const Default = Template.bind({})
+export const CustomWindow = CustomTemplate.bind({})