@spectrum-web-components/tooltip 1.1.0 → 1.1.2

package/stories/tooltip.stories.js

@@ -0,0 +1,409 @@
+"use strict";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { html, nothing } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+const iconOptions = {
+  "": () => html``,
+  negative: () => html`
+        <sp-icon-alert slot="icon"></sp-icon-alert>
+    `,
+  positive: () => html`
+        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+    `,
+  info: () => html`
+        <sp-icon-info slot="icon"></sp-icon-info>
+    `
+};
+export default {
+  component: "sp-tooltip",
+  title: "Tooltip"
+};
+export const Default = ({
+  open,
+  placement,
+  variant,
+  text
+}) => {
+  return html`
+        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
+            ${text}
+        </sp-tooltip>
+    `;
+};
+Default.args = {
+  open: true,
+  placement: "top",
+  variant: "",
+  text: "Tooltip"
+};
+Default.argTypes = {
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the tooltip is open.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false }
+    },
+    control: {
+      type: "boolean"
+    }
+  },
+  placement: {
+    name: "placement",
+    type: { name: "string", required: false },
+    description: "The placement of the tooltip in relation to its parent",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "top" }
+    },
+    control: {
+      type: "inline-radio",
+      options: [
+        "auto",
+        "auto-start",
+        "auto-end",
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+        "none"
+      ]
+    }
+  },
+  text: {
+    name: "text",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "" }
+    },
+    control: "text"
+  },
+  variant: {
+    name: "variant",
+    type: { name: "string", required: false },
+    description: "The style of the tooltip.",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "" }
+    },
+    control: {
+      type: "inline-radio",
+      options: ["info", "positive", "negative", ""]
+    }
+  }
+};
+export const wIcon = ({
+  open,
+  placement,
+  variant,
+  text
+}) => {
+  return html`
+        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
+            ${!!variant ? iconOptions[variant]() : nothing} ${text}
+        </sp-tooltip>
+    `;
+};
+wIcon.args = {
+  open: true,
+  placement: "top",
+  text: "Tooltip",
+  variant: "negative"
+};
+wIcon.argTypes = {
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the tooltip is open.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false }
+    },
+    control: {
+      type: "boolean"
+    }
+  },
+  placement: {
+    name: "placement",
+    type: { name: "string", required: false },
+    description: "The placement of the tooltip in relation to its parent",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "top" }
+    },
+    control: {
+      type: "inline-radio",
+      options: [
+        "auto",
+        "auto-start",
+        "auto-end",
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+        "none"
+      ]
+    }
+  },
+  text: {
+    name: "text",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "" }
+    },
+    control: "text"
+  },
+  variant: {
+    name: "variant",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "" }
+    },
+    control: {
+      type: "inline-radio",
+      options: ["info", "positive", "negative", ""]
+    }
+  }
+};
+const overlayStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator > div {
+            display: contents;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            gap: 24px;
+        }
+
+        sp-button:nth-of-type(1) {
+            margin-top: 24px;
+        }
+    </style>
+`;
+const overlaid = (openPlacement) => {
+  return html`
+        ${overlayStyles}
+        ${[
+    ["bottom", ""],
+    ["left", "negative"],
+    ["right", "positive"],
+    ["top", "info"],
+    ["top-start", ""]
+  ].map(([placement, variant]) => {
+    return html`
+                <sp-button id="trigger-${placement}" label="${placement} test">
+                    Hover for ${variant ? variant : "tooltip"} on the
+                    ${placement}
+                </sp-button>
+                <sp-overlay
+                    trigger="trigger-${placement}@hover"
+                    type="hint"
+                    placement=${placement}
+                    open=${ifDefined(
+      openPlacement === placement ? "hover" : void 0
+    )}
+                >
+                    <sp-tooltip variant=${variant} placement=${placement}>
+                        ${placement}
+                    </sp-tooltip>
+                </sp-overlay>
+            `;
+  })}
+    `;
+};
+export const overlaidTop = () => overlaid("top");
+export const overlaidRight = () => overlaid("right");
+export const overlaidBottom = () => overlaid("bottom");
+export const overlaidLeft = () => overlaid("left");
+export const overlaidTopStart = () => overlaid("top-start");
+export const selfManaged = ({
+  placement,
+  open,
+  offset,
+  delayed,
+  disabled
+}) => html`
+    ${overlayStyles}
+    <sp-action-button class="self-managed">
+        This is a button.
+        <sp-tooltip
+            self-managed
+            placement=${placement}
+            offset=${offset}
+            ?delayed=${delayed}
+            ?disabled=${disabled}
+            ?open=${open}
+        >
+            Add paragraph text by dragging the Text tool on the canvas to use
+            this feature
+        </sp-tooltip>
+    </sp-action-button>
+`;
+selfManaged.args = {
+  placement: "top",
+  open: true,
+  offset: 6,
+  delayed: false,
+  disabled: false
+};
+selfManaged.argTypes = {
+  delayed: {
+    name: "delayed",
+    type: { name: "boolean", required: false },
+    description: "Whether to manage the tooltip with the warmup timer"
+  },
+  disabled: {
+    name: "disabled",
+    type: { name: "boolean", required: false },
+    description: "Whether the Tooltip is active and can be displayed"
+  },
+  offset: {
+    name: "offset",
+    type: { name: "number", required: false },
+    description: "The pixel distance from the parent element to place the tooltip"
+  },
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the tooltip is open.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false }
+    },
+    control: {
+      type: "boolean"
+    }
+  },
+  placement: {
+    name: "placement",
+    type: { name: "string", required: false },
+    description: "The placement of the tooltip in relation to its parent",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "top" }
+    },
+    control: {
+      type: "inline-radio",
+      options: [
+        "auto",
+        "auto-start",
+        "auto-end",
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+        "none"
+      ]
+    }
+  }
+};
+export const selfManagedIconOnly = () => html`
+    ${overlayStyles}
+    <sp-action-button class="self-managed">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        <sp-tooltip self-managed>This is a tooltip.</sp-tooltip>
+    </sp-action-button>
+    <hr />
+
+    <sp-action-button class="self-managed">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+`;
+export const selfManagedFieldLabel = () => html`
+    <div style="display: inline-flex; flex-direction: column;">
+        <sp-field-label for="input">
+            <sp-icon-edit></sp-icon-edit>
+            <sp-tooltip self-managed>Edit</sp-tooltip>
+        </sp-field-label>
+        <sp-textfield id="input"></sp-textfield>
+    </div>
+`;
+export const draggable = () => {
+  const handleDragStart = (event) => {
+    var _a;
+    (_a = event.dataTransfer) == null ? void 0 : _a.setDragImage(
+      event.target,
+      event.offsetX,
+      event.offsetY
+    );
+  };
+  return html`
+        <sp-button>
+            A simple button that should not be included in the DragImage
+        </sp-button>
+        <div
+            draggable="true"
+            id="draggableElement"
+            @dragstart=${handleDragStart}
+            style="margin-top: 16px; cursor: move; padding: 24px; border: red 1px solid;"
+        >
+            <p>Click and drag me to show DragImage</p>
+            <sp-action-button>
+                Action Button with self managed tooltip
+                <sp-tooltip self-managed placement="bottom">
+                    My Tooltip
+                </sp-tooltip>
+            </sp-action-button>
+        </div>
+    `;
+};
+draggable.swc_vrt = {
+  skip: true
+};
+draggable.parameters = {
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true }
+};
+//# sourceMappingURL=tooltip.stories.js.map

package/stories/tooltip.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["tooltip.stories.ts"],
+  "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*/\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nconst iconOptions: {\n    [key: string]: ({\n        width,\n        height,\n        hidden,\n        title,\n    }?: {\n        width?: number;\n        height?: number;\n        hidden?: boolean;\n        title?: string;\n    }) => TemplateResult | string;\n} = {\n    '': () => html``,\n    negative: () => html`\n        <sp-icon-alert slot=\"icon\"></sp-icon-alert>\n    `,\n    positive: () => html`\n        <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n    `,\n    info: () => html`\n        <sp-icon-info slot=\"icon\"></sp-icon-info>\n    `,\n};\n\nexport default {\n    component: 'sp-tooltip',\n    title: 'Tooltip',\n};\n\ninterface Properties {\n    delayed?: boolean;\n    disabled?: boolean;\n    open?: boolean;\n    placement?: Placement;\n    variant?: string;\n    text?: string;\n    offset?: number;\n}\n\nexport const Default = ({\n    open,\n    placement,\n    variant,\n    text,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n            ${text}\n        </sp-tooltip>\n    `;\n};\nDefault.args = {\n    open: true,\n    placement: 'top',\n    variant: '',\n    text: 'Tooltip',\n};\nDefault.argTypes = {\n    open: {\n        name: 'open',\n        type: { name: 'boolean', required: false },\n        description: 'Whether the tooltip is open.',\n        table: {\n            type: { summary: 'boolean' },\n            defaultValue: { summary: false },\n        },\n        control: {\n            type: 'boolean',\n        },\n    },\n    placement: {\n        name: 'placement',\n        type: { name: 'string', required: false },\n        description: 'The placement of the tooltip in relation to its parent',\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: 'top' },\n        },\n        control: {\n            type: 'inline-radio',\n            options: [\n                'auto',\n                'auto-start',\n                'auto-end',\n                'top',\n                'bottom',\n                'right',\n                'left',\n                'top-start',\n                'top-end',\n                'bottom-start',\n                'bottom-end',\n                'right-start',\n                'right-end',\n                'left-start',\n                'left-end',\n                'none',\n            ],\n        },\n    },\n    text: {\n        name: 'text',\n        type: { name: 'string', required: false },\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: '' },\n        },\n        control: 'text',\n    },\n    variant: {\n        name: 'variant',\n        type: { name: 'string', required: false },\n        description: 'The style of the tooltip.',\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: '' },\n        },\n        control: {\n            type: 'inline-radio',\n            options: ['info', 'positive', 'negative', ''],\n        },\n    },\n};\n\nexport const wIcon = ({\n    open,\n    placement,\n    variant,\n    text,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n            ${!!variant ? iconOptions[variant]() : nothing} ${text}\n        </sp-tooltip>\n    `;\n};\nwIcon.args = {\n    open: true,\n    placement: 'top',\n    text: 'Tooltip',\n    variant: 'negative',\n};\nwIcon.argTypes = {\n    open: {\n        name: 'open',\n        type: { name: 'boolean', required: false },\n        description: 'Whether the tooltip is open.',\n        table: {\n            type: { summary: 'boolean' },\n            defaultValue: { summary: false },\n        },\n        control: {\n            type: 'boolean',\n        },\n    },\n    placement: {\n        name: 'placement',\n        type: { name: 'string', required: false },\n        description: 'The placement of the tooltip in relation to its parent',\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: 'top' },\n        },\n        control: {\n            type: 'inline-radio',\n            options: [\n                'auto',\n                'auto-start',\n                'auto-end',\n                'top',\n                'bottom',\n                'right',\n                'left',\n                'top-start',\n                'top-end',\n                'bottom-start',\n                'bottom-end',\n                'right-start',\n                'right-end',\n                'left-start',\n                'left-end',\n                'none',\n            ],\n        },\n    },\n    text: {\n        name: 'text',\n        type: { name: 'string', required: false },\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: '' },\n        },\n        control: 'text',\n    },\n    variant: {\n        name: 'variant',\n        type: { name: 'string', required: false },\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: '' },\n        },\n        control: {\n            type: 'inline-radio',\n            options: ['info', 'positive', 'negative', ''],\n        },\n    },\n};\n\nconst overlayStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator > div {\n            display: contents;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n            gap: 24px;\n        }\n\n        sp-button:nth-of-type(1) {\n            margin-top: 24px;\n        }\n    </style>\n`;\n\nconst overlaid = (openPlacement: Placement): TemplateResult => {\n    return html`\n        ${overlayStyles}\n        ${(\n            [\n                ['bottom', ''],\n                ['left', 'negative'],\n                ['right', 'positive'],\n                ['top', 'info'],\n                ['top-start', ''],\n            ] as [Placement, string][]\n        ).map(([placement, variant]) => {\n            return html`\n                <sp-button id=\"trigger-${placement}\" label=\"${placement} test\">\n                    Hover for ${variant ? variant : 'tooltip'} on the\n                    ${placement}\n                </sp-button>\n                <sp-overlay\n                    trigger=\"trigger-${placement}@hover\"\n                    type=\"hint\"\n                    placement=${placement}\n                    open=${ifDefined(\n                        openPlacement === placement ? 'hover' : undefined\n                    )}\n                >\n                    <sp-tooltip variant=${variant} placement=${placement}>\n                        ${placement}\n                    </sp-tooltip>\n                </sp-overlay>\n            `;\n        })}\n    `;\n};\n\nexport const overlaidTop = (): TemplateResult => overlaid('top');\nexport const overlaidRight = (): TemplateResult => overlaid('right');\nexport const overlaidBottom = (): TemplateResult => overlaid('bottom');\nexport const overlaidLeft = (): TemplateResult => overlaid('left');\nexport const overlaidTopStart = (): TemplateResult => overlaid('top-start');\n\nexport const selfManaged = ({\n    placement,\n    open,\n    offset,\n    delayed,\n    disabled,\n}: Properties): TemplateResult => html`\n    ${overlayStyles}\n    <sp-action-button class=\"self-managed\">\n        This is a button.\n        <sp-tooltip\n            self-managed\n            placement=${placement}\n            offset=${offset}\n            ?delayed=${delayed}\n            ?disabled=${disabled}\n            ?open=${open}\n        >\n            Add paragraph text by dragging the Text tool on the canvas to use\n            this feature\n        </sp-tooltip>\n    </sp-action-button>\n`;\nselfManaged.args = {\n    placement: 'top',\n    open: true,\n    offset: 6,\n    delayed: false,\n    disabled: false,\n};\nselfManaged.argTypes = {\n    delayed: {\n        name: 'delayed',\n        type: { name: 'boolean', required: false },\n        description: 'Whether to manage the tooltip with the warmup timer',\n    },\n    disabled: {\n        name: 'disabled',\n        type: { name: 'boolean', required: false },\n        description: 'Whether the Tooltip is active and can be displayed',\n    },\n    offset: {\n        name: 'offset',\n        type: { name: 'number', required: false },\n        description:\n            'The pixel distance from the parent element to place the tooltip',\n    },\n    open: {\n        name: 'open',\n        type: { name: 'boolean', required: false },\n        description: 'Whether the tooltip is open.',\n        table: {\n            type: { summary: 'boolean' },\n            defaultValue: { summary: false },\n        },\n        control: {\n            type: 'boolean',\n        },\n    },\n    placement: {\n        name: 'placement',\n        type: { name: 'string', required: false },\n        description: 'The placement of the tooltip in relation to its parent',\n        table: {\n            type: { summary: 'string' },\n            defaultValue: { summary: 'top' },\n        },\n        control: {\n            type: 'inline-radio',\n            options: [\n                'auto',\n                'auto-start',\n                'auto-end',\n                'top',\n                'bottom',\n                'right',\n                'left',\n                'top-start',\n                'top-end',\n                'bottom-start',\n                'bottom-end',\n                'right-start',\n                'right-end',\n                'left-start',\n                'left-end',\n                'none',\n            ],\n        },\n    },\n};\n\nexport const selfManagedIconOnly = (): TemplateResult => html`\n    ${overlayStyles}\n    <sp-action-button class=\"self-managed\">\n        <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n        <sp-tooltip self-managed>This is a tooltip.</sp-tooltip>\n    </sp-action-button>\n    <hr />\n\n    <sp-action-button class=\"self-managed\">\n        <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n    </sp-action-button>\n`;\n\nexport const selfManagedFieldLabel = (): TemplateResult => html`\n    <div style=\"display: inline-flex; flex-direction: column;\">\n        <sp-field-label for=\"input\">\n            <sp-icon-edit></sp-icon-edit>\n            <sp-tooltip self-managed>Edit</sp-tooltip>\n        </sp-field-label>\n        <sp-textfield id=\"input\"></sp-textfield>\n    </div>\n`;\n\nexport const draggable = (): TemplateResult => {\n    const handleDragStart = (event: DragEvent): void => {\n        event.dataTransfer?.setDragImage(\n            event.target as HTMLElement,\n            event.offsetX,\n            event.offsetY\n        );\n    };\n    return html`\n        <sp-button>\n            A simple button that should not be included in the DragImage\n        </sp-button>\n        <div\n            draggable=\"true\"\n            id=\"draggableElement\"\n            @dragstart=${handleDragStart}\n            style=\"margin-top: 16px; cursor: move; padding: 24px; border: red 1px solid;\"\n        >\n            <p>Click and drag me to show DragImage</p>\n            <sp-action-button>\n                Action Button with self managed tooltip\n                <sp-tooltip self-managed placement=\"bottom\">\n                    My Tooltip\n                </sp-tooltip>\n            </sp-action-button>\n        </div>\n    `;\n};\n\ndraggable.swc_vrt = {\n    skip: true,\n};\n\ndraggable.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: true },\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/test/benchmark/test-basic.js

