@maggioli-design-system/mds-modal 1.0.0

package/dist/collection/dictionary/autocomplete.js

@@ -0,0 +1,59 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+];
+export { autoCompleteDictionary, };

package/dist/collection/dictionary/button.js

@@ -0,0 +1,26 @@
+const buttonVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+];
+const buttonToneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const buttonSizeDictionary = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+];
+const buttonIconPositionDictionary = [
+  'left',
+  'right',
+];
+export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };

package/dist/collection/dictionary/color.js

@@ -0,0 +1,19 @@
+const colorLabelDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const colorStatusDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+export { colorLabelDictionary, colorStatusDictionary, };

package/dist/collection/dictionary/icon.js

@@ -0,0 +1,3 @@
+import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
+const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+export { iconsDictionary, };

package/dist/collection/dictionary/input-text-type.js

@@ -0,0 +1,13 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+];
+export { inputTextTypeDictionary, };

package/dist/collection/dictionary/loading.js

@@ -0,0 +1,5 @@
+const loadingDictionary = [
+  'eager',
+  'lazy',
+];
+export { loadingDictionary, };

package/dist/collection/dictionary/typography.js

@@ -0,0 +1,37 @@
+const typographyDictionary = [
+  'action',
+  'caption',
+  'code',
+  'detail',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hack',
+  'label',
+  'option',
+  'paragraph',
+];
+const typographyMonoDictionary = [
+  'code',
+  'hack',
+];
+const typographyPrimaryDictionary = [
+  'action',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+];
+const typographySecondaryDictionary = [
+  'caption',
+  'detail',
+  'label',
+  'option',
+  'paragraph',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };

package/dist/collection/dictionary/variant.js

@@ -0,0 +1,64 @@
+const themeVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'success',
+  'warning',
+];
+const themeLuminanceVariantDictionary = [
+  'dark',
+  'light',
+];
+const themeStatusVariantDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+const themeFullVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'dark',
+  'error',
+  'green',
+  'info',
+  'light',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'success',
+  'violet',
+  'warning',
+  'yellow',
+];
+const themeLabelVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const toneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const toneSimpleVariantDictionary = [
+  'strong',
+  'weak',
+  'quiet',
+];
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+];
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/collection/fixtures/cities.js

@@ -0,0 +1,110 @@
+const citiesDictionary = [
+  'Agrigento',
+  'Alessandria',
+  'Ancona',
+  'Aosta',
+  'Arezzo',
+  'Ascoli Piceno',
+  'Asti',
+  'Avellino',
+  'Bari',
+  'Barletta-Andria-Trani',
+  'Belluno',
+  'Benevento',
+  'Bergamo',
+  'Biella',
+  'Bologna',
+  'Bolzano',
+  'Brescia',
+  'Brindisi',
+  'Cagliari',
+  'Caltanissetta',
+  'Campobasso',
+  'Caserta',
+  'Catania',
+  'Catanzaro',
+  'Chieti',
+  'Como',
+  'Cosenza',
+  'Cremona',
+  'Crotone',
+  'Cuneo',
+  'Enna',
+  'Fermo',
+  'Ferrara',
+  'Firenze',
+  'Foggia',
+  'Forlì-Cesena',
+  'Frosinone',
+  'Genova',
+  'Gorizia',
+  'Grosseto',
+  'Imperia',
+  'Isernia',
+  'La Spezia',
+  'L\'Aquila',
+  'Latina',
+  'Lecce',
+  'Lecco',
+  'Livorno',
+  'Lodi',
+  'Lucca',
+  'Macerata',
+  'Mantova',
+  'Massa-Carrara',
+  'Matera',
+  'Messina',
+  'Milano',
+  'Modena',
+  'Monza e della Brianza',
+  'Napoli',
+  'Novara',
+  'Nuoro',
+  'Oristano',
+  'Padova',
+  'Palermo',
+  'Parma',
+  'Pavia',
+  'Perugia',
+  'Pesaro e Urbino',
+  'Pescara',
+  'Piacenza',
+  'Pisa',
+  'Pistoia',
+  'Pordenone',
+  'Potenza',
+  'Prato',
+  'Ragusa',
+  'Ravenna',
+  'Reggio Calabria',
+  'Reggio Emilia',
+  'Rieti',
+  'Rimini',
+  'Roma',
+  'Rovigo',
+  'Salerno',
+  'Sassari',
+  'Savona',
+  'Siena',
+  'Siracusa',
+  'Sondrio',
+  'Sud Sardegna',
+  'Taranto',
+  'Teramo',
+  'Terni',
+  'Torino',
+  'Trapani',
+  'Trento',
+  'Treviso',
+  'Trieste',
+  'Udine',
+  'Varese',
+  'Venezia',
+  'Verbano-Cusio-Ossola',
+  'Vercelli',
+  'Verona',
+  'Vibo Valentia',
+  'Vicenza',
+  'Viterbo',
+];
+export { citiesDictionary, };

package/dist/collection/interface/input-value.js

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

package/dist/collection/types/autocomplete.js

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

package/dist/collection/types/button.js

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

package/dist/collection/types/form-rel.js

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

package/dist/collection/types/input-text-type.js

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

package/dist/collection/types/input-value-type.js

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

package/dist/collection/types/loading.js

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

package/dist/collection/types/typography.js

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

package/dist/collection/types/variant.js

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

package/dist/custom-elements/index.d.ts

@@ -0,0 +1,45 @@
+/* MdsModal custom elements bundle */
+
+import type { Components, JSX } from "../types/components";
+
+interface MdsModal extends Components.MdsModal, HTMLElement {}
+export const MdsModal: {
+  prototype: MdsModal;
+  new (): MdsModal;
+};
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source. 
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. The component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types/components';

package/dist/custom-elements/index.js

@@ -0,0 +1,136 @@
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+
+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$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = 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 (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" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "position": ["positionChange"],
+    "opened": ["openedChange"]
+  }; }
+  static get style() { return mdsModalCss; }
+};
+
+const MdsModal = /*@__PURE__*/proxyCustomElement(MdsModal$1, [1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]);
+const defineCustomElements = (opts) => {
+  if (typeof customElements !== 'undefined') {
+    [
+      MdsModal
+    ].forEach(cmp => {
+      if (!customElements.get(cmp.is)) {
+        customElements.define(cmp.is, cmp, opts);
+      }
+    });
+  }
+};
+
+export { MdsModal, defineCustomElements };