ember-primitives 0.25.0 → 0.26.0

package/declarations/components/zoetrope/index.d.ts

@@ -0,0 +1,81 @@
+import './styles.css';
+import Component from '@glimmer/component';
+type ScrollBehavior = 'auto' | 'smooth' | 'instant';
+export interface Signature {
+    Args: {
+        /**
+         * The distance in pixels between each item in the slider.
+         */
+        gap?: number;
+        /**
+         * The distance from the edge of the container to the first and last item, this allows
+         * the contents to visually overflow the container
+         */
+        offset?: number;
+        /**
+         * The scroll behavior to use when scrolling the slider. Defaults to smooth.
+         */
+        scrollBehavior?: ScrollBehavior;
+    };
+    Blocks: {
+        /**
+         * The header block is where the header content is placed.
+         */
+        header: [];
+        /**
+         * The content block is where the items that will be scrolled are placed.
+         */
+        content: [];
+        /**
+         * The controls block is where the left and right buttons are placed.
+         */
+        controls: [
+            {
+                /**
+                 * Whether the slider can scroll.
+                 */
+                canScroll: boolean;
+                /**
+                 * Whether the slider cannot scroll left.
+                 */
+                cannotScrollLeft: boolean;
+                /**
+                 * Whether the slider cannot scroll right.
+                 */
+                cannotScrollRight: boolean;
+                /**
+                 * The function to scroll the slider left.
+                 */
+                scrollLeft: () => void;
+                /**
+                 * The function to scroll the slider right.
+                 */
+                scrollRight: () => void;
+            }
+        ];
+    };
+    Element: HTMLElement;
+}
+export declare class Zoetrope extends Component<Signature> {
+    scrollerElement: HTMLElement | null;
+    currentlyScrolled: number;
+    scrollWidth: number;
+    offsetWidth: number;
+    private setCSSVariables;
+    scrollerWaiter: unknown;
+    noScrollWaiter: () => void;
+    private configureScroller;
+    private tabListener;
+    private scrollListener;
+    get offset(): number;
+    get gap(): number;
+    get canScroll(): boolean;
+    get cannotScrollLeft(): boolean;
+    get cannotScrollRight(): boolean;
+    get scrollBehavior(): ScrollBehavior;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    private findOverflowingElement;
+}
+export default Zoetrope;
+//# sourceMappingURL=index.d.ts.map

package/declarations/components/zoetrope/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/zoetrope/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAS3C,KAAK,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QAEb;;;WAGG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB;;WAEG;QACH,cAAc,CAAC,EAAE,cAAc,CAAC;KACjC,CAAC;IACF,MAAM,EAAE;QACN;;WAEG;QACH,MAAM,EAAE,EAAE,CAAC;QAEX;;WAEG;QACH,OAAO,EAAE,EAAE,CAAC;QAEZ;;WAEG;QACH,QAAQ,EAAE;YACR;gBACE;;mBAEG;gBACH,SAAS,EAAE,OAAO,CAAC;gBAEnB;;mBAEG;gBACH,gBAAgB,EAAE,OAAO,CAAC;gBAE1B;;mBAEG;gBACH,iBAAiB,EAAE,OAAO,CAAC;gBAE3B;;mBAEG;gBACH,UAAU,EAAE,MAAM,IAAI,CAAC;gBAEvB;;mBAEG;gBACH,WAAW,EAAE,MAAM,IAAI,CAAC;aACzB;SACF,CAAC;KACH,CAAC;IACF,OAAO,EAAE,WAAW,CAAC;CACtB;AAMD,qBAAa,QAAS,SAAQ,SAAS,CAAC,SAAS,CAAC;IACvC,eAAe,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC3C,iBAAiB,SAAK;IACtB,WAAW,SAAK;IAChB,WAAW,SAAK;IAEzB,OAAO,CAAC,eAAe,CAKrB;IAEF,cAAc,UAA2B;IACzC,cAAc,aAEZ;IAEF,OAAO,CAAC,iBAAiB,CAwBtB;IAEH,OAAO,CAAC,WAAW,CAyCjB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,IAAI,MAAM,WAET;IAED,IAAI,GAAG,WAEN;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,gBAAgB,YAEnB;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,cAAc,IAAI,cAAc,CAMnC;IAED,UAAU,aA0CR;IAEF,WAAW,aAgCT;IAEF,OAAO,CAAC,sBAAsB;CA0H/B;AAED,eAAe,QAAQ,CAAC"}

package/declarations/components/zoetrope.d.ts

@@ -0,0 +1,2 @@
+export { Zoetrope } from "./zoetrope/index";
+//# sourceMappingURL=zoetrope.d.ts.map