@@ -0,0 +1,12 @@
+"use strict";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
+    <sp-action-button>
+        I'm a button...
+        <sp-tooltip self-managed>Tip me!</sp-tooltip>
+    </sp-action-button>
+`);
+//# sourceMappingURL=test-basic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["test-basic.ts"],
+  "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/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-action-button>\n        I'm a button...\n        <sp-tooltip self-managed>Tip me!</sp-tooltip>\n    </sp-action-button>\n`);\n"],
+  "mappings": ";AAYA,OAAO;AACP,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,CAKtB;",
+  "names": []
+}

package/test/benchmark/test-directive.js

@@ -0,0 +1,13 @@
+"use strict";
+import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
+    <sp-action-button
+        ${tooltip(() => html`Tip me!`)}
+    >
+        I'm a button...
+    </sp-action-button>
+`);
+//# sourceMappingURL=test-directive.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["test-directive.ts"],
+  "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 { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-action-button\n        ${tooltip(() => html`Tip me!`)}\n    >\n        I'm a button...\n    </sp-action-button>\n`);\n"],
+  "mappings": ";AAYA,SAAS,eAAe;AACxB,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA,UAEb,QAAQ,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,CAIrC;",
+  "names": []
+}

package/test/benchmark/test-element.js

@@ -0,0 +1,13 @@
+"use strict";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
+    <sp-action-button id="button">I'm a button...</sp-action-button>
+    <sp-overlay trigger="button@hover" type="hint">
+        <sp-tooltip>Tip me!</sp-tooltip>
+    </sp-overlay>
+`);
+//# sourceMappingURL=test-element.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["test-element.ts"],
+  "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/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-action-button id=\"button\">I'm a button...</sp-action-button>\n    <sp-overlay trigger=\"button@hover\" type=\"hint\">\n        <sp-tooltip>Tip me!</sp-tooltip>\n    </sp-overlay>\n`);\n"],
+  "mappings": ";AAYA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,CAKtB;",
+  "names": []
+}

