ember-primitives 0.27.2 → 0.28.0

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"switch.js","sources":["../../src/components/switch.gts"],"sourcesContent":["import { fn, hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { cell } from \"ember-resources\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport { Label } from \"./-private/typed-elements.gts\";\nimport { toggleWithFallback } from \"./-private/utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  Element: HTMLInputElement;\n  Args: {\n    /**\n     * The initial checked value of the Switch.\n     * This value is reactive, so if the value that\n     * `@checked` is set to updates, the state of the Switch will also update.\n     */\n    checked?: boolean;\n    /**\n     * Callback when the Switch state is toggled\n     */\n    onChange?: (checked: boolean, event: Event) => void;\n  };\n  Blocks: {\n    default?: [\n      {\n        /**\n         * The Switch Element.\n         * It has a pre-wired `id` so that the relevant Label is\n         * appropriately associated via the `for` property of the Label.\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Control />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Control: WithBoundArgs<typeof Checkbox, \"checked\" | \"id\" | \"onChange\">;\n        /**\n         * The Switch element requires a label, and this label already has\n         * the association to the Control by setting the `for` attribute to the `id` of the Control\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Label />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Label: WithBoundArgs<typeof Label, \"for\">;\n      },\n    ];\n  };\n}\n\ninterface ControlSignature {\n  Element: HTMLInputElement;\n  Args: { id: string; checked?: boolean; onChange: () => void };\n}\n\nconst Checkbox: TOC<ControlSignature> = <template>\n  {{#let (cell @checked) as |checked|}}\n    <input\n      id={{@id}}\n      type=\"checkbox\"\n      role=\"switch\"\n      checked={{checked.current}}\n      aria-checked={{checked.current}}\n      data-state={{if checked.current \"on\" \"off\"}}\n      {{on \"click\" (fn toggleWithFallback checked.toggle @onChange)}}\n      ...attributes\n    />\n  {{/let}}\n</template>;\n\n/**\n * @public\n */\nexport const Switch: TOC<Signature> = <template>\n  <div ...attributes data-prim-switch>\n    {{! @glint-nocheck }}\n    {{#let (uniqueId) as |id|}}\n      {{yield\n        (hash\n          Control=(component Checkbox checked=@checked id=id onChange=@onChange)\n          Label=(component Label for=id)\n        )\n      }}\n    {{/let}}\n  </div>\n</template>;\n\nexport default Switch;\n"],"names":["Checkbox","setComponentTemplate","precompileTemplate","strictMode","scope","cell","on","fn","toggleWithFallback","templateOnly","Switch","uniqueId","hash","Label"],"mappings":";;;;;;;;;;AAsEA,MAAMA,QAAkC,GAAAC,oBAAA,CAAAC,kBAAA,CAaxC,mTAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAC,EAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEV;;AAEC;MACYC,MAAY,GAAAT,oBAAA,CAAaC,kBAAA,CAYtC,kQAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAO,QAAA;IAAAC,IAAA;IAAAZ,QAAA;AAAAa,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAJ,YAAA,EAAA;;;;"}

package/dist/components/toggle-group.js

@@ -15,8 +15,8 @@ const TABSTER_CONFIG = getTabsterAttribute({
     cyclic: true
   }
 }, true);
-function isMulti(x1) {
-  return x1 === 'multi';
+function isMulti(x) {
+  return x === "multi";
 }
 class ToggleGroup extends Component {
   // See: https://github.com/typed-ember/glint/issues/715
@@ -31,20 +31,20 @@ class ToggleGroup extends Component {
     }), this);
   }
 }
