@spectrum-web-components/overlay 1.3.0-beta.1 → 1.3.0-testing.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/package.json +7 -8
  2. package/LICENSE +0 -201
  3. package/stories/index.js +0 -48
  4. package/stories/index.js.map +0 -7
  5. package/stories/overlay-directive.stories.js +0 -340
  6. package/stories/overlay-directive.stories.js.map +0 -7
  7. package/stories/overlay-element.stories.js +0 -687
  8. package/stories/overlay-element.stories.js.map +0 -7
  9. package/stories/overlay-story-components.js +0 -338
  10. package/stories/overlay-story-components.js.map +0 -7
  11. package/stories/overlay.stories.js +0 -1470
  12. package/stories/overlay.stories.js.map +0 -7
  13. package/test/benchmark/basic-test.js +0 -40
  14. package/test/benchmark/basic-test.js.map +0 -7
  15. package/test/benchmark/directive-test.js +0 -43
  16. package/test/benchmark/directive-test.js.map +0 -7
  17. package/test/benchmark/element-test.js +0 -40
  18. package/test/benchmark/element-test.js.map +0 -7
  19. package/test/benchmark/lazy-test.js +0 -47
  20. package/test/benchmark/lazy-test.js.map +0 -7
  21. package/test/index.js +0 -605
  22. package/test/index.js.map +0 -7
  23. package/test/overlay-directive.test-vrt.js +0 -5
  24. package/test/overlay-directive.test-vrt.js.map +0 -7
  25. package/test/overlay-directive.test.js +0 -162
  26. package/test/overlay-directive.test.js.map +0 -7
  27. package/test/overlay-element.test-vrt.js +0 -5
  28. package/test/overlay-element.test-vrt.js.map +0 -7
  29. package/test/overlay-element.test.js +0 -934
  30. package/test/overlay-element.test.js.map +0 -7
  31. package/test/overlay-lifecycle.test.js +0 -139
  32. package/test/overlay-lifecycle.test.js.map +0 -7
  33. package/test/overlay-memory.test.js +0 -10
  34. package/test/overlay-memory.test.js.map +0 -7
  35. package/test/overlay-timer.test.js +0 -118
  36. package/test/overlay-timer.test.js.map +0 -7
  37. package/test/overlay-trigger-click.test.js +0 -164
  38. package/test/overlay-trigger-click.test.js.map +0 -7
  39. package/test/overlay-trigger-directive.test.js +0 -75
  40. package/test/overlay-trigger-directive.test.js.map +0 -7
  41. package/test/overlay-trigger-extended.test.js +0 -235
  42. package/test/overlay-trigger-extended.test.js.map +0 -7
  43. package/test/overlay-trigger-hover-click.test.js +0 -225
  44. package/test/overlay-trigger-hover-click.test.js.map +0 -7
  45. package/test/overlay-trigger-hover.test.js +0 -308
  46. package/test/overlay-trigger-hover.test.js.map +0 -7
  47. package/test/overlay-trigger-longpress.test.js +0 -531
  48. package/test/overlay-trigger-longpress.test.js.map +0 -7
  49. package/test/overlay-trigger-optimization.test.js +0 -134
  50. package/test/overlay-trigger-optimization.test.js.map +0 -7
  51. package/test/overlay-trigger-sync.test.js +0 -5
  52. package/test/overlay-trigger-sync.test.js.map +0 -7
  53. package/test/overlay-trigger.test.js +0 -5
  54. package/test/overlay-trigger.test.js.map +0 -7
  55. package/test/overlay-update.test.js +0 -28
  56. package/test/overlay-update.test.js.map +0 -7
  57. package/test/overlay-v1.test.js +0 -569
  58. package/test/overlay-v1.test.js.map +0 -7
  59. package/test/overlay.test-vrt.js +0 -5
  60. package/test/overlay.test-vrt.js.map +0 -7
  61. package/test/overlay.test.js +0 -865
  62. package/test/overlay.test.js.map +0 -7
package/stories/overlay-directive.stories.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["overlay-directive.stories.ts"],
4
- "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\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 {\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n OverlayContentTypes,\n OverlayOpenCloseDetail,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n InsertionOptions,\n trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = 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::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay Directive',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n triggerOn: 'click',\n open: false,\n },\n};\n\ninterface Properties {\n placement?: Placement;\n offset?: number;\n triggerOn?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n insertionOptions?: InsertionOptions;\n open?: boolean;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n triggerOn,\n insertionOptions,\n}: Properties): TemplateResult => {\n const renderTooltip = (): TemplateResult => html`\n Click to open a popover.\n `;\n const renderPopover = (): TemplateResult => html`\n <sp-popover placement=\"${ifDefined(placement)}\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <sp-button\n ${tooltip(\n () => html`\n Click to open another popover.\n `\n )}\n ${trigger(\n () => html`\n <sp-popover placement=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-dialog>\n </sp-popover>\n `,\n {\n triggerInteraction: 'click',\n overlayOptions: {\n placement: 'bottom',\n },\n }\n )}\n >\n Press Me\n </sp-button>\n </div>\n </sp-dialog>\n </sp-popover>\n `;\n return html`\n ${storyStyles}\n <sp-button\n variant=\"primary\"\n ${tooltip(renderTooltip)}\n ${trigger(renderPopover, {\n open,\n triggerInteraction: triggerOn,\n overlayOptions: {\n placement,\n offset,\n },\n insertionOptions: insertionOptions,\n })}\n >\n Show Popover\n </sp-button>\n `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n const renderPopover = (): TemplateResult => html`\n <sp-popover>\n <sp-dialog no-divider>Popover content goes here</sp-dialog>\n </sp-popover>\n `;\n const options = typeof open !== 'undefined' ? { open } : undefined;\n return html`\n <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n `;\n};\n\nDefault.swc_vrt = {\n skip: true,\n};\n\nDefault.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n skip: true,\n};\n\nconfigured.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n ${template(args)}\n <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n insertionOptions: {\n el: () => document.querySelector('#other-element'),\n where: 'afterbegin',\n },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n skip: true,\n};\n\ninsertionOptions.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n @state()\n private isRenderOverlay = false;\n\n @state()\n private isOpenState = false;\n\n protected override render(): TemplateResult {\n return html`\n <sp-button\n @click=${() => {\n this.isRenderOverlay = !this.isRenderOverlay;\n }}\n >\n Toggle Overlay Render Button\n </sp-button>\n\n <sp-button\n @click=${() => {\n this.isRenderOverlay = true;\n this.isOpenState = true;\n }}\n >\n Create Overlay Render Button And Open Overlay\n </sp-button>\n\n ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n `;\n }\n\n private renderOverlayButton(): TemplateResult {\n return html`\n <sp-button\n ?selected=${this.isOpenState}\n ${trigger(\n () => html`\n <sp-popover\n @sp-opened=${(\n event: CustomEvent<OverlayOpenCloseDetail>\n ) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n console.log('sp-opened');\n this.isOpenState = true;\n }}\n @sp-closed=${(\n event: CustomEvent<OverlayOpenCloseDetail>\n ) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n console.log('sp-closed');\n this.isOpenState = false;\n }}\n >\n <h1>My Test Popover</h1>\n </sp-popover>\n `,\n {\n triggerInteraction: 'click',\n overlayOptions: { placement: 'bottom-end' },\n open: this.isOpenState,\n }\n )}\n >\n Toggle Popover\n </sp-button>\n `;\n }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n skip: true,\n};\n\nmanagedOverlayTrigger.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n"],
5
- "mappings": "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",
6
- "names": ["insertionOptions"]
7
- }