package/test/benchmark/test-lazy.js

@@ -0,0 +1,24 @@
+"use strict";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import {
+  removeSlottableRequest
+} from "@spectrum-web-components/overlay/src/slottable-request-event.js";
+import { html, render } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+const handleSlottableRequest = (event) => {
+  import("@spectrum-web-components/tooltip/sp-tooltip.js");
+  const template = event.data === removeSlottableRequest ? void 0 : html`
+                  <sp-tooltip>Tip me!</sp-tooltip>
+              `;
+  render(template, event.target);
+};
+measureFixtureCreation(html`
+    <sp-action-button id="button">I'm a button...</sp-action-button>
+    <sp-overlay
+        trigger="button@hover"
+        type="hint"
+        @slottable-request=${handleSlottableRequest}
+    ></sp-overlay>
+`);
+//# sourceMappingURL=test-lazy.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["test-lazy.ts"],
+  "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/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport {\n    removeSlottableRequest,\n    type SlottableRequestEvent,\n} from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport { html, render } from '@spectrum-web-components/base';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nconst handleSlottableRequest = (event: SlottableRequestEvent): void => {\n    import('@spectrum-web-components/tooltip/sp-tooltip.js');\n    const template =\n        event.data === removeSlottableRequest\n            ? undefined\n            : html`\n                  <sp-tooltip>Tip me!</sp-tooltip>\n              `;\n    render(template, event.target as HTMLElement);\n};\n\nmeasureFixtureCreation(html`\n    <sp-action-button id=\"button\">I'm a button...</sp-action-button>\n    <sp-overlay\n        trigger=\"button@hover\"\n        type=\"hint\"\n        @slottable-request=${handleSlottableRequest}\n    ></sp-overlay>\n`);\n"],
+  "mappings": ";AAYA,OAAO;AACP,OAAO;AACP;AAAA,EACI;AAAA,OAEG;AACP,SAAS,MAAM,cAAc;AAC7B,SAAS,8BAA8B;AAEvC,MAAM,yBAAyB,CAAC,UAAuC;AACnE,SAAO,gDAAgD;AACvD,QAAM,WACF,MAAM,SAAS,yBACT,SACA;AAAA;AAAA;AAGV,SAAO,UAAU,MAAM,MAAqB;AAChD;AAEA,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKM,sBAAsB;AAAA;AAAA,CAElD;",
+  "names": []
+}

package/test/tooltip-directive.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/tooltip-directive.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TooltipDirectiveStories", stories);
+//# sourceMappingURL=tooltip-directive.test-vrt.js.map

package/test/tooltip-directive.test-vrt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["tooltip-directive.test-vrt.ts"],
+  "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 * as stories from '../stories/tooltip-directive.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('TooltipDirectiveStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,2BAA2B,OAA+B;",
+  "names": []
+}