@maggioli-design-system/mds-modal 1.0.0

package/dist/types/types/autocomplete.d.ts

@@ -0,0 +1,2 @@
+export declare type AutocompleteType = '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 declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/button.d.ts

@@ -0,0 +1,4 @@
+export declare type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export declare type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
+export declare type ButtonIconPositionType = 'left' | 'right';
+export declare type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/types/form-rel.d.ts

@@ -0,0 +1 @@
+export declare type FormRelType = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search';

package/dist/types/types/input-text-type.d.ts

@@ -0,0 +1 @@
+export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/input-value-type.d.ts

@@ -0,0 +1 @@
+export declare type InputValueType = null | number | string | undefined;

package/dist/types/types/loading.d.ts

@@ -0,0 +1 @@
+export declare type LoadingType = 'eager' | 'lazy';

package/dist/types/types/typography.d.ts

@@ -0,0 +1,4 @@
+export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph';
+export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph';
+export declare type TypographyMonoType = 'code' | 'hack';

package/dist/types/types/variant.d.ts

@@ -0,0 +1,10 @@
+export declare type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeVariantType = 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
+export declare type ThemeLuminanceVariantType = 'dark' | 'light';
+export declare type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
+export declare type ActionVariantType = 'primary' | 'dark' | 'light';
+export declare type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export declare type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
+export declare type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
+export declare type ToneMinimalVariantType = 'strong' | 'weak';

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,12 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  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;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm-es5/loader.js';

package/loader/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "mds-modal-loader",
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@maggioli-design-system/mds-modal",
+  "version": "1.0.0",
+  "description": "mds-modal is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/custom-elements/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/custom-elements/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/mds-modal/mds-modal.esm.js",
+  "files": [
+    "dist/",
+    "loader/",
+    "readme.md",
+    "src/",
+    "www/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs-readme"
+  },
+  "dependencies": {
+    "@maggioli-design-system/design-tokens": "^5.0.5",
+    "@maggioli-design-system/icons": "^1.29.0",
+    "@maggioli-design-system/identity": "^1.8.3",
+    "@maggioli-design-system/styles": "^4.0.2",
+    "@stencil/core": "^2.10.0",
+    "tailwindcss": "^2.2.19"
+},
+  "license": "MIT",
+  "author": {
+    "name": "Vittorio Vittori",
+    "email": "vittorio.vittori@maggioli.it",
+    "url": "http://vit.to"
+},
+  "contributors": [
+    {
+        "name": "Andrea Pruccoli",
+        "email": "andrea.pruccoli@maggioli.it",
+        "role": "Software Engineer"
+    },
+    {
+        "name": "Vittorio Vittori",
+        "email": "vittorio.vittori@maggioli.it",
+        "role": "UX UI Designer"
+    }
+]
+}

package/readme.md

@@ -0,0 +1,43 @@
+# mds-modal
+
+
+
+<!-- Auto Generated Below -->
+
+
+## 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 | `"center" \| "left" \| "right"` | `null`      |
+
+
+## Events
+
+| Event   | Description                  | Type                |
+| ------- | ---------------------------- | ------------------- |
+| `close` | Emits when a modal is closed | `CustomEvent<void>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [mds-header](../mds-header)
+
+### Depends on
+
+- [mds-icon](../mds-icon)
+
+### Graph
+```mermaid
+graph TD;
+  mds-modal --> mds-icon
+  mds-header --> mds-modal
+  style mds-modal fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Built with love @ **Maggioli Informatica / R&D Department**

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

@@ -0,0 +1,28 @@
+:host ( .animate-center ) {
+  @apply
+    justify-center
+    mobile:p-4
+    p-8;
+}
+
+:host ( .animate-center ) .window,
+:host ( .animate-center ) > ::slotted ( [slot=window] ) {
+  @apply animate-center;
+}
+
+:host ( .animate-center-intro ) .window,
+:host ( .animate-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] ) {
+  @apply animate-center-opened;
+}
+
+:host ( .animate-center-outro ) .window,
+:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+  @apply animate-center-outro;
+}

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

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

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

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

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

