@mozaic-ds/web-components 1.2.0 → 1.3.0

package/dist/components/phonenumber/PhoneNumber.spec.js

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import PhoneNumber from './PhoneNumber.svelte';
+describe('m-phone-number component', () => {
+    const baseProps = {
+        id: 'phone-id',
+        value: '',
+        defaultcountry: 'FR',
+    };
+    it('renders component root and input', () => {
+        const { container } = render(PhoneNumber, { props: baseProps });
+        const root = container.querySelector('#mc-phone-number-input');
+        const input = container.querySelector('input[type="tel"]');
+        expect(root).toBeTruthy();
+        expect(input).toBeTruthy();
+        expect(input?.id).toBe('phone-id');
+    });
+    it('renders prefix when prefix=true', () => {
+        const { container } = render(PhoneNumber, { props: { ...baseProps, prefix: true } });
+        const prefix = container.querySelector('.mc-phone-number-input__country-code');
+        expect(prefix).toBeTruthy();
+    });
+    it('hides prefix when prefix=false', () => {
+        const { container } = render(PhoneNumber, { props: { ...baseProps, prefix: false } });
+        const prefix = container.querySelector('.mc-phone-number-input__country-code');
+        expect(prefix).toBeFalsy();
+    });
+    it('renders flag selector when flag=true', () => {
+        const { container } = render(PhoneNumber, { props: { ...baseProps, flag: true } });
+        const selectWrapper = container.querySelector('.mc-phone-number-input__select-wrapper');
+        expect(selectWrapper).toBeTruthy();
+        expect(selectWrapper?.classList.contains('mc-phone-number-input__select-wrapper--hidden')).toBe(false);
+    });
+    it('hides flag selector when flag=false', () => {
+        const { container } = render(PhoneNumber, { props: { ...baseProps, flag: false } });
+        const selectWrapper = container.querySelector('.mc-phone-number-input__select-wrapper');
+        expect(selectWrapper?.classList.contains('mc-phone-number-input__select-wrapper--hidden')).toBe(true);
+    });
+    it('applies disabled and readonly props to input', () => {
+        const { container } = render(PhoneNumber, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+    });
+    it('updates internal value when typing', async () => {
+        const { container } = render(PhoneNumber, { props: baseProps });
+        const input = container.querySelector('input[type="tel"]');
+        await fireEvent.input(input, { target: { value: '012345' } });
+        expect(input.value).toBe('012345');
+    });
+    it('sanitizes invalid characters', async () => {
+        const { container } = render(PhoneNumber, { props: baseProps });
+        const input = container.querySelector('input[type="tel"]');
+        await fireEvent.input(input, { target: { value: '12a3#4' } });
+        expect(input.value).toBe('1234');
+    });
+    it('emits valid event with true when value becomes valid', async () => {
+        const { container } = render(PhoneNumber, {
+            props: { id: 'phone', defaultcountry: 'FR' },
+        });
+        const root = container.querySelector('#mc-phone-number-input');
+        const input = container.querySelector('input[type="tel"]');
+        const validHandler = vi.fn();
+        root.addEventListener('valid', validHandler);
+        await fireEvent.input(input, { target: { value: '0601020304' } });
+        expect(validHandler).toHaveBeenCalledOnce();
+        expect(validHandler.mock.calls[0][0].detail).toBe(true);
+    });
+    it('applies is-invalid class when isinvalid=true', () => {
+        const { container } = render(PhoneNumber, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const wrapper = container.querySelector('.mc-phone-number-input__input');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+    });
+    it('renders dynamic placeholder when no placeholder is passed', () => {
+        const { container } = render(PhoneNumber, {
+            props: { ...baseProps, placeholder: '' },
+        });
+        const input = container.querySelector('input[type="tel"]');
+        expect(input.placeholder.length).toBeGreaterThan(0);
+    });
+    it('renders provided placeholder over dynamic one', () => {
+        const { container } = render(PhoneNumber, {
+            props: { ...baseProps, placeholder: 'Enter your phone' },
+        });
+        const input = container.querySelector('input[type="tel"]');
+        expect(input.placeholder).toBe('Enter your phone');
+    });
+    it('renders only allowed countries when countrycodes is provided', () => {
+        const { container } = render(PhoneNumber, {
+            props: { ...baseProps, countrycodes: ['FR', 'US'] },
+        });
+        const options = Array.from(container.querySelectorAll('select option'))
+            .map((opt) => opt.getAttribute('value'))
+            .filter(Boolean);
+        expect(options).toContain('FR');
+        expect(options).toContain('US');
+        expect(options.length).toBe(2);
+    });
+});

package/dist/components/phonenumber/PhoneNumber.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './PhoneNumber.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const IsInvalid: Story;
+export declare const NoPrefix: Story;
+export declare const NoFlag: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const LimitedCountries: Story;
+//# sourceMappingURL=PhoneNumber.stories.d.ts.map

package/dist/components/phonenumber/PhoneNumber.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}

package/dist/components/phonenumber/PhoneNumber.stories.js

@@ -0,0 +1,116 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './PhoneNumber.svelte';
+const meta = {
+    title: 'Form Elements/Phone Number',
+    component: 'm-phone-number',
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: ['s', 'm'],
+        },
+        valid: {
+            control: false,
+        },
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        const onValid = action('valid');
+        return html `
+      <m-phone-number
+        id=${ifDefined(args.id)}
+        value=${ifDefined(args.value)}
+        defaultcountry=${ifDefined(args.defaultcountry)}
+        placeholder=${ifDefined(args.placeholder)}
+        size=${ifDefined(args.size)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        readonly=${ifDefined(args.readonly)}
+        .prefix=${args.prefix}
+        .flag=${ifDefined(args.flag)}
+        locale=${ifDefined(args.locale)}
+        .countrycodes=${ifDefined(args.countrycodes)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+        @valid=${(event) => {
+            onValid(event.detail);
+        }}
+      ></m-phone-number>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Size = {
+    args: {
+        size: 's',
+    },
+};
+export const IsInvalid = {
+    args: {
+        isinvalid: true,
+        value: '1912',
+    },
+};
+export const NoPrefix = {
+    args: {
+        prefix: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<m-phone-number prefix="false"></m-phone-number>`,
+            },
+        },
+    },
+};
+export const NoFlag = {
+    args: {
+        flag: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<m-phone-number flag="false"></m-phone-number>`,
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        value: '0103948374',
+        disabled: true,
+    },
+};
+export const ReadOnly = {
+    args: {
+        value: '0103948374',
+        readonly: true,
+    },
+};
+export const LimitedCountries = {
+    args: {
+        countrycodes: ['FR', 'US', 'GB', 'DE', 'ES', 'IT'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Limit the country selector to only specific countries instead of showing all available countries.',
+            },
+        },
+    },
+};