@maggioli-design-system/mds-modal 4.7.1 → 4.7.3

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

@@ -1,17 +1,17 @@
 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).toHaveClass('to-right');
-    expect(element).toHaveAttribute('hydrated');
-    expect(element).toHaveAttribute('position');
-    expect(element.getAttribute('position')).toBe('right');
-    expect(element).not.toHaveAttribute('opened');
-    expect(element.shadowRoot).toEqualHtml(`
+    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).toHaveClass('to-right');
+        expect(element).toHaveAttribute('hydrated');
+        expect(element).toHaveAttribute('position');
+        expect(element.getAttribute('position')).toBe('right');
+        expect(element).not.toHaveAttribute('opened');
+        expect(element.shadowRoot).toEqualHtml(`
       <div class="window" part="window" role="dialog">
         <slot></slot>
       </div>
@@ -21,13 +21,13 @@ describe('mds-modal', () => {
         </svg>
       </i>
     `);
-  });
-  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(`
+    });
+    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" part="window" role="dialog">
         <slot></slot>
       </div>
@@ -37,19 +37,19 @@ describe('mds-modal', () => {
         </svg>
       </i>
     `);
-  });
-  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.toHaveClass('opened');
-  });
+    });
+    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.toHaveClass('opened');
+    });
 });

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

@@ -2,19 +2,19 @@ import { h } from "@stencil/core";
 import { useState } from "react";
 import { modalPositionDictionary } from "../meta/dictionary";
 export default {
-  title: 'UI / Modal',
-  argTypes: {
-    opened: {
-      description: 'Specifies if the modal is opened or not',
-      type: { name: 'boolean', required: false },
+    title: 'UI / Modal',
+    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 },
+        },
     },
-    position: {
-      control: { type: 'select' },
-      description: 'Specifies the animation position of the modal window',
-      options: modalPositionDictionary,
-      type: { name: 'string', required: false },
-    },
-  },
 };
 const firstName = 'Mario';
 const lastName = 'Rossi';
@@ -23,10 +23,10 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-8 max-w-lg flex gap-4 items-center border-b border-tone-neutral-09" }, h("mds-img", { class: "w-16", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-8 max-w-lg" }, h("mds-text", null, "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("footer", { slot: "bottom", class: "p-8 max-w-lg flex gap-4 text-tone-neutral-02 border-t border-tone-neutral-09" }, h("mds-author", null, h("mds-avatar", { slot: "avatar", class: "w-16 mobile:w-12", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6", class: "truncate min-w-0" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04 truncate min-w-0" }, email)), h("mds-button", { icon: "mdi/dots-vertical", class: "ml-auto bg-transparent text-tone-neutral-02 p-4 border border-tone-neutral-09 rounded-full" })));
 const CustomTemplate = args => h("mds-modal", Object.assign({}, args), 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: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
 const AriaTemplate = () => {
-  // Click not working with reader
-  const [opened, setOpened] = useState(false);
-  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"))));
+    // Click not working with reader
+    const [opened, setOpened] = useState(false);
+    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({});

package/dist/collection/dictionary/autocomplete.js

@@ -1,59 +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',
+    '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

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

package/dist/collection/dictionary/color.js

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

package/dist/collection/dictionary/floating-ui.js

@@ -1,19 +1,19 @@
 const floatingUIPlacementDictionary = [
-  'bottom',
-  'bottom-end',
-  'bottom-start',
-  'left',
-  'left-end',
-  'left-start',
-  'right',
-  'right-end',
-  'right-start',
-  'top',
-  'top-end',
-  'top-start',
+    'bottom',
+    'bottom-end',
+    'bottom-start',
+    'left',
+    'left-end',
+    'left-start',
+    'right',
+    'right-end',
+    'right-start',
+    'top',
+    'top-end',
+    'top-start',
 ];
 const floatingUIStrategyDictionary = [
-  'absolute',
-  'fixed',
+    'absolute',
+    'fixed',
 ];
 export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };

package/dist/collection/dictionary/input.js

@@ -1,21 +1,37 @@
 const inputTextTypeDictionary = [
-  'date',
-  'email',
-  'number',
-  'password',
-  'search',
-  'tel',
-  'text',
-  'textarea',
-  'time',
-  'url',
+    'date',
+    'email',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'textarea',
+    'time',
+    'url',
+];
+const inputFieldTypeDictionary = [
+    'date',
+    'email',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'textarea',
+    'time',
+    'url',
+    'cc',
+    'cf',
+    'isbn',
+    'piva',
 ];
 const inputControlsLayoutDictionary = [
-  'horizontal',
-  'vertical',
+    'horizontal',
+    'vertical',
 ];
 const inputControlsIconDictionary = [
-  'arrow',
-  'arithmetic',
+    'arrow',
+    'arithmetic',
 ];
-export { inputControlsIconDictionary, inputControlsLayoutDictionary, inputTextTypeDictionary, };
+export { inputControlsIconDictionary, inputControlsLayoutDictionary, inputTextTypeDictionary, inputFieldTypeDictionary, };

package/dist/collection/dictionary/loading.js

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

package/dist/collection/dictionary/typography.js

@@ -1,67 +1,67 @@
 const typographyDictionary = [
-  'action',
-  'caption',
-  'snippet',
-  'detail',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'hack',
-  'label',
-  'option',
-  'paragraph',
-  'tip',
+    'action',
+    'caption',
+    'snippet',
+    'detail',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hack',
+    'label',
+    'option',
+    'paragraph',
+    'tip',
 ];
 const typographyVariationsDictionary = [
-  'title',
-  'info',
-  'read',
-  'code',
+    'title',
+    'info',
+    'read',
+    'code',
 ];
 const typographyReadingVariationsDictionary = [
-  'info',
-  'read',
+    'info',
+    'read',
 ];
 const typographyMonoDictionary = [
-  'snippet',
-  'hack',
+    'snippet',
+    'hack',
 ];
 const typographyTitleDictionary = [
-  'action',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
+    'action',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
 ];
 const typographyInfoDictionary = [
-  'caption',
-  'detail',
-  'label',
-  'option',
-  'paragraph',
-  'tip',
+    'caption',
+    'detail',
+    'label',
+    'option',
+    'paragraph',
+    'tip',
 ];
 const typographyReadDictionary = [
-  'caption',
-  'detail',
-  'paragraph',
+    'caption',
+    'detail',
+    'paragraph',
 ];
 const typographySmallerDictionary = [
-  'option',
-  'tip',
+    'option',
+    'tip',
 ];
 const typographyTooltipDictionary = [
-  'caption',
-  'detail',
-  'tip',
+    'caption',
+    'detail',
+    'tip',
 ];
 const typographyInputDictionary = [
-  'snippet',
-  'detail',
+    'snippet',
+    'detail',
 ];
 export { typographyDictionary, typographyInfoDictionary, typographyInputDictionary, typographyMonoDictionary, typographyReadDictionary, typographyReadingVariationsDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };