@mozaic-ds/web-components 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/stories/select/Select.stories.js

@@ -0,0 +1,88 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, expect } from '@storybook/test';
+export default {
+    title: 'Form Elements/Select',
+    argTypes: {
+        placeholder: {
+            description: 'Specify the select placeholder',
+            control: 'text',
+        },
+        name: {
+            description: 'Specify the name attribut for the select element',
+            control: 'text',
+            type: 'string',
+        },
+        options: {
+            description: 'Specify the select options as an array of objects. <b />```{ id?: string; text: string; value: string | number; disabled?: boolean; }[]```',
+            control: 'object',
+        },
+        size: {
+            description: 'Specify the select size',
+            control: { type: 'radio' },
+            options: ['s', 'm'],
+        },
+        isinvalid: {
+            description: 'Specify whether the select is invalid',
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            description: 'Specify whether the select is disabled',
+            control: { type: 'boolean' },
+        },
+        valueselected: {
+            description: 'Specify the selected option of the select',
+            control: { type: 'text' },
+        },
+    },
+    parameters: {
+        badges: [BADGE.NEEDS_REVISION],
+    },
+};
+const opts = [
+    { text: 'Option 1', value: 'option1' },
+    { text: 'Option 2', value: 'option2', disabled: true },
+    { text: 'Option 3', value: 'option3' },
+];
+const Template = (args) => {
+    const MSelect = document.createElement('m-select');
+    MSelect.setAttribute('placeholder', args.placeholder || 'Primary');
+    MSelect.setAttribute('valueselected', args.valueselected || '');
+    if (args.options)
+        MSelect.setAttribute('options', JSON.stringify(args.options));
+    if (args.size)
+        MSelect.setAttribute('size', args.size);
+    if (args.isinvalid)
+        MSelect.setAttribute('isinvalid', 'true');
+    if (args.disabled)
+        MSelect.setAttribute('disabled', 'true');
+    return MSelect;
+};
+export const Default = Template.bind({});
+Default.args = { options: opts };
+Default.play = async ({ canvasElement }) => {
+    const select = canvasElement.querySelector('m-select');
+    const input = select === null || select === void 0 ? void 0 : select.querySelector('select');
+    expect(select).not.toBeNull();
+    await userEvent.selectOptions(input, 'option1');
+    expect(input).toHaveValue('option1');
+};
+export const Small = Template.bind({});
+Small.args = { size: 's', options: opts };
+Small.play = async ({ canvasElement }) => {
+    const select = canvasElement.querySelector('m-select');
+    expect(select).toHaveAttribute('size', 's');
+};
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true, options: opts };
+Disabled.play = async ({ canvasElement }) => {
+    const select = canvasElement.querySelector('m-select');
+    const input = select === null || select === void 0 ? void 0 : select.querySelector('select');
+    expect(input).toBeDisabled();
+};
+export const WithValue = Template.bind({});
+WithValue.args = { valueselected: 'option3', options: opts };
+WithValue.play = async ({ canvasElement }) => {
+    const select = canvasElement.querySelector('m-select');
+    const input = select === null || select === void 0 ? void 0 : select.querySelector('select');
+    expect(input).toHaveValue('option3');
+};

package/dist/stories/status-badge/StatusBadge.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn, Meta } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Warning: StoryFn;
+export declare const Danger: StoryFn;
+export declare const Success: StoryFn;
+//# sourceMappingURL=StatusBadge.stories.d.ts.map

package/dist/stories/status-badge/StatusBadge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-badge/StatusBadge.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBA0BhD,IAAI;AAhBT,wBAgBU;AAYV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAOxC,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/status-badge/StatusBadge.stories.js