@@ -0,0 +1,127 @@
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .animate-center {
+    @apply
+      duration-500
+      ease-in-out-expo
+      opacity-0
+      transition-cosmetic;
+  }
+
+  .animate-center-intro {
+    transform: rotateX(-22deg) scale(0.5) translateY(40%);
+  }
+
+  .animate-center-opened {
+    @apply opacity-100;
+
+    transform: rotateX(0) scale(1) translateY(0);
+  }
+
+  .animate-center-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 {
+  @apply
+    bg-adjust-tone-01
+    bg-opacity-0
+    duration-700
+    ease-in-out-expo
+    fixed
+    flex
+    inset-0
+    items-center
+    justify-center
+    pointer-events-none;
+
+  perspective: 600px;
+}
+
+:host ( .animate-center-opened ),
+:host ( .animate-left-opened ),
+:host ( .animate-right-opened ) {
+  @apply
+    bg-opacity-50
+    duration-500
+    pointer-events-auto;
+}
+
+.close {
+  @apply
+    absolute
+    cursor-pointer
+    duration-500
+    ease-in-out-quart
+    h-9
+    opacity-0
+    origin-center
+    text-4xl
+    text-adjust-tone-10
+    text-shadow
+    top-0
+    transition-cosmetic
+    w-9;
+
+  transform: translate(0, 24px) rotate(90deg);
+}
+
+.window {
+  @apply
+    gap-0
+    grid
+    h-full
+    overflow-auto;
+
+  background-color: var(--window-background, theme('colors.adjust-tone'));
+  box-shadow: var(--window-shadow, theme('boxShadow.2xl'));
+  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;
+}
+
+@import './css/mds-modal-animate-center.css';
+@import './css/mds-modal-animate-right.css';
+@import './css/mds-modal-animate-left.css';

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

@@ -0,0 +1,114 @@
+import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop, Watch } from '@stencil/core'
+import clsx from 'clsx'
+import { ModalPositionType, ModalAnimationStateType } from './meta/types'
+@Component({
+  tag: 'mds-modal',
+  styleUrl: 'mds-modal.css',
+  shadow: true,
+})
+export class MdsModal {
+
+  private animationDeelay
+  private window: boolean = null
+  private top: boolean = null
+  private bottom: boolean = null
+  private animationState: ModalAnimationStateType = 'intro'
+  @Element() hostElement: HTMLMdsModalElement
+
+  /**
+   * Specifies if the modal is opened or not
+   */
+  @Prop({ reflect: true, mutable: true }) opened?: boolean
+
+  /**
+   * Specifies the animation position of the modal window
+   */
+  @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = null
+
+  componentWillLoad (): void {
+    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 (): void {
+    this.animationState = this.opened ? 'intro' : 'outro'
+    this.hostElement.classList.add(this.animationName())
+  }
+
+  componentDidRender (): void {
+    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)
+  }
+
+  private animationName = (customState: string = null, customPosition: string = null): string => {
+    return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`
+  }
+
+  @Watch('position')
+  positionChange (newValue: string, oldValue: string): void {
+    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))
+  }
+
+  @Watch('opened')
+  openedChange (): void {
+    window.clearTimeout(this.animationDeelay)
+  }
+
+  /**
+   * Emits when a modal is closed
+   */
+  @Event() close: EventEmitter<void>
+
+  private closeModal = (e:Event = null): void => {
+    this.opened = e.target !== e.currentTarget
+    if (!this.opened) {
+      this.close.emit()
+    }
+  }
+
+  @Listen('close')
+  onCloseListener (): void {
+    this.opened = false
+  }
+
+  render () {
+    return (
+      <Host class={clsx(
+        this.opened && 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' : ''}`)}>
+            { this.top &&
+              <slot name="top"/>
+            }
+            <slot/>
+            { this.bottom &&
+              <slot name="bottom"/>
+            }
+          </div>
+        }
+        { !this.window && <mds-icon name="close" class="close"/> }
+      </Host>
+    )
+  }
+
+}

