ember-primitives 0.40.0 → 0.42.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.
- package/README.md +91 -0
- package/declarations/-private.d.ts +1 -0
- package/declarations/-private.d.ts.map +1 -0
- package/declarations/color-scheme.d.ts +1 -0
- package/declarations/color-scheme.d.ts.map +1 -0
- package/declarations/components/-private/typed-elements.d.ts +1 -0
- package/declarations/components/-private/typed-elements.d.ts.map +1 -0
- package/declarations/components/-private/utils.d.ts +1 -0
- package/declarations/components/-private/utils.d.ts.map +1 -0
- package/declarations/components/accordion/content.d.ts +1 -0
- package/declarations/components/accordion/content.d.ts.map +1 -0
- package/declarations/components/accordion/header.d.ts +1 -0
- package/declarations/components/accordion/header.d.ts.map +1 -0
- package/declarations/components/accordion/item.d.ts +1 -0
- package/declarations/components/accordion/item.d.ts.map +1 -0
- package/declarations/components/accordion/public.d.ts +1 -0
- package/declarations/components/accordion/public.d.ts.map +1 -0
- package/declarations/components/accordion/trigger.d.ts +1 -0
- package/declarations/components/accordion/trigger.d.ts.map +1 -0
- package/declarations/components/accordion.d.ts +1 -0
- package/declarations/components/accordion.d.ts.map +1 -0
- package/declarations/components/avatar.d.ts +1 -0
- package/declarations/components/avatar.d.ts.map +1 -0
- package/declarations/components/dialog.d.ts +1 -0
- package/declarations/components/dialog.d.ts.map +1 -0
- package/declarations/components/external-link.d.ts +1 -0
- package/declarations/components/external-link.d.ts.map +1 -0
- package/declarations/components/form.d.ts +1 -0
- package/declarations/components/form.d.ts.map +1 -0
- package/declarations/components/keys.d.ts +1 -0
- package/declarations/components/keys.d.ts.map +1 -0
- package/declarations/components/layout/hero.d.ts +1 -0
- package/declarations/components/layout/hero.d.ts.map +1 -0
- package/declarations/components/layout/sticky-footer.d.ts +1 -0
- package/declarations/components/layout/sticky-footer.d.ts.map +1 -0
- package/declarations/components/link.d.ts +1 -0
- package/declarations/components/link.d.ts.map +1 -0
- package/declarations/components/menu.d.ts +1 -0
- package/declarations/components/menu.d.ts.map +1 -0
- package/declarations/components/one-time-password/buttons.d.ts +1 -0
- package/declarations/components/one-time-password/buttons.d.ts.map +1 -0
- package/declarations/components/one-time-password/index.d.ts +1 -0
- package/declarations/components/one-time-password/index.d.ts.map +1 -0
- package/declarations/components/one-time-password/input.d.ts +1 -0
- package/declarations/components/one-time-password/input.d.ts.map +1 -0
- package/declarations/components/one-time-password/otp.d.ts +1 -0
- package/declarations/components/one-time-password/otp.d.ts.map +1 -0
- package/declarations/components/one-time-password/utils.d.ts +1 -0
- package/declarations/components/one-time-password/utils.d.ts.map +1 -0
- package/declarations/components/popover.d.ts +1 -0
- package/declarations/components/popover.d.ts.map +1 -0
- package/declarations/components/portal-targets.d.ts +1 -0
- package/declarations/components/portal-targets.d.ts.map +1 -0
- package/declarations/components/portal.d.ts +1 -0
- package/declarations/components/portal.d.ts.map +1 -0
- package/declarations/components/progress.d.ts +1 -0
- package/declarations/components/progress.d.ts.map +1 -0
- package/declarations/components/rating/index.d.ts +1 -0
- package/declarations/components/rating/index.d.ts.map +1 -0
- package/declarations/components/rating/public-types.d.ts +1 -0
- package/declarations/components/rating/public-types.d.ts.map +1 -0
- package/declarations/components/rating/range.d.ts +1 -0
- package/declarations/components/rating/range.d.ts.map +1 -0
- package/declarations/components/rating/stars.d.ts +1 -0
- package/declarations/components/rating/stars.d.ts.map +1 -0
- package/declarations/components/rating/state.d.ts +1 -0
- package/declarations/components/rating/state.d.ts.map +1 -0
- package/declarations/components/rating/utils.d.ts +1 -0
- package/declarations/components/rating/utils.d.ts.map +1 -0
- package/declarations/components/rating.d.ts +1 -0
- package/declarations/components/rating.d.ts.map +1 -0
- package/declarations/components/scroller.d.ts +1 -0
- package/declarations/components/scroller.d.ts.map +1 -0
- package/declarations/components/shadowed.d.ts +1 -0
- package/declarations/components/shadowed.d.ts.map +1 -0
- package/declarations/components/switch.d.ts +1 -0
- package/declarations/components/switch.d.ts.map +1 -0
- package/declarations/components/tabs.d.ts +233 -0
- package/declarations/components/tabs.d.ts.map +1 -0
- package/declarations/components/toggle-group.d.ts +1 -0
- package/declarations/components/toggle-group.d.ts.map +1 -0
- package/declarations/components/toggle.d.ts +1 -0
- package/declarations/components/toggle.d.ts.map +1 -0
- package/declarations/components/violations.css.d.ts +2 -0
- package/declarations/components/violations.css.d.ts.map +1 -0
- package/declarations/components/visually-hidden.d.ts +1 -0
- package/declarations/components/visually-hidden.d.ts.map +1 -0
- package/declarations/components/zoetrope/index.d.ts +1 -0
- package/declarations/components/zoetrope/index.d.ts.map +1 -0
- package/declarations/components/zoetrope/types.d.ts +1 -0
- package/declarations/components/zoetrope/types.d.ts.map +1 -0
- package/declarations/components/zoetrope.d.ts +1 -0
- package/declarations/components/zoetrope.d.ts.map +1 -0
- package/declarations/dom-context.d.ts +1 -0
- package/declarations/dom-context.d.ts.map +1 -0
- package/declarations/floating-ui/component.d.ts +1 -0
- package/declarations/floating-ui/component.d.ts.map +1 -0
- package/declarations/floating-ui/middleware.d.ts +1 -0
- package/declarations/floating-ui/middleware.d.ts.map +1 -0
- package/declarations/floating-ui/modifier.d.ts +1 -0
- package/declarations/floating-ui/modifier.d.ts.map +1 -0
- package/declarations/floating-ui.d.ts +1 -0
- package/declarations/floating-ui.d.ts.map +1 -0
- package/declarations/head.d.ts +1 -0
- package/declarations/head.d.ts.map +1 -0
- package/declarations/helpers/body-class.d.ts +1 -0
- package/declarations/helpers/body-class.d.ts.map +1 -0
- package/declarations/helpers/link.d.ts +1 -0
- package/declarations/helpers/link.d.ts.map +1 -0
- package/declarations/helpers/service.d.ts +1 -0
- package/declarations/helpers/service.d.ts.map +1 -0
- package/declarations/helpers.d.ts +1 -0
- package/declarations/helpers.d.ts.map +1 -0
- package/declarations/iframe.d.ts +1 -0
- package/declarations/iframe.d.ts.map +1 -0
- package/declarations/index.d.ts +1 -0
- package/declarations/index.d.ts.map +1 -0
- package/declarations/load.d.ts +1 -0
- package/declarations/load.d.ts.map +1 -0
- package/declarations/narrowing.d.ts +1 -0
- package/declarations/narrowing.d.ts.map +1 -0
- package/declarations/on-resize.d.ts +2 -12
- package/declarations/on-resize.d.ts.map +1 -0
- package/declarations/proper-links.d.ts +1 -0
- package/declarations/proper-links.d.ts.map +1 -0
- package/declarations/qp.d.ts +1 -0
- package/declarations/qp.d.ts.map +1 -0
- package/declarations/resize-observer.d.ts +52 -0
- package/declarations/resize-observer.d.ts.map +1 -0
- package/declarations/store.d.ts +1 -0
- package/declarations/store.d.ts.map +1 -0
- package/declarations/styles.css.d.ts +1 -0
- package/declarations/styles.css.d.ts.map +1 -0
- package/declarations/tabster.d.ts +1 -0
- package/declarations/tabster.d.ts.map +1 -0
- package/declarations/template-registry.d.ts +1 -0
- package/declarations/template-registry.d.ts.map +1 -0
- package/declarations/test-support/a11y.d.ts +1 -0
- package/declarations/test-support/a11y.d.ts.map +1 -0
- package/declarations/test-support/index.d.ts +1 -0
- package/declarations/test-support/index.d.ts.map +1 -0
- package/declarations/test-support/otp.d.ts +1 -0
- package/declarations/test-support/otp.d.ts.map +1 -0
- package/declarations/test-support/rating.d.ts +1 -0
- package/declarations/test-support/rating.d.ts.map +1 -0
- package/declarations/test-support/routing.d.ts +1 -0
- package/declarations/test-support/routing.d.ts.map +1 -0
- package/declarations/test-support/zoetrope.d.ts +1 -0
- package/declarations/test-support/zoetrope.d.ts.map +1 -0
- package/declarations/type-utils.d.ts +1 -0
- package/declarations/type-utils.d.ts.map +1 -0
- package/declarations/utils.d.ts +25 -0
- package/declarations/utils.d.ts.map +1 -0
- package/dist/-private.js +1 -0
- package/dist/-private.js.map +1 -1
- package/dist/color-scheme.js +1 -0
- package/dist/color-scheme.js.map +1 -1
- package/dist/components/-private/typed-elements.js +1 -0
- package/dist/components/-private/typed-elements.js.map +1 -1
- package/dist/components/-private/utils.js +1 -0
- package/dist/components/-private/utils.js.map +1 -1
- package/dist/components/accordion/content.js +2 -1
- package/dist/components/accordion/content.js.map +1 -1
- package/dist/components/accordion/header.js +2 -1
- package/dist/components/accordion/header.js.map +1 -1
- package/dist/components/accordion/item.js +2 -1
- package/dist/components/accordion/item.js.map +1 -1
- package/dist/components/accordion/trigger.js +2 -1
- package/dist/components/accordion/trigger.js.map +1 -1
- package/dist/components/accordion.js +2 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/avatar.js +1 -0
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/dialog.js +1 -0
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/external-link.js +1 -0
- package/dist/components/external-link.js.map +1 -1
- package/dist/components/form.js +1 -0
- package/dist/components/form.js.map +1 -1
- package/dist/components/keys.js +1 -0
- package/dist/components/keys.js.map +1 -1
- package/dist/components/layout/hero.js +3 -1
- package/dist/components/layout/hero.js.map +1 -1
- package/dist/components/layout/sticky-footer.js +3 -1
- package/dist/components/layout/sticky-footer.js.map +1 -1
- package/dist/components/link.js +1 -0
- package/dist/components/link.js.map +1 -1
- package/dist/components/menu.js +1 -0
- package/dist/components/menu.js.map +1 -1
- package/dist/components/one-time-password/buttons.js +1 -0
- package/dist/components/one-time-password/buttons.js.map +1 -1
- package/dist/components/one-time-password/index.js +1 -0
- package/dist/components/one-time-password/index.js.map +1 -1
- package/dist/components/one-time-password/input.js +1 -0
- package/dist/components/one-time-password/input.js.map +1 -1
- package/dist/components/one-time-password/otp.js +1 -0
- package/dist/components/one-time-password/otp.js.map +1 -1
- package/dist/components/one-time-password/utils.js +1 -0
- package/dist/components/one-time-password/utils.js.map +1 -1
- package/dist/components/popover.js +1 -0
- package/dist/components/popover.js.map +1 -1
- package/dist/components/portal-targets.js +1 -0
- package/dist/components/portal-targets.js.map +1 -1
- package/dist/components/portal.js +1 -0
- package/dist/components/portal.js.map +1 -1
- package/dist/components/progress.js +1 -0
- package/dist/components/progress.js.map +1 -1
- package/dist/components/rating/index.js +1 -0
- package/dist/components/rating/index.js.map +1 -1
- package/dist/components/rating/range.js +1 -0
- package/dist/components/rating/range.js.map +1 -1
- package/dist/components/rating/stars.js +1 -0
- package/dist/components/rating/stars.js.map +1 -1
- package/dist/components/rating/state.js +1 -0
- package/dist/components/rating/state.js.map +1 -1
- package/dist/components/rating/utils.js +1 -0
- package/dist/components/rating/utils.js.map +1 -1
- package/dist/components/rating.js +1 -0
- package/dist/components/scroller.js +1 -0
- package/dist/components/scroller.js.map +1 -1
- package/dist/components/shadowed.js +1 -0
- package/dist/components/shadowed.js.map +1 -1
- package/dist/components/switch.js +1 -0
- package/dist/components/switch.js.map +1 -1
- package/dist/components/tabs.js +218 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/toggle-group.js +1 -0
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.js +1 -0
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/violations.css.js +3 -0
- package/dist/components/violations.css.js.map +1 -0
- package/dist/components/visually-hidden.js +2 -1
- package/dist/components/visually-hidden.js.map +1 -1
- package/dist/components/zoetrope/index.js +3 -1
- package/dist/components/zoetrope/index.js.map +1 -1
- package/dist/components/zoetrope.js +1 -0
- package/dist/dom-context.js +2 -1
- package/dist/dom-context.js.map +1 -1
- package/dist/floating-ui/component.js +1 -0
- package/dist/floating-ui/component.js.map +1 -1
- package/dist/floating-ui/middleware.js +1 -0
- package/dist/floating-ui/middleware.js.map +1 -1
- package/dist/floating-ui/modifier.js +1 -0
- package/dist/floating-ui/modifier.js.map +1 -1
- package/dist/floating-ui.js +1 -0
- package/dist/floating-ui.js.map +1 -1
- package/dist/head.js +1 -0
- package/dist/head.js.map +1 -1
- package/dist/helpers/body-class.js +1 -0
- package/dist/helpers/body-class.js.map +1 -1
- package/dist/helpers/link.js +1 -0
- package/dist/helpers/link.js.map +1 -1
- package/dist/helpers/service.js +1 -0
- package/dist/helpers/service.js.map +1 -1
- package/dist/helpers.js +1 -0
- package/dist/helpers.js.map +1 -1
- package/dist/iframe.js +1 -0
- package/dist/iframe.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/{item-D6pwWzMs.js → item-CwIzoqlC.js} +2 -1
- package/dist/item-CwIzoqlC.js.map +1 -0
- package/dist/load.js +1 -0
- package/dist/load.js.map +1 -1
- package/dist/narrowing.js +1 -0
- package/dist/narrowing.js.map +1 -1
- package/dist/on-resize.js +5 -88
- package/dist/on-resize.js.map +1 -1
- package/dist/proper-links.js +1 -0
- package/dist/proper-links.js.map +1 -1
- package/dist/qp.js +1 -0
- package/dist/qp.js.map +1 -1
- package/dist/resize-observer.js +113 -0
- package/dist/resize-observer.js.map +1 -0
- package/dist/store.js +1 -0
- package/dist/store.js.map +1 -1
- package/dist/styles.css.js +2 -1
- package/dist/tabster.js +1 -0
- package/dist/tabster.js.map +1 -1
- package/dist/test-support/a11y.js +1 -0
- package/dist/test-support/a11y.js.map +1 -1
- package/dist/test-support/index.js +1 -0
- package/dist/test-support/index.js.map +1 -1
- package/dist/test-support/otp.js +1 -0
- package/dist/test-support/otp.js.map +1 -1
- package/dist/test-support/rating.js +1 -0
- package/dist/test-support/rating.js.map +1 -1
- package/dist/test-support/routing.js +1 -0
- package/dist/test-support/routing.js.map +1 -1
- package/dist/test-support/zoetrope.js +1 -0
- package/dist/test-support/zoetrope.js.map +1 -1
- package/dist/utils.js +47 -1
- package/dist/utils.js.map +1 -1
- package/dist/visually-hidden-CGP1FSjt.js +3 -0
- package/dist/visually-hidden-CGP1FSjt.js.map +1 -0
- package/package.json +23 -25
- package/dist/item-D6pwWzMs.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/components/one-time-password/utils.ts"],"sourcesContent":["import { assert } from '@ember/debug';\n\nfunction getInputs(current: HTMLInputElement) {\n const fieldset = current.closest('fieldset');\n\n assert('[BUG]: fieldset went missing', fieldset);\n\n return [...fieldset.querySelectorAll('input')];\n}\n\nfunction nextInput(current: HTMLInputElement) {\n const inputs = getInputs(current);\n const currentIndex = inputs.indexOf(current);\n\n return inputs[currentIndex + 1];\n}\n\nexport function selectAll(event: Event) {\n const target = event.target;\n\n assert(`selectAll is only meant for use with input elements`, target instanceof HTMLInputElement);\n\n target.select();\n}\n\nexport function handlePaste(event: Event) {\n const target = event.target;\n\n assert(\n `handlePaste is only meant for use with input elements`,\n target instanceof HTMLInputElement\n );\n\n const clipboardData = (event as ClipboardEvent).clipboardData;\n\n assert(\n `Could not get clipboardData while handling the paste event on OTP. Please report this issue on the ember-primitives repo with a reproduction. Thanks!`,\n clipboardData\n );\n\n // This is typically not good to prevent paste.\n // But because of the UX we're implementing,\n // we want to split the pasted value across\n // multiple text fields\n event.preventDefault();\n\n const value = clipboardData.getData('Text');\n const digits = value;\n let i = 0;\n let currElement: HTMLInputElement | null = target;\n\n while (currElement) {\n currElement.value = digits[i++] || '';\n\n const next = nextInput(currElement);\n\n if (next instanceof HTMLInputElement) {\n currElement = next;\n } else {\n break;\n }\n }\n\n // We want to select the first field again\n // so that if someone holds paste, or\n // pastes again, they get the same result.\n target.select();\n}\n\nexport function handleNavigation(event: KeyboardEvent) {\n switch (event.key) {\n case 'Backspace':\n return handleBackspace(event);\n case 'ArrowLeft':\n return focusLeft(event);\n case 'ArrowRight':\n return focusRight(event);\n }\n}\n\nfunction focusLeft(event: Pick<Event, 'target'>) {\n const target = event.target;\n\n assert(`only allowed on input elements`, target instanceof HTMLInputElement);\n\n const input = previousInput(target);\n\n input?.focus();\n requestAnimationFrame(() => {\n input?.select();\n });\n}\n\nfunction focusRight(event: Pick<Event, 'target'>) {\n const target = event.target;\n\n assert(`only allowed on input elements`, target instanceof HTMLInputElement);\n\n const input = nextInput(target);\n\n input?.focus();\n requestAnimationFrame(() => {\n input?.select();\n });\n}\n\nconst syntheticEvent = new InputEvent('input');\n\nfunction handleBackspace(event: KeyboardEvent) {\n if (event.key !== 'Backspace') return;\n\n /**\n * We have to prevent default because we\n * - want to clear the whole field\n * - have the focus behavior keep up with the key-repeat\n * speed of the user's computer\n */\n event.preventDefault();\n\n const target = event.target;\n\n if (target && 'value' in target) {\n if (target.value === '') {\n focusLeft({ target });\n } else {\n target.value = '';\n }\n }\n\n target?.dispatchEvent(syntheticEvent);\n}\n\nfunction previousInput(current: HTMLInputElement) {\n const inputs = getInputs(current);\n const currentIndex = inputs.indexOf(current);\n\n return inputs[currentIndex - 1];\n}\n\nexport const autoAdvance = (event: Event) => {\n assert(\n '[BUG]: autoAdvance called on non-input element',\n event.target instanceof HTMLInputElement\n );\n\n const value = event.target.value;\n\n if (value.length === 0) return;\n\n if (value.length > 0) {\n if ('data' in event && event.data && typeof event.data === 'string') {\n event.target.value = event.data;\n }\n\n return focusRight(event);\n }\n};\n\nexport function getCollectiveValue(elementTarget: EventTarget | null, length: number) {\n if (!elementTarget) return;\n\n assert(\n `[BUG]: somehow the element target is not HTMLElement`,\n elementTarget instanceof HTMLElement\n );\n\n let parent: null | HTMLElement | ShadowRoot;\n\n // TODO: should this logic be extracted?\n // why is getting the target element within a shadow root hard?\n if (!(elementTarget instanceof HTMLInputElement)) {\n if (elementTarget.shadowRoot) {\n parent = elementTarget.shadowRoot;\n } else {\n parent = elementTarget.closest('fieldset');\n }\n } else {\n parent = elementTarget.closest('fieldset');\n }\n\n assert(`[BUG]: somehow the input fields were rendered without a parent element`, parent);\n\n const elements = parent.querySelectorAll('input');\n\n let value = '';\n\n assert(\n `found elements (${elements.length}) do not match length (${length}). Was the same OTP input rendered more than once?`,\n elements.length === length\n );\n\n for (const element of elements) {\n assert(\n '[BUG]: how did the queried elements become a non-input element?',\n element instanceof HTMLInputElement\n );\n value += element.value;\n }\n\n return value;\n}\n"],"names":["getInputs","current","fieldset","closest","assert","querySelectorAll","nextInput","inputs","currentIndex","indexOf","selectAll","event","target","HTMLInputElement","select","handlePaste","clipboardData","preventDefault","value","getData","digits","i","currElement","next","handleNavigation","key","handleBackspace","focusLeft","focusRight","input","previousInput","focus","requestAnimationFrame","syntheticEvent","InputEvent","dispatchEvent","autoAdvance","length","data","getCollectiveValue","elementTarget","HTMLElement","parent","shadowRoot","elements","element"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sources":["../../src/components/popover.gts"],"sourcesContent":["import { hash } from \"@ember/helper\";\n\nimport { arrow } from \"@floating-ui/dom\";\nimport { element } from \"ember-element-helper\";\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\n\nimport { FloatingUI } from \"../floating-ui.ts\";\nimport { Portal } from \"./portal.gts\";\nimport { TARGETS } from \"./portal-targets.gts\";\n\nimport type { Signature as FloatingUiComponentSignature } from \"../floating-ui/component.ts\";\nimport type { Signature as HookSignature } from \"../floating-ui/modifier.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ElementContext, Middleware } from \"@floating-ui/dom\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n Args: {\n /**\n * See the Floating UI's [flip docs](https://floating-ui.com/docs/flip) for possible values.\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n flipOptions?: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"];\n /**\n * Array of one or more objects to add to Floating UI's list of [middleware](https://floating-ui.com/docs/middleware)\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n middleware?: HookSignature[\"Args\"][\"Named\"][\"middleware\"];\n /**\n * See the Floating UI's [offset docs](https://floating-ui.com/docs/offset) for possible values.\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n offsetOptions?: HookSignature[\"Args\"][\"Named\"][\"offsetOptions\"];\n /**\n * One of the possible [`placements`](https://floating-ui.com/docs/computeposition#placement). The default is 'bottom'.\n *\n * Possible values are\n * - top\n * - bottom\n * - right\n * - left\n *\n * And may optionally have `-start` or `-end` added to adjust position along the side.\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n placement?: `${\"top\" | \"bottom\" | \"left\" | \"right\"}${\"\" | \"-start\" | \"-end\"}`;\n /**\n * See the Floating UI's [shift docs](https://floating-ui.com/docs/shift) for possible values.\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n shiftOptions?: HookSignature[\"Args\"][\"Named\"][\"shiftOptions\"];\n /**\n * CSS position property, either `fixed` or `absolute`.\n *\n * Pros and cons of each strategy are explained on [Floating UI's Docs](https://floating-ui.com/docs/computePosition#strategy)\n *\n * This argument is forwarded to the `<FloatingUI>` component.\n */\n strategy?: HookSignature[\"Args\"][\"Named\"][\"strategy\"];\n\n /**\n * By default, the popover is portaled.\n * If you don't control your CSS, and the positioning of the popover content\n * is misbehaving, you may pass \"@inline={{true}}\" to opt out of portalling.\n *\n * Inline may also be useful in nested menus, where you know exactly how the nesting occurs\n */\n inline?: boolean;\n };\n Blocks: {\n default: [\n {\n reference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][0];\n setReference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"setReference\"];\n Content: WithBoundArgs<typeof Content, \"floating\">;\n data: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"data\"];\n arrow: ModifierLike<{ Element: HTMLElement }>;\n },\n ];\n };\n}\n\nfunction getElementTag(tagName: undefined | string) {\n return tagName || \"div\";\n}\n\n/**\n * Allows lazy evaluation of the portal target (do nothing until rendered)\n * This is useful because the algorithm for finding the portal target isn't cheap.\n */\nconst Content: TOC<{\n Element: HTMLDivElement;\n Args: {\n floating: ModifierLike<{ Element: HTMLElement }>;\n inline?: boolean;\n /**\n * By default the popover content is wrapped in a div.\n * You may change this by supplying the name of an element here.\n *\n * For example:\n * ```gjs\n * <Popover as |p|>\n * <p.Content @as=\"dialog\">\n * this is now focus trapped\n * </p.Content>\n * </Popover>\n * ```\n */\n as?: string;\n };\n Blocks: { default: [] };\n}> = <template>\n {{#let (element (getElementTag @as)) as |El|}}\n {{#if @inline}}\n {{! @glint-ignore\n https://github.com/tildeio/ember-element-helper/issues/91\n https://github.com/typed-ember/glint/issues/610\n }}\n <El {{@floating}} ...attributes>\n {{yield}}\n </El>\n {{else}}\n <Portal @to={{TARGETS.popover}}>\n {{! @glint-ignore\n https://github.com/tildeio/ember-element-helper/issues/91\n https://github.com/typed-ember/glint/issues/610\n }}\n <El {{@floating}} ...attributes>\n {{yield}}\n </El>\n </Portal>\n {{/if}}\n {{/let}}\n</template>;\n\ninterface AttachArrowSignature {\n Element: HTMLElement;\n Args: {\n Named: {\n arrowElement: ReturnType<typeof ArrowElement>;\n data:\n | undefined\n | {\n placement: string;\n middlewareData?: {\n arrow?: { x?: number; y?: number };\n };\n };\n };\n };\n}\n\nconst arrowSides = {\n top: \"bottom\",\n right: \"left\",\n bottom: \"top\",\n left: \"right\",\n};\n\ntype Direction = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Placement = `${Direction}${\"\" | \"-start\" | \"-end\"}`;\n\nconst attachArrow: ModifierLike<AttachArrowSignature> = eModifier<AttachArrowSignature>(\n (element, _: [], named) => {\n if (element === named.arrowElement.current) {\n if (!named.data) return;\n if (!named.data.middlewareData) return;\n\n const { arrow } = named.data.middlewareData;\n const { placement } = named.data;\n\n if (!arrow) return;\n if (!placement) return;\n\n const { x: arrowX, y: arrowY } = arrow;\n const otherSide = (placement as Placement).split(\"-\")[0] as Direction;\n const staticSide = arrowSides[otherSide];\n\n Object.assign(named.arrowElement.current.style, {\n left: arrowX != null ? `${arrowX}px` : \"\",\n top: arrowY != null ? `${arrowY}px` : \"\",\n right: \"\",\n bottom: \"\",\n [staticSide]: \"-4px\",\n });\n\n return;\n }\n\n void (async () => {\n await Promise.resolve();\n named.arrowElement.set(element);\n })();\n },\n);\n\nconst ArrowElement: () => ReturnType<typeof cell<HTMLElement>> = () => cell<HTMLElement>();\n\nfunction maybeAddArrow(middleware: Middleware[] | undefined, element: Element | undefined) {\n const result = [...(middleware || [])];\n\n if (element) {\n result.push(arrow({ element }));\n }\n\n return result;\n}\n\nfunction flipOptions(options: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"]) {\n return {\n elementContext: \"reference\" as ElementContext,\n ...options,\n };\n}\n\nexport const Popover: TOC<Signature> = <template>\n {{#let (ArrowElement) as |arrowElement|}}\n <FloatingUI\n @placement={{@placement}}\n @strategy={{@strategy}}\n @middleware={{maybeAddArrow @middleware arrowElement.current}}\n @flipOptions={{flipOptions @flipOptions}}\n @shiftOptions={{@shiftOptions}}\n @offsetOptions={{@offsetOptions}}\n as |reference floating extra|\n >\n {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}\n {{yield\n (hash\n reference=reference\n setReference=extra.setReference\n Content=(component Content floating=floating inline=@inline)\n data=extra.data\n arrow=arrow\n )\n }}\n {{/let}}\n </FloatingUI>\n {{/let}}\n</template>;\n\nexport default Popover;\n"],"names":["getElementTag","tagName","Content","setComponentTemplate","precompileTemplate","strictMode","scope","element","Portal","TARGETS","templateOnly","arrowSides","top","right","bottom","left","attachArrow","eModifier","_","named","arrowElement","current","data","middlewareData","arrow","placement","x","arrowX","y","arrowY","otherSide","split","staticSide","Object","assign","style","Promise","resolve","set","ArrowElement","cell","maybeAddArrow","middleware","result","push","flipOptions","options","elementContext","Popover","FloatingUI","hash"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal-targets.js","sources":[
|
|
1
|
+
{"version":3,"file":"portal-targets.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal.js","sources":[
|
|
1
|
+
{"version":3,"file":"portal.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","sources":[
|
|
1
|
+
{"version":3,"file":"progress.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range.js","sources":[
|
|
1
|
+
{"version":3,"file":"range.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stars.js","sources":[
|
|
1
|
+
{"version":3,"file":"stars.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.js","sources":[
|
|
1
|
+
{"version":3,"file":"state.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":[
|
|
1
|
+
{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroller.js","sources":[
|
|
1
|
+
{"version":3,"file":"scroller.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowed.js","sources":[
|
|
1
|
+
{"version":3,"file":"shadowed.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sources":[
|
|
1
|
+
{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
|
|
2
|
+
import Component from '@glimmer/component';
|
|
3
|
+
import { tracked } from '@glimmer/tracking';
|
|
4
|
+
import { isDestroyed, isDestroying } from '@ember/destroyable';
|
|
5
|
+
import { fn } from '@ember/helper';
|
|
6
|
+
import { on } from '@ember/modifier';
|
|
7
|
+
import { next } from '@ember/runloop';
|
|
8
|
+
import { getTabsterAttribute, MoverDirections } from 'tabster';
|
|
9
|
+
import { uniqueId } from '../utils.js';
|
|
10
|
+
import { Portal } from './portal.js';
|
|
11
|
+
import { buildWaiter } from '@ember/test-waiters';
|
|
12
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
13
|
+
import { setComponentTemplate } from '@ember/component';
|
|
14
|
+
import templateOnly from '@ember/component/template-only';
|
|
15
|
+
import { g, i } from 'decorator-transforms/runtime';
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* References:
|
|
19
|
+
* - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role
|
|
20
|
+
* - https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
|
|
21
|
+
*
|
|
22
|
+
*
|
|
23
|
+
* Keyboard behaviors (optionally) provided by tabster
|
|
24
|
+
*/
|
|
25
|
+
const UNSET = Symbol.for("ember-primitives:tabs:unset");
|
|
26
|
+
const TABSTER_CONFIG = getTabsterAttribute({
|
|
27
|
+
mover: {
|
|
28
|
+
direction: MoverDirections.Both,
|
|
29
|
+
cyclic: true,
|
|
30
|
+
memorizeCurrent: true
|
|
31
|
+
},
|
|
32
|
+
deloser: {}
|
|
33
|
+
}, true);
|
|
34
|
+
const TabLink = setComponentTemplate(precompileTemplate("\n <a href=\"##missing##\" ...attributes role=\"tab\" aria-controls={{@panelId}} id={{@id}}>\n {{yield}}\n </a>\n", {
|
|
35
|
+
strictMode: true
|
|
36
|
+
}), templateOnly());
|
|
37
|
+
const TabButton = setComponentTemplate(precompileTemplate("\n <button ...attributes role=\"tab\" type=\"button\" aria-controls={{@panelId}} aria-selected={{String (@state.isActive @id @value)}} id={{@id}} {{on \"click\" @handleClick}} {{!-- The Types for modifier are wrong --}} {{!-- @glint-expect-error--}} {{(if @state.isAutomatic (modifier on \"focus\" @handleClick))}}>\n {{yield}}\n </button>\n", {
|
|
38
|
+
strictMode: true,
|
|
39
|
+
scope: () => ({
|
|
40
|
+
String,
|
|
41
|
+
on
|
|
42
|
+
})
|
|
43
|
+
}), templateOnly());
|
|
44
|
+
const TabContent = setComponentTemplate(precompileTemplate("\n <Portal @to=\"#{{@state.tabpanelId}}\" @append={{true}}>\n {{#if (@state.isActive @tabId)}}\n <div ...attributes role=\"tabpanel\" aria-labelledby={{@tabId}} id={{@id}}>\n {{yield}}\n </div>\n {{/if}}\n </Portal>\n", {
|
|
45
|
+
strictMode: true,
|
|
46
|
+
scope: () => ({
|
|
47
|
+
Portal
|
|
48
|
+
})
|
|
49
|
+
}), templateOnly());
|
|
50
|
+
function isString(x) {
|
|
51
|
+
return typeof x === "string";
|
|
52
|
+
}
|
|
53
|
+
function makeTab(tabButton, tabLink) {
|
|
54
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
|
|
55
|
+
tabButton.Link = tabLink;
|
|
56
|
+
return tabButton;
|
|
57
|
+
}
|
|
58
|
+
class TabContainer extends Component {
|
|
59
|
+
id = `ember-primitives__tab-${uniqueId()}`;
|
|
60
|
+
get tabId() {
|
|
61
|
+
return `${this.id}__tab`;
|
|
62
|
+
}
|
|
63
|
+
get panelId() {
|
|
64
|
+
return `${this.id}__panel`;
|
|
65
|
+
}
|
|
66
|
+
get label() {
|
|
67
|
+
return this.args.label ?? this.tabId;
|
|
68
|
+
}
|
|
69
|
+
static {
|
|
70
|
+
setComponentTemplate(precompileTemplate("\n {{#if @label}}\n <TabButton @state={{@state}} @id={{this.tabId}} @value={{@value}} @panelId={{this.panelId}} @handleClick={{fn @state.handleChange this.tabId @value}}>\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </TabButton>\n\n <TabContent @state={{@state}} @id={{this.panelId}} @tabId={{this.tabId}}>\n {{#if @content}}\n {{#if (isString @content)}}\n {{@content}}\n {{else}}\n <@content />\n {{/if}}\n {{else}}\n {{yield}}\n {{/if}}\n </TabContent>\n {{else}}\n {{yield (makeTab (component TabButton state=@state value=@value id=this.tabId panelId=this.panelId handleClick=(fn @state.handleChange this.tabId @value)) (component TabLink state=@state id=this.tabId panelId=this.panelId)) (component TabContent state=@state id=this.panelId tabId=this.tabId)}}\n {{/if}}\n ", {
|
|
71
|
+
strictMode: true,
|
|
72
|
+
scope: () => ({
|
|
73
|
+
TabButton,
|
|
74
|
+
fn,
|
|
75
|
+
isString,
|
|
76
|
+
TabContent,
|
|
77
|
+
makeTab,
|
|
78
|
+
TabLink
|
|
79
|
+
})
|
|
80
|
+
}), this);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
const Label = setComponentTemplate(precompileTemplate("\n <Portal @to=\"#{{@state.labelId}}\">\n {{yield}}\n </Portal>\n", {
|
|
84
|
+
strictMode: true,
|
|
85
|
+
scope: () => ({
|
|
86
|
+
Portal
|
|
87
|
+
})
|
|
88
|
+
}), templateOnly());
|
|
89
|
+
/**
|
|
90
|
+
* We're doing old skool hax with this, so we don't need to care about what the types think, really
|
|
91
|
+
*/
|
|
92
|
+
function makeAPI(tabContainer, labelComponent) {
|
|
93
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
|
|
94
|
+
tabContainer.Label = labelComponent;
|
|
95
|
+
return tabContainer;
|
|
96
|
+
}
|
|
97
|
+
const stateWaiter = buildWaiter("ember-primitives:tabs");
|
|
98
|
+
/**
|
|
99
|
+
* State bucket passed around to all the sub-components.
|
|
100
|
+
*
|
|
101
|
+
* Sort of a "Context", but with a bit of prop-drilling (which is more efficient than dom-context)
|
|
102
|
+
*/
|
|
103
|
+
class TabState {
|
|
104
|
+
static {
|
|
105
|
+
g(this.prototype, "_active", [tracked], function () {
|
|
106
|
+
return null;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
#_active = (i(this, "_active"), void 0);
|
|
110
|
+
static {
|
|
111
|
+
g(this.prototype, "_label", [tracked]);
|
|
112
|
+
}
|
|
113
|
+
#_label = (i(this, "_label"), void 0);
|
|
114
|
+
#first = null;
|
|
115
|
+
id;
|
|
116
|
+
labelId;
|
|
117
|
+
tabpanelId;
|
|
118
|
+
#token;
|
|
119
|
+
constructor(args) {
|
|
120
|
+
this.args = args;
|
|
121
|
+
this.id = `ember-primitives-${uniqueId()}`;
|
|
122
|
+
this.labelId = `${this.id}__label`;
|
|
123
|
+
this.tabpanelId = `${this.id}__tabpanel`;
|
|
124
|
+
}
|
|
125
|
+
get activationMode() {
|
|
126
|
+
return this.args.activationMode ?? "automatic";
|
|
127
|
+
}
|
|
128
|
+
get isAutomatic() {
|
|
129
|
+
return this.activationMode === "automatic";
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* This function relies on the fact that during rendering,
|
|
133
|
+
* the first component to be rendered will be first,
|
|
134
|
+
* and it will be the one to set the secret first value,
|
|
135
|
+
* which means all other tabs will not be first.
|
|
136
|
+
*
|
|
137
|
+
*/
|
|
138
|
+
isActive = (tabId, tabValue) => {
|
|
139
|
+
/**
|
|
140
|
+
* When users pass the @value to a tab, we use that for managing
|
|
141
|
+
* the "active state" instead of the DOM ID.
|
|
142
|
+
*
|
|
143
|
+
* NOTE: DOM IDs must be unique across the whole document, but @value
|
|
144
|
+
* does not need to be unqiue.
|
|
145
|
+
* `@value` *should* be unique for the Tabs component though
|
|
146
|
+
*/
|
|
147
|
+
const isSelected = x => {
|
|
148
|
+
if (tabValue) return x === tabValue;
|
|
149
|
+
return x === tabId;
|
|
150
|
+
};
|
|
151
|
+
if (this.active === UNSET) {
|
|
152
|
+
if (this.#first) return isSelected(this.#first);
|
|
153
|
+
this.#first = tabValue ?? tabId;
|
|
154
|
+
this.#token = stateWaiter.beginAsync();
|
|
155
|
+
// eslint-disable-next-line ember/no-runloop
|
|
156
|
+
next(() => {
|
|
157
|
+
if (!this.#token) return;
|
|
158
|
+
stateWaiter.endAsync(this.#token);
|
|
159
|
+
if (this._active) return;
|
|
160
|
+
if (isDestroyed(this) || isDestroying(this)) return;
|
|
161
|
+
this._label = tabValue ?? tabId;
|
|
162
|
+
});
|
|
163
|
+
return true;
|
|
164
|
+
}
|
|
165
|
+
return isSelected(this.active);
|
|
166
|
+
};
|
|
167
|
+
get active() {
|
|
168
|
+
return this._active ?? this.args.activeTab ?? UNSET;
|
|
169
|
+
}
|
|
170
|
+
get activeLabel() {
|
|
171
|
+
/**
|
|
172
|
+
* This is only needed during the first set
|
|
173
|
+
* because we prioritize rendering first, and then updating metadata later
|
|
174
|
+
* (next render)
|
|
175
|
+
*
|
|
176
|
+
* NOTE: this does not mean that the a11y tree is updated later.
|
|
177
|
+
* it is correct on initial render
|
|
178
|
+
*/
|
|
179
|
+
if (this._label) {
|
|
180
|
+
return this._label;
|
|
181
|
+
}
|
|
182
|
+
if (this.active === UNSET) {
|
|
183
|
+
return "Pending";
|
|
184
|
+
}
|
|
185
|
+
return this.active;
|
|
186
|
+
}
|
|
187
|
+
handleChange = (tabId, tabValue) => {
|
|
188
|
+
const previous = this.active;
|
|
189
|
+
const next = tabValue ?? tabId;
|
|
190
|
+
// No change, no need to be noisy
|
|
191
|
+
if (next === previous) return;
|
|
192
|
+
this._active = this._label = next;
|
|
193
|
+
this.args.onChange?.(next, previous === UNSET ? null : previous);
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
class Tabs extends Component {
|
|
197
|
+
state;
|
|
198
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
199
|
+
constructor(owner, args) {
|
|
200
|
+
super(owner, args);
|
|
201
|
+
this.state = new TabState(args);
|
|
202
|
+
}
|
|
203
|
+
static {
|
|
204
|
+
setComponentTemplate(precompileTemplate("\n <div class=\"ember-primitives__tabs\" ...attributes data-active={{this.state.activeLabel}}>\n {{!-- This element will be portaled in to and replaced if tabs.Label is invoked --}}\n <div class=\"ember-primitives__tabs__label\" id={{this.state.labelId}}>\n {{#if (isString @label)}}\n {{@label}}\n {{else}}\n <@label />\n {{/if}}\n </div>\n <div class=\"ember-primitives__tabs__tablist\" role=\"tablist\" aria-labelledby={{this.state.labelId}} data-tabster={{TABSTER_CONFIG}}>\n {{yield (makeAPI (component TabContainer state=this.state) (component Label state=this.state))}}\n </div>\n {{!--\n Tab's contents are portaled in to this element\n --}}\n <div class=\"ember-primitives__tabs__tabpanel\" id={{this.state.tabpanelId}}></div>\n </div>\n ", {
|
|
205
|
+
strictMode: true,
|
|
206
|
+
scope: () => ({
|
|
207
|
+
isString,
|
|
208
|
+
TABSTER_CONFIG,
|
|
209
|
+
makeAPI,
|
|
210
|
+
TabContainer,
|
|
211
|
+
Label
|
|
212
|
+
})
|
|
213
|
+
}), this);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
export { Tabs };
|
|
218
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.js","sources":[
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sources":[
|
|
1
|
+
{"version":3,"file":"toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"violations.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|