@@ -0,0 +1,53 @@
+import { action } from '@storybook/addon-actions';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, within, expect } from '@storybook/test';
+export default {
+    title: 'Indicators/Status Badge',
+    argTypes: {
+        label: {
+            description: 'Specify the badge label',
+            control: 'text',
+        },
+        style: {
+            description: 'Specify the badge type',
+            control: { type: 'radio' },
+            options: ['neutral', 'warning', 'danger', 'success', 'info'],
+        },
+    },
+    parameters: {
+        badges: [BADGE.STABLE],
+    },
+};
+const Template = (args) => {
+    const primary = document.createElement('m-status-badge');
+    const label = document.createElement('span');
+    label.innerText = 'Status';
+    primary.appendChild(label);
+    if (args.style)
+        primary.setAttribute('style', args.style);
+    return primary;
+};
+export const Default = Template.bind({});
+Default.args = {};
+Default.play = async ({ canvasElement }) => {
+    const badge = within(canvasElement).getByText('Status');
+    expect(badge).not.toBeNull();
+};
+export const Warning = Template.bind({});
+Warning.args = { label: 'Warning', style: 'warning' };
+Warning.play = async ({ canvasElement }) => {
+    const badge = canvasElement.querySelector('m-status-badge');
+    expect(badge).toHaveAttribute('style', 'warning');
+};
+export const Danger = Template.bind({});
+Danger.args = { label: 'Danger', style: 'danger' };
+Danger.play = async ({ canvasElement }) => {
+    const badge = canvasElement.querySelector('m-status-badge');
+    expect(badge).toHaveAttribute('style', 'danger');
+};
+export const Success = Template.bind({});
+Success.args = { label: 'Success', style: 'success' };
+Success.play = async ({ canvasElement }) => {
+    const badge = canvasElement.querySelector('m-status-badge');
+    expect(badge).toHaveAttribute('style', 'success');
+};

package/dist/stories/status-dot/StatusDot.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryFn, Meta } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Warning: StoryFn;
+export declare const Danger: StoryFn;
+export declare const Success: StoryFn;
+export declare const Large: StoryFn;
+//# sourceMappingURL=StatusDot.stories.d.ts.map

package/dist/stories/status-dot/StatusDot.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-dot/StatusDot.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBA2BhD,IAAI;AAjBT,wBAiBU;AASV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAOxC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC"}

package/dist/stories/status-dot/StatusDot.stories.js

@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, within, expect } from '@storybook/test';
+export default {
+    title: 'Indicators/Status Dot',
+    argTypes: {
+        style: {
+            description: 'Specify the badge type',
+            control: { type: 'radio' },
+            options: ['neutral', 'warning', 'danger', 'success', 'info'],
+        },
+        size: {
+            description: 'Specify the size of the badge',
+            control: { type: 'radio' },
+            options: ['s', 'm', 'l'],
+        },
+    },
+    parameters: {
+        badges: [BADGE.STABLE],
+    },
+};
+const Template = (args) => {
+    const primary = document.createElement('m-status-dot');
+    if (args.style)
+        primary.setAttribute('style', args.style);
+    if (args.size)
+        primary.setAttribute('size', args.size);
+    return primary;
+};
+export const Default = Template.bind({});
+Default.args = {};
+Default.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).not.toBeNull();
+};
+export const Warning = Template.bind({});
+Warning.args = { style: 'warning' };
+Warning.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('style', 'warning');
+};
+export const Danger = Template.bind({});
+Danger.args = { style: 'danger' };
+Danger.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('style', 'danger');
+};
+export const Success = Template.bind({});
+Success.args = { style: 'success' };
+Success.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('style', 'success');
+};
+export const Large = Template.bind({});
+Large.args = { size: 'l' };
+Large.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('size', 'l');
+};

package/dist/stories/textarea/Textarea.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn, Meta } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Invalid: StoryFn;
+export declare const ReadOnly: StoryFn;
+export declare const Disabled: StoryFn;
+//# sourceMappingURL=Textarea.stories.d.ts.map

package/dist/stories/textarea/Textarea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBAsDhD,IAAI;AA3CT,wBA2CU;AAmBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textarea/Textarea.stories.js

@@ -0,0 +1,97 @@
+import { action } from '@storybook/addon-actions';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, expect } from '@storybook/test';
+export default {
+    title: 'Form Elements/Textarea',
+    argTypes: {
+        name: {
+            description: 'Specify the textarea name',
+            control: 'text',
+        },
+        value: {
+            description: 'Specify the textarea value',
+            control: 'text',
+        },
+        placeholder: {
+            description: 'Specify the textarea placeholder',
+            control: 'text',
+        },
+        isinvalid: {
+            description: 'Specify whether the textarea is invalid',
+            control: 'boolean',
+        },
+        disabled: {
+            description: 'Specify whether the textarea is disabled',
+            control: 'boolean',
+        },
+        rows: {
+            description: 'Specify the number of rows in the textarea',
+            control: 'number',
+        },
+        minlength: {
+            description: 'Specify the minimum length for input',
+            control: 'number',
+        },
+        maxlength: {
+            description: 'Specify the maximum length for input',
+            control: 'number',
+        },
+        readonly: {
+            description: 'Specify whether the textarea is read-only',
+            control: 'boolean',
+        },
+    },
+    parameters: {
+        badges: [BADGE.STABLE],
+    },
+};
+const Template = (args) => {
+    const MTextArea = document.createElement('m-textarea');
+    if (args.name)
+        MTextArea.setAttribute('name', args.name);
+    if (args.value)
+        MTextArea.setAttribute('value', args.value);
+    if (args.placeholder)
+        MTextArea.setAttribute('placeholder', args.placeholder);
+    if (args.rows)
+        MTextArea.setAttribute('rows', args.rows.toString());
+    if (args.isinvalid)
+        MTextArea.setAttribute('isinvalid', 'true');
+    if (args.disabled)
+        MTextArea.setAttribute('disabled', 'true');
+    if (args.minlength)
+        MTextArea.setAttribute('minlength', args.minlength.toString());
+    if (args.maxlength)
+        MTextArea.setAttribute('maxlength', args.maxlength.toString());
+    if (args.readonly)
+        MTextArea.setAttribute('readonly', 'true');
+    MTextArea.addEventListener('input', action('input'));
+    return MTextArea;
+};
+export const Default = Template.bind({});
+Default.args = { placeholder: 'This is a default textarea' };
+Default.play = async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('m-textarea');
+    const input = textarea === null || textarea === void 0 ? void 0 : textarea.shadowRoot.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    await userEvent.type(input, 'Testing input');
+    expect(input).toHaveValue('Testing input');
+};
+export const Invalid = Template.bind({});
+Invalid.args = { isinvalid: true, placeholder: 'This is an invalid textarea' };
+Invalid.play = async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('m-textarea');
+    expect(textarea).toHaveAttribute('isinvalid', 'true');
+};
+export const ReadOnly = Template.bind({});
+ReadOnly.args = { readonly: true, placeholder: 'This is a read-only textarea' };
+ReadOnly.play = async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('m-textarea');
+    expect(textarea).toHaveAttribute('readonly', 'true');
+};
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true, placeholder: 'This is a disabled textarea' };
+Disabled.play = async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('m-textarea');
+    expect(textarea).toBeDisabled();
+};

package/dist/stories/textinput/Textinput.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryFn, Meta } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Invalid: StoryFn;
+export declare const Disabled: StoryFn;
+//# sourceMappingURL=Textinput.stories.d.ts.map

package/dist/stories/textinput/Textinput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBA8EhD,IAAI;AApET,wBAoEU;AAkBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textinput/Textinput.stories.js