-let SingleToggleGroup = class SingleToggleGroup extends Component {
+class SingleToggleGroup extends Component {
   static {
-    g(this.prototype, "activePressed", [localCopy('args.value')]);
+    g(this.prototype, "activePressed", [localCopy("args.value")]);
   }
-  #activePressed = (i(this, "activePressed"), void 0);
-  handleToggle = value1 => {
-    if (this.activePressed === value1) {
+  #activePressed = (i(this, "activePressed"), void 0); // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  handleToggle = value => {
+    if (this.activePressed === value) {
       this.activePressed = undefined;
       return;
     }
-    this.activePressed = value1;
+    this.activePressed = value;
     this.args.onChange?.(this.activePressed);
   };
-  isPressed = value1 => value1 === this.activePressed;
+  isPressed = value => value === this.activePressed;
   static {
     setComponentTemplate(precompileTemplate("\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  ", {
       strictMode: true,
@@ -55,38 +55,38 @@ let SingleToggleGroup = class SingleToggleGroup extends Component {
       })
     }), this);
   }
-};
-let MultiToggleGroup = class MultiToggleGroup extends Component {
+}
+class MultiToggleGroup extends Component {
   /**
   * Normalizes @value to a Set
   * and makes sure that even if the input Set is reactive,
   * we don't mistakenly dirty it.
   */
   get activePressed() {
-    let value1 = this.args.value;
-    if (!value1) {
+    const value = this.args.value;
+    if (!value) {
       return new TrackedSet();
     }
-    if (Array.isArray(value1)) {
-      return new TrackedSet(value1);
+    if (Array.isArray(value)) {
+      return new TrackedSet(value);
     }
-    if (value1 instanceof Set) {
-      return new TrackedSet(value1);
+    if (value instanceof Set) {
+      return new TrackedSet(value);
     }
-    return new TrackedSet([value1]);
+    return new TrackedSet([value]);
   }
   static {
     n(this.prototype, "activePressed", [cached]);
   }
-  handleToggle = value1 => {
-    if (this.activePressed.has(value1)) {
-      this.activePressed.delete(value1);
+  handleToggle = value => {
+    if (this.activePressed.has(value)) {
+      this.activePressed.delete(value);
     } else {
-      this.activePressed.add(value1);
+      this.activePressed.add(value);
     }
     this.args.onChange?.(new Set(this.activePressed.values()));
   };
-  isPressed = value1 => this.activePressed.has(value1);
+  isPressed = value => this.activePressed.has(value);
   static {
     setComponentTemplate(precompileTemplate("\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  ", {
       strictMode: true,
@@ -97,7 +97,7 @@ let MultiToggleGroup = class MultiToggleGroup extends Component {
       })
     }), this);
   }
-};
+}
 
 export { ToggleGroup };
 //# sourceMappingURL=toggle-group.js.map

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle-group.js","sources":["../../src/components/toggle-group.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { cached } from \"@glimmer/tracking\";\nimport { hash } from \"@ember/helper\";\n\nimport { getTabsterAttribute, MoverDirections } from \"tabster\";\nimport { TrackedSet } from \"tracked-built-ins\";\n// The consumer will need to provide types for tracked-toolbox.\n// Or.. better yet, we PR to trakcked-toolbox to provide them\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { localCopy } from \"tracked-toolbox\";\n\nimport { Toggle } from \"./toggle.gts\";\n\nimport type { ComponentLike } from \"@glint/template\";\n\nconst TABSTER_CONFIG = getTabsterAttribute(\n  {\n    mover: {\n      direction: MoverDirections.Both,\n      cyclic: true,\n    },\n  },\n  true,\n);\n\nexport interface ItemSignature<Value = any> {\n  /**\n   * The button element will have aria-pressed=\"true\" on it when the button is in the pressed state.\n   */\n  Element: HTMLButtonElement;\n  Args: {\n    /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */\n    value?: Value;\n  };\n  Blocks: {\n    default: [\n      /**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */\n      pressed: boolean,\n    ];\n  };\n}\n\nexport type Item<Value = any> = ComponentLike<ItemSignature<Value>>;\n\nexport interface SingleSignature<Value> {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Optionally set the initial toggle state\n     */\n    value?: Value;\n    /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */\n    onChange?: (value: Value | undefined) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * The Toggle Switch\n         */\n        Item: Item;\n      },\n    ];\n  };\n}\n\nexport interface MultiSignature<Value = any> {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Optionally set the initial toggle state\n     */\n    value?: Value[] | Set<Value> | Value;\n    /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */\n    onChange?: (value: Set<Value>) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * The Toggle Switch\n         */\n        Item: Item;\n      },\n    ];\n  };\n}\n\ninterface PrivateSingleSignature<Value = any> {\n  Element: HTMLDivElement;\n  Args: {\n    type?: \"single\";\n\n    /**\n     * Optionally set the initial toggle state\n     */\n    value?: Value;\n    /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */\n    onChange?: (value: Value | undefined) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Item: Item;\n      },\n    ];\n  };\n}\n\ninterface PrivateMultiSignature<Value = any> {\n  Element: HTMLDivElement;\n  Args: {\n    type: \"multi\";\n    /**\n     * Optionally set the initial toggle state\n     */\n    value?: Value[] | Set<Value> | Value;\n    /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */\n    onChange?: (value: Set<Value>) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Item: Item;\n      },\n    ];\n  };\n}\n\nfunction isMulti(x: \"single\" | \"multi\" | undefined): x is \"multi\" {\n  return x === \"multi\";\n}\n\nexport class ToggleGroup<Value = any> extends Component<\n  PrivateSingleSignature<Value> | PrivateMultiSignature<Value>\n> {\n  // See: https://github.com/typed-ember/glint/issues/715\n  <template>\n    {{#if (isMulti this.args.type)}}\n      <MultiToggleGroup\n        @value={{this.args.value}}\n        @onChange={{this.args.onChange}}\n        ...attributes\n        as |x|\n      >\n        {{yield x}}\n      </MultiToggleGroup>\n    {{else}}\n      <SingleToggleGroup\n        @value={{this.args.value}}\n        @onChange={{this.args.onChange}}\n        ...attributes\n        as |x|\n      >\n        {{yield x}}\n      </SingleToggleGroup>\n    {{/if}}\n  </template>\n}\n\nclass SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.value\") activePressed?: Value;\n\n  handleToggle = (value: Value) => {\n    if (this.activePressed === value) {\n      this.activePressed = undefined;\n\n      return;\n    }\n\n    this.activePressed = value;\n\n    this.args.onChange?.(this.activePressed);\n  };\n\n  isPressed = (value: Value | undefined) => value === this.activePressed;\n\n  <template>\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  </template>\n}\n\nclass MultiToggleGroup<Value = any> extends Component<MultiSignature<Value>> {\n  /**\n   * Normalizes @value to a Set\n   * and makes sure that even if the input Set is reactive,\n   * we don't mistakenly dirty it.\n   */\n  @cached\n  get activePressed(): TrackedSet<Value> {\n    const value = this.args.value;\n\n    if (!value) {\n      return new TrackedSet();\n    }\n\n    if (Array.isArray(value)) {\n      return new TrackedSet(value);\n    }\n\n    if (value instanceof Set) {\n      return new TrackedSet(value);\n    }\n\n    return new TrackedSet([value]);\n  }\n\n  handleToggle = (value: Value) => {\n    if (this.activePressed.has(value)) {\n      this.activePressed.delete(value);\n    } else {\n      this.activePressed.add(value);\n    }\n\n    this.args.onChange?.(new Set<Value>(this.activePressed.values()));\n  };\n\n  isPressed = (value: Value) => this.activePressed.has(value);\n\n  <template>\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  </template>\n}\n"],"names":["TABSTER_CONFIG","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","isMulti","x","ToggleGroup","Component","setComponentTemplate","precompileTemplate","strictMode","scope","MultiToggleGroup","SingleToggleGroup","g","prototype","localCopy","i","void 0","handleToggle","value","activePressed","undefined","args","onChange","isPressed","hash","Toggle","TrackedSet","Array","isArray","Set","n","cached","has","delete","add","values"],"mappings":"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"}

package/dist/components/toggle.js

@@ -8,10 +8,10 @@ import templateOnly from '@ember/component/template-only';
 
 // import Component from '@glimmer/component';
 
-function isPressed(pressed1, value1, isPressed1) {
-  if (!value1) return Boolean(pressed1);
-  if (!isPressed1) return Boolean(pressed1);
-  return isPressed1(value1);
+function isPressed(pressed, value, isPressed) {
+  if (!value) return Boolean(pressed);
+  if (!isPressed) return Boolean(pressed);
+  return isPressed(value);
 }
 const Toggle = setComponentTemplate(precompileTemplate("\n  {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n    <button type=\"button\" aria-pressed=\"{{pressed.current}}\" {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}} ...attributes>\n      {{yield pressed.current}}\n    </button>\n  {{/let}}\n", {
   strictMode: true,

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.js","sources":["../../src/components/toggle.gts"],"sourcesContent":["// import Component from '@glimmer/component';\nimport { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { cell } from \"ember-resources\";\n\nimport { toggleWithFallback } from \"./-private/utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport interface Signature<Value = any> {\n  Element: HTMLButtonElement;\n  Args: {\n    /**\n     * The pressed-state of the toggle.\n     *\n     * Can be used to control the state of the component.\n     */\n    pressed?: boolean;\n    /**\n     * Callback for when the toggle's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     * if a `@value` is passed to this `<Toggle>`, that @value will\n     * be passed to the `@onChange` handler.\n     *\n     * This can be useful when using the same function for the `@onChange`\n     * handler with multiple `<Toggle>` components.\n     */\n    onChange?: (value: Value | undefined, pressed: boolean) => void;\n\n    /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */\n    value?: Value;\n\n    /**\n     * When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.\n     */\n    isPressed?: (value?: Value) => boolean;\n  };\n  Blocks: {\n    default: [\n      /**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */\n      pressed: boolean,\n    ];\n  };\n}\n\nfunction isPressed(\n  pressed?: boolean,\n  value?: unknown,\n  isPressed?: (value?: unknown) => boolean,\n): boolean {\n  if (!value) return Boolean(pressed);\n  if (!isPressed) return Boolean(pressed);\n\n  return isPressed(value);\n}\n\nexport const Toggle: TOC<Signature> = <template>\n  {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n    <button\n      type=\"button\"\n      aria-pressed=\"{{pressed.current}}\"\n      {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}}\n      ...attributes\n    >\n      {{yield pressed.current}}\n    </button>\n  {{/let}}\n</template>;\n\nexport default Toggle;\n"],"names":["isPressed","pressed","value","Boolean","Toggle","setComponentTemplate","precompileTemplate","strictMode","scope","cell","on","fn","toggleWithFallback","templateOnly"],"mappings":";;;;;;;;AAAA;;AAwDA,SAASA,SACPA,CAAAC,OAAiB,EACjBC,KAAe,EACfF,SAAwC,EAChC;AACR,EAAA,IAAI,CAACE,KAAO,EAAA,OAAOC,OAAQ,CAAAF,OAAA,CAAA;AAC3B,EAAA,IAAI,CAACD,SAAW,EAAA,OAAOG,OAAQ,CAAAF,OAAA,CAAA;EAE/B,OAAOD,SAAU,CAAAE,KAAA,CAAA;AACnB;MAEaE,MAAY,GAAAC,oBAAA,CAAaC,kBAAA,CAWtC,iSAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAT,SAAA;IAAAU,EAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/violations.css

@@ -68,10 +68,10 @@ div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="swi
 
 @media (prefers-color-scheme: light) {
   :is(
-      a[href="##missing##"],
-      span[data-prim-avatar]:has(img[alt="__missing__"]),
-      div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
-    ) {
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
+  ) {
     border-color: black;
   }
   :is(
@@ -87,10 +87,10 @@ div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="swi
 
 @media (prefers-color-scheme: dark) {
   :is(
-      a[href="##missing##"],
-      span[data-prim-avatar]:has(img[alt="__missing__"]),
-      div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
-    ) {
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
+  ) {
     border-color: red;
   }
   :is(

package/dist/components/zoetrope/index.js

@@ -10,7 +10,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i } from 'decorator-transforms/runtime';
 
-const testWaiter = buildWaiter('ember-primitive:zoetrope-waiter');
+const testWaiter = buildWaiter("ember-primitive:zoetrope-waiter");
 const DEFAULT_GAP = 8;
 const DEFAULT_OFFSET = 0;
 class Zoetrope extends Component {
@@ -38,71 +38,71 @@ class Zoetrope extends Component {
     });
   }
   #offsetWidth = (i(this, "offsetWidth"), void 0);
-  setCSSVariables = modifier((element1, _1, {
-    gap: gap1,
-    offset: offset1
+  setCSSVariables = modifier((element, _, {
+    gap,
+    offset
   }) => {
-    if (gap1) element1.style.setProperty('--zoetrope-gap', `${gap1}px`);
-    if (offset1) element1.style.setProperty('--zoetrope-offset', `${offset1}px`);
+    if (gap) element.style.setProperty("--zoetrope-gap", `${gap}px`);
+    if (offset) element.style.setProperty("--zoetrope-offset", `${offset}px`);
   });
   scrollerWaiter = testWaiter.beginAsync();
   noScrollWaiter = () => {
     testWaiter.endAsync(this.scrollerWaiter);
   };
-  configureScroller = modifier(element1 => {
-    this.scrollerElement = element1;
-    this.currentlyScrolled = element1.scrollLeft;
-    const zoetropeResizeObserver1 = new ResizeObserver(() => {
-      this.scrollWidth = element1.scrollWidth;
-      this.offsetWidth = element1.offsetWidth;
+  configureScroller = modifier(element => {
+    this.scrollerElement = element;
+    this.currentlyScrolled = element.scrollLeft;
+    const zoetropeResizeObserver = new ResizeObserver(() => {
+      this.scrollWidth = element.scrollWidth;
+      this.offsetWidth = element.offsetWidth;
     });
-    zoetropeResizeObserver1.observe(element1);
-    element1.addEventListener('scroll', this.scrollListener, {
+    zoetropeResizeObserver.observe(element);
+    element.addEventListener("scroll", this.scrollListener, {
       passive: true
     });
-    element1.addEventListener('keydown', this.tabListener);
+    element.addEventListener("keydown", this.tabListener);
     requestAnimationFrame(() => {
       testWaiter.endAsync(this.scrollerWaiter);
     });
     return () => {
-      element1.removeEventListener('scroll', this.scrollListener);
-      element1.removeEventListener('keydown', this.tabListener);
-      zoetropeResizeObserver1.unobserve(element1);
+      element.removeEventListener("scroll", this.scrollListener);
+      element.removeEventListener("keydown", this.tabListener);
+      zoetropeResizeObserver.unobserve(element);
     };
   });
-  tabListener = event1 => {
-    const target1 = event1.target;
+  tabListener = event => {
+    const target = event.target;
     const {
-      key: key1,
-      shiftKey: shiftKey1
-    } = event1;
-    if (!this.scrollerElement || this.scrollerElement === target1) {
+      key,
+      shiftKey
+    } = event;
+    if (!this.scrollerElement || this.scrollerElement === target) {
       return;
     }
-    if (key1 !== 'Tab') {
+    if (key !== "Tab") {
       return;
     }
-    const nextElement1 = target1.nextElementSibling;
-    const previousElement1 = target1.previousElementSibling;
-    if (!shiftKey1 && !nextElement1 || shiftKey1 && !previousElement1) {
+    const nextElement = target.nextElementSibling;
+    const previousElement = target.previousElementSibling;
+    if (!shiftKey && !nextElement || shiftKey && !previousElement) {
       return;
     }
-    event1.preventDefault();
-    let newTarget1 = null;
-    if (shiftKey1) {
-      newTarget1 = previousElement1;
+    event.preventDefault();
+    let newTarget = null;
+    if (shiftKey) {
+      newTarget = previousElement;
     } else {
-      newTarget1 = nextElement1;
+      newTarget = nextElement;
     }
-    if (!newTarget1) {
+    if (!newTarget) {
       return;
     }
-    newTarget1?.focus({
+    newTarget?.focus({
       preventScroll: true
     });
-    const rect1 = getRelativeBoundingClientRect(newTarget1, this.scrollerElement);
+    const rect = getRelativeBoundingClientRect(newTarget, this.scrollerElement);
     this.scrollerElement?.scrollBy({
-      left: rect1.left,
+      left: rect.left,
       behavior: this.scrollBehavior
     });
   };
@@ -126,107 +126,107 @@ class Zoetrope extends Component {
   }
   get scrollBehavior() {
     if (macroCondition(isTesting())) {
-      return 'instant';
+      return "instant";
     }
-    return this.args.scrollBehavior || 'smooth';
+    return this.args.scrollBehavior || "smooth";
   }
   scrollLeft = () => {
     if (!(this.scrollerElement instanceof HTMLElement)) {
       return;
     }
     const {
-      firstChild: firstChild1
+      firstChild
     } = this.findOverflowingElement();
-    if (!firstChild1) {
+    if (!firstChild) {
       return;
     }
-    const children1 = [...this.scrollerElement.children];
-    const firstChildIndex1 = children1.indexOf(firstChild1);
-    let targetElement1 = firstChild1;
-    let accumalatedWidth1 = 0;
-    for (let i1 = firstChildIndex1; i1 >= 0; i1--) {
-      const child1 = children1[i1];
-      if (!(child1 instanceof HTMLElement)) {
+    const children = [...this.scrollerElement.children];
+    const firstChildIndex = children.indexOf(firstChild);
+    let targetElement = firstChild;
+    let accumalatedWidth = 0;
+    for (let i = firstChildIndex; i >= 0; i--) {
+      const child = children[i];
+      if (!(child instanceof HTMLElement)) {
         continue;
       }
-      accumalatedWidth1 += child1.offsetWidth + this.gap;
-      if (accumalatedWidth1 >= this.offsetWidth) {
+      accumalatedWidth += child.offsetWidth + this.gap;
+      if (accumalatedWidth >= this.offsetWidth) {
         break;
       }
-      targetElement1 = child1;
+      targetElement = child;
     }
-    const rect1 = getRelativeBoundingClientRect(targetElement1, this.scrollerElement);
+    const rect = getRelativeBoundingClientRect(targetElement, this.scrollerElement);
     this.scrollerElement.scrollBy({
-      left: rect1.left,
+      left: rect.left,
       behavior: this.scrollBehavior
     });
-    waitForPromise(new Promise(requestAnimationFrame));
+    void waitForPromise(new Promise(requestAnimationFrame));
   };
   scrollRight = () => {
     if (!(this.scrollerElement instanceof HTMLElement)) {
       return;
     }
     const {
-      activeSlide: activeSlide1,
-      lastChild: lastChild1
+      activeSlide,
+      lastChild
     } = this.findOverflowingElement();
-    if (!lastChild1) {
+    if (!lastChild) {
       return;
     }
-    let rect1 = getRelativeBoundingClientRect(lastChild1, this.scrollerElement);
+    let rect = getRelativeBoundingClientRect(lastChild, this.scrollerElement);
     // If the card is larger than the container then skip to the next card
-    if (rect1.width > this.offsetWidth && activeSlide1 === lastChild1) {
-      const children1 = [...this.scrollerElement.children];
-      const lastChildIndex1 = children1.indexOf(lastChild1);
-      const targetElement1 = children1[lastChildIndex1 + 1];
-      if (!targetElement1) {
+    if (rect.width > this.offsetWidth && activeSlide === lastChild) {
+      const children = [...this.scrollerElement.children];
+      const lastChildIndex = children.indexOf(lastChild);
+      const targetElement = children[lastChildIndex + 1];
+      if (!targetElement) {
         return;
       }
-      rect1 = getRelativeBoundingClientRect(targetElement1, this.scrollerElement);
+      rect = getRelativeBoundingClientRect(targetElement, this.scrollerElement);
     }
     this.scrollerElement?.scrollBy({
-      left: rect1.left,
+      left: rect.left,
       behavior: this.scrollBehavior
     });
-    waitForPromise(new Promise(requestAnimationFrame));
+    void waitForPromise(new Promise(requestAnimationFrame));
   };
   findOverflowingElement() {
-    const returnObj1 = {
+    const returnObj = {
       firstChild: undefined,
       lastChild: undefined,
       activeSlide: undefined
     };
     if (!this.scrollerElement) {
-      return returnObj1;
+      return returnObj;
     }
-    const parentElement1 = this.scrollerElement.parentElement;
-    if (!parentElement1) {
-      return returnObj1;
+    const parentElement = this.scrollerElement.parentElement;
+    if (!parentElement) {
+      return returnObj;
     }
-    const containerRect1 = getRelativeBoundingClientRect(this.scrollerElement, parentElement1);
-    const children1 = [...this.scrollerElement.children];
+    const containerRect = getRelativeBoundingClientRect(this.scrollerElement, parentElement);
+    const children = [...this.scrollerElement.children];
     // Find the first child that is overflowing the left edge of the container
     // and the last child that is overflowing the right edge of the container
-    for (const child1 of children1) {
-      const rect1 = getRelativeBoundingClientRect(child1, this.scrollerElement);
-      if (rect1.right + this.gap >= containerRect1.left && !returnObj1.firstChild) {
-        returnObj1.firstChild = child1;
+    for (const child of children) {
+      const rect = getRelativeBoundingClientRect(child, this.scrollerElement);
+      if (rect.right + this.gap >= containerRect.left && !returnObj.firstChild) {
+        returnObj.firstChild = child;
       }
-      if (rect1.left >= this.offset && !returnObj1.activeSlide) {
-        returnObj1.activeSlide = child1;
+      if (rect.left >= this.offset && !returnObj.activeSlide) {
+        returnObj.activeSlide = child;
       }
-      if (rect1.right >= containerRect1.width && !returnObj1.lastChild) {
-        returnObj1.lastChild = child1;
+      if (rect.right >= containerRect.width && !returnObj.lastChild) {
+        returnObj.lastChild = child;
         break;
       }
     }
-    if (!returnObj1.firstChild) {
-      returnObj1.firstChild = children1[0];
+    if (!returnObj.firstChild) {
+      returnObj.firstChild = children[0];
     }
-    if (!returnObj1.lastChild) {
-      returnObj1.lastChild = children1[children1.length - 1];
+    if (!returnObj.lastChild) {
+      returnObj.lastChild = children[children.length - 1];
     }
-    return returnObj1;
+    return returnObj;
   }
   static {
     setComponentTemplate(precompileTemplate("\n    <section class=\"ember-primitives__zoetrope\" {{this.setCSSVariables gap=this.gap offset=this.offset}} ...attributes>\n      {{#if (has-block \"header\")}}\n        <div class=\"ember-primitives__zoetrope__header\">\n          {{yield to=\"header\"}}\n        </div>\n      {{/if}}\n\n      {{#if (has-block \"controls\")}}\n        {{yield (hash cannotScrollLeft=this.cannotScrollLeft cannotScrollRight=this.cannotScrollRight canScroll=this.canScroll scrollLeft=this.scrollLeft scrollRight=this.scrollRight) to=\"controls\"}}\n      {{else}}\n        {{#if this.canScroll}}\n          <div class=\"ember-primitives__zoetrope__controls\">\n            <button type=\"button\" {{on \"click\" this.scrollLeft}} disabled={{this.cannotScrollLeft}}>Left</button>\n\n            <button type=\"button\" {{on \"click\" this.scrollRight}} disabled={{this.cannotScrollRight}}>Right</button>\n          </div>\n        {{/if}}\n      {{/if}}\n      {{#if (has-block \"content\")}}\n        <div class=\"ember-primitives__zoetrope__scroller\" {{this.configureScroller}}>\n          {{yield to=\"content\"}}\n        </div>\n      {{else}}\n        {{(this.noScrollWaiter)}}\n      {{/if}}\n    </section>\n  ", {
@@ -238,28 +238,28 @@ class Zoetrope extends Component {
     }), this);
   }
 }
-function getRelativeBoundingClientRect(childElement1, parentElement1) {
-  if (!childElement1 || !parentElement1) {
-    throw new Error('Both childElement and parentElement must be provided');
+function getRelativeBoundingClientRect(childElement, parentElement) {
+  if (!childElement || !parentElement) {
+    throw new Error("Both childElement and parentElement must be provided");
   }
   // Get the bounding rect of the child and parent elements
-  const childRect1 = childElement1.getBoundingClientRect();
-  const parentRect1 = parentElement1.getBoundingClientRect();
+  const childRect = childElement.getBoundingClientRect();
+  const parentRect = parentElement.getBoundingClientRect();
   // Get computed styles of the parent element
-  const parentStyles1 = window.getComputedStyle(parentElement1);
+  const parentStyles = window.getComputedStyle(parentElement);
   // Extract and parse parent's padding, and border, for all sides
-  const parentPaddingTop1 = parseFloat(parentStyles1.paddingTop);
-  const parentPaddingLeft1 = parseFloat(parentStyles1.paddingLeft);
-  const parentBorderTopWidth1 = parseFloat(parentStyles1.borderTopWidth);
-  const parentBorderLeftWidth1 = parseFloat(parentStyles1.borderLeftWidth);
+  const parentPaddingTop = parseFloat(parentStyles.paddingTop);
+  const parentPaddingLeft = parseFloat(parentStyles.paddingLeft);
+  const parentBorderTopWidth = parseFloat(parentStyles.borderTopWidth);
+  const parentBorderLeftWidth = parseFloat(parentStyles.borderLeftWidth);
   // Calculate child's position relative to parent's content area (including padding and borders)
   return {
-    width: childRect1.width,
-    height: childRect1.height,
-    top: childRect1.top - parentRect1.top - parentBorderTopWidth1 - parentPaddingTop1,
-    left: childRect1.left - parentRect1.left - parentBorderLeftWidth1 - parentPaddingLeft1,
-    bottom: childRect1.top - parentRect1.top - parentBorderTopWidth1 - parentPaddingTop1 + childRect1.height,
-    right: childRect1.left - parentRect1.left - parentBorderLeftWidth1 - parentPaddingLeft1 + childRect1.width
+    width: childRect.width,
+    height: childRect.height,
+    top: childRect.top - parentRect.top - parentBorderTopWidth - parentPaddingTop,
+    left: childRect.left - parentRect.left - parentBorderLeftWidth - parentPaddingLeft,
+    bottom: childRect.top - parentRect.top - parentBorderTopWidth - parentPaddingTop + childRect.height,
+    right: childRect.left - parentRect.left - parentBorderLeftWidth - parentPaddingLeft + childRect.width
   };
 }
 

package/dist/components/zoetrope/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/zoetrope/index.gts"],"sourcesContent":["import \"./styles.css\";\n\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter, waitForPromise } from \"@ember/test-waiters\";\nimport { isTesting, macroCondition } from \"@embroider/macros\";\n\nimport { modifier } from \"ember-modifier\";\n\nimport type { ScrollBehavior, Signature } from \"./types.ts\";\n\nconst testWaiter = buildWaiter(\"ember-primitive:zoetrope-waiter\");\nconst DEFAULT_GAP = 8;\nconst DEFAULT_OFFSET = 0;\n\nexport class Zoetrope extends Component<Signature> {\n  @tracked scrollerElement: HTMLElement | null = null;\n  @tracked currentlyScrolled = 0;\n  @tracked scrollWidth = 0;\n  @tracked offsetWidth = 0;\n\n  private setCSSVariables = modifier(\n    (element: HTMLElement, _: unknown, { gap, offset }: { gap: number; offset: number }) => {\n      if (gap) element.style.setProperty(\"--zoetrope-gap\", `${gap}px`);\n      if (offset) element.style.setProperty(\"--zoetrope-offset\", `${offset}px`);\n    },\n  );\n\n  scrollerWaiter = testWaiter.beginAsync();\n  noScrollWaiter = () => {\n    testWaiter.endAsync(this.scrollerWaiter);\n  };\n\n  private configureScroller = modifier((element: HTMLElement) => {\n    this.scrollerElement = element;\n    this.currentlyScrolled = element.scrollLeft;\n\n    const zoetropeResizeObserver = new ResizeObserver(() => {\n      this.scrollWidth = element.scrollWidth;\n      this.offsetWidth = element.offsetWidth;\n    });\n\n    zoetropeResizeObserver.observe(element);\n\n    element.addEventListener(\"scroll\", this.scrollListener, { passive: true });\n    element.addEventListener(\"keydown\", this.tabListener);\n\n    requestAnimationFrame(() => {\n      testWaiter.endAsync(this.scrollerWaiter);\n    });\n\n    return () => {\n      element.removeEventListener(\"scroll\", this.scrollListener);\n      element.removeEventListener(\"keydown\", this.tabListener);\n\n      zoetropeResizeObserver.unobserve(element);\n    };\n  });\n\n  private tabListener = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const { key, shiftKey } = event;\n\n    if (!this.scrollerElement || this.scrollerElement === target) {\n      return;\n    }\n\n    if (key !== \"Tab\") {\n      return;\n    }\n\n    const nextElement = target.nextElementSibling;\n    const previousElement = target.previousElementSibling;\n\n    if ((!shiftKey && !nextElement) || (shiftKey && !previousElement)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    let newTarget: HTMLElement | null = null;\n\n    if (shiftKey) {\n      newTarget = previousElement as HTMLElement;\n    } else {\n      newTarget = nextElement as HTMLElement;\n    }\n\n    if (!newTarget) {\n      return;\n    }\n\n    newTarget?.focus({ preventScroll: true });\n\n    const rect = getRelativeBoundingClientRect(newTarget, this.scrollerElement);\n\n    this.scrollerElement?.scrollBy({\n      left: rect.left,\n      behavior: this.scrollBehavior,\n    });\n  };\n\n  private scrollListener = () => {\n    this.currentlyScrolled = this.scrollerElement?.scrollLeft || 0;\n  };\n\n  get offset() {\n    return this.args.offset ?? DEFAULT_OFFSET;\n  }\n\n  get gap() {\n    return this.args.gap ?? DEFAULT_GAP;\n  }\n\n  get canScroll() {\n    return this.scrollWidth > this.offsetWidth + this.offset;\n  }\n\n  get cannotScrollLeft() {\n    return this.currentlyScrolled <= this.offset;\n  }\n\n  get cannotScrollRight() {\n    return this.scrollWidth - this.offsetWidth - this.offset < this.currentlyScrolled;\n  }\n\n  get scrollBehavior(): ScrollBehavior {\n    if (macroCondition(isTesting())) {\n      return \"instant\";\n    }\n\n    return this.args.scrollBehavior || \"smooth\";\n  }\n\n  scrollLeft = () => {\n    if (!(this.scrollerElement instanceof HTMLElement)) {\n      return;\n    }\n\n    const { firstChild } = this.findOverflowingElement();\n\n    if (!firstChild) {\n      return;\n    }\n\n    const children = [...this.scrollerElement.children];\n\n    const firstChildIndex = children.indexOf(firstChild);\n\n    let targetElement = firstChild;\n    let accumalatedWidth = 0;\n\n    for (let i = firstChildIndex; i >= 0; i--) {\n      const child = children[i];\n\n      if (!(child instanceof HTMLElement)) {\n        continue;\n      }\n\n      accumalatedWidth += child.offsetWidth + this.gap;\n\n      if (accumalatedWidth >= this.offsetWidth) {\n        break;\n      }\n\n      targetElement = child;\n    }\n\n    const rect = getRelativeBoundingClientRect(targetElement, this.scrollerElement);\n\n    this.scrollerElement.scrollBy({\n      left: rect.left,\n      behavior: this.scrollBehavior,\n    });\n\n    void waitForPromise(new Promise(requestAnimationFrame));\n  };\n\n  scrollRight = () => {\n    if (!(this.scrollerElement instanceof HTMLElement)) {\n      return;\n    }\n\n    const { activeSlide, lastChild } = this.findOverflowingElement();\n\n    if (!lastChild) {\n      return;\n    }\n\n    let rect = getRelativeBoundingClientRect(lastChild, this.scrollerElement);\n\n    // If the card is larger than the container then skip to the next card\n    if (rect.width > this.offsetWidth && activeSlide === lastChild) {\n      const children = [...this.scrollerElement.children];\n      const lastChildIndex = children.indexOf(lastChild);\n      const targetElement = children[lastChildIndex + 1];\n\n      if (!targetElement) {\n        return;\n      }\n\n      rect = getRelativeBoundingClientRect(targetElement, this.scrollerElement);\n    }\n\n    this.scrollerElement?.scrollBy({\n      left: rect.left,\n      behavior: this.scrollBehavior,\n    });\n\n    void waitForPromise(new Promise(requestAnimationFrame));\n  };\n\n  private findOverflowingElement() {\n    const returnObj: {\n      activeSlide?: Element;\n      firstChild?: Element;\n      lastChild?: Element;\n    } = {\n      firstChild: undefined,\n      lastChild: undefined,\n      activeSlide: undefined,\n    };\n\n    if (!this.scrollerElement) {\n      return returnObj;\n    }\n\n    const parentElement = this.scrollerElement.parentElement;\n\n    if (!parentElement) {\n      return returnObj;\n    }\n\n    const containerRect = getRelativeBoundingClientRect(this.scrollerElement, parentElement);\n\n    const children = [...this.scrollerElement.children];\n\n    // Find the first child that is overflowing the left edge of the container\n    // and the last child that is overflowing the right edge of the container\n    for (const child of children) {\n      const rect = getRelativeBoundingClientRect(child, this.scrollerElement);\n\n      if (rect.right + this.gap >= containerRect.left && !returnObj.firstChild) {\n        returnObj.firstChild = child;\n      }\n\n      if (rect.left >= this.offset && !returnObj.activeSlide) {\n        returnObj.activeSlide = child;\n      }\n\n      if (rect.right >= containerRect.width && !returnObj.lastChild) {\n        returnObj.lastChild = child;\n\n        break;\n      }\n    }\n\n    if (!returnObj.firstChild) {\n      returnObj.firstChild = children[0];\n    }\n\n    if (!returnObj.lastChild) {\n      returnObj.lastChild = children[children.length - 1];\n    }\n\n    return returnObj;\n  }\n\n  <template>\n    <section\n      class=\"ember-primitives__zoetrope\"\n      {{this.setCSSVariables gap=this.gap offset=this.offset}}\n      ...attributes\n    >\n      {{#if (has-block \"header\")}}\n        <div class=\"ember-primitives__zoetrope__header\">\n          {{yield to=\"header\"}}\n        </div>\n      {{/if}}\n\n      {{#if (has-block \"controls\")}}\n        {{yield\n          (hash\n            cannotScrollLeft=this.cannotScrollLeft\n            cannotScrollRight=this.cannotScrollRight\n            canScroll=this.canScroll\n            scrollLeft=this.scrollLeft\n            scrollRight=this.scrollRight\n          )\n          to=\"controls\"\n        }}\n      {{else}}\n        {{#if this.canScroll}}\n          <div class=\"ember-primitives__zoetrope__controls\">\n            <button\n              type=\"button\"\n              {{on \"click\" this.scrollLeft}}\n              disabled={{this.cannotScrollLeft}}\n            >Left</button>\n\n            <button\n              type=\"button\"\n              {{on \"click\" this.scrollRight}}\n              disabled={{this.cannotScrollRight}}\n            >Right</button>\n          </div>\n        {{/if}}\n      {{/if}}\n      {{#if (has-block \"content\")}}\n        <div class=\"ember-primitives__zoetrope__scroller\" {{this.configureScroller}}>\n          {{yield to=\"content\"}}\n        </div>\n      {{else}}\n        {{(this.noScrollWaiter)}}\n      {{/if}}\n    </section>\n  </template>\n}\n\nexport default Zoetrope;\n\nfunction getRelativeBoundingClientRect(childElement: Element, parentElement: Element) {\n  if (!childElement || !parentElement) {\n    throw new Error(\"Both childElement and parentElement must be provided\");\n  }\n\n  // Get the bounding rect of the child and parent elements\n  const childRect = childElement.getBoundingClientRect();\n  const parentRect = parentElement.getBoundingClientRect();\n\n  // Get computed styles of the parent element\n  const parentStyles = window.getComputedStyle(parentElement);\n\n  // Extract and parse parent's padding, and border, for all sides\n  const parentPaddingTop = parseFloat(parentStyles.paddingTop);\n  const parentPaddingLeft = parseFloat(parentStyles.paddingLeft);\n\n  const parentBorderTopWidth = parseFloat(parentStyles.borderTopWidth);\n  const parentBorderLeftWidth = parseFloat(parentStyles.borderLeftWidth);\n\n  // Calculate child's position relative to parent's content area (including padding and borders)\n  return {\n    width: childRect.width,\n    height: childRect.height,\n    top: childRect.top - parentRect.top - parentBorderTopWidth - parentPaddingTop,\n    left: childRect.left - parentRect.left - parentBorderLeftWidth - parentPaddingLeft,\n    bottom:\n      childRect.top - parentRect.top - parentBorderTopWidth - parentPaddingTop + childRect.height,\n    right:\n      childRect.left -\n      parentRect.left -\n      parentBorderLeftWidth -\n      parentPaddingLeft +\n      childRect.width,\n  };\n}\n"],"names":["testWaiter","buildWaiter","DEFAULT_GAP","DEFAULT_OFFSET","Zoetrope","Component","g","prototype","tracked","i","void 0","setCSSVariables","modifier","element","_","gap","offset","style","setProperty","scrollerWaiter","beginAsync","noScrollWaiter","endAsync","configureScroller","scrollerElement","currentlyScrolled","scrollLeft","zoetropeResizeObserver","ResizeObserver","scrollWidth","offsetWidth","observe","addEventListener","scrollListener","passive","tabListener","requestAnimationFrame","removeEventListener","unobserve","event","target","key","shiftKey","nextElement","nextElementSibling","previousElement","previousElementSibling","preventDefault","newTarget","focus","preventScroll","rect","getRelativeBoundingClientRect","scrollBy","left","behavior","scrollBehavior","args","canScroll","cannotScrollLeft","cannotScrollRight","macroCondition","isTesting","HTMLElement","firstChild","findOverflowingElement","children","firstChildIndex","indexOf","targetElement","accumalatedWidth","child","waitForPromise","Promise","scrollRight","activeSlide","lastChild","width","lastChildIndex","returnObj","undefined","parentElement","containerRect","right","length","setComponentTemplate","precompileTemplate","strictMode","scope","hash","on","childElement","Error","childRect","getBoundingClientRect","parentRect","parentStyles","window","getComputedStyle","parentPaddingTop","parseFloat","paddingTop","parentPaddingLeft","paddingLeft","parentBorderTopWidth","borderTopWidth","parentBorderLeftWidth","borderLeftWidth","height","top","bottom"],"mappings":"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"}

package/dist/floating-ui/component.js

@@ -7,9 +7,9 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i } from 'decorator-transforms/runtime';
 
-const ref = modifier((element1, positional1) => {
-  let fn1 = positional1[0];
-  fn1(element1);
+const ref = modifier((element, positional) => {
+  const fn = positional[0];
+  fn(element);
 });
 /**
  * A component that provides no DOM and yields two modifiers for creating
@@ -42,9 +42,9 @@ class FloatingUI extends Component {
     });
   }
   #data = (i(this, "data"), void 0);
-  setData = data1 => this.data = data1;
-  setReference = element1 => {
-    this.reference = element1;
+  setData = data => this.data = data;
+  setReference = element => {
+    this.reference = element;
   };
   static {
     setComponentTemplate(precompileTemplate("\n    {{#let (modifier anchorTo flipOptions=@flipOptions hideOptions=@hideOptions middleware=@middleware offsetOptions=@offsetOptions placement=@placement shiftOptions=@shiftOptions strategy=@strategy setData=this.setData) as |prewiredAnchorTo|}}\n      {{#let (if this.reference (modifier prewiredAnchorTo this.reference)) as |floating|}}\n        {{!-- @glint-nocheck -- Excessively deep, possibly infinite --}}\n        {{yield (modifier ref this.setReference) floating (hash setReference=this.setReference data=this.data)}}\n      {{/let}}\n    {{/let}}\n  ", {

package/dist/floating-ui/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"component.js","sources":["../../src/floating-ui/component.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { hash } from \"@ember/helper\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\n\nimport { anchorTo } from \"./modifier.ts\";\n\nimport type { Signature as ModifierSignature } from \"./modifier.ts\";\nimport type { MiddlewareState } from \"@floating-ui/dom\";\nimport type { ModifierLike } from \"@glint/template\";\n\ntype ModifierArgs = ModifierSignature[\"Args\"][\"Named\"];\n\ninterface ReferenceSignature {\n  Element: HTMLElement | SVGElement;\n}\n\nexport interface Signature {\n  Args: {\n    /**\n     * Additional middleware to pass to FloatingUI.\n     *\n     * See: [The middleware docs](https://floating-ui.com/docs/middleware)\n     */\n    middleware?: ModifierArgs[\"middleware\"];\n    /**\n     * Where to place the floating element relative to its reference element.\n     * The default is 'bottom'.\n     *\n     * See: [The placement docs](https://floating-ui.com/docs/computePosition#placement)\n     */\n    placement?: ModifierArgs[\"placement\"];\n    /**\n     * This is the type of CSS position property to use.\n     * By default this is 'fixed', but can also be 'absolute'.\n     *\n     * See: [The strategy docs](https://floating-ui.com/docs/computePosition#strategy)\n     */\n    strategy?: ModifierArgs[\"strategy\"];\n    /**\n     * Options to pass to the [flip middleware](https://floating-ui.com/docs/flip)\n     */\n    flipOptions?: ModifierArgs[\"flipOptions\"];\n    /**\n     * Options to pass to the [hide middleware](https://floating-ui.com/docs/hide)\n     */\n    hideOptions?: ModifierArgs[\"hideOptions\"];\n    /**\n     * Options to pass to the [shift middleware](https://floating-ui.com/docs/shift)\n     */\n    shiftOptions?: ModifierArgs[\"shiftOptions\"];\n    /**\n     * Options to pass to the [offset middleware](https://floating-ui.com/docs/offset)\n     */\n    offsetOptions?: ModifierArgs[\"offsetOptions\"];\n  };\n  Blocks: {\n    default: [\n      /**\n       * A modifier to apply to the _reference_ element.\n       * This is what the floating element will use to anchor to.\n       *\n       * Example\n       * ```gjs\n       * import { FloatingUI } from 'ember-primitives/floating-ui';\n       *\n       * <template>\n       *   <FloatingUI as |reference floating|>\n       *     <button {{reference}}> ... </button>\n       *     ...\n       *   </FloatingUI>\n       * </template>\n       * ```\n       */\n      reference: ModifierLike<ReferenceSignature>,\n      /**\n       * A modifier to apply to the _floating_ element.\n       * This is what will anchor to the reference element.\n       *\n       * Example\n       * ```gjs\n       * import { FloatingUI } from 'ember-primitives/floating-ui';\n       *\n       * <template>\n       *   <FloatingUI as |reference floating|>\n       *     <button {{reference}}> ... </button>\n       *     <menu {{floating}}> ... </menu>\n       *   </FloatingUI>\n       * </template>\n       * ```\n       */\n      floating:\n        | undefined\n        | ModifierLike<{\n            Element: HTMLElement;\n            Args: {\n              Named: ModifierArgs;\n            };\n          }>,\n      /**\n       * Special utilities for advanced usage\n       */\n      util: {\n        /**\n         * If you want to have a single modifier with custom behavior\n         * on your reference element, you may use this `setReference`\n         * function to set the reference, rather than having multiple modifiers\n         * on that element.\n         */\n        setReference: (element: HTMLElement | SVGElement) => void;\n        /**\n         * Metadata exposed from floating-ui.\n         * Gives you x, y position, among other things.\n         */\n        data?: MiddlewareState;\n      },\n    ];\n  };\n}\n\nconst ref = eModifier<{\n  Element: HTMLElement | SVGElement;\n  Args: {\n    Positional: [setRef: (element: HTMLElement | SVGElement) => void];\n  };\n}>((element: HTMLElement | SVGElement, positional) => {\n  const fn = positional[0];\n\n  fn(element);\n});\n\n/**\n * A component that provides no DOM and yields two modifiers for creating\n * creating floating uis, such as menus, popovers, tooltips, etc.\n * This component currently uses [Floating UI](https://floating-ui.com/)\n * but will be switching to [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) when that lands.\n *\n * Example usage:\n * ```gjs\n * import { FloatingUI } from 'ember-primitives/floating-ui';\n *\n * <template>\n *   <FloatingUI as |reference floating|>\n *     <button {{reference}}> ... </button>\n *     <menu {{floating}}> ... </menu>\n *   </FloatingUI>\n * </template>\n * ```\n */\nexport class FloatingUI extends Component<Signature> {\n  @tracked reference?: HTMLElement | SVGElement = undefined;\n  @tracked data?: MiddlewareState = undefined;\n\n  setData: ModifierArgs[\"setData\"] = (data) => (this.data = data);\n\n  setReference = (element: HTMLElement | SVGElement) => {\n    this.reference = element;\n  };\n\n  <template>\n    {{#let\n      (modifier\n        anchorTo\n        flipOptions=@flipOptions\n        hideOptions=@hideOptions\n        middleware=@middleware\n        offsetOptions=@offsetOptions\n        placement=@placement\n        shiftOptions=@shiftOptions\n        strategy=@strategy\n        setData=this.setData\n      )\n      as |prewiredAnchorTo|\n    }}\n      {{#let (if this.reference (modifier prewiredAnchorTo this.reference)) as |floating|}}\n        {{! @glint-nocheck -- Excessively deep, possibly infinite }}\n        {{yield\n          (modifier ref this.setReference)\n          floating\n          (hash setReference=this.setReference data=this.data)\n        }}\n      {{/let}}\n    {{/let}}\n  </template>\n}\n"],"names":["ref","eModifier","element","positional","fn","FloatingUI","Component","g","prototype","tracked","undefined","i","void 0","setData","data","setReference","reference","setComponentTemplate","precompileTemplate","strictMode","scope","anchorTo","hash"],"mappings":";;;;;;;;;AAyHA,MAAMA,GAAM,GAAAC,QAAA,CAKT,CAACC,OAAmC,EAAAC,UAAA,KAAA;AACrC,EAAA,MAAMC,EAAA,GAAKD,UAAU,CAAC,CAAE,CAAA;EAExBC,EAAG,CAAAF,OAAA,CAAA;AACL,CAAA,CAAA;AAEA;;;;;;;;;;;;;;;;;;AAkBO,MAAMG,UAAA,SAAmBC,SAAU,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,WAAA,EAAA,CACvCC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAA+CC,SAAU;AAAA,KAAA,CAAA;AAAA;AAAA,EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAAC,MAAA;AAAA,EAAA;IAAAL,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,MAAA,EAAA,CACzDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAiCC,SAAU;AAAA,KAAA,CAAA;AAAA;AAAA,EAAA,KAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,MAAA,CAAA,EAAAC,MAAA;AAE5CC,EAAAA,OAAS,GAA2BC,IAAS,IAAC,IAAI,CAACA,IAAI,GAAGA,IAAM;EAEhEC,YAAe,GAACb,OAAuB,IAAA;IACrC,IAAI,CAACc,SAAS,GAAGd,OAAA;GACjB;AAEF,EAAA;IAAAe,oBAAA,CAAAC,kBAAA,CAwBA,mjBAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,QAAA;QAAArB,GAAA;AAAAsB,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}