package/src/components/mds-modal/meta/dictionary.ts

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

package/src/components/mds-modal/meta/types.ts

@@ -0,0 +1,8 @@
+export type ModalPositionType =
+  | 'center'
+  | 'left'
+  | 'right'
+
+export type ModalAnimationStateType =
+  | 'intro'
+  | 'outro'

package/src/components/mds-modal/readme.md

@@ -0,0 +1,25 @@
+# mds-modal
+
+
+
+<!-- Auto Generated Below -->
+
+
+## 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 | `"center" \| "left" \| "right"` | `null`      |
+
+
+## Events
+
+| Event   | Description                  | Type                |
+| ------- | ---------------------------- | ------------------- |
+| `close` | Emits when a modal is closed | `CustomEvent<void>` |
+
+
+----------------------------------------------
+
+Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-modal/test/mds-modal.e2e.ts

@@ -0,0 +1,69 @@
+import { newE2EPage } from '@stencil/core/testing'
+
+describe('mds-modal', () => {
+  it('renders', async () => {
+    const page = await newE2EPage()
+    await page.setContent('<mds-modal></mds-modal>')
+
+    const element = await page.find('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).toHaveClasses(['animate-right', 'hydrated', 'animate-right-intro'])
+    expect(element).toHaveClasses(['animate-right', 'hydrated'])
+
+    expect(element).toHaveAttribute('position')
+
+    expect(element.getAttribute('position')).toBe('right')
+
+    expect(element).not.toHaveAttribute('opened')
+
+    expect(element.shadowRoot).toEqualHtml(`
+      <div class="window">
+        <slot></slot>
+      </div>
+      <mds-icon class="close hydrated"></mds-icon>
+    `)
+  })
+
+  it('renders opened', async () => {
+    const page = await newE2EPage()
+    await page.setContent('<mds-modal opened="true"></mds-modal>')
+
+    const element = await page.find('mds-modal')
+
+    expect(element.getAttribute('opened')).not.toBe('false')
+
+    expect(element.shadowRoot).toEqualHtml(`
+      <div class="window">
+        <slot></slot>
+      </div>
+      <mds-icon class="close hydrated"></mds-icon>
+    `)
+  })
+
+  it('can be closed', async () => {
+    const page = await newE2EPage()
+    await page.setContent('<mds-modal opened="true"></mds-modal>')
+
+    const element = await page.find('mds-modal')
+
+    expect(element.getAttribute('opened')).not.toBe('false')
+
+    await page.mouse.click(window.innerWidth / 2, window.innerHeight / 2)
+
+    // const mdsIcon = element.shadowRoot.querySelector('mds-icon') as HTMLElement
+
+    // console.info('mdsIcon', mdsIcon)
+
+    // const closeButton = mdsIcon.shadowRoot.querySelector('i') as HTMLElement
+
+    // console.info('closeButton', closeButton)
+
+    // closeButton.click()
+
+    await page.waitForChanges()
+
+    expect(element).not.toHaveAttribute('opened')
+  })
+})

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

@@ -0,0 +1,19 @@
+import { newSpecPage } from '@stencil/core/testing'
+import { MdsModal } from '../mds-modal'
+
+describe('mds-modal', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MdsModal],
+      html: '<mds-modal></mds-modal>',
+    })
+    // expect(page.root).toEqualHtml(`
+    //   <mds-modal>
+    //     <mock:shadow-root>
+    //       <slot></slot>
+    //     </mock:shadow-root>
+    //   </mds-modal>
+    // `)
+    expect(true).toBe(true)
+  })
+})