@@ -0,0 +1,117 @@
+import { action } from '@storybook/addon-actions';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, expect } from '@storybook/test';
+export default {
+    title: 'Form Elements/TextInput',
+    argTypes: {
+        name: {
+            description: 'Specify the text input name',
+            control: 'text',
+        },
+        value: {
+            description: 'Specify the text input value',
+            control: 'text',
+        },
+        placeholder: {
+            description: 'Specify the text input placeholder',
+            control: 'text',
+        },
+        inputtype: {
+            description: 'Specify the text input type',
+            control: { type: 'radio' },
+            options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text'],
+        },
+        isinvalid: {
+            description: 'Specify whether the text input is invalid',
+            control: 'boolean',
+        },
+        disabled: {
+            description: 'Specify whether the text input is disabled',
+            control: 'boolean',
+        },
+        isclearable: {
+            description: 'Specify whether the text input is clearable',
+            control: 'boolean',
+        },
+        rightalign: {
+            description: 'Specify whether the text input has the text is align on the right',
+            control: 'boolean',
+        },
+        min: {
+            description: 'Specify the min value for the imput',
+            control: 'boolean',
+        },
+        max: {
+            description: 'Specify the max value for the imput',
+            control: 'boolean',
+        },
+        minLength: {
+            description: 'Minimum number of characters required for the input (used with text type).',
+            control: 'boolean',
+        },
+        maxLength: {
+            description: 'Maximum number of characters allowed in the input (used with text type).',
+            control: 'boolean',
+        },
+        clearlabel: {
+            description: 'The label text for the clear button',
+            control: 'text',
+        },
+        size: {
+            description: 'Specify the text input size',
+            control: { type: 'radio' },
+            options: ['s', 'm'],
+        },
+    },
+    parameters: {
+        badges: [BADGE.STABLE],
+    },
+};
+const Template = (args) => {
+    const MTextInput = document.createElement('m-textinput');
+    MTextInput.setAttribute('inputtype', args.inputtype || 'text');
+    if (args.name)
+        MTextInput.setAttribute('name', args.name);
+    if (args.value)
+        MTextInput.setAttribute('value', args.value);
+    if (args.placeholder)
+        MTextInput.setAttribute('placeholder', args.placeholder);
+    if (args.isinvalid)
+        MTextInput.setAttribute('isinvalid', 'true');
+    if (args.disabled)
+        MTextInput.setAttribute('disabled', 'true');
+    if (args.isclearable)
+        MTextInput.setAttribute('isclearable', 'true');
+    if (args.size)
+        MTextInput.setAttribute('size', args.size);
+    MTextInput.addEventListener('input', action('input'));
+    MTextInput.onkeyup = action('onkeyup');
+    return MTextInput;
+};
+export const Default = Template.bind({});
+Default.args = { placeholder: 'This is a default text input' };
+Default.play = async ({ canvasElement }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    const input = textinput === null || textinput === void 0 ? void 0 : textinput.shadowRoot.querySelector('input');
+    expect(input).not.toBeNull();
+    await userEvent.type(input, 'Testing input');
+    expect(input).toHaveValue('Testing input');
+};
+export const Invalid = Template.bind({});
+Invalid.args = {
+    isinvalid: true,
+    placeholder: 'This is an invalid text input',
+};
+Invalid.play = async ({ canvasElement }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    expect(textinput).toHaveAttribute('isinvalid', 'true');
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+    placeholder: 'This is a disabled text input',
+};
+Disabled.play = async ({ canvasElement }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    expect(textinput).toBeDisabled();
+};

package/dist/stories/toggle/Toggle.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn, Meta } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Checked: StoryFn;
+export declare const Disabled: StoryFn;
+export declare const Small: StoryFn;
+//# sourceMappingURL=Toggle.stories.d.ts.map

package/dist/stories/toggle/Toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/toggle/Toggle.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBAwChD,IAAI;AA5BT,wBA4BU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,KAAK,SAAoB,CAAC"}

package/dist/stories/toggle/Toggle.stories.js