package/declarations/components/zoetrope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoetrope.d.ts","sourceRoot":"","sources":["../../src/components/zoetrope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}

package/declarations/index.d.ts

@@ -18,6 +18,7 @@ export { Shadowed } from "./components/shadowed";
 export { Switch } from "./components/switch";
 export { Toggle } from "./components/toggle";
 export { ToggleGroup } from "./components/toggle-group";
+export { Zoetrope } from "./components/zoetrope/index";
 export * from './helpers.ts';
 export type { default as SetupService } from './services/ember-primitives/setup.ts';
 //# sourceMappingURL=index.d.ts.map

package/declarations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,cAAc,cAAc,CAAC;AAC7B,YAAY,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,cAAc,cAAc,CAAC;AAC7B,YAAY,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC"}

package/declarations/test-support/index.d.ts

@@ -1,3 +1,4 @@
 export { fillOTP } from './otp.ts';
 export { getRouter, setupRouting } from './routing.ts';
+export { ZoetropeHelper } from './zoetrope.ts';
 //# sourceMappingURL=index.d.ts.map

package/declarations/test-support/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-support/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-support/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/declarations/test-support/zoetrope.d.ts

@@ -0,0 +1,9 @@
+export declare class ZoetropeHelper {
+    parentSelector: string;
+    constructor(parentSelector?: string);
+    scrollLeft(): Promise<void>;
+    scrollRight(): Promise<void>;
+    visibleItems(): Element[];
+    visibleItemCount(): number;
+}
+//# sourceMappingURL=zoetrope.d.ts.map

package/declarations/test-support/zoetrope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoetrope.d.ts","sourceRoot":"","sources":["../../src/test-support/zoetrope.ts"],"names":[],"mappings":"AAGA,qBAAa,cAAc;IACzB,cAAc,SAAiC;gBAEnC,cAAc,CAAC,EAAE,MAAM;IAM7B,UAAU;IAIV,WAAW;IAIjB,YAAY;IA2BZ,gBAAgB;CAGjB"}

package/dist/components/zoetrope/index.js

