@spectrum-web-components/number-field 0.3.6 → 0.3.9

package/stories/number-field.stories.js

@@ -0,0 +1,372 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html } from '@spectrum-web-components/base';
+import '../sp-number-field.js';
+import '@spectrum-web-components/field-label/sp-field-label.js';
+import { spreadProps } from '../../../test/lit-helpers.js';
+export default {
+    title: 'Number Field',
+    component: 'sp-number-field',
+    args: {
+        disabled: false,
+        readonly: false,
+        quiet: false,
+        value: undefined,
+        placeholder: '',
+        min: undefined,
+        max: undefined,
+        step: undefined,
+    },
+    argTypes: {
+        disabled: {
+            name: 'disabled',
+            type: { name: 'boolean', required: false },
+            description: 'Disable this control. It will not receive focus or events.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        indeterminate: {
+            name: 'indeterminate',
+            type: { name: 'boolean', required: false },
+            description: 'Whether the value of the Number Field can be determined for display.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        readonly: {
+            name: 'readonly',
+            type: { name: 'boolean', required: false },
+            description: 'When this control is read only, you will not be able to input an updated value.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        quiet: {
+            name: 'quiet',
+            type: { name: 'boolean', required: false },
+            description: 'An altered delivery with no background and only a bottom border.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        hideStepper: {
+            name: 'hide stepper',
+            type: { name: 'boolean', required: false },
+            description: 'Whether to remove the stepper UI from the control.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        value: {
+            name: 'value',
+            type: { name: 'number', required: false },
+            description: 'Value to apply to the control.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: undefined },
+            },
+            control: {
+                type: 'number',
+            },
+        },
+        step: {
+            name: 'step',
+            type: { name: 'number', required: false },
+            description: 'Amount to change the value by when using the stepper or arrow key interactions.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: undefined },
+            },
+            control: {
+                type: 'number',
+            },
+        },
+        stepModifier: {
+            name: 'step modifier',
+            type: { name: 'number', required: false },
+            description: 'Amount to scale the step increment/decrement when holding the shift key',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 10 },
+            },
+            control: {
+                type: 'number',
+            },
+        },
+        placeholder: {
+            name: 'placeholder',
+            type: { name: 'string', required: false },
+            description: 'Placeholder to apply to the control.',
+            table: {
+                type: { summary: 'string' },
+            },
+            control: {
+                type: 'text',
+            },
+        },
+        min: {
+            name: 'min',
+            type: { name: 'number', required: false },
+            description: 'The minimum value the control can be set to.',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: undefined },
+            },
+            control: {
+                type: 'number',
+            },
+        },
+        max: {
+            name: 'max',
+            type: { name: 'numer', required: false },
+            description: 'The maximum value the control can be set to.',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: undefined },
+            },
+            control: {
+                type: 'number',
+            },
+        },
+    },
+};
+export const Default = (args = {}) => {
+    const onChange = args.onChange ||
+        (() => {
+            return;
+        });
+    const onInput = args.onInput ||
+        (() => {
+            return;
+        });
+    return html `
+        <sp-field-label for="default">Enter a number</sp-field-label>
+        <sp-number-field
+            id="default"
+            ...=${spreadProps(args)}
+            @input=${(event) => onInput(event.target.value)}
+            @change=${(event) => onChange(event.target.value)}
+            style="width: 150px"
+        ></sp-number-field>
+    `;
+};
+Default.args = {
+    value: 100,
+};
+export const quiet = (args = {}) => Default(args);
+quiet.args = {
+    quiet: true,
+    value: 100,
+};
+export const indeterminate = (args = {}) => Default(args);
+indeterminate.args = {
+    value: 100,
+    indeterminate: true,
+};
+export const decimals = (args) => {
+    return html `
+        <sp-field-label for="decimals">
+            Enter a number with visible decimals
+        </sp-field-label>
+        <sp-number-field
+            id="decimals"
+            style="width: 200px"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+            .formatOptions=${{
+        signDisplay: 'exceptZero',
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+    }}
+        ></sp-number-field>
+    `;
+};
+decimals.args = {
+    value: 19.274,
+};
+export const percents = (args = {}) => {
+    return html `
+        <sp-field-label for="percents">Enter a percentage</sp-field-label>
+        <sp-number-field
+            id="percents"
+            style="width: 200px"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+            .formatOptions=${{
+        style: 'percent',
+        unitDisplay: 'narrow',
+    }}
+        ></sp-number-field>
+    `;
+};
+percents.args = {
+    value: 0.372,
+};
+export const currency = (args = {}) => {
+    return html `
+        <sp-field-label for="currency">Enter a value in Euros</sp-field-label>
+        <sp-number-field
+            style="width: 200px"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+            .formatOptions=${{
+        style: 'currency',
+        currency: 'EUR',
+        currencyDisplay: 'code',
+        currencySign: 'accounting',
+    }}
+        ></sp-number-field>
+    `;
+};
+currency.args = {
+    value: 23.19,
+};
+export const units = (args) => {
+    return html `
+        <sp-field-label for="units">Enter a lengths in inches</sp-field-label>
+        <sp-number-field
+            id="units"
+            style="width: 200px"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+            .formatOptions=${{
+        style: 'unit',
+        unit: 'inch',
+        unitDisplay: 'long',
+    }}
+        ></sp-number-field>
+    `;
+};
+units.args = {
+    value: 24,
+};
+export const pixels = (args) => {
+    return html `
+        <sp-field-label for="units">Enter a lengths in pixels</sp-field-label>
+        <sp-number-field
+            id="units"
+            style="width: 200px"
+            .formatOptions=${{
+        style: 'unit',
+        unit: 'px',
+    }}
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+        ></sp-number-field>
+    `;
+};
+pixels.args = {
+    value: 800,
+};
+export const minMax = (args) => html `
+    <sp-field-label for="min-max">
+        Enter a value between 0 and 255
+    </sp-field-label>
+    <sp-number-field
+        id="min-max"
+        style="width: 200px"
+        ...=${spreadProps(args)}
+        @change=${args.onChange}
+    ></sp-number-field>
+`;
+minMax.args = {
+    value: 4,
+    min: 0,
+    max: 255,
+};
+export const hideStepper = (args) => {
+    return html `
+        <sp-field-label for="hideStepper">
+            Enter a number without the stepper UI
+        </sp-field-label>
+        <sp-number-field
+            id="hideStepper"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+        ></sp-number-field>
+    `;
+};
+hideStepper.args = {
+    hideStepper: true,
+    value: 67,
+};
+export const hideStepperQuiet = (args) => {
+    return html `
+        <sp-field-label for="hideStepper">
+            Enter a number without the stepper UI
+        </sp-field-label>
+        <sp-number-field
+            id="hideStepper"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+        ></sp-number-field>
+    `;
+};
+hideStepperQuiet.args = {
+    hideStepper: true,
+    value: 67,
+    quiet: true,
+};
+export const disabled = (args) => {
+    return html `
+        <sp-field-label for="disabled">
+            This Number Field is disabled
+        </sp-field-label>
+        <sp-number-field
+            id="disabled"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+        ></sp-number-field>
+    `;
+};
+disabled.args = {
+    disabled: true,
+    value: 892,
+};
+export const readOnly = (args) => {
+    return html `
+        <sp-field-label for="readonly">
+            You can only read the following value
+        </sp-field-label>
+        <sp-number-field
+            id="readonly"
+            ...=${spreadProps(args)}
+            @change=${args.onChange}
+        ></sp-number-field>
+    `;
+};
+readOnly.args = {
+    readonly: true,
+    value: '15',
+};
+//# sourceMappingURL=number-field.stories.js.map

package/stories/number-field.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.stories.js","sourceRoot":"","sources":["number-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-number-field.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { NumberField } from '../src/NumberField.js';\n\nexport default {\n    title: 'Number Field',\n    component: 'sp-number-field',\n    args: {\n        disabled: false,\n        readonly: false,\n        quiet: false,\n        value: undefined,\n        placeholder: '',\n        min: undefined,\n        max: undefined,\n        step: undefined,\n    },\n    argTypes: {\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        indeterminate: {\n            name: 'indeterminate',\n            type: { name: 'boolean', required: false },\n            description:\n                'Whether the value of the Number Field can be determined for display.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        readonly: {\n            name: 'readonly',\n            type: { name: 'boolean', required: false },\n            description:\n                'When this control is read only, you will not be able to input an updated value.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description:\n                'An altered delivery with no background and only a bottom border.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        hideStepper: {\n            name: 'hide stepper',\n            type: { name: 'boolean', required: false },\n            description: 'Whether to remove the stepper UI from the control.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        value: {\n            name: 'value',\n            type: { name: 'number', required: false },\n            description: 'Value to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        step: {\n            name: 'step',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to change the value by when using the stepper or arrow key interactions.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        stepModifier: {\n            name: 'step modifier',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to scale the step increment/decrement when holding the shift key',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 10 },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            type: { name: 'string', required: false },\n            description: 'Placeholder to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        min: {\n            name: 'min',\n            type: { name: 'number', required: false },\n            description: 'The minimum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        max: {\n            name: 'max',\n            type: { name: 'numer', required: false },\n            description: 'The maximum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n    },\n};\n\ninterface StoryArgs {\n    disabled?: boolean;\n    indeterminate?: boolean;\n    invalid?: boolean;\n    value?: number;\n    placeholder?: string;\n    max?: number;\n    min?: number;\n    hideStepper?: boolean;\n    readonly?: boolean;\n    step?: number;\n    onChange?: (value: number) => void;\n    onInput?: (value: number) => void;\n    [prop: string]: unknown;\n}\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n    const onChange =\n        (args.onChange as (value: number) => void) ||\n        (() => {\n            return;\n        });\n    const onInput =\n        (args.onInput as (value: number) => void) ||\n        (() => {\n            return;\n        });\n    return html`\n        <sp-field-label for=\"default\">Enter a number</sp-field-label>\n        <sp-number-field\n            id=\"default\"\n            ...=${spreadProps(args)}\n            @input=${(event: Event) =>\n                onInput((event.target as NumberField).value)}\n            @change=${(event: Event) =>\n                onChange((event.target as NumberField).value)}\n            style=\"width: 150px\"\n        ></sp-number-field>\n    `;\n};\n\nDefault.args = {\n    value: 100,\n};\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Default(args);\n\nquiet.args = {\n    quiet: true,\n    value: 100,\n};\n\nexport const indeterminate = (args: StoryArgs = {}): TemplateResult =>\n    Default(args);\n\nindeterminate.args = {\n    value: 100,\n    indeterminate: true,\n};\n\nexport const decimals = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"decimals\">\n            Enter a number with visible decimals\n        </sp-field-label>\n        <sp-number-field\n            id=\"decimals\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                signDisplay: 'exceptZero',\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 2,\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\ndecimals.args = {\n    value: 19.274,\n};\n\nexport const percents = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"percents\">Enter a percentage</sp-field-label>\n        <sp-number-field\n            id=\"percents\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'percent',\n                unitDisplay: 'narrow',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\npercents.args = {\n    value: 0.372,\n};\n\nexport const currency = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"currency\">Enter a value in Euros</sp-field-label>\n        <sp-number-field\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'currency',\n                currency: 'EUR',\n                currencyDisplay: 'code',\n                currencySign: 'accounting',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\ncurrency.args = {\n    value: 23.19,\n};\n\nexport const units = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in inches</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'inch',\n                unitDisplay: 'long',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\nunits.args = {\n    value: 24,\n};\n\nexport const pixels = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in pixels</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'px',\n            }}\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\n\npixels.args = {\n    value: 800,\n};\n\nexport const minMax = (args: StoryArgs): TemplateResult => html`\n    <sp-field-label for=\"min-max\">\n        Enter a value between 0 and 255\n    </sp-field-label>\n    <sp-number-field\n        id=\"min-max\"\n        style=\"width: 200px\"\n        ...=${spreadProps(args)}\n        @change=${args.onChange}\n    ></sp-number-field>\n`;\n\nminMax.args = {\n    value: 4,\n    min: 0,\n    max: 255,\n};\n\nexport const hideStepper = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nhideStepper.args = {\n    hideStepper: true,\n    value: 67,\n};\n\nexport const hideStepperQuiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nhideStepperQuiet.args = {\n    hideStepper: true,\n    value: 67,\n    quiet: true,\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"disabled\">\n            This Number Field is disabled\n        </sp-field-label>\n        <sp-number-field\n            id=\"disabled\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\ndisabled.args = {\n    disabled: true,\n    value: 892,\n};\n\nexport const readOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"readonly\">\n            You can only read the following value\n        </sp-field-label>\n        <sp-number-field\n            id=\"readonly\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nreadOnly.args = {\n    readonly: true,\n    value: '15',\n};\n"]}

package/test/benchmark/basic-test.js

@@ -0,0 +1,18 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import { html } from 'lit';
+import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+measureFixtureCreation(html `
+    <sp-number-field></sp-number-field>
+`);
+//# sourceMappingURL=basic-test.js.map

package/test/benchmark/basic-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-test.js","sourceRoot":"","sources":["basic-test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,0DAA0D,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,sBAAsB,CAAC,IAAI,CAAA;;CAE1B,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/number-field/sp-number-field.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-number-field></sp-number-field>\n`);\n"]}

package/test/helpers.js

@@ -0,0 +1,66 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html } from '@spectrum-web-components/base';
+import { elementUpdated, fixture, nextFrame } from '@open-wc/testing';
+import { sendMouse } from '../../../test/plugins/browser.js';
+export async function getElFrom(test) {
+    const wrapped = await fixture(html `
+        <div style="--spectrum-alias-ui-icon-chevron-size-75: 20px;">
+            ${test}
+        </div>
+    `);
+    const el = wrapped.querySelector('sp-number-field');
+    await elementUpdated(el);
+    return el;
+}
+export async function clickBySelector(el, selector, options = {}) {
+    const target = el.shadowRoot.querySelector(selector);
+    const targetRect = target.getBoundingClientRect();
+    await sendMouse({
+        steps: [
+            {
+                type: 'move',
+                position: [
+                    targetRect.x + targetRect.width / 2,
+                    targetRect.y + targetRect.height / 2,
+                ],
+                options,
+            },
+            {
+                type: 'down',
+                options,
+            },
+        ],
+    });
+    await nextFrame();
+    await sendMouse({
+        steps: [
+            {
+                type: 'up',
+                options,
+            },
+        ],
+    });
+    await elementUpdated(el);
+}
+export function createLanguageContext(lang) {
+    const langResolvers = [];
+    const createLangResolver = (event) => {
+        langResolvers.push(event.detail.callback);
+        resolveLanguage();
+    };
+    const resolveLanguage = () => {
+        langResolvers.forEach((resolver) => resolver(lang));
+    };
+    return createLangResolver;
+}
+//# sourceMappingURL=helpers.js.map

package/test/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAE7D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAoB;IAChD,MAAM,OAAO,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;;cAExC,IAAI;;KAEb,CAAC,CAAC;IACH,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,iBAAiB,CAAgB,CAAC;IACnE,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;IACzB,OAAO,EAAE,CAAC;AACd,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CACjC,EAAe,EACf,QAAgB,EAChB,UAAoD,EAAE;IAEtD,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC;IACpE,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,MAAM,SAAS,CAAC;QACZ,KAAK,EAAE;YACH;gBACI,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACN,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC;oBACnC,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC;iBACvC;gBACD,OAAO;aACV;YACD;gBACI,IAAI,EAAE,MAAM;gBACZ,OAAO;aACV;SACJ;KACJ,CAAC,CAAC;IACH,MAAM,SAAS,EAAE,CAAC;IAClB,MAAM,SAAS,CAAC;QACZ,KAAK,EAAE;YACH;gBACI,IAAI,EAAE,IAAI;gBACV,OAAO;aACV;SACJ;KACJ,CAAC,CAAC;IACH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,qBAAqB,CACjC,IAAY;IAEZ,MAAM,aAAa,GAA8B,EAAE,CAAC;IACpD,MAAM,kBAAkB,GAAG,CAAC,KAA+B,EAAQ,EAAE;QACjE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC1C,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAS,EAAE;QAC/B,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,kBAAkB,CAAC;AAC9B,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { elementUpdated, fixture, nextFrame } from '@open-wc/testing';\nimport { ProvideLang } from '@spectrum-web-components/theme';\nimport { NumberField } from '../';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nexport async function getElFrom(test: TemplateResult): Promise<NumberField> {\n    const wrapped = await fixture<HTMLDivElement>(html`\n        <div style=\"--spectrum-alias-ui-icon-chevron-size-75: 20px;\">\n            ${test}\n        </div>\n    `);\n    const el = wrapped.querySelector('sp-number-field') as NumberField;\n    await elementUpdated(el);\n    return el;\n}\n\nexport async function clickBySelector(\n    el: NumberField,\n    selector: string,\n    options: { button?: 'left' | 'right' | 'middle' } = {}\n): Promise<void> {\n    const target = el.shadowRoot.querySelector(selector) as HTMLElement;\n    const targetRect = target.getBoundingClientRect();\n    await sendMouse({\n        steps: [\n            {\n                type: 'move',\n                position: [\n                    targetRect.x + targetRect.width / 2,\n                    targetRect.y + targetRect.height / 2,\n                ],\n                options,\n            },\n            {\n                type: 'down',\n                options,\n            },\n        ],\n    });\n    await nextFrame();\n    await sendMouse({\n        steps: [\n            {\n                type: 'up',\n                options,\n            },\n        ],\n    });\n    await elementUpdated(el);\n}\n\nexport function createLanguageContext(\n    lang: string\n): (event: CustomEvent<ProvideLang>) => void {\n    const langResolvers: ProvideLang['callback'][] = [];\n    const createLangResolver = (event: CustomEvent<ProvideLang>): void => {\n        langResolvers.push(event.detail.callback);\n        resolveLanguage();\n    };\n    const resolveLanguage = (): void => {\n        langResolvers.forEach((resolver) => resolver(lang));\n    };\n    return createLangResolver;\n}\n"]}