@@ -0,0 +1,73 @@
+import { action } from '@storybook/addon-actions';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { userEvent, expect } from '@storybook/test';
+export default {
+    title: 'Form Elements/Toggle',
+    argTypes: {
+        name: {
+            description: 'Specify the input name for the toggle',
+            control: 'text',
+        },
+        label: {
+            description: 'Specify the input label for the toggle',
+            control: 'text',
+        },
+        size: {
+            description: 'Specify the size for the toggle',
+            control: { type: 'radio' },
+            options: ['s', 'm'],
+        },
+        disabled: {
+            description: 'Specify whether the toggle is disabled',
+            control: 'boolean',
+        },
+        checked: {
+            description: 'Specify whether the toggle is checked',
+            control: 'boolean',
+        },
+    },
+    parameters: {
+        badges: [BADGE.STABLE],
+    },
+};
+const Template = (args) => {
+    const MToggle = document.createElement('m-toggle');
+    MToggle.setAttribute('name', args.name || 'form-toggle');
+    MToggle.setAttribute('label', args.label || 'Label');
+    if (args.size)
+        MToggle.setAttribute('size', args.size);
+    if (args.disabled)
+        MToggle.setAttribute('disabled', 'true');
+    if (args.checked)
+        MToggle.setAttribute('checked', 'true');
+    MToggle.addEventListener('change', action('change'));
+    return MToggle;
+};
+export const Default = Template.bind({});
+Default.args = {};
+Default.play = async ({ canvasElement }) => {
+    const toggle = canvasElement.querySelector('m-toggle');
+    const input = toggle === null || toggle === void 0 ? void 0 : toggle.shadowRoot.querySelector('input');
+    expect(toggle).not.toBeNull();
+    await userEvent.click(input);
+    expect(input).toBeChecked();
+};
+export const Checked = Template.bind({});
+Checked.args = { checked: true };
+Checked.play = async ({ canvasElement }) => {
+    const toggle = canvasElement.querySelector('m-toggle');
+    const input = toggle === null || toggle === void 0 ? void 0 : toggle.shadowRoot.querySelector('input');
+    expect(input).toBeChecked();
+};
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+Disabled.play = async ({ canvasElement }) => {
+    const toggle = canvasElement.querySelector('m-toggle');
+    expect(toggle).toBeDisabled();
+};
+export const Small = Template.bind({});
+Small.args = { size: 's' };
+Small.play = async ({ canvasElement }) => {
+    const toggle = canvasElement.querySelector('m-toggle');
+    expect(toggle).toHaveAttribute('size', 's');
+};

package/dist/utilities/ClickOutside.d.ts

@@ -0,0 +1,3 @@
+import type { ActionReturn } from 'svelte/action';
+export declare function clickOutside(node: HTMLElement): ActionReturn<any>;
+//# sourceMappingURL=ClickOutside.d.ts.map

package/dist/utilities/ClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickOutside.d.ts","sourceRoot":"","sources":["../../src/utilities/ClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAcjE"}

package/dist/utilities/ClickOutside.js

@@ -0,0 +1,13 @@
+export function clickOutside(node) {
+    const handleClick = (event) => {
+        if (!event.composedPath().includes(node)) {
+            node.dispatchEvent(new CustomEvent('outclick'));
+        }
+    };
+    document.addEventListener('click', handleClick);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick);
+        },
+    };
+}

package/dist/utilities/EventForward.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteComponent } from 'svelte';
+type ForwardException = string | {
+    name: string;
+    shouldExclude: () => boolean;
+};
+export declare function createEventForwarder(component: SvelteComponent, except?: ForwardException[]): (node: HTMLElement | SVGElement) => {
+    destroy: () => void;
+};
+export {};
+//# sourceMappingURL=EventForward.d.ts.map

package/dist/utilities/EventForward.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventForward.d.ts","sourceRoot":"","sources":["../../src/utilities/EventForward.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAO9C,KAAK,gBAAgB,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,OAAO,CAAA;CAAE,CAAC;AAQhF,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,eAAe,EAC1B,MAAM,GAAE,gBAAgB,EAAO,UAuDjB,WAAW,GAAG,UAAU;;EAoGvC"}