ember-primitives 0.32.0 → 0.34.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/declarations/-private.d.ts +0 -1
- package/declarations/color-scheme.d.ts +0 -1
- package/declarations/components/-private/typed-elements.d.ts +0 -1
- package/declarations/components/-private/utils.d.ts +0 -1
- package/declarations/components/accordion/content.d.ts +0 -1
- package/declarations/components/accordion/header.d.ts +0 -1
- package/declarations/components/accordion/item.d.ts +0 -1
- package/declarations/components/accordion/public.d.ts +0 -1
- package/declarations/components/accordion/trigger.d.ts +0 -1
- package/declarations/components/accordion.d.ts +0 -1
- package/declarations/components/avatar.d.ts +0 -1
- package/declarations/components/dialog.d.ts +0 -1
- package/declarations/components/external-link.d.ts +0 -1
- package/declarations/components/form.d.ts +0 -1
- package/declarations/components/keys.d.ts +0 -1
- package/declarations/components/layout/hero.d.ts +0 -1
- package/declarations/components/layout/sticky-footer.d.ts +0 -1
- package/declarations/components/link.d.ts +0 -1
- package/declarations/components/menu.d.ts +0 -1
- package/declarations/components/one-time-password/buttons.d.ts +0 -1
- package/declarations/components/one-time-password/index.d.ts +0 -1
- package/declarations/components/one-time-password/input.d.ts +0 -1
- package/declarations/components/one-time-password/otp.d.ts +0 -1
- package/declarations/components/one-time-password/utils.d.ts +0 -1
- package/declarations/components/popover.d.ts +0 -1
- package/declarations/components/portal-targets.d.ts +0 -1
- package/declarations/components/portal.d.ts +0 -1
- package/declarations/components/progress.d.ts +0 -1
- package/declarations/components/rating/index.d.ts +0 -1
- package/declarations/components/rating/public-types.d.ts +0 -1
- package/declarations/components/rating/range.d.ts +0 -1
- package/declarations/components/rating/stars.d.ts +0 -1
- package/declarations/components/rating/state.d.ts +0 -1
- package/declarations/components/rating/utils.d.ts +0 -1
- package/declarations/components/rating.d.ts +0 -1
- package/declarations/components/scroller.d.ts +0 -1
- package/declarations/components/shadowed.d.ts +0 -1
- package/declarations/components/switch.d.ts +0 -1
- package/declarations/components/toggle-group.d.ts +0 -1
- package/declarations/components/toggle.d.ts +0 -1
- package/declarations/components/visually-hidden.d.ts +0 -1
- package/declarations/components/zoetrope/index.d.ts +0 -1
- package/declarations/components/zoetrope/types.d.ts +0 -1
- package/declarations/components/zoetrope.d.ts +0 -1
- package/declarations/floating-ui/component.d.ts +0 -1
- package/declarations/floating-ui/middleware.d.ts +0 -1
- package/declarations/floating-ui/modifier.d.ts +0 -1
- package/declarations/floating-ui.d.ts +0 -1
- package/declarations/helpers/body-class.d.ts +0 -1
- package/declarations/helpers/link.d.ts +0 -1
- package/declarations/helpers/service.d.ts +0 -1
- package/declarations/helpers.d.ts +0 -1
- package/declarations/iframe.d.ts +0 -1
- package/declarations/index.d.ts +0 -1
- package/declarations/on-resize.d.ts +0 -1
- package/declarations/proper-links.d.ts +0 -1
- package/declarations/qp.d.ts +73 -0
- package/declarations/styles.css.d.ts +0 -1
- package/declarations/tabster.d.ts +0 -1
- package/declarations/template-registry.d.ts +0 -1
- package/declarations/test-support/a11y.d.ts +0 -1
- package/declarations/test-support/index.d.ts +0 -1
- package/declarations/test-support/otp.d.ts +0 -1
- package/declarations/test-support/rating.d.ts +0 -1
- package/declarations/test-support/routing.d.ts +0 -1
- package/declarations/test-support/zoetrope.d.ts +0 -1
- package/declarations/utils.d.ts +0 -1
- package/dist/components/-private/typed-elements.js.map +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/external-link.js.map +1 -1
- package/dist/components/form.js.map +1 -1
- package/dist/components/keys.js.map +1 -1
- package/dist/components/layout/hero.js.map +1 -1
- package/dist/components/layout/sticky-footer.js.map +1 -1
- package/dist/components/link.js.map +1 -1
- package/dist/components/menu.js.map +1 -1
- package/dist/components/one-time-password/buttons.js.map +1 -1
- package/dist/components/one-time-password/input.js.map +1 -1
- package/dist/components/one-time-password/otp.js.map +1 -1
- package/dist/components/one-time-password/utils.js.map +1 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/portal-targets.js.map +1 -1
- package/dist/components/portal.js.map +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/rating/index.js.map +1 -1
- package/dist/components/rating/range.js.map +1 -1
- package/dist/components/rating/stars.js.map +1 -1
- package/dist/components/rating/state.js.map +1 -1
- package/dist/components/scroller.js.map +1 -1
- package/dist/components/shadowed.js.map +1 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/violations.css +8 -8
- package/dist/components/visually-hidden.js.map +1 -1
- package/dist/components/zoetrope/index.js.map +1 -1
- package/dist/floating-ui/component.js.map +1 -1
- package/dist/floating-ui/modifier.js.map +1 -1
- package/dist/item-D6pwWzMs.js.map +1 -1
- package/dist/proper-links.js.map +1 -1
- package/dist/qp.js +92 -0
- package/dist/qp.js.map +1 -0
- package/dist/test-support/otp.js.map +1 -1
- package/dist/test-support/rating.js.map +1 -1
- package/package.json +13 -13
- package/declarations/-private.d.ts.map +0 -1
- package/declarations/color-scheme.d.ts.map +0 -1
- package/declarations/components/-private/typed-elements.d.ts.map +0 -1
- package/declarations/components/-private/utils.d.ts.map +0 -1
- package/declarations/components/accordion/content.d.ts.map +0 -1
- package/declarations/components/accordion/header.d.ts.map +0 -1
- package/declarations/components/accordion/item.d.ts.map +0 -1
- package/declarations/components/accordion/public.d.ts.map +0 -1
- package/declarations/components/accordion/trigger.d.ts.map +0 -1
- package/declarations/components/accordion.d.ts.map +0 -1
- package/declarations/components/avatar.d.ts.map +0 -1
- package/declarations/components/dialog.d.ts.map +0 -1
- package/declarations/components/external-link.d.ts.map +0 -1
- package/declarations/components/form.d.ts.map +0 -1
- package/declarations/components/keys.d.ts.map +0 -1
- package/declarations/components/layout/hero.d.ts.map +0 -1
- package/declarations/components/layout/sticky-footer.d.ts.map +0 -1
- package/declarations/components/link.d.ts.map +0 -1
- package/declarations/components/menu.d.ts.map +0 -1
- package/declarations/components/one-time-password/buttons.d.ts.map +0 -1
- package/declarations/components/one-time-password/index.d.ts.map +0 -1
- package/declarations/components/one-time-password/input.d.ts.map +0 -1
- package/declarations/components/one-time-password/otp.d.ts.map +0 -1
- package/declarations/components/one-time-password/utils.d.ts.map +0 -1
- package/declarations/components/popover.d.ts.map +0 -1
- package/declarations/components/portal-targets.d.ts.map +0 -1
- package/declarations/components/portal.d.ts.map +0 -1
- package/declarations/components/progress.d.ts.map +0 -1
- package/declarations/components/rating/index.d.ts.map +0 -1
- package/declarations/components/rating/public-types.d.ts.map +0 -1
- package/declarations/components/rating/range.d.ts.map +0 -1
- package/declarations/components/rating/stars.d.ts.map +0 -1
- package/declarations/components/rating/state.d.ts.map +0 -1
- package/declarations/components/rating/utils.d.ts.map +0 -1
- package/declarations/components/rating.d.ts.map +0 -1
- package/declarations/components/scroller.d.ts.map +0 -1
- package/declarations/components/shadowed.d.ts.map +0 -1
- package/declarations/components/switch.d.ts.map +0 -1
- package/declarations/components/toggle-group.d.ts.map +0 -1
- package/declarations/components/toggle.d.ts.map +0 -1
- package/declarations/components/visually-hidden.d.ts.map +0 -1
- package/declarations/components/zoetrope/index.d.ts.map +0 -1
- package/declarations/components/zoetrope/types.d.ts.map +0 -1
- package/declarations/components/zoetrope.d.ts.map +0 -1
- package/declarations/floating-ui/component.d.ts.map +0 -1
- package/declarations/floating-ui/middleware.d.ts.map +0 -1
- package/declarations/floating-ui/modifier.d.ts.map +0 -1
- package/declarations/floating-ui.d.ts.map +0 -1
- package/declarations/helpers/body-class.d.ts.map +0 -1
- package/declarations/helpers/link.d.ts.map +0 -1
- package/declarations/helpers/service.d.ts.map +0 -1
- package/declarations/helpers.d.ts.map +0 -1
- package/declarations/iframe.d.ts.map +0 -1
- package/declarations/index.d.ts.map +0 -1
- package/declarations/on-resize.d.ts.map +0 -1
- package/declarations/proper-links.d.ts.map +0 -1
- package/declarations/styles.css.d.ts.map +0 -1
- package/declarations/tabster.d.ts.map +0 -1
- package/declarations/template-registry.d.ts.map +0 -1
- package/declarations/test-support/a11y.d.ts.map +0 -1
- package/declarations/test-support/index.d.ts.map +0 -1
- package/declarations/test-support/otp.d.ts.map +0 -1
- package/declarations/test-support/rating.d.ts.map +0 -1
- package/declarations/test-support/routing.d.ts.map +0 -1
- package/declarations/test-support/zoetrope.d.ts.map +0 -1
- package/declarations/utils.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"external-link.js","sources":["../../src/components/external-link.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nexport const ExternalLink: TOC<{\n Element: HTMLAnchorElement;\n Blocks: {\n default: [];\n };\n}> = <template>\n <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"##missing##\" ...attributes>\n {{yield}}\n </a>\n</template>;\n\nexport default ExternalLink;\n"],"names":["ExternalLink","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;MAEaA,YAKR,GAAAC,oBAAA,CAAAC,kBAAA,
|
|
1
|
+
{"version":3,"file":"external-link.js","sources":["../../src/components/external-link.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nexport const ExternalLink: TOC<{\n Element: HTMLAnchorElement;\n Blocks: {\n default: [];\n };\n}> = <template>\n <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"##missing##\" ...attributes>\n {{yield}}\n </a>\n</template>;\n\nexport default ExternalLink;\n"],"names":["ExternalLink","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;MAEaA,YAKR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,mHAAA,EAIL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sources":["../../src/components/form.gts"],"sourcesContent":["import { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { dataFrom } from \"form-data-utils\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Data = ReturnType<typeof dataFrom>;\n\nexport const dataFromEvent = dataFrom;\n\nconst handleInput = (\n onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event) => void,\n event: Event | SubmitEvent,\n eventType: \"input\" | \"submit\" = \"input\",\n) => {\n const data = dataFrom(event);\n\n onChange(data, eventType, event);\n};\n\nconst handleSubmit = (\n onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event | SubmitEvent) => void,\n event: SubmitEvent,\n) => {\n event.preventDefault();\n handleInput(onChange, event, \"submit\");\n};\n\nexport interface Signature {\n Element: HTMLFormElement;\n Args: {\n /**\n * Any time the value of any field is changed this function will be called.\n */\n onChange: (\n /**\n * The data from the form as an Object of `{ [field name] => value }` pairs.\n * This is generated from the native [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)\n *\n * Additional fields/inputs/controls can be added to this data by specifying a\n * \"name\" attribute.\n */\n data: Data,\n /**\n * Indicates whether the `onChange` function was called from the `input` or `submit` event handlers.\n */\n eventType: \"input\" | \"submit\",\n /**\n * The raw event, if needed.\n */\n event: Event | SubmitEvent,\n ) => void;\n };\n Blocks: {\n /**\n * The main content for the form. This is where inputs / fields / controls would go.\n * Within the `<form>` content, `<button type=\"submit\">` will submit the form, which\n * triggers the `@onChange` event.\n */\n default: [];\n };\n}\n\nexport const Form: TOC<Signature> = <template>\n <form\n {{on \"input\" (fn handleInput @onChange)}}\n {{on \"submit\" (fn handleSubmit @onChange)}}\n ...attributes\n >\n {{yield}}\n </form>\n</template>;\n\nexport default Form;\n"],"names":["dataFromEvent","dataFrom","handleInput","onChange","event","eventType","data","handleSubmit","preventDefault","Form","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","templateOnly"],"mappings":";;;;;;;AASO,MAAMA,gBAAgBC;AAE7B,MAAMC,cAAcA,CAClBC,QAA2E,EAC3EC,OACAC,YAAgC,OAAO,KAAA;AAEvC,EAAA,MAAMC,OAAOL,
|
|
1
|
+
{"version":3,"file":"form.js","sources":["../../src/components/form.gts"],"sourcesContent":["import { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { dataFrom } from \"form-data-utils\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Data = ReturnType<typeof dataFrom>;\n\nexport const dataFromEvent = dataFrom;\n\nconst handleInput = (\n onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event) => void,\n event: Event | SubmitEvent,\n eventType: \"input\" | \"submit\" = \"input\",\n) => {\n const data = dataFrom(event);\n\n onChange(data, eventType, event);\n};\n\nconst handleSubmit = (\n onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event | SubmitEvent) => void,\n event: SubmitEvent,\n) => {\n event.preventDefault();\n handleInput(onChange, event, \"submit\");\n};\n\nexport interface Signature {\n Element: HTMLFormElement;\n Args: {\n /**\n * Any time the value of any field is changed this function will be called.\n */\n onChange: (\n /**\n * The data from the form as an Object of `{ [field name] => value }` pairs.\n * This is generated from the native [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)\n *\n * Additional fields/inputs/controls can be added to this data by specifying a\n * \"name\" attribute.\n */\n data: Data,\n /**\n * Indicates whether the `onChange` function was called from the `input` or `submit` event handlers.\n */\n eventType: \"input\" | \"submit\",\n /**\n * The raw event, if needed.\n */\n event: Event | SubmitEvent,\n ) => void;\n };\n Blocks: {\n /**\n * The main content for the form. This is where inputs / fields / controls would go.\n * Within the `<form>` content, `<button type=\"submit\">` will submit the form, which\n * triggers the `@onChange` event.\n */\n default: [];\n };\n}\n\nexport const Form: TOC<Signature> = <template>\n <form\n {{on \"input\" (fn handleInput @onChange)}}\n {{on \"submit\" (fn handleSubmit @onChange)}}\n ...attributes\n >\n {{yield}}\n </form>\n</template>;\n\nexport default Form;\n"],"names":["dataFromEvent","dataFrom","handleInput","onChange","event","eventType","data","handleSubmit","preventDefault","Form","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","templateOnly"],"mappings":";;;;;;;AASO,MAAMA,gBAAgBC;AAE7B,MAAMC,cAAcA,CAClBC,QAA2E,EAC3EC,OACAC,YAAgC,OAAO,KAAA;AAEvC,EAAA,MAAMC,OAAOL,QAAA,CAASG,KAAA,CAAA;AAEtBD,EAAAA,QAAA,CAASG,MAAMD,SAAA,EAAWD,KAAA,CAAA;AAC5B,CAAA;AAEA,MAAMG,YAAA,GAAeA,CACnBJ,QAAyF,EACzFC,KAAO,KAAA;EAEPA,KAAA,CAAMI,cAAc,EAAA;AACpBN,EAAAA,WAAA,CAAYC,UAAUC,KAAA,EAAO,QAAA,CAAA;AAC/B,CAAA;MAqCaK,IAAU,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,gJAAA,EAQpC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAb,WAAA;AAAAK,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAS,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keys.js","sources":["../../src/components/keys.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nconst isLast = (collection: unknown[], index: number) => index === collection.length - 1;\nconst isNotLast = (collection: unknown[], index: number) => !isLast(collection, index);\nconst isMac = navigator.userAgent.indexOf(\"Mac OS\") >= 0;\n\nfunction split(str: string) {\n const keys = str.split(\"+\").map((x) => x.trim());\n\n return keys;\n}\n\nfunction getKeys(keys: string[] | string, mac?: string[] | string) {\n const normalKeys = Array.isArray(keys) ? keys : split(keys);\n\n if (!mac) {\n return normalKeys;\n }\n\n const normalMac = Array.isArray(mac) ? mac : split(mac);\n\n return isMac ? normalMac : normalKeys;\n}\n\nexport interface KeyComboSignature {\n Element: HTMLElement;\n Args: {\n keys: string[] | string;\n mac?: string[] | string;\n };\n}\n\nexport const KeyCombo: TOC<KeyComboSignature> = <template>\n <span class=\"ember-primitives__key-combination\" ...attributes>\n {{#let (getKeys @keys @mac) as |keys|}}\n {{#each keys as |key i|}}\n <Key>{{key}}</Key>\n {{#if (isNotLast keys i)}}\n <span class=\"ember-primitives__key-combination__separator\">+</span>\n {{/if}}\n {{/each}}\n {{/let}}\n </span>\n</template>;\n\nexport interface KeySignature {\n Element: HTMLElement;\n Blocks: { default?: [] };\n}\n\nexport const Key: TOC<KeySignature> = <template>\n <kbd class=\"ember-primitives__key\" ...attributes>{{yield}}</kbd>\n</template>;\n"],"names":["isLast","collection","index","length","isNotLast","isMac","navigator","userAgent","indexOf","split","str","keys","map","x","trim","getKeys","mac","normalKeys","Array","isArray","normalMac","KeyCombo","setComponentTemplate","precompileTemplate","strictMode","scope","Key","templateOnly"],"mappings":";;;;AAEA,MAAMA,MAAA,GAASA,CAACC,UAAmB,EAAIC,KAAa,KAAKA,KAAA,KAAUD,
|
|
1
|
+
{"version":3,"file":"keys.js","sources":["../../src/components/keys.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nconst isLast = (collection: unknown[], index: number) => index === collection.length - 1;\nconst isNotLast = (collection: unknown[], index: number) => !isLast(collection, index);\nconst isMac = navigator.userAgent.indexOf(\"Mac OS\") >= 0;\n\nfunction split(str: string) {\n const keys = str.split(\"+\").map((x) => x.trim());\n\n return keys;\n}\n\nfunction getKeys(keys: string[] | string, mac?: string[] | string) {\n const normalKeys = Array.isArray(keys) ? keys : split(keys);\n\n if (!mac) {\n return normalKeys;\n }\n\n const normalMac = Array.isArray(mac) ? mac : split(mac);\n\n return isMac ? normalMac : normalKeys;\n}\n\nexport interface KeyComboSignature {\n Element: HTMLElement;\n Args: {\n keys: string[] | string;\n mac?: string[] | string;\n };\n}\n\nexport const KeyCombo: TOC<KeyComboSignature> = <template>\n <span class=\"ember-primitives__key-combination\" ...attributes>\n {{#let (getKeys @keys @mac) as |keys|}}\n {{#each keys as |key i|}}\n <Key>{{key}}</Key>\n {{#if (isNotLast keys i)}}\n <span class=\"ember-primitives__key-combination__separator\">+</span>\n {{/if}}\n {{/each}}\n {{/let}}\n </span>\n</template>;\n\nexport interface KeySignature {\n Element: HTMLElement;\n Blocks: { default?: [] };\n}\n\nexport const Key: TOC<KeySignature> = <template>\n <kbd class=\"ember-primitives__key\" ...attributes>{{yield}}</kbd>\n</template>;\n"],"names":["isLast","collection","index","length","isNotLast","isMac","navigator","userAgent","indexOf","split","str","keys","map","x","trim","getKeys","mac","normalKeys","Array","isArray","normalMac","KeyCombo","setComponentTemplate","precompileTemplate","strictMode","scope","Key","templateOnly"],"mappings":";;;;AAEA,MAAMA,MAAA,GAASA,CAACC,UAAmB,EAAIC,KAAa,KAAKA,KAAA,KAAUD,UAAA,CAAWE,MAAM,GAAG,CAAA;AACvF,MAAMC,SAAA,GAAYA,CAACH,UAAmB,EAAIC,KAAa,KAAK,CAACF,MAAA,CAAOC,UAAA,EAAYC,KAAA,CAAA;AAChF,MAAMG,QAAQC,SAAA,CAAUC,SAAS,CAACC,OAAO,CAAC,QAAA,CAAA,IAAa,CAAA;AAEvD,SAASC,KAAAA,CAAMC,GAAW,EAAA;AACxB,EAAA,MAAMC,IAAA,GAAOD,GAAA,CAAID,KAAK,CAAC,GAAA,CAAA,CAAKG,GAAG,CAAEC,CAAA,IAAMA,CAAA,CAAEC,IAAI,EAAA,CAAA;AAE7C,EAAA,OAAOH,IAAA;AACT;AAEA,SAASI,OAAAA,CAAQJ,IAAuB,EAAEK,GAAuB,EAAA;AAC/D,EAAA,MAAMC,aAAaC,KAAA,CAAMC,OAAO,CAACR,IAAA,CAAA,GAAQA,OAAOF,KAAA,CAAME,IAAA,CAAA;EAEtD,IAAI,CAACK,GAAA,EAAK;AACR,IAAA,OAAOC,UAAA;AACT;AAEA,EAAA,MAAMG,YAAYF,KAAA,CAAMC,OAAO,CAACH,GAAA,CAAA,GAAOA,MAAMP,KAAA,CAAMO,GAAA,CAAA;AAEnD,EAAA,OAAOX,QAAQe,SAAA,GAAYH,UAAA;AAC7B;MAUaI,QAAc,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,kWAAA,EAWhD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAV,OAAA;IAAAW,GAAA;AAAAtB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAuB,YAAA,EAAA;MAOGD,GAAS,GAAAJ,oBAAA,CAAgBC,kBAAA,CAAA,0EAAA,EAEtC;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAG,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.js","sources":["../../../src/components/layout/hero.gts"],"sourcesContent":["import \"./hero.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Hero: TOC<{\n /**\n * The wrapper element of the whole layout.\n */\n Element: HTMLDivElement;\n Blocks: {\n default: [];\n };\n}> = <template>\n <div class=\"ember-primitives__hero__wrapper\" ...attributes>\n {{yield}}\n </div>\n</template>;\n"],"names":["Hero","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,IAQR,GAAAC,oBAAA,CAAAC,kBAAA,
|
|
1
|
+
{"version":3,"file":"hero.js","sources":["../../../src/components/layout/hero.gts"],"sourcesContent":["import \"./hero.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Hero: TOC<{\n /**\n * The wrapper element of the whole layout.\n */\n Element: HTMLDivElement;\n Blocks: {\n default: [];\n };\n}> = <template>\n <div class=\"ember-primitives__hero__wrapper\" ...attributes>\n {{yield}}\n </div>\n</template>;\n"],"names":["Hero","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,IAQR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,8FAAA,EAIL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky-footer.js","sources":["../../../src/components/layout/sticky-footer.gts"],"sourcesContent":["import \"./sticky-footer.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const StickyFooter: TOC<{\n /**\n * The wrapper element of the whole layout.\n * Valid parents for this element must have either a set height,\n * or a set max-height.\n */\n Element: HTMLDivElement;\n Blocks: {\n /**\n * This is the scrollable content, contained within a `<div>` element for positioning.\n * If this component is used as the main layout on a page,\n * the `<main>` element would be appropriate within here.\n */\n content: [];\n /**\n * This is the footer content, contained within a `<div>` element for positioning.\n * A `<footer>` element would be appropriate within here.\n *\n * This element will be at the bottom of the page if the content does not overflow the containing element and this element will be at the bottom of the content if there is overflow.\n */\n footer: [];\n };\n}> = <template>\n <div class=\"ember-primitives__sticky-footer__wrapper\" ...attributes>\n <div class=\"ember-primitives__sticky-footer__container\">\n <div class=\"ember-primitives__sticky-footer__content\">\n {{yield to=\"content\"}}\n </div>\n <div class=\"ember-primitives__sticky-footer__footer\">\n {{yield to=\"footer\"}}\n </div>\n </div>\n </div>\n</template>;\n\nexport default StickyFooter;\n"],"names":["StickyFooter","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,YAsBR,GAAAC,oBAAA,CAAAC,kBAAA,
|
|
1
|
+
{"version":3,"file":"sticky-footer.js","sources":["../../../src/components/layout/sticky-footer.gts"],"sourcesContent":["import \"./sticky-footer.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const StickyFooter: TOC<{\n /**\n * The wrapper element of the whole layout.\n * Valid parents for this element must have either a set height,\n * or a set max-height.\n */\n Element: HTMLDivElement;\n Blocks: {\n /**\n * This is the scrollable content, contained within a `<div>` element for positioning.\n * If this component is used as the main layout on a page,\n * the `<main>` element would be appropriate within here.\n */\n content: [];\n /**\n * This is the footer content, contained within a `<div>` element for positioning.\n * A `<footer>` element would be appropriate within here.\n *\n * This element will be at the bottom of the page if the content does not overflow the containing element and this element will be at the bottom of the content if there is overflow.\n */\n footer: [];\n };\n}> = <template>\n <div class=\"ember-primitives__sticky-footer__wrapper\" ...attributes>\n <div class=\"ember-primitives__sticky-footer__container\">\n <div class=\"ember-primitives__sticky-footer__content\">\n {{yield to=\"content\"}}\n </div>\n <div class=\"ember-primitives__sticky-footer__footer\">\n {{yield to=\"footer\"}}\n </div>\n </div>\n </div>\n</template>;\n\nexport default StickyFooter;\n"],"names":["StickyFooter","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,YAsBR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,kYAAA,EAWL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../../src/components/link.gts"],"sourcesContent":["/**\n * TODO: make template-only component,\n * and use class-based modifier?\n *\n * This would require that modifiers could run pre-render\n */\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { link } from '../helpers/link.ts';\nimport { ExternalLink } from './external-link.gts';\n\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface Signature {\n Element: HTMLAnchorElement;\n Args: {\n /**\n * the `href` string value to set on the anchor element.\n */\n href: string;\n /**\n * When calculating the \"active\" state of the link, you may decide\n * whether or not you want to _require_ that all query params be considered (true)\n * or specify individual query params, ignoring anything not specified.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * <template>\n * <Link @href=\"/\" @includeActiveQueryParams={{true}} as |a|>\n * ...\n * </Link>\n * </template>\n * ```\n *\n * the data-active state here will only be \"true\" on\n * - `/`\n * - `/?foo=2`\n * - `/?foo=&bar=`\n *\n */\n includeActiveQueryParams?: true | string[];\n /**\n * When calculating the \"active\" state of the link, you may decide\n * whether or not you want to consider sub paths to be active when\n * child routes/urls are active.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * <template>\n * <Link @href=\"/forum/1\" @activeOnSubPaths={{true}} as |a|>\n * ...\n * </Link>\n * </template>\n * ```\n *\n * the data-active state here will be \"true\" on\n * - `/forum/1`\n * - `/forum/1/posts`\n * - `/forum/1/posts/comments`\n * - `/forum/1/*etc*`\n *\n * if `@activeOnSubPaths` is set to false or left off\n * the data-active state here will only be \"true\" on\n * - `/forum/1`\n *\n */\n activeOnSubPaths?: true;\n };\n Blocks: {\n default: [\n {\n /**\n * Indicates if the passed `href` is pointing to an external site.\n * Useful if you want your links to have additional context for when\n * a user is about to leave your site.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * const MyLink = <template>\n * <Link @href={{@href}} as |a|>\n * {{yield}}\n * {{#if a.isExternal}}\n * ➚\n * {{/if}}\n * </Link>\n * </template>;\n *\n * <template>\n * <MyLink @href=\"https://developer.mozilla.org\">MDN</MyLink> \n * <MyLink @href=\"/\">Home</MyLink>\n * </template>\n * ```\n */\n isExternal: boolean;\n /**\n * Indicates if the passed `href` is *active*, or the user is on the same basepath.\n * This allows consumers to style their link if they wish or style their text.\n * The active state will also be present on a `data-active` attribute on the generated anchor tag.\n *\n *\n * For example\n * ```gjs\n * import { Link, service } from 'ember-primitives';\n *\n * const MyLink = <template>\n * <Link @href=\"...\"> as |a|>\n * <span class=\"{{if a.isActive 'underline'}}\">\n * {{yield}}\n * </span>\n * </Link>\n * </template>\n *\n * <template>\n * {{#let (service 'router') as |router|}}\n * <MyLink @href={{router.currentURL}}>Ths page</MyLink> \n * <MyLink @href=\"/\">Home</MyLink>\n * {{/let}}\n * </template>\n * ```\n *\n * By default, the query params are omitted from `isActive` calculation, but you may\n * configure the query params to be included if you wish\n * See: `@includeActiveQueryParams`\n *\n * By default, only the exact route/url is considered for the `isActive` calculation,\n * but you may configure sub routes/paths to also be considered active\n * See: `@activeOnSubPaths`\n *\n * Note that external links are never active.\n */\n isActive: boolean;\n },\n ];\n };\n}\n\n/**\n * A light wrapper around the [Anchor element][mdn-a], which will appropriately make your link an external link if the passed `@href` is not on the same domain.\n *\n *\n * [mdn-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport const Link: TOC<Signature> = <template>\n {{#let (link @href includeActiveQueryParams=@includeActiveQueryParams activeOnSubPaths=@activeOnSubPaths) as |l|}}\n {{#if l.isExternal}}\n <ExternalLink href={{@href}} ...attributes>\n {{yield (hash isExternal=true isActive=false)}}\n </ExternalLink>\n {{else}}\n <a\n data-active={{l.isActive}}\n href={{if @href @href \"##missing##\"}}\n {{on \"click\" l.handleClick}}\n ...attributes\n >\n {{yield (hash isExternal=false isActive=l.isActive)}}\n </a>\n {{/if}}\n {{/let}}\n</template>;\n\nexport default Link;\n"],"names":["Link","setComponentTemplate","precompileTemplate","strictMode","scope","link","ExternalLink","hash","on","templateOnly"],"mappings":";;;;;;;;AAAA;;;;;AAKC;AA6ID;;;;;AAKC;MACYA,IAAU,GAAAC,oBAAA,CAAaC,kBAAA,
|
|
1
|
+
{"version":3,"file":"link.js","sources":["../../src/components/link.gts"],"sourcesContent":["/**\n * TODO: make template-only component,\n * and use class-based modifier?\n *\n * This would require that modifiers could run pre-render\n */\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { link } from '../helpers/link.ts';\nimport { ExternalLink } from './external-link.gts';\n\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface Signature {\n Element: HTMLAnchorElement;\n Args: {\n /**\n * the `href` string value to set on the anchor element.\n */\n href: string;\n /**\n * When calculating the \"active\" state of the link, you may decide\n * whether or not you want to _require_ that all query params be considered (true)\n * or specify individual query params, ignoring anything not specified.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * <template>\n * <Link @href=\"/\" @includeActiveQueryParams={{true}} as |a|>\n * ...\n * </Link>\n * </template>\n * ```\n *\n * the data-active state here will only be \"true\" on\n * - `/`\n * - `/?foo=2`\n * - `/?foo=&bar=`\n *\n */\n includeActiveQueryParams?: true | string[];\n /**\n * When calculating the \"active\" state of the link, you may decide\n * whether or not you want to consider sub paths to be active when\n * child routes/urls are active.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * <template>\n * <Link @href=\"/forum/1\" @activeOnSubPaths={{true}} as |a|>\n * ...\n * </Link>\n * </template>\n * ```\n *\n * the data-active state here will be \"true\" on\n * - `/forum/1`\n * - `/forum/1/posts`\n * - `/forum/1/posts/comments`\n * - `/forum/1/*etc*`\n *\n * if `@activeOnSubPaths` is set to false or left off\n * the data-active state here will only be \"true\" on\n * - `/forum/1`\n *\n */\n activeOnSubPaths?: true;\n };\n Blocks: {\n default: [\n {\n /**\n * Indicates if the passed `href` is pointing to an external site.\n * Useful if you want your links to have additional context for when\n * a user is about to leave your site.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Link } from 'ember-primitives';\n *\n * const MyLink = <template>\n * <Link @href={{@href}} as |a|>\n * {{yield}}\n * {{#if a.isExternal}}\n * ➚\n * {{/if}}\n * </Link>\n * </template>;\n *\n * <template>\n * <MyLink @href=\"https://developer.mozilla.org\">MDN</MyLink> \n * <MyLink @href=\"/\">Home</MyLink>\n * </template>\n * ```\n */\n isExternal: boolean;\n /**\n * Indicates if the passed `href` is *active*, or the user is on the same basepath.\n * This allows consumers to style their link if they wish or style their text.\n * The active state will also be present on a `data-active` attribute on the generated anchor tag.\n *\n *\n * For example\n * ```gjs\n * import { Link, service } from 'ember-primitives';\n *\n * const MyLink = <template>\n * <Link @href=\"...\"> as |a|>\n * <span class=\"{{if a.isActive 'underline'}}\">\n * {{yield}}\n * </span>\n * </Link>\n * </template>\n *\n * <template>\n * {{#let (service 'router') as |router|}}\n * <MyLink @href={{router.currentURL}}>Ths page</MyLink> \n * <MyLink @href=\"/\">Home</MyLink>\n * {{/let}}\n * </template>\n * ```\n *\n * By default, the query params are omitted from `isActive` calculation, but you may\n * configure the query params to be included if you wish\n * See: `@includeActiveQueryParams`\n *\n * By default, only the exact route/url is considered for the `isActive` calculation,\n * but you may configure sub routes/paths to also be considered active\n * See: `@activeOnSubPaths`\n *\n * Note that external links are never active.\n */\n isActive: boolean;\n },\n ];\n };\n}\n\n/**\n * A light wrapper around the [Anchor element][mdn-a], which will appropriately make your link an external link if the passed `@href` is not on the same domain.\n *\n *\n * [mdn-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport const Link: TOC<Signature> = <template>\n {{#let (link @href includeActiveQueryParams=@includeActiveQueryParams activeOnSubPaths=@activeOnSubPaths) as |l|}}\n {{#if l.isExternal}}\n <ExternalLink href={{@href}} ...attributes>\n {{yield (hash isExternal=true isActive=false)}}\n </ExternalLink>\n {{else}}\n <a\n data-active={{l.isActive}}\n href={{if @href @href \"##missing##\"}}\n {{on \"click\" l.handleClick}}\n ...attributes\n >\n {{yield (hash isExternal=false isActive=l.isActive)}}\n </a>\n {{/if}}\n {{/let}}\n</template>;\n\nexport default Link;\n"],"names":["Link","setComponentTemplate","precompileTemplate","strictMode","scope","link","ExternalLink","hash","on","templateOnly"],"mappings":";;;;;;;;AAAA;;;;;AAKC;AA6ID;;;;;AAKC;MACYA,IAAU,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,ogBAAA,EAiBpC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAC,YAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../src/components/menu.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\nimport { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from \"tabster\";\n\nimport { Popover, type Signature as PopoverSignature } from \"./popover.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\ntype Cell<V> = ReturnType<typeof cell<V>>;\ntype PopoverArgs = PopoverSignature[\"Args\"];\ntype PopoverBlockParams = PopoverSignature[\"Blocks\"][\"default\"][0];\n\nconst TABSTER_CONFIG_CONTENT = getTabsterAttribute(\n {\n mover: {\n direction: MoverDirections.Both,\n cyclic: true,\n },\n deloser: {},\n },\n true,\n);\n\nconst TABSTER_CONFIG_TRIGGER = {\n deloser: {},\n};\n\nexport interface Signature {\n Args: PopoverArgs;\n Blocks: {\n default: [\n {\n arrow: PopoverBlockParams[\"arrow\"];\n trigger: WithBoundArgs<\n typeof trigger,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n >;\n Trigger: WithBoundArgs<typeof Trigger, \"triggerModifier\">;\n Content: WithBoundArgs<\n typeof Content,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"PopoverContent\"\n >;\n isOpen: boolean;\n },\n ];\n };\n}\n\nexport interface SeparatorSignature {\n Element: HTMLDivElement;\n Blocks: { default: [] };\n}\n\nconst Separator: TOC<SeparatorSignature> = <template>\n <div role=\"separator\" ...attributes>\n {{yield}}\n </div>\n</template>;\n\n/**\n * We focus items on `pointerMove` to achieve the following:\n *\n * - Mouse over an item (it focuses)\n * - Leave mouse where it is and use keyboard to focus a different item\n * - Wiggle mouse without it leaving previously focused item\n * - Previously focused item should re-focus\n *\n * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n * wiggles. This is to match native menu implementation.\n */\nfunction focusOnHover(e: PointerEvent) {\n const item = e.currentTarget;\n\n if (item instanceof HTMLElement) {\n item?.focus();\n }\n}\n\nexport interface ItemSignature {\n Element: HTMLButtonElement;\n Args: { onSelect?: (event: Event) => void };\n Blocks: { default: [] };\n}\n\nconst Item: TOC<ItemSignature> = <template>\n {{! @glint-expect-error }}\n {{#let (if @onSelect (modifier on \"click\" @onSelect)) as |maybeClick|}}\n <button\n type=\"button\"\n role=\"menuitem\"\n {{! @glint-expect-error }}\n {{maybeClick}}\n {{on \"pointermove\" focusOnHover}}\n ...attributes\n >\n {{yield}}\n </button>\n {{/let}}\n</template>;\n\nconst installContent = eModifier<{\n Element: HTMLElement;\n Args: {\n Named: {\n isOpen: Cell<boolean>;\n triggerElement: Cell<HTMLElement>;\n };\n };\n}>((element, _: [], { isOpen, triggerElement }) => {\n // focus first focusable element on the content\n const tabster = getTabster(window);\n const firstFocusable = tabster?.focusable.findFirst({\n container: element,\n });\n\n firstFocusable?.focus();\n\n // listen for \"outside\" clicks\n function onDocumentClick(e: MouseEvent) {\n if (\n isOpen.current &&\n e.target &&\n !element.contains(e.target as HTMLElement) &&\n !triggerElement.current?.contains(e.target as HTMLElement)\n ) {\n isOpen.current = false;\n }\n }\n\n // listen for the escape key\n function onDocumentKeydown(e: KeyboardEvent) {\n if (isOpen.current && e.key === \"Escape\") {\n isOpen.current = false;\n }\n }\n\n document.addEventListener(\"click\", onDocumentClick);\n document.addEventListener(\"keydown\", onDocumentKeydown);\n\n return () => {\n document.removeEventListener(\"click\", onDocumentClick);\n document.removeEventListener(\"keydown\", onDocumentKeydown);\n };\n});\n\ninterface PrivateContentSignature {\n Element: HTMLDivElement;\n Args: {\n triggerElement: Cell<HTMLElement>;\n contentId: string;\n isOpen: Cell<boolean>;\n PopoverContent: PopoverBlockParams[\"Content\"];\n };\n Blocks: { default: [{ Item: typeof Item; Separator: typeof Separator }] };\n}\n\nexport interface ContentSignature {\n Element: PrivateContentSignature[\"Element\"];\n Blocks: PrivateContentSignature[\"Blocks\"];\n}\n\nconst Content: TOC<PrivateContentSignature> = <template>\n {{#if @isOpen.current}}\n <@PopoverContent\n id={{@contentId}}\n role=\"menu\"\n data-tabster={{TABSTER_CONFIG_CONTENT}}\n tabindex=\"0\"\n {{installContent isOpen=@isOpen triggerElement=@triggerElement}}\n {{on \"click\" @isOpen.toggle}}\n ...attributes\n >\n {{yield (hash Item=Item Separator=Separator)}}\n </@PopoverContent>\n {{/if}}\n</template>;\n\ninterface PrivateTriggerModifierSignature {\n Element: HTMLElement;\n Args: {\n Named: {\n triggerElement: Cell<HTMLElement>;\n isOpen: Cell<boolean>;\n contentId: string;\n setReference: PopoverBlockParams[\"setReference\"];\n stopPropagation?: boolean;\n preventDefault?: boolean;\n };\n };\n}\n\nexport interface TriggerModifierSignature {\n Element: PrivateTriggerModifierSignature[\"Element\"];\n}\n\nconst trigger = eModifier<PrivateTriggerModifierSignature>(\n (\n element,\n _: [],\n { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },\n ) => {\n element.setAttribute(\"aria-haspopup\", \"menu\");\n\n if (isOpen.current) {\n element.setAttribute(\"aria-controls\", contentId);\n element.setAttribute(\"aria-expanded\", \"true\");\n } else {\n element.removeAttribute(\"aria-controls\");\n element.setAttribute(\"aria-expanded\", \"false\");\n }\n\n setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);\n\n const onTriggerClick = (event: MouseEvent) => {\n if (stopPropagation) {\n event.stopPropagation();\n }\n\n if (preventDefault) {\n event.preventDefault();\n }\n\n isOpen.toggle();\n };\n\n element.addEventListener(\"click\", onTriggerClick);\n\n triggerElement.current = element;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n setReference(element);\n\n return () => {\n element.removeEventListener(\"click\", onTriggerClick);\n };\n },\n);\n\ninterface PrivateTriggerSignature {\n Element: HTMLButtonElement;\n Args: {\n triggerModifier: WithBoundArgs<\n typeof trigger,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n >;\n stopPropagation?: boolean;\n preventDefault?: boolean;\n };\n Blocks: { default: [] };\n}\n\nexport interface TriggerSignature {\n Element: PrivateTriggerSignature[\"Element\"];\n Blocks: PrivateTriggerSignature[\"Blocks\"];\n}\n\nconst Trigger: TOC<PrivateTriggerSignature> = <template>\n <button\n type=\"button\"\n {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}\n ...attributes\n >\n {{yield}}\n </button>\n</template>;\n\nconst IsOpen = () => cell<boolean>(false);\nconst TriggerElement = () => cell<HTMLElement>();\n\nexport class Menu extends Component<Signature> {\n contentId = guidFor(this);\n\n <template>\n {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n <Popover\n @flipOptions={{@flipOptions}}\n @middleware={{@middleware}}\n @offsetOptions={{@offsetOptions}}\n @placement={{@placement}}\n @shiftOptions={{@shiftOptions}}\n @strategy={{@strategy}}\n @inline={{@inline}}\n as |p|\n >\n {{#let\n (modifier\n trigger\n triggerElement=triggerEl\n isOpen=isOpen\n contentId=this.contentId\n setReference=p.setReference\n )\n as |triggerModifier|\n }}\n {{yield\n (hash\n trigger=triggerModifier\n Trigger=(component Trigger triggerModifier=triggerModifier)\n Content=(component\n Content\n PopoverContent=p.Content\n isOpen=isOpen\n triggerElement=triggerEl\n contentId=this.contentId\n )\n arrow=p.arrow\n isOpen=isOpen.current\n )\n }}\n {{/let}}\n </Popover>\n {{/let}}\n </template>\n}\n\nexport default Menu;\n"],"names":["TABSTER_CONFIG_CONTENT","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","deloser","TABSTER_CONFIG_TRIGGER","Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","focusOnHover","e","item","currentTarget","HTMLElement","focus","Item","scope","on","installContent","eModifier","element","_","isOpen","triggerElement","tabster","getTabster","window","firstFocusable","focusable","findFirst","container","onDocumentClick","current","target","contains","onDocumentKeydown","key","document","addEventListener","removeEventListener","Content","hash","trigger","contentId","setReference","stopPropagation","preventDefault","setAttribute","removeAttribute","setTabsterAttribute","onTriggerClick","event","toggle","Trigger","IsOpen","cell","TriggerElement","Menu","Component","guidFor","Popover"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../src/components/menu.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\nimport { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from \"tabster\";\n\nimport { Popover, type Signature as PopoverSignature } from \"./popover.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\ntype Cell<V> = ReturnType<typeof cell<V>>;\ntype PopoverArgs = PopoverSignature[\"Args\"];\ntype PopoverBlockParams = PopoverSignature[\"Blocks\"][\"default\"][0];\n\nconst TABSTER_CONFIG_CONTENT = getTabsterAttribute(\n {\n mover: {\n direction: MoverDirections.Both,\n cyclic: true,\n },\n deloser: {},\n },\n true,\n);\n\nconst TABSTER_CONFIG_TRIGGER = {\n deloser: {},\n};\n\nexport interface Signature {\n Args: PopoverArgs;\n Blocks: {\n default: [\n {\n arrow: PopoverBlockParams[\"arrow\"];\n trigger: WithBoundArgs<\n typeof trigger,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n >;\n Trigger: WithBoundArgs<typeof Trigger, \"triggerModifier\">;\n Content: WithBoundArgs<\n typeof Content,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"PopoverContent\"\n >;\n isOpen: boolean;\n },\n ];\n };\n}\n\nexport interface SeparatorSignature {\n Element: HTMLDivElement;\n Blocks: { default: [] };\n}\n\nconst Separator: TOC<SeparatorSignature> = <template>\n <div role=\"separator\" ...attributes>\n {{yield}}\n </div>\n</template>;\n\n/**\n * We focus items on `pointerMove` to achieve the following:\n *\n * - Mouse over an item (it focuses)\n * - Leave mouse where it is and use keyboard to focus a different item\n * - Wiggle mouse without it leaving previously focused item\n * - Previously focused item should re-focus\n *\n * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n * wiggles. This is to match native menu implementation.\n */\nfunction focusOnHover(e: PointerEvent) {\n const item = e.currentTarget;\n\n if (item instanceof HTMLElement) {\n item?.focus();\n }\n}\n\nexport interface ItemSignature {\n Element: HTMLButtonElement;\n Args: { onSelect?: (event: Event) => void };\n Blocks: { default: [] };\n}\n\nconst Item: TOC<ItemSignature> = <template>\n {{! @glint-expect-error }}\n {{#let (if @onSelect (modifier on \"click\" @onSelect)) as |maybeClick|}}\n <button\n type=\"button\"\n role=\"menuitem\"\n {{! @glint-expect-error }}\n {{maybeClick}}\n {{on \"pointermove\" focusOnHover}}\n ...attributes\n >\n {{yield}}\n </button>\n {{/let}}\n</template>;\n\nconst installContent = eModifier<{\n Element: HTMLElement;\n Args: {\n Named: {\n isOpen: Cell<boolean>;\n triggerElement: Cell<HTMLElement>;\n };\n };\n}>((element, _: [], { isOpen, triggerElement }) => {\n // focus first focusable element on the content\n const tabster = getTabster(window);\n const firstFocusable = tabster?.focusable.findFirst({\n container: element,\n });\n\n firstFocusable?.focus();\n\n // listen for \"outside\" clicks\n function onDocumentClick(e: MouseEvent) {\n if (\n isOpen.current &&\n e.target &&\n !element.contains(e.target as HTMLElement) &&\n !triggerElement.current?.contains(e.target as HTMLElement)\n ) {\n isOpen.current = false;\n }\n }\n\n // listen for the escape key\n function onDocumentKeydown(e: KeyboardEvent) {\n if (isOpen.current && e.key === \"Escape\") {\n isOpen.current = false;\n }\n }\n\n document.addEventListener(\"click\", onDocumentClick);\n document.addEventListener(\"keydown\", onDocumentKeydown);\n\n return () => {\n document.removeEventListener(\"click\", onDocumentClick);\n document.removeEventListener(\"keydown\", onDocumentKeydown);\n };\n});\n\ninterface PrivateContentSignature {\n Element: HTMLDivElement;\n Args: {\n triggerElement: Cell<HTMLElement>;\n contentId: string;\n isOpen: Cell<boolean>;\n PopoverContent: PopoverBlockParams[\"Content\"];\n };\n Blocks: { default: [{ Item: typeof Item; Separator: typeof Separator }] };\n}\n\nexport interface ContentSignature {\n Element: PrivateContentSignature[\"Element\"];\n Blocks: PrivateContentSignature[\"Blocks\"];\n}\n\nconst Content: TOC<PrivateContentSignature> = <template>\n {{#if @isOpen.current}}\n <@PopoverContent\n id={{@contentId}}\n role=\"menu\"\n data-tabster={{TABSTER_CONFIG_CONTENT}}\n tabindex=\"0\"\n {{installContent isOpen=@isOpen triggerElement=@triggerElement}}\n {{on \"click\" @isOpen.toggle}}\n ...attributes\n >\n {{yield (hash Item=Item Separator=Separator)}}\n </@PopoverContent>\n {{/if}}\n</template>;\n\ninterface PrivateTriggerModifierSignature {\n Element: HTMLElement;\n Args: {\n Named: {\n triggerElement: Cell<HTMLElement>;\n isOpen: Cell<boolean>;\n contentId: string;\n setReference: PopoverBlockParams[\"setReference\"];\n stopPropagation?: boolean;\n preventDefault?: boolean;\n };\n };\n}\n\nexport interface TriggerModifierSignature {\n Element: PrivateTriggerModifierSignature[\"Element\"];\n}\n\nconst trigger = eModifier<PrivateTriggerModifierSignature>(\n (\n element,\n _: [],\n { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },\n ) => {\n element.setAttribute(\"aria-haspopup\", \"menu\");\n\n if (isOpen.current) {\n element.setAttribute(\"aria-controls\", contentId);\n element.setAttribute(\"aria-expanded\", \"true\");\n } else {\n element.removeAttribute(\"aria-controls\");\n element.setAttribute(\"aria-expanded\", \"false\");\n }\n\n setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);\n\n const onTriggerClick = (event: MouseEvent) => {\n if (stopPropagation) {\n event.stopPropagation();\n }\n\n if (preventDefault) {\n event.preventDefault();\n }\n\n isOpen.toggle();\n };\n\n element.addEventListener(\"click\", onTriggerClick);\n\n triggerElement.current = element;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n setReference(element);\n\n return () => {\n element.removeEventListener(\"click\", onTriggerClick);\n };\n },\n);\n\ninterface PrivateTriggerSignature {\n Element: HTMLButtonElement;\n Args: {\n triggerModifier: WithBoundArgs<\n typeof trigger,\n \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n >;\n stopPropagation?: boolean;\n preventDefault?: boolean;\n };\n Blocks: { default: [] };\n}\n\nexport interface TriggerSignature {\n Element: PrivateTriggerSignature[\"Element\"];\n Blocks: PrivateTriggerSignature[\"Blocks\"];\n}\n\nconst Trigger: TOC<PrivateTriggerSignature> = <template>\n <button\n type=\"button\"\n {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}\n ...attributes\n >\n {{yield}}\n </button>\n</template>;\n\nconst IsOpen = () => cell<boolean>(false);\nconst TriggerElement = () => cell<HTMLElement>();\n\nexport class Menu extends Component<Signature> {\n contentId = guidFor(this);\n\n <template>\n {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n <Popover\n @flipOptions={{@flipOptions}}\n @middleware={{@middleware}}\n @offsetOptions={{@offsetOptions}}\n @placement={{@placement}}\n @shiftOptions={{@shiftOptions}}\n @strategy={{@strategy}}\n @inline={{@inline}}\n as |p|\n >\n {{#let\n (modifier\n trigger\n triggerElement=triggerEl\n isOpen=isOpen\n contentId=this.contentId\n setReference=p.setReference\n )\n as |triggerModifier|\n }}\n {{yield\n (hash\n trigger=triggerModifier\n Trigger=(component Trigger triggerModifier=triggerModifier)\n Content=(component\n Content\n PopoverContent=p.Content\n isOpen=isOpen\n triggerElement=triggerEl\n contentId=this.contentId\n )\n arrow=p.arrow\n isOpen=isOpen.current\n )\n }}\n {{/let}}\n </Popover>\n {{/let}}\n </template>\n}\n\nexport default Menu;\n"],"names":["TABSTER_CONFIG_CONTENT","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","deloser","TABSTER_CONFIG_TRIGGER","Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","focusOnHover","e","item","currentTarget","HTMLElement","focus","Item","scope","on","installContent","eModifier","element","_","isOpen","triggerElement","tabster","getTabster","window","firstFocusable","focusable","findFirst","container","onDocumentClick","current","target","contains","onDocumentKeydown","key","document","addEventListener","removeEventListener","Content","hash","trigger","contentId","setReference","stopPropagation","preventDefault","setAttribute","removeAttribute","setTabsterAttribute","onTriggerClick","event","toggle","Trigger","IsOpen","cell","TriggerElement","Menu","Component","guidFor","Popover"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttons.js","sources":["../../../src/components/one-time-password/buttons.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nconst reset = (event: Event) => {\n assert(\"[BUG]: reset called without an event.target\", event.target instanceof HTMLElement);\n\n const form = event.target.closest(\"form\");\n\n assert(\n \"Form is missing. Cannot use <Reset> without being contained within a <form>\",\n form instanceof HTMLFormElement,\n );\n\n form.reset();\n};\n\nexport const Submit: TOC<{\n Element: HTMLButtonElement;\n Blocks: { default: [] };\n}> = <template>\n <button type=\"submit\" ...attributes>Submit</button>\n</template>;\n\nexport const Reset: TOC<{\n Element: HTMLButtonElement;\n Blocks: { default: [] };\n}> = <template>\n <button type=\"button\" {{on \"click\" reset}} ...attributes>{{yield}}</button>\n</template>;\n"],"names":["reset","event","assert","target","HTMLElement","form","closest","HTMLFormElement","Submit","setComponentTemplate","precompileTemplate","strictMode","templateOnly","Reset","scope","on"],"mappings":";;;;;;AAKA,MAAMA,KAAA,GAASC,KAAO,IAAA;EACpBC,
|
|
1
|
+
{"version":3,"file":"buttons.js","sources":["../../../src/components/one-time-password/buttons.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nconst reset = (event: Event) => {\n assert(\"[BUG]: reset called without an event.target\", event.target instanceof HTMLElement);\n\n const form = event.target.closest(\"form\");\n\n assert(\n \"Form is missing. Cannot use <Reset> without being contained within a <form>\",\n form instanceof HTMLFormElement,\n );\n\n form.reset();\n};\n\nexport const Submit: TOC<{\n Element: HTMLButtonElement;\n Blocks: { default: [] };\n}> = <template>\n <button type=\"submit\" ...attributes>Submit</button>\n</template>;\n\nexport const Reset: TOC<{\n Element: HTMLButtonElement;\n Blocks: { default: [] };\n}> = <template>\n <button type=\"button\" {{on \"click\" reset}} ...attributes>{{yield}}</button>\n</template>;\n"],"names":["reset","event","assert","target","HTMLElement","form","closest","HTMLFormElement","Submit","setComponentTemplate","precompileTemplate","strictMode","templateOnly","Reset","scope","on"],"mappings":";;;;;;AAKA,MAAMA,KAAA,GAASC,KAAO,IAAA;EACpBC,MAAA,CAAO,6CAAA,EAA+CD,KAAA,CAAME,MAAM,YAAYC,WAAA,CAAA;EAE9E,MAAMC,IAAA,GAAOJ,KAAA,CAAME,MAAM,CAACG,OAAO,CAAC,MAAA,CAAA;AAElCJ,EAAAA,MAAA,CACE,+EACAG,IAAA,YAAgBE,eAAA,CAAA;EAGlBF,IAAA,CAAKL,KAAK,EAAA;AACZ,CAAA;MAEaQ,MAGR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,6DAAA,EAEL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;MAEGC,KAGR,GAAAJ,oBAAA,CAAAC,kBAAA,CAAA,uFAAA,EAEL;EAAAC,UAAA,EAAA,IAAA;AAAAG,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;AAAAf,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAY,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../src/components/one-time-password/input.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { warn } from \"@ember/debug\";\nimport { isDestroyed, isDestroying } from \"@ember/destroyable\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nimport {\n autoAdvance,\n getCollectiveValue,\n handleNavigation,\n handlePaste,\n selectAll,\n} from \"./utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nconst DEFAULT_LENGTH = 6;\n\nfunction labelFor(inputIndex: number, labelFn: undefined | ((index: number) => string)) {\n if (labelFn) {\n return labelFn(inputIndex);\n }\n\n return `Please enter OTP character ${inputIndex + 1}`;\n}\n\nconst waiter = buildWaiter(\"ember-primitives:OTPInput:handleChange\");\n\nconst Fields: TOC<{\n /**\n * Any attributes passed to this component will be applied to each input.\n */\n Element: HTMLInputElement;\n Args: {\n fields: unknown[];\n labelFn: (index: number) => string;\n handleChange: (event: Event) => void;\n };\n}> = <template>\n {{#each @fields as |_field i|}}\n <label>\n <span class=\"ember-primitives__sr-only\">{{labelFor i @labelFn}}</span>\n <input\n name=\"code{{i}}\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n ...attributes\n {{on \"click\" selectAll}}\n {{on \"paste\" handlePaste}}\n {{on \"input\" autoAdvance}}\n {{on \"input\" @handleChange}}\n {{on \"keydown\" handleNavigation}}\n />\n </label>\n {{/each}}\n</template>;\n\nexport class OTPInput extends Component<{\n /**\n * The collection of individual OTP inputs are contained by a fieldset.\n * Applying the `disabled` attribute to this fieldset will disable\n * all of the inputs, if that's desired.\n */\n Element: HTMLFieldSetElement;\n Args: {\n /**\n * How many characters the one-time-password field should be\n * Defaults to 6\n */\n length?: number;\n\n /**\n * To Customize the label of the input fields, you may pass a function.\n * By default, this is `Please enter OTP character ${index + 1}`.\n */\n labelFn?: (index: number) => string;\n\n /**\n * If passed, this function will be called when the <Input> changes.\n * All fields are considered one input.\n */\n onChange?: (\n data: {\n /**\n * The text from the collective `<Input>`\n *\n * `code` _may_ be shorter than `length`\n * if the user has not finished typing / pasting their code\n */\n code: string;\n /**\n * will be `true` if `code`'s length matches the passed `@length` or the default of 6\n */\n complete: boolean;\n },\n /**\n * The last input event received\n */\n event: Event,\n ) => void;\n };\n Blocks: {\n /**\n * Optionally, you may control how the Fields are rendered, with proceeding text,\n * additional attributes added, etc.\n *\n * This is how you can add custom validation to each input field.\n */\n default?: [fields: WithBoundArgs<typeof Fields, \"fields\" | \"handleChange\" | \"labelFn\">];\n };\n}> {\n /**\n * This is debounced, because we bind to each input,\n * but only want to emit one change event if someone pastes\n * multiple characters\n */\n handleChange = (event: Event) => {\n if (!this.args.onChange) return;\n\n if (!this.#token) {\n this.#token = waiter.beginAsync();\n }\n\n if (this.#frame) {\n cancelAnimationFrame(this.#frame);\n }\n\n // We use requestAnimationFrame to be friendly to rendering.\n // We don't know if onChange is going to want to cause paints\n // (it's also how we debounce, under the assumption that \"paste\" behavior\n // would be fast enough to be quicker than individual frames\n // (see logic in autoAdvance)\n // )\n this.#frame = requestAnimationFrame(() => {\n waiter.endAsync(this.#token);\n\n if (isDestroyed(this) || isDestroying(this)) return;\n if (!this.args.onChange) return;\n\n const value = getCollectiveValue(event.target, this.length);\n\n if (value === undefined) {\n warn(`Value could not be determined for the OTP field. was it removed from the DOM?`, {\n id: \"ember-primitives.OTPInput.missing-value\",\n });\n\n return;\n }\n\n this.args.onChange({ code: value, complete: value.length === this.length }, event);\n });\n };\n\n #token: unknown;\n #frame: number | undefined;\n\n get length() {\n return this.args.length ?? DEFAULT_LENGTH;\n }\n\n get fields() {\n // We only need to iterate a number of times,\n // so we don't care about the actual value or\n // referential integrity here\n return new Array<undefined>(this.length);\n }\n\n <template>\n <fieldset ...attributes>\n {{#let\n (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn)\n as |CurriedFields|\n }}\n {{#if (has-block)}}\n {{yield CurriedFields}}\n {{else}}\n <CurriedFields />\n {{/if}}\n {{/let}}\n\n <style>\n .ember-primitives__sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n </style>\n </fieldset>\n </template>\n}\n"],"names":["DEFAULT_LENGTH","labelFor","inputIndex","labelFn","waiter","buildWaiter","Fields","setComponentTemplate","precompileTemplate","strictMode","scope","on","selectAll","handlePaste","autoAdvance","handleNavigation","templateOnly","OTPInput","Component","handleChange","event","args","onChange","beginAsync","cancelAnimationFrame","requestAnimationFrame","endAsync","isDestroyed","isDestroying","value","getCollectiveValue","target","length","undefined","warn","id","code","complete","fields","Array"],"mappings":";;;;;;;;;;AAiBA,MAAMA,
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../src/components/one-time-password/input.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { warn } from \"@ember/debug\";\nimport { isDestroyed, isDestroying } from \"@ember/destroyable\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nimport {\n autoAdvance,\n getCollectiveValue,\n handleNavigation,\n handlePaste,\n selectAll,\n} from \"./utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nconst DEFAULT_LENGTH = 6;\n\nfunction labelFor(inputIndex: number, labelFn: undefined | ((index: number) => string)) {\n if (labelFn) {\n return labelFn(inputIndex);\n }\n\n return `Please enter OTP character ${inputIndex + 1}`;\n}\n\nconst waiter = buildWaiter(\"ember-primitives:OTPInput:handleChange\");\n\nconst Fields: TOC<{\n /**\n * Any attributes passed to this component will be applied to each input.\n */\n Element: HTMLInputElement;\n Args: {\n fields: unknown[];\n labelFn: (index: number) => string;\n handleChange: (event: Event) => void;\n };\n}> = <template>\n {{#each @fields as |_field i|}}\n <label>\n <span class=\"ember-primitives__sr-only\">{{labelFor i @labelFn}}</span>\n <input\n name=\"code{{i}}\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n ...attributes\n {{on \"click\" selectAll}}\n {{on \"paste\" handlePaste}}\n {{on \"input\" autoAdvance}}\n {{on \"input\" @handleChange}}\n {{on \"keydown\" handleNavigation}}\n />\n </label>\n {{/each}}\n</template>;\n\nexport class OTPInput extends Component<{\n /**\n * The collection of individual OTP inputs are contained by a fieldset.\n * Applying the `disabled` attribute to this fieldset will disable\n * all of the inputs, if that's desired.\n */\n Element: HTMLFieldSetElement;\n Args: {\n /**\n * How many characters the one-time-password field should be\n * Defaults to 6\n */\n length?: number;\n\n /**\n * To Customize the label of the input fields, you may pass a function.\n * By default, this is `Please enter OTP character ${index + 1}`.\n */\n labelFn?: (index: number) => string;\n\n /**\n * If passed, this function will be called when the <Input> changes.\n * All fields are considered one input.\n */\n onChange?: (\n data: {\n /**\n * The text from the collective `<Input>`\n *\n * `code` _may_ be shorter than `length`\n * if the user has not finished typing / pasting their code\n */\n code: string;\n /**\n * will be `true` if `code`'s length matches the passed `@length` or the default of 6\n */\n complete: boolean;\n },\n /**\n * The last input event received\n */\n event: Event,\n ) => void;\n };\n Blocks: {\n /**\n * Optionally, you may control how the Fields are rendered, with proceeding text,\n * additional attributes added, etc.\n *\n * This is how you can add custom validation to each input field.\n */\n default?: [fields: WithBoundArgs<typeof Fields, \"fields\" | \"handleChange\" | \"labelFn\">];\n };\n}> {\n /**\n * This is debounced, because we bind to each input,\n * but only want to emit one change event if someone pastes\n * multiple characters\n */\n handleChange = (event: Event) => {\n if (!this.args.onChange) return;\n\n if (!this.#token) {\n this.#token = waiter.beginAsync();\n }\n\n if (this.#frame) {\n cancelAnimationFrame(this.#frame);\n }\n\n // We use requestAnimationFrame to be friendly to rendering.\n // We don't know if onChange is going to want to cause paints\n // (it's also how we debounce, under the assumption that \"paste\" behavior\n // would be fast enough to be quicker than individual frames\n // (see logic in autoAdvance)\n // )\n this.#frame = requestAnimationFrame(() => {\n waiter.endAsync(this.#token);\n\n if (isDestroyed(this) || isDestroying(this)) return;\n if (!this.args.onChange) return;\n\n const value = getCollectiveValue(event.target, this.length);\n\n if (value === undefined) {\n warn(`Value could not be determined for the OTP field. was it removed from the DOM?`, {\n id: \"ember-primitives.OTPInput.missing-value\",\n });\n\n return;\n }\n\n this.args.onChange({ code: value, complete: value.length === this.length }, event);\n });\n };\n\n #token: unknown;\n #frame: number | undefined;\n\n get length() {\n return this.args.length ?? DEFAULT_LENGTH;\n }\n\n get fields() {\n // We only need to iterate a number of times,\n // so we don't care about the actual value or\n // referential integrity here\n return new Array<undefined>(this.length);\n }\n\n <template>\n <fieldset ...attributes>\n {{#let\n (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn)\n as |CurriedFields|\n }}\n {{#if (has-block)}}\n {{yield CurriedFields}}\n {{else}}\n <CurriedFields />\n {{/if}}\n {{/let}}\n\n <style>\n .ember-primitives__sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n </style>\n </fieldset>\n </template>\n}\n"],"names":["DEFAULT_LENGTH","labelFor","inputIndex","labelFn","waiter","buildWaiter","Fields","setComponentTemplate","precompileTemplate","strictMode","scope","on","selectAll","handlePaste","autoAdvance","handleNavigation","templateOnly","OTPInput","Component","handleChange","event","args","onChange","beginAsync","cancelAnimationFrame","requestAnimationFrame","endAsync","isDestroyed","isDestroying","value","getCollectiveValue","target","length","undefined","warn","id","code","complete","fields","Array"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAAA,GAAiB,CAAA;AAEvB,SAASC,QAAAA,CAASC,UAAkB,EAAEC,OAAgD,EAAA;AACpF,EAAA,IAAIA,OAAA,EAAS;IACX,OAAOA,OAAA,CAAQD,UAAA,CAAA;AACjB;AAEA,EAAA,OAAO,CAAA,2BAAA,EAA8BA,UAAA,GAAa,GAAG;AACvD;AAEA,MAAME,SAASC,WAAA,CAAY,wCAAA,CAAA;AAE3B,MAAMC,MAUD,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,kaAAA,EAkBL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAT,QAAA;IAAAU,EAAA;IAAAC,SAAA;IAAAC,WAAA;IAAAC,WAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEH,MAAMC,QAAA,SAAiBC,SAAA;AAsD5B;;;;;EAKAC,YAAA,GAAgBC,KAAO,IAAA;AACrB,IAAA,IAAI,CAAC,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AAEzB,IAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,IAAI,CAAC,MAAM,GAAGlB,OAAOmB,UAAU,EAAA;AACjC;AAEA,IAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACfC,MAAAA,oBAAA,CAAqB,IAAI,CAAC,MAAM,CAAA;AAClC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,IAAI,CAAC,MAAM,GAAGC,qBAAA,CAAsB,MAAA;AAClCrB,MAAAA,MAAA,CAAOsB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAA;MAE3B,IAAIC,WAAA,CAAY,IAAI,CAAA,IAAKC,YAAA,CAAa,IAAI,CAAA,EAAG;AAC7C,MAAA,IAAI,CAAC,IAAI,CAACP,IAAI,CAACC,QAAQ,EAAE;MAEzB,MAAMO,QAAQC,kBAAA,CAAmBV,KAAA,CAAMW,MAAM,EAAE,IAAI,CAACC,MAAM,CAAA;MAE1D,IAAIH,UAAUI,SAAA,EAAW;QACvBC,IAAA,CAAK,+EAA+E,EAAE;AACpFC,UAAAA,EAAA,EAAI;AACN,SAAA,CAAA;AAEA,QAAA;AACF;AAEA,MAAA,IAAI,CAACd,IAAI,CAACC,QAAQ,CAAC;AAAEc,QAAAA,IAAA,EAAMP,KAAA;AAAOQ,QAAAA,QAAA,EAAUR,KAAA,CAAMG,MAAM,KAAK,IAAI,CAACA;OAAO,EAAGZ,KAAA,CAAA;AAC9E,KAAA,CAAA;GACF;AAEA,EAAA,MAAM;AACN,EAAA,MAAM;EAEN,IAAIY,MAAAA,GAAS;AACX,IAAA,OAAO,IAAI,CAACX,IAAI,CAACW,MAAM,IAAIhC,cAAA;AAC7B;EAEA,IAAIsC,MAAAA,GAAS;AACX;AACA;AACA;AACA,IAAA,OAAO,IAAIC,KAAA,CAAiB,IAAI,CAACP,MAAM,CAAA;AACzC;AAEA,EAAA;IAAAzB,oBAAA,CAAAC,kBAAA,CAAA,0oBAAA,EA2BA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAJ,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"otp.js","sources":["../../../src/components/one-time-password/otp.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { fn, hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nimport { Reset, Submit } from \"./buttons.gts\";\nimport { OTPInput } from \"./input.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nconst waiter = buildWaiter(\"ember-primitives:OTP:handleAutoSubmitAttempt\");\n\nconst handleFormSubmit = (submit: (data: { code: string }) => void, event: SubmitEvent) => {\n event.preventDefault();\n\n assert(\n \"[BUG]: handleFormSubmit was not attached to a form. Please open an issue.\",\n event.currentTarget instanceof HTMLFormElement,\n );\n\n const formData = new FormData(event.currentTarget);\n\n let code = \"\";\n\n for (const [key, value] of formData.entries()) {\n if (key.startsWith(\"code\")) {\n // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string\n code += value;\n }\n }\n\n submit({\n code,\n });\n};\n\nfunction handleChange(\n autoSubmit: boolean | undefined,\n data: { code: string; complete: boolean },\n event: Event,\n) {\n if (!autoSubmit) return;\n if (!data.complete) return;\n\n assert(\n \"[BUG]: event target is not a known element type\",\n event.target instanceof HTMLElement || event.target instanceof SVGElement,\n );\n\n const form = event.target.closest(\"form\");\n\n assert(\"[BUG]: Cannot handle event when <OTP> Inputs are not rendered within their <form>\", form);\n\n const token = waiter.beginAsync();\n const finished = () => {\n waiter.endAsync(token);\n form.removeEventListener(\"submit\", finished);\n };\n\n form.addEventListener(\"submit\", finished);\n\n // NOTE: when calling .submit() the submit event handlers are not run\n form.requestSubmit();\n}\n\nexport const OTP: TOC<{\n /**\n * The overall OTP Input is in its own form.\n * Modern UI/UX Patterns usually have this sort of field\n * as its own page, thus within its own form.\n *\n * By default, only the 'submit' event is bound, and is\n * what calls the `@onSubmit` argument.\n */\n Element: HTMLFormElement;\n Args: {\n /**\n * How many characters the one-time-password field should be\n * Defaults to 6\n */\n length?: number;\n\n /**\n * The on submit callback will give you the entered\n * one-time-password code.\n *\n * It will be called when the user manually clicks the 'submit'\n * button or when the full code is pasted and meats the validation\n * criteria.\n */\n onSubmit: (data: { code: string }) => void;\n\n /**\n * Whether or not to auto-submit after the code has been pasted\n * in to the collective \"field\". Default is true\n */\n autoSubmit?: boolean;\n };\n Blocks: {\n default: [\n {\n /**\n * The collective input field that the OTP code will be typed/pasted in to\n */\n Input: WithBoundArgs<typeof OTPInput, \"length\" | \"onChange\">;\n /**\n * Button with `type=\"submit\"` to submit the form\n */\n Submit: typeof Submit;\n /**\n * Pre-wired button to reset the form\n */\n Reset: typeof Reset;\n },\n ];\n };\n}> = <template>\n <form {{on \"submit\" (fn handleFormSubmit @onSubmit)}} ...attributes>\n {{yield\n (hash\n Input=(component\n OTPInput length=@length onChange=(if @autoSubmit (fn handleChange @autoSubmit))\n )\n Submit=Submit\n Reset=Reset\n )\n }}\n </form>\n</template>;\n"],"names":["waiter","buildWaiter","handleFormSubmit","submit","event","preventDefault","assert","currentTarget","HTMLFormElement","formData","FormData","code","key","value","entries","startsWith","handleChange","autoSubmit","data","complete","target","HTMLElement","SVGElement","form","closest","token","beginAsync","finished","endAsync","removeEventListener","addEventListener","requestSubmit","OTP","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","hash","OTPInput","Submit","Reset","templateOnly"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAASC,
|
|
1
|
+
{"version":3,"file":"otp.js","sources":["../../../src/components/one-time-password/otp.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { fn, hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nimport { Reset, Submit } from \"./buttons.gts\";\nimport { OTPInput } from \"./input.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nconst waiter = buildWaiter(\"ember-primitives:OTP:handleAutoSubmitAttempt\");\n\nconst handleFormSubmit = (submit: (data: { code: string }) => void, event: SubmitEvent) => {\n event.preventDefault();\n\n assert(\n \"[BUG]: handleFormSubmit was not attached to a form. Please open an issue.\",\n event.currentTarget instanceof HTMLFormElement,\n );\n\n const formData = new FormData(event.currentTarget);\n\n let code = \"\";\n\n for (const [key, value] of formData.entries()) {\n if (key.startsWith(\"code\")) {\n // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string\n code += value;\n }\n }\n\n submit({\n code,\n });\n};\n\nfunction handleChange(\n autoSubmit: boolean | undefined,\n data: { code: string; complete: boolean },\n event: Event,\n) {\n if (!autoSubmit) return;\n if (!data.complete) return;\n\n assert(\n \"[BUG]: event target is not a known element type\",\n event.target instanceof HTMLElement || event.target instanceof SVGElement,\n );\n\n const form = event.target.closest(\"form\");\n\n assert(\"[BUG]: Cannot handle event when <OTP> Inputs are not rendered within their <form>\", form);\n\n const token = waiter.beginAsync();\n const finished = () => {\n waiter.endAsync(token);\n form.removeEventListener(\"submit\", finished);\n };\n\n form.addEventListener(\"submit\", finished);\n\n // NOTE: when calling .submit() the submit event handlers are not run\n form.requestSubmit();\n}\n\nexport const OTP: TOC<{\n /**\n * The overall OTP Input is in its own form.\n * Modern UI/UX Patterns usually have this sort of field\n * as its own page, thus within its own form.\n *\n * By default, only the 'submit' event is bound, and is\n * what calls the `@onSubmit` argument.\n */\n Element: HTMLFormElement;\n Args: {\n /**\n * How many characters the one-time-password field should be\n * Defaults to 6\n */\n length?: number;\n\n /**\n * The on submit callback will give you the entered\n * one-time-password code.\n *\n * It will be called when the user manually clicks the 'submit'\n * button or when the full code is pasted and meats the validation\n * criteria.\n */\n onSubmit: (data: { code: string }) => void;\n\n /**\n * Whether or not to auto-submit after the code has been pasted\n * in to the collective \"field\". Default is true\n */\n autoSubmit?: boolean;\n };\n Blocks: {\n default: [\n {\n /**\n * The collective input field that the OTP code will be typed/pasted in to\n */\n Input: WithBoundArgs<typeof OTPInput, \"length\" | \"onChange\">;\n /**\n * Button with `type=\"submit\"` to submit the form\n */\n Submit: typeof Submit;\n /**\n * Pre-wired button to reset the form\n */\n Reset: typeof Reset;\n },\n ];\n };\n}> = <template>\n <form {{on \"submit\" (fn handleFormSubmit @onSubmit)}} ...attributes>\n {{yield\n (hash\n Input=(component\n OTPInput length=@length onChange=(if @autoSubmit (fn handleChange @autoSubmit))\n )\n Submit=Submit\n Reset=Reset\n )\n }}\n </form>\n</template>;\n"],"names":["waiter","buildWaiter","handleFormSubmit","submit","event","preventDefault","assert","currentTarget","HTMLFormElement","formData","FormData","code","key","value","entries","startsWith","handleChange","autoSubmit","data","complete","target","HTMLElement","SVGElement","form","closest","token","beginAsync","finished","endAsync","removeEventListener","addEventListener","requestSubmit","OTP","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","hash","OTPInput","Submit","Reset","templateOnly"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAASC,WAAA,CAAY,8CAAA,CAAA;AAE3B,MAAMC,gBAAA,GAAmBA,CAACC,MAAwC,EAAEC,KAAO,KAAA;EACzEA,KAAA,CAAMC,cAAc,EAAA;EAEpBC,MAAA,CACE,2EAAA,EACAF,KAAA,CAAMG,aAAa,YAAYC,eAAA,CAAA;EAGjC,MAAMC,QAAA,GAAW,IAAIC,QAAA,CAASN,KAAA,CAAMG,aAAa,CAAA;EAEjD,IAAII,IAAA,GAAO,EAAA;AAEX,EAAA,KAAK,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAIJ,QAAA,CAASK,OAAO,EAAA,EAAI;AAC7C,IAAA,IAAIF,GAAA,CAAIG,UAAU,CAAC,MAAA,CAAA,EAAS;AAC1B;AACAJ,MAAAA,IAAA,IAAQE,KAAA;AACV;AACF;AAEAV,EAAAA,MAAA,CAAO;AACLQ,IAAAA;AACF,GAAA,CAAA;AACF,CAAA;AAEA,SAASK,YAAAA,CACPC,UAA+B,EAC/BC,IAAyC,EACzCd,KAAY,EAAA;EAEZ,IAAI,CAACa,UAAA,EAAY;AACjB,EAAA,IAAI,CAACC,IAAA,CAAKC,QAAQ,EAAE;AAEpBb,EAAAA,MAAA,CACE,mDACAF,KAAA,CAAMgB,MAAM,YAAYC,WAAA,IAAejB,KAAA,CAAMgB,MAAM,YAAYE,UAAA,CAAA;EAGjE,MAAMC,IAAA,GAAOnB,KAAA,CAAMgB,MAAM,CAACI,OAAO,CAAC,MAAA,CAAA;AAElClB,EAAAA,MAAA,CAAO,mFAAA,EAAqFiB,IAAA,CAAA;AAE5F,EAAA,MAAME,KAAA,GAAQzB,OAAO0B,UAAU,EAAA;EAC/B,MAAMC,QAAA,GAAWA,MAAA;AACf3B,IAAAA,MAAA,CAAO4B,QAAQ,CAACH,KAAA,CAAA;AAChBF,IAAAA,IAAA,CAAKM,mBAAmB,CAAC,QAAA,EAAUF,QAAA,CAAA;GACrC;AAEAJ,EAAAA,IAAA,CAAKO,gBAAgB,CAAC,QAAA,EAAUH,QAAA,CAAA;AAEhC;EACAJ,IAAA,CAAKQ,aAAa,EAAA;AACpB;MAEaC,GAmDR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,2OAAA,EAYL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,EAAA;IAAApC,gBAAA;IAAAqC,IAAA;IAAAC,QAAA;IAAAxB,YAAA;IAAAyB,MAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -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":["../../../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 +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":["../../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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal-targets.js","sources":["../../src/components/portal-targets.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { isDevelopingApp, macroCondition } from \"@embroider/macros\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const TARGETS = Object.freeze({\n popover: \"ember-primitives__portal-targets__popover\",\n tooltip: \"ember-primitives__portal-targets__tooltip\",\n modal: \"ember-primitives__portal-targets__modal\",\n});\n\nexport function findNearestTarget(origin: Element, name: string) {\n assert(`first argument to \\`findNearestTarget\\` must be an element`, origin instanceof Element);\n assert(`second argument to \\`findNearestTarget\\` must be a string`, typeof name === `string`);\n\n let element: Element | null = null;\n\n let parent = origin.parentNode;\n\n while (!element && parent) {\n element = parent.querySelector(`[data-portal-name=${name}]`);\n if (element) break;\n parent = parent.parentNode;\n }\n\n if (macroCondition(isDevelopingApp())) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n (window as any).prime0 = origin;\n }\n\n assert(\n `Could not find element by the given name: \\`${name}\\`.` +\n ` The known names are ` +\n `${Object.values(TARGETS).join(\", \")} ` +\n `-- but any name will work as long as it is set to the \\`data-portal-name\\` attribute. ` +\n `Double check that the element you're wanting to portal to is rendered. ` +\n `The element passed to \\`findNearestTarget\\` is stored on \\`window.prime0\\` ` +\n `You can debug in your browser's console via ` +\n `\\`document.querySelector('[data-portal-name=\"${name}\"]')\\``,\n element,\n );\n\n return element;\n}\n\nexport interface Signature {\n Element: null;\n}\n\nexport const PortalTargets: TOC<Signature> = <template>\n <div data-portal-name={{TARGETS.popover}}></div>\n <div data-portal-name={{TARGETS.tooltip}}></div>\n <div data-portal-name={{TARGETS.modal}}></div>\n</template>;\n\nexport default PortalTargets;\n"],"names":["TARGETS","Object","freeze","popover","tooltip","modal","findNearestTarget","origin","name","assert","Element","element","parent","parentNode","querySelector","macroCondition","isDevelopingApp","window","prime0","values","join","PortalTargets","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;;MAKaA,OAAA,GAAUC,
|
|
1
|
+
{"version":3,"file":"portal-targets.js","sources":["../../src/components/portal-targets.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { isDevelopingApp, macroCondition } from \"@embroider/macros\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const TARGETS = Object.freeze({\n popover: \"ember-primitives__portal-targets__popover\",\n tooltip: \"ember-primitives__portal-targets__tooltip\",\n modal: \"ember-primitives__portal-targets__modal\",\n});\n\nexport function findNearestTarget(origin: Element, name: string) {\n assert(`first argument to \\`findNearestTarget\\` must be an element`, origin instanceof Element);\n assert(`second argument to \\`findNearestTarget\\` must be a string`, typeof name === `string`);\n\n let element: Element | null = null;\n\n let parent = origin.parentNode;\n\n while (!element && parent) {\n element = parent.querySelector(`[data-portal-name=${name}]`);\n if (element) break;\n parent = parent.parentNode;\n }\n\n if (macroCondition(isDevelopingApp())) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n (window as any).prime0 = origin;\n }\n\n assert(\n `Could not find element by the given name: \\`${name}\\`.` +\n ` The known names are ` +\n `${Object.values(TARGETS).join(\", \")} ` +\n `-- but any name will work as long as it is set to the \\`data-portal-name\\` attribute. ` +\n `Double check that the element you're wanting to portal to is rendered. ` +\n `The element passed to \\`findNearestTarget\\` is stored on \\`window.prime0\\` ` +\n `You can debug in your browser's console via ` +\n `\\`document.querySelector('[data-portal-name=\"${name}\"]')\\``,\n element,\n );\n\n return element;\n}\n\nexport interface Signature {\n Element: null;\n}\n\nexport const PortalTargets: TOC<Signature> = <template>\n <div data-portal-name={{TARGETS.popover}}></div>\n <div data-portal-name={{TARGETS.tooltip}}></div>\n <div data-portal-name={{TARGETS.modal}}></div>\n</template>;\n\nexport default PortalTargets;\n"],"names":["TARGETS","Object","freeze","popover","tooltip","modal","findNearestTarget","origin","name","assert","Element","element","parent","parentNode","querySelector","macroCondition","isDevelopingApp","window","prime0","values","join","PortalTargets","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;;MAKaA,OAAA,GAAUC,MAAA,CAAOC,MAAM,CAAC;AACnCC,EAAAA,OAAA,EAAS,2CAAA;AACTC,EAAAA,OAAA,EAAS,2CAAA;AACTC,EAAAA,KAAA,EAAO;AACT,CAAA;AAEO,SAASC,iBAAAA,CAAkBC,MAAe,EAAEC,IAAY,EAAA;AAC7DC,EAAAA,MAAA,CAAO,CAAA,0DAAA,CAA4D,EAAEF,MAAA,YAAkBG,OAAA,CAAA;AACvFD,EAAAA,MAAA,CAAO,CAAA,yDAAA,CAA2D,EAAE,OAAOD,IAAA,KAAS,QAAQ,CAAA;EAE5F,IAAIG,OAAuB,GAAG,IAAA;AAE9B,EAAA,IAAIC,MAAA,GAASL,OAAOM,UAAU;AAE9B,EAAA,OAAO,CAACF,WAAWC,MAAA,EAAQ;IACzBD,OAAA,GAAUC,MAAA,CAAOE,aAAa,CAAC,CAAA,kBAAA,EAAqBN,IAAA,GAAO,CAAA;AAC3D,IAAA,IAAIG,OAAA,EAAS;IACbC,MAAA,GAASA,OAAOC,UAAU;AAC5B;AAEA,EAAA,IAAIE,eAAeC,eAAA,EAAA,CAAA,EAAoB;AACrC;IACCC,MAAA,CAAeC,MAAM,GAAGX,MAAA;AAC3B;AAEAE,EAAAA,MAAA,CACE,CAAA,4CAAA,EAA+CD,IAAA,CAAA,GAAA,CAAS,GACtD,CAAA,qBAAA,CAAuB,GACvB,CAAA,EAAGP,OAAOkB,MAAM,CAACnB,SAASoB,IAAI,CAAC,QAAQ,GACvC,CAAA,sFAAA,CAAwF,GACxF,yEAAyE,GACzE,CAAA,2EAAA,CAA6E,GAC7E,CAAA,4CAAA,CAA8C,GAC9C,CAAA,6CAAA,EAAgDZ,IAAA,CAAA,MAAA,CAAY,EAC9DG,OAAA,CAAA;AAGF,EAAA,OAAOA,OAAA;AACT;MAMaU,aAAmB,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,8JAAA,EAI7C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAzB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAA0B,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal.js","sources":["../../src/components/portal.gts"],"sourcesContent":["import { modifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\n\nimport { findNearestTarget, type TARGETS } from \"./portal-targets.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Targets = (typeof TARGETS)[keyof typeof TARGETS];\n\nexport interface Signature {\n Args: {\n /**\n * The name of the PortalTarget to render in to.\n * This is the value of the `data-portal-name` attribute\n * of the element you wish to render in to.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n to: Targets | (string & {});\n };\n Blocks: {\n /**\n * The portaled content\n */\n default: [];\n };\n}\n\nconst anchor = modifier(\n (element: Element, [to, update]: [string, ReturnType<typeof ElementValue>[\"set\"]]) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n const found = findNearestTarget(element, to);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n update(found);\n },\n);\n\nconst ElementValue = () => cell<Element | ShadowRoot>();\n\nexport const Portal: TOC<Signature> = <template>\n {{#let (ElementValue) as |target|}}\n {{! This div is always going to be empty,\n because it'll either find the portal and render content elsewhere,\n it it won't find the portal and won't render anything.\n }}\n {{! template-lint-disable no-inline-styles }}\n <div style=\"display:contents;\" {{anchor @to target.set}}>\n {{#if target.current}}\n {{#in-element target.current}}\n {{yield}}\n {{/in-element}}\n {{/if}}\n </div>\n {{/let}}\n</template>;\n\nexport default Portal;\n"],"names":["anchor","modifier","element","to","update","found","findNearestTarget","ElementValue","cell","Portal","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;;;AA2BA,MAAMA,
|
|
1
|
+
{"version":3,"file":"portal.js","sources":["../../src/components/portal.gts"],"sourcesContent":["import { modifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\n\nimport { findNearestTarget, type TARGETS } from \"./portal-targets.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Targets = (typeof TARGETS)[keyof typeof TARGETS];\n\nexport interface Signature {\n Args: {\n /**\n * The name of the PortalTarget to render in to.\n * This is the value of the `data-portal-name` attribute\n * of the element you wish to render in to.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n to: Targets | (string & {});\n };\n Blocks: {\n /**\n * The portaled content\n */\n default: [];\n };\n}\n\nconst anchor = modifier(\n (element: Element, [to, update]: [string, ReturnType<typeof ElementValue>[\"set\"]]) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n const found = findNearestTarget(element, to);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n update(found);\n },\n);\n\nconst ElementValue = () => cell<Element | ShadowRoot>();\n\nexport const Portal: TOC<Signature> = <template>\n {{#let (ElementValue) as |target|}}\n {{! This div is always going to be empty,\n because it'll either find the portal and render content elsewhere,\n it it won't find the portal and won't render anything.\n }}\n {{! template-lint-disable no-inline-styles }}\n <div style=\"display:contents;\" {{anchor @to target.set}}>\n {{#if target.current}}\n {{#in-element target.current}}\n {{yield}}\n {{/in-element}}\n {{/if}}\n </div>\n {{/let}}\n</template>;\n\nexport default Portal;\n"],"names":["anchor","modifier","element","to","update","found","findNearestTarget","ElementValue","cell","Portal","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;;;AA2BA,MAAMA,MAAA,GAASC,QAAA,CACb,CAACC,OAAS,EAAS,CAACC,EAAA,EAAIC,MAAA,CAAyD,KAAA;AAC/E;AACA,EAAA,MAAMC,KAAA,GAAQC,kBAAkBJ,OAAA,EAASC,EAAA,CAAA;AAEzC;EACAC,MAAA,CAAOC,KAAA,CAAA;AACT,CAAA,CAAA;AAGF,MAAME,YAAA,GAAeA,MAAMC,IAAA,EAAe;MAE7BC,MAAY,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,ygBAAA,EAetC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAN,YAAA;AAAAP,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAc,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","sources":["../../src/components/progress.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n Element: HTMLDivElement;\n Args: {\n /**\n * The current progress\n * This may be less than 0 or more than `max`,\n * but the resolved value (managed internally, and yielded out)\n * does not exceed the range [0, max]\n */\n value: number;\n /**\n * The max value, defaults to 100\n */\n max?: number;\n };\n Blocks: {\n default: [\n {\n /**\n * The indicator element with some state applied.\n * This can be used to style the progress of bar.\n */\n Indicator: WithBoundArgs<typeof Indicator, \"value\" | \"max\" | \"percent\">;\n /**\n * The value as a percent of how far along the indicator should be\n * positioned, between 0 and 100.\n * Will be rounded to two decimal places.\n */\n percent: number;\n /**\n * The value as a percent of how far along the indicator should be positioned,\n * between 0 and 1\n */\n decimal: number;\n /**\n * The resolved value within the limits of the progress bar.\n */\n value: number;\n },\n ];\n };\n}\n\ntype ProgressState = \"indeterminate\" | \"complete\" | \"loading\";\n\nconst DEFAULT_MAX = 100;\n\n/**\n * Non-negative, non-NaN, non-Infinite, positive, rational\n */\nfunction isValidProgressNumber(value: number | undefined | null): value is number {\n if (typeof value !== \"number\") return false;\n if (!Number.isFinite(value)) return false;\n\n return value >= 0;\n}\n\nfunction progressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? \"indeterminate\" : value === maxValue ? \"complete\" : \"loading\";\n}\n\nfunction getMax(userMax: number | undefined | null): number {\n return isValidProgressNumber(userMax) ? userMax : DEFAULT_MAX;\n}\n\nfunction getValue(userValue: number | undefined | null, maxValue: number): number {\n const max = getMax(maxValue);\n\n if (!isValidProgressNumber(userValue)) {\n return 0;\n }\n\n if (userValue > max) {\n return max;\n }\n\n return userValue;\n}\n\nfunction getValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n}\n\nconst Indicator: TOC<{\n Element: HTMLDivElement;\n Args: { max: number; value: number; percent: number };\n Blocks: { default: [] };\n}> = <template>\n <div\n ...attributes\n data-max={{@max}}\n data-value={{@value}}\n data-state={{progressState @value @max}}\n data-percent={{@percent}}\n >\n {{yield}}\n </div>\n</template>;\n\nexport class Progress extends Component<Signature> {\n get max() {\n return getMax(this.args.max);\n }\n\n get value() {\n return getValue(this.args.value, this.max);\n }\n\n get valueLabel() {\n return getValueLabel(this.value, this.max);\n }\n\n get decimal() {\n return this.value / this.max;\n }\n\n get percent() {\n return Math.round(this.decimal * 100 * 100) / 100;\n }\n\n <template>\n <div\n ...attributes\n aria-valuemax={{this.max}}\n aria-valuemin=\"0\"\n aria-valuenow={{this.value}}\n aria-valuetext={{this.valueLabel}}\n role=\"progressbar\"\n data-value={{this.value}}\n data-state={{progressState this.value this.max}}\n data-max={{this.max}}\n data-min=\"0\"\n data-percent={{this.percent}}\n >\n\n {{yield\n (hash\n Indicator=(component Indicator value=this.value max=this.max percent=this.percent)\n value=this.value\n percent=this.percent\n decimal=this.decimal\n )\n }}\n </div>\n </template>\n}\n\nexport default Progress;\n"],"names":["DEFAULT_MAX","isValidProgressNumber","value","Number","isFinite","progressState","maxValue","getMax","userMax","getValue","userValue","max","getValueLabel","Math","round","Indicator","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly","Progress","Component","args","valueLabel","decimal","percent","hash"],"mappings":";;;;;;AAmDA,MAAMA,
|
|
1
|
+
{"version":3,"file":"progress.js","sources":["../../src/components/progress.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n Element: HTMLDivElement;\n Args: {\n /**\n * The current progress\n * This may be less than 0 or more than `max`,\n * but the resolved value (managed internally, and yielded out)\n * does not exceed the range [0, max]\n */\n value: number;\n /**\n * The max value, defaults to 100\n */\n max?: number;\n };\n Blocks: {\n default: [\n {\n /**\n * The indicator element with some state applied.\n * This can be used to style the progress of bar.\n */\n Indicator: WithBoundArgs<typeof Indicator, \"value\" | \"max\" | \"percent\">;\n /**\n * The value as a percent of how far along the indicator should be\n * positioned, between 0 and 100.\n * Will be rounded to two decimal places.\n */\n percent: number;\n /**\n * The value as a percent of how far along the indicator should be positioned,\n * between 0 and 1\n */\n decimal: number;\n /**\n * The resolved value within the limits of the progress bar.\n */\n value: number;\n },\n ];\n };\n}\n\ntype ProgressState = \"indeterminate\" | \"complete\" | \"loading\";\n\nconst DEFAULT_MAX = 100;\n\n/**\n * Non-negative, non-NaN, non-Infinite, positive, rational\n */\nfunction isValidProgressNumber(value: number | undefined | null): value is number {\n if (typeof value !== \"number\") return false;\n if (!Number.isFinite(value)) return false;\n\n return value >= 0;\n}\n\nfunction progressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? \"indeterminate\" : value === maxValue ? \"complete\" : \"loading\";\n}\n\nfunction getMax(userMax: number | undefined | null): number {\n return isValidProgressNumber(userMax) ? userMax : DEFAULT_MAX;\n}\n\nfunction getValue(userValue: number | undefined | null, maxValue: number): number {\n const max = getMax(maxValue);\n\n if (!isValidProgressNumber(userValue)) {\n return 0;\n }\n\n if (userValue > max) {\n return max;\n }\n\n return userValue;\n}\n\nfunction getValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n}\n\nconst Indicator: TOC<{\n Element: HTMLDivElement;\n Args: { max: number; value: number; percent: number };\n Blocks: { default: [] };\n}> = <template>\n <div\n ...attributes\n data-max={{@max}}\n data-value={{@value}}\n data-state={{progressState @value @max}}\n data-percent={{@percent}}\n >\n {{yield}}\n </div>\n</template>;\n\nexport class Progress extends Component<Signature> {\n get max() {\n return getMax(this.args.max);\n }\n\n get value() {\n return getValue(this.args.value, this.max);\n }\n\n get valueLabel() {\n return getValueLabel(this.value, this.max);\n }\n\n get decimal() {\n return this.value / this.max;\n }\n\n get percent() {\n return Math.round(this.decimal * 100 * 100) / 100;\n }\n\n <template>\n <div\n ...attributes\n aria-valuemax={{this.max}}\n aria-valuemin=\"0\"\n aria-valuenow={{this.value}}\n aria-valuetext={{this.valueLabel}}\n role=\"progressbar\"\n data-value={{this.value}}\n data-state={{progressState this.value this.max}}\n data-max={{this.max}}\n data-min=\"0\"\n data-percent={{this.percent}}\n >\n\n {{yield\n (hash\n Indicator=(component Indicator value=this.value max=this.max percent=this.percent)\n value=this.value\n percent=this.percent\n decimal=this.decimal\n )\n }}\n </div>\n </template>\n}\n\nexport default Progress;\n"],"names":["DEFAULT_MAX","isValidProgressNumber","value","Number","isFinite","progressState","maxValue","getMax","userMax","getValue","userValue","max","getValueLabel","Math","round","Indicator","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly","Progress","Component","args","valueLabel","decimal","percent","hash"],"mappings":";;;;;;AAmDA,MAAMA,WAAA,GAAc,GAAA;AAEpB;;;AAGA,SAASC,qBAAAA,CAAsBC,KAAgC,EAAkB;AAC/E,EAAA,IAAI,OAAOA,KAAA,KAAU,QAAA,EAAU,OAAO,KAAA;EACtC,IAAI,CAACC,MAAA,CAAOC,QAAQ,CAACF,QAAQ,OAAO,KAAA;EAEpC,OAAOA,KAAA,IAAS,CAAA;AAClB;AAEA,SAASG,aAAAA,CAAcH,KAAgC,EAAEI,QAAgB,EAAG;AAC1E,EAAA,OAAOJ,KAAA,IAAS,IAAA,GAAO,eAAA,GAAkBA,KAAA,KAAUI,WAAW,UAAA,GAAa,SAAA;AAC7E;AAEA,SAASC,MAAAA,CAAOC,OAAkC,EAAS;AACzD,EAAA,OAAOP,qBAAA,CAAsBO,WAAWA,OAAA,GAAUR,WAAA;AACpD;AAEA,SAASS,QAAAA,CAASC,SAAoC,EAAEJ,QAAgB,EAAS;AAC/E,EAAA,MAAMK,MAAMJ,MAAA,CAAOD,QAAA,CAAA;AAEnB,EAAA,IAAI,CAACL,sBAAsBS,SAAA,CAAA,EAAY;AACrC,IAAA,OAAO,CAAA;AACT;EAEA,IAAIA,YAAYC,GAAA,EAAK;AACnB,IAAA,OAAOA,GAAA;AACT;AAEA,EAAA,OAAOD,SAAA;AACT;AAEA,SAASE,aAAAA,CAAcV,KAAa,EAAES,GAAW,EAAA;EAC/C,OAAO,CAAA,EAAGE,IAAA,CAAKC,KAAK,CAAEZ,KAAA,GAAQS,GAAG,GAAI,GAAA,CAAA,CAAA,CAAA,CAAO;AAC9C;AAEA,MAAMI,SAID,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,+JAAA,EAUL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAd,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAe,YAAA,EAAA,CAAA;AAEH,MAAMC,iBAAiBC,SAAA,CAAU;EACtC,IAAIX,GAAAA,GAAM;AACR,IAAA,OAAOJ,MAAA,CAAO,IAAI,CAACgB,IAAI,CAACZ,GAAG,CAAA;AAC7B;EAEA,IAAIT,KAAAA,GAAQ;IACV,OAAOO,QAAA,CAAS,IAAI,CAACc,IAAI,CAACrB,KAAK,EAAE,IAAI,CAACS,GAAG,CAAA;AAC3C;EAEA,IAAIa,UAAAA,GAAa;IACf,OAAOZ,cAAc,IAAI,CAACV,KAAK,EAAE,IAAI,CAACS,GAAG,CAAA;AAC3C;EAEA,IAAIc,OAAAA,GAAU;AACZ,IAAA,OAAO,IAAI,CAACvB,KAAK,GAAG,IAAI,CAACS,GAAG;AAC9B;EAEA,IAAIe,OAAAA,GAAU;AACZ,IAAA,OAAOb,IAAA,CAAKC,KAAK,CAAC,IAAI,CAACW,OAAO,GAAG,MAAM,GAAA,CAAA,GAAO,GAAA;AAChD;AAEA,EAAA;IAAAT,oBAAA,CAAAC,kBAAA,CAAA,qeAAA,EAwBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAd,aAAA;QAAAsB,IAAA;AAAAZ,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/rating/index.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { uniqueId } from \"../../utils.ts\";\nimport { RatingRange } from \"./range.gts\";\nimport { Stars } from \"./stars.gts\";\nimport { RatingState } from \"./state.gts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n /*\n * The element all passed attributes / modifiers are applied to.\n *\n * This is a `<fieldset>`, becaues the rating elements are\n * powered by a group of radio buttons.\n */\n Element: HTMLFieldSetElement;\n Args: (ComponentIcons | StringIcons) & {\n /**\n * The number of stars/whichever-icon to show\n *\n * Defaults to 5\n */\n max?: number;\n\n /**\n * The current number of stars/whichever-icon to show as selected\n *\n * Defaults to 0\n */\n value?: number;\n\n /**\n * Prevents click events on the icons and sets aria-readonly.\n *\n * Also sets data-readonly=true on the wrapping element\n */\n readonly?: boolean;\n\n /**\n * Toggles the ability to interact with the rating component.\n * When `true` (the default), the Rating component can be as a form input\n * to gather user feedback.\n *\n * When false, only the `@value` will be shown, and it cannot be changed.\n */\n interactive?: boolean;\n\n /**\n * Callback when the selected rating changes.\n * Can include half-ratings if the iconHalf argument is passed.\n */\n onChange?: (value: number) => void;\n };\n\n Blocks: {\n default: [\n rating: {\n /**\n * The maximum rating\n */\n max: number;\n /**\n * The maxium rating\n */\n total: number;\n /**\n * The current rating\n */\n value: number;\n /**\n * The name shared by the field group\n */\n name: string;\n /**\n * If the rating can be changed\n */\n isReadonly: boolean;\n /**\n * If the rating can be changed\n */\n isChangeable: boolean;\n /**\n * The stars / items radio group\n */\n Stars: WithBoundArgs<\n typeof Stars,\n \"stars\" | \"icon\" | \"isReadonly\" | \"name\" | \"total\" | \"currentValue\"\n >;\n /**\n * Input range for adjusting the rating via fractional means\n */\n Range: WithBoundArgs<typeof RatingRange, \"max\" | \"value\" | \"name\" | \"handleChange\">;\n },\n ];\n label: [\n state: {\n /**\n * The current rating\n */\n value: number;\n\n /**\n * The maximum rating\n */\n total: number;\n },\n ];\n };\n}\n\nexport class Rating extends Component<Signature> {\n name = `rating-${uniqueId()}`;\n\n get icon() {\n return this.args.icon ?? \"★\";\n }\n\n get isInteractive() {\n return this.args.interactive ?? true;\n }\n\n get isChangeable() {\n const readonly = this.args.readonly ?? false;\n\n return !readonly && this.isInteractive;\n }\n\n get isReadonly() {\n return !this.isChangeable;\n }\n\n get needsDescription() {\n return !this.isInteractive;\n }\n\n <template>\n <RatingState\n @max={{@max}}\n @value={{@value}}\n @name={{this.name}}\n @readonly={{this.isReadonly}}\n @onChange={{@onChange}}\n as |r publicState|\n >\n <fieldset\n class=\"ember-primitives__rating\"\n data-total={{r.total}}\n data-value={{r.value}}\n data-readonly={{this.isReadonly}}\n {{! We use event delegation, this isn't a primary interactive -- we're capturing events from inputs }}\n {{! template-lint-disable no-invalid-interactive }}\n {{on \"click\" r.handleClick}}\n ...attributes\n >\n {{#let\n (component\n Stars\n stars=r.stars\n icon=this.icon\n isReadonly=this.isReadonly\n name=this.name\n total=r.total\n currentValue=r.value\n )\n as |RatingStars|\n }}\n\n {{#if (has-block)}}\n {{yield\n (hash\n max=r.total\n total=r.total\n value=r.value\n name=this.name\n isReadonly=this.isReadonly\n isChangeable=this.isChangeable\n Stars=RatingStars\n Range=(component\n RatingRange max=r.total value=r.value name=this.name handleChange=r.handleChange\n )\n )\n }}\n {{else}}\n {{#if this.needsDescription}}\n {{#if (has-block \"label\")}}\n {{yield publicState to=\"label\"}}\n {{else}}\n <span visually-hidden class=\"ember-primitives__rating__label\">Rated\n {{r.value}}\n out of\n {{r.total}}</span>\n {{/if}}\n {{else}}\n {{#if (has-block \"label\")}}\n <legend>\n {{yield publicState to=\"label\"}}\n </legend>\n {{/if}}\n {{/if}}\n\n <RatingStars />\n {{/if}}\n {{/let}}\n\n </fieldset>\n </RatingState>\n </template>\n}\n"],"names":["Rating","Component","name","uniqueId","icon","args","isInteractive","interactive","isChangeable","readonly","isReadonly","needsDescription","setComponentTemplate","precompileTemplate","strictMode","scope","RatingState","on","Stars","hash","RatingRange"],"mappings":";;;;;;;;;;AAkHO,MAAMA,eAAeC,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/rating/index.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { uniqueId } from \"../../utils.ts\";\nimport { RatingRange } from \"./range.gts\";\nimport { Stars } from \"./stars.gts\";\nimport { RatingState } from \"./state.gts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n /*\n * The element all passed attributes / modifiers are applied to.\n *\n * This is a `<fieldset>`, becaues the rating elements are\n * powered by a group of radio buttons.\n */\n Element: HTMLFieldSetElement;\n Args: (ComponentIcons | StringIcons) & {\n /**\n * The number of stars/whichever-icon to show\n *\n * Defaults to 5\n */\n max?: number;\n\n /**\n * The current number of stars/whichever-icon to show as selected\n *\n * Defaults to 0\n */\n value?: number;\n\n /**\n * Prevents click events on the icons and sets aria-readonly.\n *\n * Also sets data-readonly=true on the wrapping element\n */\n readonly?: boolean;\n\n /**\n * Toggles the ability to interact with the rating component.\n * When `true` (the default), the Rating component can be as a form input\n * to gather user feedback.\n *\n * When false, only the `@value` will be shown, and it cannot be changed.\n */\n interactive?: boolean;\n\n /**\n * Callback when the selected rating changes.\n * Can include half-ratings if the iconHalf argument is passed.\n */\n onChange?: (value: number) => void;\n };\n\n Blocks: {\n default: [\n rating: {\n /**\n * The maximum rating\n */\n max: number;\n /**\n * The maxium rating\n */\n total: number;\n /**\n * The current rating\n */\n value: number;\n /**\n * The name shared by the field group\n */\n name: string;\n /**\n * If the rating can be changed\n */\n isReadonly: boolean;\n /**\n * If the rating can be changed\n */\n isChangeable: boolean;\n /**\n * The stars / items radio group\n */\n Stars: WithBoundArgs<\n typeof Stars,\n \"stars\" | \"icon\" | \"isReadonly\" | \"name\" | \"total\" | \"currentValue\"\n >;\n /**\n * Input range for adjusting the rating via fractional means\n */\n Range: WithBoundArgs<typeof RatingRange, \"max\" | \"value\" | \"name\" | \"handleChange\">;\n },\n ];\n label: [\n state: {\n /**\n * The current rating\n */\n value: number;\n\n /**\n * The maximum rating\n */\n total: number;\n },\n ];\n };\n}\n\nexport class Rating extends Component<Signature> {\n name = `rating-${uniqueId()}`;\n\n get icon() {\n return this.args.icon ?? \"★\";\n }\n\n get isInteractive() {\n return this.args.interactive ?? true;\n }\n\n get isChangeable() {\n const readonly = this.args.readonly ?? false;\n\n return !readonly && this.isInteractive;\n }\n\n get isReadonly() {\n return !this.isChangeable;\n }\n\n get needsDescription() {\n return !this.isInteractive;\n }\n\n <template>\n <RatingState\n @max={{@max}}\n @value={{@value}}\n @name={{this.name}}\n @readonly={{this.isReadonly}}\n @onChange={{@onChange}}\n as |r publicState|\n >\n <fieldset\n class=\"ember-primitives__rating\"\n data-total={{r.total}}\n data-value={{r.value}}\n data-readonly={{this.isReadonly}}\n {{! We use event delegation, this isn't a primary interactive -- we're capturing events from inputs }}\n {{! template-lint-disable no-invalid-interactive }}\n {{on \"click\" r.handleClick}}\n ...attributes\n >\n {{#let\n (component\n Stars\n stars=r.stars\n icon=this.icon\n isReadonly=this.isReadonly\n name=this.name\n total=r.total\n currentValue=r.value\n )\n as |RatingStars|\n }}\n\n {{#if (has-block)}}\n {{yield\n (hash\n max=r.total\n total=r.total\n value=r.value\n name=this.name\n isReadonly=this.isReadonly\n isChangeable=this.isChangeable\n Stars=RatingStars\n Range=(component\n RatingRange max=r.total value=r.value name=this.name handleChange=r.handleChange\n )\n )\n }}\n {{else}}\n {{#if this.needsDescription}}\n {{#if (has-block \"label\")}}\n {{yield publicState to=\"label\"}}\n {{else}}\n <span visually-hidden class=\"ember-primitives__rating__label\">Rated\n {{r.value}}\n out of\n {{r.total}}</span>\n {{/if}}\n {{else}}\n {{#if (has-block \"label\")}}\n <legend>\n {{yield publicState to=\"label\"}}\n </legend>\n {{/if}}\n {{/if}}\n\n <RatingStars />\n {{/if}}\n {{/let}}\n\n </fieldset>\n </RatingState>\n </template>\n}\n"],"names":["Rating","Component","name","uniqueId","icon","args","isInteractive","interactive","isChangeable","readonly","isReadonly","needsDescription","setComponentTemplate","precompileTemplate","strictMode","scope","RatingState","on","Stars","hash","RatingRange"],"mappings":";;;;;;;;;;AAkHO,MAAMA,eAAeC,SAAA,CAAU;AACpCC,EAAAA,IAAA,GAAO,CAAA,OAAA,EAAUC,QAAA,EAAA,CAAA,CAAY;EAE7B,IAAIC,IAAAA,GAAO;AACT,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,IAAI,IAAI,GAAA;AAC3B;EAEA,IAAIE,aAAAA,GAAgB;AAClB,IAAA,OAAO,IAAI,CAACD,IAAI,CAACE,WAAW,IAAI,IAAA;AAClC;EAEA,IAAIC,YAAAA,GAAe;IACjB,MAAMC,WAAW,IAAI,CAACJ,IAAI,CAACI,QAAQ,IAAI,KAAA;AAEvC,IAAA,OAAO,CAACA,QAAA,IAAY,IAAI,CAACH,aAAa;AACxC;EAEA,IAAII,UAAAA,GAAa;IACf,OAAO,CAAC,IAAI,CAACF,YAAY;AAC3B;EAEA,IAAIG,gBAAAA,GAAmB;IACrB,OAAO,CAAC,IAAI,CAACL,aAAa;AAC5B;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,2nDAAA,EAuEA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,WAAA;QAAAC,EAAA;QAAAC,KAAA;QAAAC,IAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range.js","sources":["../../../src/components/rating/range.gts"],"sourcesContent":["import { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const RatingRange: TOC<{\n Element: HTMLInputElement;\n Args: {\n name: string;\n max: number;\n value: number;\n handleChange: (event: Event) => void;\n };\n}> = <template>\n <input\n ...attributes\n name={{@name}}\n type=\"range\"\n max={{@max}}\n value={{@value}}\n {{on \"change\" @handleChange}}\n />\n</template>;\n"],"names":["RatingRange","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly"],"mappings":";;;;;MAIaA,WAQR,GAAAC,oBAAA,CAAAC,kBAAA,
|
|
1
|
+
{"version":3,"file":"range.js","sources":["../../../src/components/rating/range.gts"],"sourcesContent":["import { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const RatingRange: TOC<{\n Element: HTMLInputElement;\n Args: {\n name: string;\n max: number;\n value: number;\n handleChange: (event: Event) => void;\n };\n}> = <template>\n <input\n ...attributes\n name={{@name}}\n type=\"range\"\n max={{@max}}\n value={{@value}}\n {{on \"change\" @handleChange}}\n />\n</template>;\n"],"names":["RatingRange","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly"],"mappings":";;;;;MAIaA,WAQR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,2HAAA,EASL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stars.js","sources":["../../../src/components/rating/stars.gts"],"sourcesContent":["import { uniqueId } from \"../../utils.ts\";\nimport { isString, lte, percentSelected } from \"./utils.ts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Stars: TOC<{\n Args: {\n // Configuration\n stars: number[];\n icon: StringIcons[\"icon\"] | ComponentIcons[\"icon\"];\n isReadonly: boolean;\n\n // HTML Boilerplate\n name: string;\n\n // State\n currentValue: number;\n total: number;\n };\n}> = <template>\n <div class=\"ember-primitives__rating__items\">\n {{#each @stars as |star|}}\n {{#let (uniqueId) as |id|}}\n <span\n class=\"ember-primitives__rating__item\"\n data-number={{star}}\n data-percent-selected={{percentSelected star @currentValue}}\n data-selected={{lte star @currentValue}}\n data-readonly={{@isReadonly}}\n >\n <label for=\"input-{{id}}\">\n <span visually-hidden>{{star}} star</span>\n <span aria-hidden=\"true\">\n {{#if (isString @icon)}}\n {{@icon}}\n {{else}}\n <@icon\n @value={{star}}\n @isSelected={{lte star @currentValue}}\n @percentSelected={{percentSelected star @currentValue}}\n @readonly={{@isReadonly}}\n />\n {{/if}}\n </span>\n </label>\n\n <input\n id=\"input-{{id}}\"\n type=\"radio\"\n name={{@name}}\n value={{star}}\n readonly={{@isReadonly}}\n checked={{lte star @currentValue}}\n />\n </span>\n {{/let}}\n {{/each}}\n </div>\n</template>;\n"],"names":["Stars","setComponentTemplate","precompileTemplate","strictMode","scope","uniqueId","percentSelected","lte","isString","templateOnly"],"mappings":";;;;;;MAMaA,KAcR,GAAAC,oBAAA,CAAAC,kBAAA,
|
|
1
|
+
{"version":3,"file":"stars.js","sources":["../../../src/components/rating/stars.gts"],"sourcesContent":["import { uniqueId } from \"../../utils.ts\";\nimport { isString, lte, percentSelected } from \"./utils.ts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Stars: TOC<{\n Args: {\n // Configuration\n stars: number[];\n icon: StringIcons[\"icon\"] | ComponentIcons[\"icon\"];\n isReadonly: boolean;\n\n // HTML Boilerplate\n name: string;\n\n // State\n currentValue: number;\n total: number;\n };\n}> = <template>\n <div class=\"ember-primitives__rating__items\">\n {{#each @stars as |star|}}\n {{#let (uniqueId) as |id|}}\n <span\n class=\"ember-primitives__rating__item\"\n data-number={{star}}\n data-percent-selected={{percentSelected star @currentValue}}\n data-selected={{lte star @currentValue}}\n data-readonly={{@isReadonly}}\n >\n <label for=\"input-{{id}}\">\n <span visually-hidden>{{star}} star</span>\n <span aria-hidden=\"true\">\n {{#if (isString @icon)}}\n {{@icon}}\n {{else}}\n <@icon\n @value={{star}}\n @isSelected={{lte star @currentValue}}\n @percentSelected={{percentSelected star @currentValue}}\n @readonly={{@isReadonly}}\n />\n {{/if}}\n </span>\n </label>\n\n <input\n id=\"input-{{id}}\"\n type=\"radio\"\n name={{@name}}\n value={{star}}\n readonly={{@isReadonly}}\n checked={{lte star @currentValue}}\n />\n </span>\n {{/let}}\n {{/each}}\n </div>\n</template>;\n"],"names":["Stars","setComponentTemplate","precompileTemplate","strictMode","scope","uniqueId","percentSelected","lte","isString","templateOnly"],"mappings":";;;;;;MAMaA,KAcR,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,k+BAAA,EAuCL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,QAAA;IAAAC,eAAA;IAAAC,GAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.js","sources":["../../../src/components/rating/state.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { cached } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nexport class RatingState extends Component<{\n Args: {\n max: number | undefined;\n value: number | undefined;\n readonly: boolean | undefined;\n name: string;\n onChange?: (value: number) => void;\n };\n Blocks: {\n default: [\n internalApi: {\n stars: number[];\n value: number;\n total: number;\n handleClick: (event: Event) => void;\n handleChange: (event: Event) => void;\n setRating: (num: number) => void;\n },\n publicApi: {\n value: number;\n total: number;\n },\n ];\n };\n}> {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n @localCopy(\"args.value\") declare _value: number;\n\n get value() {\n return this._value ?? 0;\n }\n\n @cached\n get stars() {\n return Array.from({ length: this.args.max ?? 5 }, (_, index) => index + 1);\n }\n\n setRating = (value: number) => {\n if (this.args.readonly) {\n return;\n }\n\n if (value === this._value) {\n this._value = 0;\n } else {\n this._value = value;\n }\n\n this.args.onChange?.(value);\n };\n\n setFromString = (value: unknown) => {\n assert(\"[BUG]: value from input must be a string.\", typeof value === \"string\");\n\n const num = parseFloat(value);\n\n if (isNaN(num)) {\n // something went wrong.\n // Since we're using event delegation,\n // this could be from an unrelated input\n return;\n }\n\n this.setRating(num);\n };\n\n /**\n * Click events are captured by\n * - radio changes (mouse and keyboard)\n * - but only range clicks\n */\n handleClick = (event: Event) => {\n // Since we're doing event delegation on a click, we want to make sure\n // we don't do anything on other elements\n const isValid =\n event.target instanceof HTMLInputElement &&\n event.target.name === this.args.name &&\n event.target.type === \"radio\";\n\n if (!isValid) return;\n\n const selected = event.target?.value;\n\n this.setFromString(selected);\n };\n\n /**\n * Only attached to a range element, if present.\n * Range elements don't fire click events on keyboard usage, like radios do\n */\n handleChange = (event: Event) => {\n const isValid = event.target !== null && \"value\" in event.target;\n\n if (!isValid) return;\n\n this.setFromString(event.target.value);\n };\n\n <template>\n {{yield\n (hash\n stars=this.stars\n total=this.stars.length\n handleClick=this.handleClick\n handleChange=this.handleChange\n setRating=this.setRating\n value=this.value\n )\n (hash total=this.stars.length value=this.value)\n }}\n </template>\n}\n"],"names":["RatingState","Component","localCopy","i","void 0","value","_value","stars","Array","from","length","args","max","_","index","n","prototype","cached","setRating","readonly","onChange","setFromString","assert","num","parseFloat","isNaN","handleClick","event","isValid","target","HTMLInputElement","name","type","selected","handleChange","setComponentTemplate","precompileTemplate","strictMode","scope","hash"],"mappings":";;;;;;;;;AASO,MAAMA,
|
|
1
|
+
{"version":3,"file":"state.js","sources":["../../../src/components/rating/state.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { cached } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nexport class RatingState extends Component<{\n Args: {\n max: number | undefined;\n value: number | undefined;\n readonly: boolean | undefined;\n name: string;\n onChange?: (value: number) => void;\n };\n Blocks: {\n default: [\n internalApi: {\n stars: number[];\n value: number;\n total: number;\n handleClick: (event: Event) => void;\n handleChange: (event: Event) => void;\n setRating: (num: number) => void;\n },\n publicApi: {\n value: number;\n total: number;\n },\n ];\n };\n}> {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n @localCopy(\"args.value\") declare _value: number;\n\n get value() {\n return this._value ?? 0;\n }\n\n @cached\n get stars() {\n return Array.from({ length: this.args.max ?? 5 }, (_, index) => index + 1);\n }\n\n setRating = (value: number) => {\n if (this.args.readonly) {\n return;\n }\n\n if (value === this._value) {\n this._value = 0;\n } else {\n this._value = value;\n }\n\n this.args.onChange?.(value);\n };\n\n setFromString = (value: unknown) => {\n assert(\"[BUG]: value from input must be a string.\", typeof value === \"string\");\n\n const num = parseFloat(value);\n\n if (isNaN(num)) {\n // something went wrong.\n // Since we're using event delegation,\n // this could be from an unrelated input\n return;\n }\n\n this.setRating(num);\n };\n\n /**\n * Click events are captured by\n * - radio changes (mouse and keyboard)\n * - but only range clicks\n */\n handleClick = (event: Event) => {\n // Since we're doing event delegation on a click, we want to make sure\n // we don't do anything on other elements\n const isValid =\n event.target instanceof HTMLInputElement &&\n event.target.name === this.args.name &&\n event.target.type === \"radio\";\n\n if (!isValid) return;\n\n const selected = event.target?.value;\n\n this.setFromString(selected);\n };\n\n /**\n * Only attached to a range element, if present.\n * Range elements don't fire click events on keyboard usage, like radios do\n */\n handleChange = (event: Event) => {\n const isValid = event.target !== null && \"value\" in event.target;\n\n if (!isValid) return;\n\n this.setFromString(event.target.value);\n };\n\n <template>\n {{yield\n (hash\n stars=this.stars\n total=this.stars.length\n handleClick=this.handleClick\n handleChange=this.handleChange\n setRating=this.setRating\n value=this.value\n )\n (hash total=this.stars.length value=this.value)\n }}\n </template>\n}\n"],"names":["RatingState","Component","localCopy","i","void 0","value","_value","stars","Array","from","length","args","max","_","index","n","prototype","cached","setRating","readonly","onChange","setFromString","assert","num","parseFloat","isNaN","handleClick","event","isValid","target","HTMLInputElement","name","type","selected","handleChange","setComponentTemplate","precompileTemplate","strictMode","scope","hash"],"mappings":";;;;;;;;;AASO,MAAMA,WAAA,SAAoBC,SAAA;;iCA0B9BC,SAAA,CAAU,YAAA,CAAA,CAAA,CAAA;AAAA;AAAA,EAAA,OAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAAC,MAAA,EAAA;EAEX,IAAIC,KAAAA,GAAQ;AACV,IAAA,OAAO,IAAI,CAACC,MAAM,IAAI,CAAA;AACxB;EAEA,IACIC,KAAAA,GAAQ;IACV,OAAOC,KAAA,CAAMC,IAAI,CAAC;AAAEC,MAAAA,MAAA,EAAQ,IAAI,CAACC,IAAI,CAACC,GAAG,IAAI;KAAE,EAAG,CAACC,CAAA,EAAGC,KAAA,KAAUA,KAAA,GAAQ,CAAA,CAAA;AAC1E;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,OAAA,EAAA,CAHCC,MAAA,CAAA,CAAA;AAAA;EAKDC,SAAA,GAAab,KAAa,IAAA;AACxB,IAAA,IAAI,IAAI,CAACM,IAAI,CAACQ,QAAQ,EAAE;AACtB,MAAA;AACF;AAEA,IAAA,IAAId,KAAA,KAAU,IAAI,CAACC,MAAM,EAAE;MACzB,IAAI,CAACA,MAAM,GAAG,CAAA;AAChB,KAAA,MAAO;MACL,IAAI,CAACA,MAAM,GAAGD,KAAA;AAChB;AAEA,IAAA,IAAI,CAACM,IAAI,CAACS,QAAQ,GAAGf,KAAA,CAAA;GACvB;EAEAgB,aAAA,GAAiBhB,KAAc,IAAA;AAC7BiB,IAAAA,MAAA,CAAO,2CAAA,EAA6C,OAAOjB,KAAA,KAAU,QAAA,CAAA;AAErE,IAAA,MAAMkB,MAAMC,UAAA,CAAWnB,KAAA,CAAA;AAEvB,IAAA,IAAIoB,MAAMF,GAAA,CAAA,EAAM;AACd;AACA;AACA;AACA,MAAA;AACF;AAEA,IAAA,IAAI,CAACL,SAAS,CAACK,GAAA,CAAA;GACjB;AAEA;;;;;EAKAG,WAAA,GAAeC,KAAO,IAAA;AACpB;AACA;IACA,MAAMC,OAAA,GACJD,MAAME,MAAM,YAAYC,oBACxBH,KAAA,CAAME,MAAM,CAACE,IAAI,KAAK,IAAI,CAACpB,IAAI,CAACoB,IAAI,IACpCJ,MAAME,MAAM,CAACG,IAAI,KAAK,OAAA;IAExB,IAAI,CAACJ,OAAA,EAAS;AAEd,IAAA,MAAMK,QAAA,GAAWN,KAAA,CAAME,MAAM,EAAExB,KAAA;AAE/B,IAAA,IAAI,CAACgB,aAAa,CAACY,QAAA,CAAA;GACrB;AAEA;;;;EAIAC,YAAA,GAAgBP,KAAO,IAAA;AACrB,IAAA,MAAMC,UAAUD,KAAA,CAAME,MAAM,KAAK,IAAA,IAAQ,OAAA,IAAWF,MAAME,MAAM;IAEhE,IAAI,CAACD,OAAA,EAAS;IAEd,IAAI,CAACP,aAAa,CAACM,KAAA,CAAME,MAAM,CAACxB,KAAK,CAAA;GACvC;AAEA,EAAA;IAAA8B,oBAAA,CAAAC,kBAAA,CAAA,2NAAA,EAYA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|