@@ -0,0 +1,267 @@
+import './styles.css';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { buildWaiter, waitForPromise } from '@ember/test-waiters';
+import { macroCondition, isTesting } from '@embroider/macros';
+import { modifier } from 'ember-modifier';
+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 DEFAULT_GAP = 8;
+const DEFAULT_OFFSET = 0;
+class Zoetrope extends Component {
+  static {
+    g(this.prototype, "scrollerElement", [tracked], function () {
+      return null;
+    });
+  }
+  #scrollerElement = (i(this, "scrollerElement"), void 0);
+  static {
+    g(this.prototype, "currentlyScrolled", [tracked], function () {
+      return 0;
+    });
+  }
+  #currentlyScrolled = (i(this, "currentlyScrolled"), void 0);
+  static {
+    g(this.prototype, "scrollWidth", [tracked], function () {
+      return 0;
+    });
+  }
+  #scrollWidth = (i(this, "scrollWidth"), void 0);
+  static {
+    g(this.prototype, "offsetWidth", [tracked], function () {
+      return 0;
+    });
+  }
+  #offsetWidth = (i(this, "offsetWidth"), void 0);
+  setCSSVariables = modifier((element1, _1, {
+    gap: gap1,
+    offset: offset1
+  }) => {
+    if (gap1) element1.style.setProperty('--zoetrope-gap', `${gap1}px`);
+    if (offset1) element1.style.setProperty('--zoetrope-offset', `${offset1}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;
+    });
+    zoetropeResizeObserver1.observe(element1);
+    element1.addEventListener('scroll', this.scrollListener, {
+      passive: true
+    });
+    element1.addEventListener('keydown', this.tabListener);
+    requestAnimationFrame(() => {
+      testWaiter.endAsync(this.scrollerWaiter);
+    });
+    return () => {
+      element1.removeEventListener('scroll', this.scrollListener);
+      element1.removeEventListener('keydown', this.tabListener);
+      zoetropeResizeObserver1.unobserve(element1);
+    };
+  });
+  tabListener = event1 => {
+    const target1 = event1.target;
+    const {
+      key: key1,
+      shiftKey: shiftKey1
+    } = event1;
+    if (!this.scrollerElement || this.scrollerElement === target1) {
+      return;
+    }
+    if (key1 !== 'Tab') {
+      return;
+    }
+    const nextElement1 = target1.nextElementSibling;
+    const previousElement1 = target1.previousElementSibling;
+    if (!shiftKey1 && !nextElement1 || shiftKey1 && !previousElement1) {
+      return;
+    }
+    event1.preventDefault();
+    let newTarget1 = null;
+    if (shiftKey1) {
+      newTarget1 = previousElement1;
+    } else {
+      newTarget1 = nextElement1;
+    }
+    if (!newTarget1) {
+      return;
+    }
+    newTarget1?.focus({
+      preventScroll: true
+    });
+    const rect1 = getRelativeBoundingClientRect(newTarget1, this.scrollerElement);
+    this.scrollerElement?.scrollBy({
+      left: rect1.left,
+      behavior: this.scrollBehavior
+    });
+  };
+  scrollListener = () => {
+    this.currentlyScrolled = this.scrollerElement?.scrollLeft || 0;
+  };
+  get offset() {
+    return this.args.offset ?? DEFAULT_OFFSET;
+  }
+  get gap() {
+    return this.args.gap ?? DEFAULT_GAP;
+  }
+  get canScroll() {
+    return this.scrollWidth > this.offsetWidth + this.offset;
+  }
+  get cannotScrollLeft() {
+    return this.currentlyScrolled <= this.offset;
+  }
+  get cannotScrollRight() {
+    return this.scrollWidth - this.offsetWidth - this.offset < this.currentlyScrolled;
+  }
+  get scrollBehavior() {
+    if (macroCondition(isTesting())) {
+      return 'instant';
+    }
+    return this.args.scrollBehavior || 'smooth';
+  }
+  scrollLeft = () => {
+    if (!(this.scrollerElement instanceof HTMLElement)) {
+      return;
+    }
+    const {
+      firstChild: firstChild1
+    } = this.findOverflowingElement();
+    if (!firstChild1) {
+      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)) {
+        continue;
+      }
+      accumalatedWidth1 += child1.offsetWidth + this.gap;
+      if (accumalatedWidth1 >= this.offsetWidth) {
+        break;
+      }
+      targetElement1 = child1;
+    }
+    const rect1 = getRelativeBoundingClientRect(targetElement1, this.scrollerElement);
+    this.scrollerElement.scrollBy({
+      left: rect1.left,
+      behavior: this.scrollBehavior
+    });
+    waitForPromise(new Promise(requestAnimationFrame));
+  };
+  scrollRight = () => {
+    if (!(this.scrollerElement instanceof HTMLElement)) {
+      return;
+    }
+    const {
+      activeSlide: activeSlide1,
+      lastChild: lastChild1
+    } = this.findOverflowingElement();
+    if (!lastChild1) {
+      return;
+    }
+    let rect1 = getRelativeBoundingClientRect(lastChild1, 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) {
+        return;
+      }
+      rect1 = getRelativeBoundingClientRect(targetElement1, this.scrollerElement);
+    }
+    this.scrollerElement?.scrollBy({
+      left: rect1.left,
+      behavior: this.scrollBehavior
+    });
+    waitForPromise(new Promise(requestAnimationFrame));
+  };
+  findOverflowingElement() {
+    const returnObj1 = {
+      firstChild: undefined,
+      lastChild: undefined,
+      activeSlide: undefined
+    };
+    if (!this.scrollerElement) {
+      return returnObj1;
+    }
+    const parentElement1 = this.scrollerElement.parentElement;
+    if (!parentElement1) {
+      return returnObj1;
+    }
+    const containerRect1 = getRelativeBoundingClientRect(this.scrollerElement, parentElement1);
+    const children1 = [...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;
+      }
+      if (rect1.left >= this.offset && !returnObj1.activeSlide) {
+        returnObj1.activeSlide = child1;
+      }
+      if (rect1.right >= containerRect1.width && !returnObj1.lastChild) {
+        returnObj1.lastChild = child1;
+        break;
+      }
+    }
+    if (!returnObj1.firstChild) {
+      returnObj1.firstChild = children1[0];
+    }
+    if (!returnObj1.lastChild) {
+      returnObj1.lastChild = children1[children1.length - 1];
+    }
+    return returnObj1;
+  }
+  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  ", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        on
+      })
+    }), this);
+  }
+}
+function getRelativeBoundingClientRect(childElement1, parentElement1) {
+  if (!childElement1 || !parentElement1) {
+    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();
+  // Get computed styles of the parent element
+  const parentStyles1 = window.getComputedStyle(parentElement1);
+  // 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);
+  // 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
+  };
+}
+
+export { Zoetrope, Zoetrope as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/zoetrope/styles.css

@@ -0,0 +1,45 @@
+.ember-primitives__zoetrope {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
+}
+
+.ember-primitives__zoetrope__header {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  padding-left: var(--zoetrope-offset, 0);
+}
+
+.ember-primitives__zoetrope__controls {
+  align-items: center;
+  display: flex;
+  padding-right: var(--zoetrope-offset, 0);
+  gap: 4px;
+}
+
+.ember-primitives__zoetrope__scroller {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--zoetrope-gap, 8px);
+  overflow: scroll visible;
+  padding: 8px var(--zoetrope-offset, 0);
+  scroll-behavior: smooth;
+  scroll-padding-left: var(--zoetrope-offset, 0);
+  scroll-snap-type: x mandatory;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: none;
+  width: 100%;
+
+  & > * {
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  &:focus {
+    outline: 1px dotted var(--ekto-colors-focus);
+    outline-offset: -1px;
+  }
+}

package/dist/components/zoetrope.js

@@ -0,0 +1,2 @@
+export { Zoetrope } from './zoetrope/index.js';
+//# sourceMappingURL=zoetrope.js.map

package/dist/components/zoetrope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoetrope.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -18,6 +18,7 @@ export { Shadowed } from './components/shadowed.js';
 export { Switch } from './components/switch.js';
 export { Toggle } from './components/toggle.js';
 export { ToggleGroup } from './components/toggle-group.js';
+export { Zoetrope } from './components/zoetrope/index.js';
 export { link } from './helpers/link.js';
 export { service } from './helpers/service.js';
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password/index.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport * from './helpers.ts';\nexport type { default as SetupService } from './services/ember-primitives/setup.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC,CAAA;AAC3C"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password/index.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { Zoetrope } from './components/zoetrope/index.gts';\nexport * from './helpers.ts';\nexport type { default as SetupService } from './services/ember-primitives/setup.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC,CAAA;AAC3C"}

package/dist/test-support/index.js

@@ -1,3 +1,4 @@
 export { fillOTP } from './otp.js';
 export { getRouter, setupRouting } from './routing.js';
+export { ZoetropeHelper } from './zoetrope.js';
 //# sourceMappingURL=index.js.map

package/dist/test-support/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/test-support/zoetrope.js

@@ -0,0 +1,42 @@
+import { click } from '@ember/test-helpers';
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class ZoetropeHelper {
+  parentSelector = '.ember-primitives__zoetrope';
+  constructor(parentSelector) {
+    if (parentSelector) {
+      this.parentSelector = parentSelector;
+    }
+  }
+  async scrollLeft() {
+    await click(`${this.parentSelector} .ember-primitives__zoetrope__controls button:first-child`);
+  }
+  async scrollRight() {
+    await click(`${this.parentSelector} .ember-primitives__zoetrope__controls button:last-child`);
+  }
+  visibleItems() {
+    const zoetropeContent = document.querySelectorAll(`${this.parentSelector} .ember-primitives__zoetrope__scroller > *`);
+    let firstVisibleItemIndex = -1;
+    let lastVisibleItemIndex = -1;
+    for (let i = 0; i < zoetropeContent.length; i++) {
+      const item = zoetropeContent[i];
+      const rect = item.getBoundingClientRect();
+      const parentRect = item.parentElement.getBoundingClientRect();
+      if (rect.right >= parentRect?.left && rect.left <= parentRect?.right) {
+        if (firstVisibleItemIndex === -1) {
+          firstVisibleItemIndex = i;
+        }
+        lastVisibleItemIndex = i;
+      } else if (firstVisibleItemIndex !== -1) {
+        break;
+      }
+    }
+    return Array.from(zoetropeContent).slice(firstVisibleItemIndex, lastVisibleItemIndex + 1);
+  }
+  visibleItemCount() {
+    return this.visibleItems().length;
+  }
+}
+
+export { ZoetropeHelper };
+//# sourceMappingURL=zoetrope.js.map

package/dist/test-support/zoetrope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoetrope.js","sources":["../../src/test-support/zoetrope.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { click } from '@ember/test-helpers';\n\nexport class ZoetropeHelper {\n  parentSelector = '.ember-primitives__zoetrope';\n\n  constructor(parentSelector?: string) {\n    if (parentSelector) {\n      this.parentSelector = parentSelector;\n    }\n  }\n\n  async scrollLeft() {\n    await click(`${this.parentSelector} .ember-primitives__zoetrope__controls button:first-child`);\n  }\n\n  async scrollRight() {\n    await click(`${this.parentSelector} .ember-primitives__zoetrope__controls button:last-child`);\n  }\n\n  visibleItems() {\n    const zoetropeContent = document.querySelectorAll(\n      `${this.parentSelector} .ember-primitives__zoetrope__scroller > *`\n    );\n\n    let firstVisibleItemIndex = -1;\n    let lastVisibleItemIndex = -1;\n\n    for (let i = 0; i < zoetropeContent.length; i++) {\n      const item = zoetropeContent[i]!;\n      const rect = item.getBoundingClientRect();\n      const parentRect = item.parentElement!.getBoundingClientRect();\n\n      if (rect.right >= parentRect?.left && rect.left <= parentRect?.right) {\n        if (firstVisibleItemIndex === -1) {\n          firstVisibleItemIndex = i;\n        }\n\n        lastVisibleItemIndex = i;\n      } else if (firstVisibleItemIndex !== -1) {\n        break;\n      }\n    }\n\n    return Array.from(zoetropeContent).slice(firstVisibleItemIndex, lastVisibleItemIndex + 1);\n  }\n\n  visibleItemCount() {\n    return this.visibleItems().length;\n  }\n}\n"],"names":["ZoetropeHelper","parentSelector","constructor","scrollLeft","click","scrollRight","visibleItems","zoetropeContent","document","querySelectorAll","firstVisibleItemIndex","lastVisibleItemIndex","i","length","item","rect","getBoundingClientRect","parentRect","parentElement","right","left","Array","from","slice","visibleItemCount"],"mappings":";;AAAA;AAGO,MAAMA,cAAc,CAAC;AAC1BC,EAAAA,cAAc,GAAG,6BAA6B,CAAA;EAE9CC,WAAWA,CAACD,cAAuB,EAAE;AACnC,IAAA,IAAIA,cAAc,EAAE;MAClB,IAAI,CAACA,cAAc,GAAGA,cAAc,CAAA;AACtC,KAAA;AACF,GAAA;EAEA,MAAME,UAAUA,GAAG;AACjB,IAAA,MAAMC,KAAK,CAAC,CAAA,EAAG,IAAI,CAACH,cAAc,2DAA2D,CAAC,CAAA;AAChG,GAAA;EAEA,MAAMI,WAAWA,GAAG;AAClB,IAAA,MAAMD,KAAK,CAAC,CAAA,EAAG,IAAI,CAACH,cAAc,0DAA0D,CAAC,CAAA;AAC/F,GAAA;AAEAK,EAAAA,YAAYA,GAAG;IACb,MAAMC,eAAe,GAAGC,QAAQ,CAACC,gBAAgB,CAC/C,CAAA,EAAG,IAAI,CAACR,cAAc,CAAA,0CAAA,CACxB,CAAC,CAAA;IAED,IAAIS,qBAAqB,GAAG,CAAC,CAAC,CAAA;IAC9B,IAAIC,oBAAoB,GAAG,CAAC,CAAC,CAAA;AAE7B,IAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGL,eAAe,CAACM,MAAM,EAAED,CAAC,EAAE,EAAE;AAC/C,MAAA,MAAME,IAAI,GAAGP,eAAe,CAACK,CAAC,CAAE,CAAA;AAChC,MAAA,MAAMG,IAAI,GAAGD,IAAI,CAACE,qBAAqB,EAAE,CAAA;MACzC,MAAMC,UAAU,GAAGH,IAAI,CAACI,aAAa,CAAEF,qBAAqB,EAAE,CAAA;AAE9D,MAAA,IAAID,IAAI,CAACI,KAAK,IAAIF,UAAU,EAAEG,IAAI,IAAIL,IAAI,CAACK,IAAI,IAAIH,UAAU,EAAEE,KAAK,EAAE;AACpE,QAAA,IAAIT,qBAAqB,KAAK,CAAC,CAAC,EAAE;AAChCA,UAAAA,qBAAqB,GAAGE,CAAC,CAAA;AAC3B,SAAA;AAEAD,QAAAA,oBAAoB,GAAGC,CAAC,CAAA;AAC1B,OAAC,MAAM,IAAIF,qBAAqB,KAAK,CAAC,CAAC,EAAE;AACvC,QAAA,MAAA;AACF,OAAA;AACF,KAAA;AAEA,IAAA,OAAOW,KAAK,CAACC,IAAI,CAACf,eAAe,CAAC,CAACgB,KAAK,CAACb,qBAAqB,EAAEC,oBAAoB,GAAG,CAAC,CAAC,CAAA;AAC3F,GAAA;AAEAa,EAAAA,gBAAgBA,GAAG;AACjB,IAAA,OAAO,IAAI,CAAClB,YAAY,EAAE,CAACO,MAAM,CAAA;AACnC,GAAA;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Making apps easier to build",
   "sideEffects": [
     "*.css"