@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js

@@ -1,234 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import LeftArrow from "./assets/left-arrow.svg";
-import RightArrow from "./assets/right-arrow.svg";
-import { getSlotElements } from "../../utils/helpers";
-import { checkResizeObserver, elementOverflowsX } from "../../utils/helpers";
-import { IcThemeForegroundEnum } from "../../utils/types";
-const SCROLL_DELAY_MS = 200;
-export class HorizontalScroll {
-  constructor() {
-    this.buttonStateSet = false;
-    this.focusHandler = (event) => {
-      this.itemFocusHandler(Array.from(this.items).indexOf(event.target));
-    };
-    this.resizeObserverCallback = () => {
-      if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {
-        this.itemOverflow = false;
-      }
-      else {
-        this.itemOverflow = elementOverflowsX(this.itemsContainerEl);
-      }
-      if (this.itemOverflow) {
-        this.lastItemVisible =
-          this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=
-            this.itemsContainerEl.scrollWidth;
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.resizeObserverCallback();
-      });
-      this.resizeObserver.observe(this.itemsContainerEl);
-    };
-    this.scrollLeft = () => {
-      this.scrollItemIntoView(this.getCurrentLeftItem() - 1);
-    };
-    this.scrollRight = () => {
-      this.scrollItemIntoView(this.getCurrentLeftItem() + 1);
-    };
-    this.longScrollRight = () => {
-      this.scrollRight();
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.longScrollLeft = () => {
-      this.scrollLeft();
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.leftArrowMouseDownHandler = (e) => {
-      e.preventDefault();
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.rightArrowMouseDownHandler = (e) => {
-      e.preventDefault();
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.arrowMouseUpHandler = () => {
-      window.clearTimeout(this.scrollDelay);
-    };
-    this.getCurrentLeftItem = () => {
-      const index = this.itemOffsets.findIndex((el) => el > Math.round(this.itemsContainerEl.scrollLeft));
-      return index < 0 ? 0 : index;
-    };
-    this.scrollHandler = () => {
-      window.clearTimeout(this.isScrolling);
-      // Set a timeout to run after scrolling ends
-      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
-    };
-    this.scrollStopped = () => {
-      // If scrollItemIntoView has been called, the button states will already be set
-      // Can't just handle it here as it causes strange jumping behaviour in positioning
-      const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);
-      if (this.buttonStateSet === false) {
-        this.firstItemVisible = scrollLeft === 0;
-        this.lastItemVisible =
-          this.itemsContainerEl.offsetWidth + scrollLeft >=
-            this.itemsContainerEl.scrollWidth;
-      }
-      this.buttonStateSet = false;
-    };
-    this.firstItemVisible = true;
-    this.itemOverflow = false;
-    this.lastItemVisible = false;
-    this.appearance = "default";
-  }
-  componentWillLoad() {
-    this.itemsContainerEl = this.el.children[0];
-    this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
-    this.items = (getSlotElements(this.itemsContainerEl) ||
-      Array.from(this.itemsContainerEl.children));
-    this.items.forEach((item) => {
-      if (item.addEventListener) {
-        item.addEventListener("focus", this.focusHandler);
-      }
-    });
-  }
-  componentDidLoad() {
-    let runningTotal = 0;
-    this.itemOffsets = this.items.map((item) => {
-      runningTotal += item.offsetWidth;
-      return runningTotal;
-    });
-    checkResizeObserver(this.runResizeObserver);
-    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)
-    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons
-    // - 'mouseup' otherwise not detected and scrolling not stopped
-    const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
-    ["mouseup", "mouseleave"].forEach((event) => {
-      scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
-    });
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== undefined) {
-      this.resizeObserver.disconnect();
-    }
-    const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
-    ["mouseup", "mouseleave"].forEach((event) => {
-      scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
-    });
-    this.items.forEach((item) => {
-      if (item.removeEventListener) {
-        item.removeEventListener("focus", this.focusHandler);
-      }
-    });
-    this.itemsContainerEl.removeEventListener("scroll", this.scrollHandler);
-  }
-  /**
-   * @internal if side scrolling enabled, scrolls the specified item into view.
-   */
-  async scrollItemIntoView(itemPosition) {
-    this.firstItemVisible = itemPosition <= 0;
-    const newScrollPos = itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];
-    this.lastItemVisible =
-      this.itemsContainerEl.offsetWidth + newScrollPos >=
-        this.itemsContainerEl.scrollWidth;
-    this.buttonStateSet = true;
-    this.itemsContainerEl.scrollLeft = newScrollPos;
-  }
-  itemFocusHandler(itemPosition) {
-    if (this.itemOverflow) {
-      this.scrollItemIntoView(itemPosition);
-    }
-  }
-  render() {
-    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } = this;
-    return (h(Host, { class: {
-        ["visible"]: itemOverflow,
-        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
-        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
-      } }, h("div", { "aria-hidden": "true", class: {
-        ["scroll-container-left"]: true,
-        ["hidden"]: !itemOverflow,
-        ["disabled"]: firstItemVisible,
-      }, role: "tab" }, h("ic-button", { class: "scroll-arrow", variant: "icon", "aria-label": "Scroll left", appearance: appearance, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { class: "scroll-splitter-left" })), h("slot", null), h("div", { "aria-hidden": "true", class: {
-        ["scroll-container-right"]: true,
-        ["hidden"]: !itemOverflow,
-        ["disabled"]: lastItemVisible,
-      }, role: "tab" }, h("span", { class: "scroll-splitter-right" }), h("ic-button", { class: "scroll-arrow", variant: "icon", "aria-label": "Scroll right", appearance: appearance, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
-  }
-  static get is() { return "ic-horizontal-scroll"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./ic-horizontal-scroll.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-horizontal-scroll.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "appearance": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
-          "references": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcThemeForeground"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The appearance of the horizontal scroll, e.g. dark, light or the default."
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "firstItemVisible": {},
-      "itemOverflow": {},
-      "lastItemVisible": {}
-    };
-  }
-  static get methods() {
-    return {
-      "scrollItemIntoView": {
-        "complexType": {
-          "signature": "(itemPosition: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": "if side scrolling enabled, scrolls the specified item into view."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=ic-horizontal-scroll.js.map

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAqB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,MAAM,eAAe,GAAG,GAAG,CAAC;AAO5B,MAAM,OAAO,gBAAgB;;IACnB,mBAAc,GAAY,KAAK,CAAC;IA4FhC,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC3C,IAAI,CAAC,gBAAgB,CACnB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,MAAqB,CAAC,CAC5D,CAAC;IACJ,CAAC,CAAC;IAQM,2BAAsB,GAAG,GAAG,EAAE;MACpC,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;QAC5D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;WAAM;QACL,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;OAC9D;MAED,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,IAAI,CAAC,eAAe;UAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU;YACpE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;OACrC;IACH,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAChC,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACrD,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEM,8BAAyB,GAAG,CAAC,CAAa,EAAE,EAAE;MACpD,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEM,+BAA0B,GAAG,CAAC,CAAa,EAAE,EAAE;MACrD,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MACjC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAW,EAAE;MACxC,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CACtC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAC1D,CAAC;MACF,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MAC3B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MACtC,4CAA4C;MAC5C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MAC3B,+EAA+E;MAC/E,kFAAkF;MAClF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;MAChE,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;QACjC,IAAI,CAAC,gBAAgB,GAAG,UAAU,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,eAAe;UAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,UAAU;YAC9C,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;OACrC;MACD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;4BA3KmC,IAAI;wBACR,KAAK;2BACF,KAAK;sBAKA,SAAS;;EAElD,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;IAC3D,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAErE,IAAI,CAAC,KAAK,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC;MAClD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAkB,CAAC;IAC/D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAC1B,IAAI,IAAI,CAAC,gBAAgB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OACnD;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;MACzC,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC;MACjC,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAE5C,oHAAoH;IACpH,yFAAyF;IACzF,+DAA+D;IAC/D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC1B,CAAC;IACnB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;MAC1C,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAC7B,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CACxD,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE;MACrC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC1B,CAAC;IACnB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;MAC1C,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAC7B,KAAK,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAC3D,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAC1B,IAAI,IAAI,CAAC,mBAAmB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OACtD;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;EAC1E,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,kBAAkB,CAAC,YAAoB;IAC3C,IAAI,CAAC,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAChB,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IAC7D,IAAI,CAAC,eAAe;MAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,YAAY;QAChD,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;IACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,YAAY,CAAC;EAClD,CAAC;EAQO,gBAAgB,CAAC,YAAoB;IAC3C,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;KACvC;EACH,CAAC;EAiFD,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,GACnE,IAAI,CAAC;IAEP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,YAAY;QACzB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;QACxD,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;OAC3D;MAED,0BACc,MAAM,EAClB,KAAK,EAAE;UACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;UAC/B,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY;UACzB,CAAC,UAAU,CAAC,EAAE,gBAAgB;SAC/B,EACD,IAAI,EAAC,KAAK;QAEV,iBACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,MAAM,gBACH,aAAa,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,WAAW,EAAE,IAAI,CAAC,yBAAyB,GAChC;QACb,YAAM,KAAK,EAAC,sBAAsB,GAAQ,CACtC;MACN,eAAa;MACb,0BACc,MAAM,EAClB,KAAK,EAAE;UACL,CAAC,wBAAwB,CAAC,EAAE,IAAI;UAChC,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY;UACzB,CAAC,UAAU,CAAC,EAAE,eAAe;SAC9B,EACD,IAAI,EAAC,KAAK;QAEV,YAAM,KAAK,EAAC,uBAAuB,GAAQ;QAC3C,iBACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,MAAM,gBACH,cAAc,EACzB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,0BAA0B,GACjC,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  private buttonStateSet: boolean = false;\n  private isScrolling: number;\n  private itemOffsets: number[];\n  private items: HTMLElement[];\n  private itemsContainerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private scrollDelay: number;\n\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  @State() firstItemVisible: boolean = true;\n  @State() itemOverflow: boolean = false;\n  @State() lastItemVisible: boolean = false;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(\"focus\", this.focusHandler);\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.removeEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n\n    this.items.forEach((item) => {\n      if (item.removeEventListener) {\n        item.removeEventListener(\"focus\", this.focusHandler);\n      }\n    });\n\n    this.itemsContainerEl.removeEventListener(\"scroll\", this.scrollHandler);\n  }\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  private focusHandler = (event: FocusEvent) => {\n    this.itemFocusHandler(\n      Array.from(this.items).indexOf(event.target as HTMLElement)\n    );\n  };\n\n  private itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.js

@@ -1,34 +0,0 @@
-import { fixture } from "@open-wc/testing-helpers";
-import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
-beforeEach(() => {
-  // IntersectionObserver isn't available in test environment
-  const mockResizeObserver = jest.fn();
-  mockResizeObserver.mockReturnValue({
-    observe: jest.fn().mockReturnValue(null),
-    unobserve: jest.fn().mockReturnValue(null),
-    disconnect: jest.fn().mockReturnValue(null),
-  });
-  window.ResizeObserver = mockResizeObserver;
-});
-describe("ic-horizontal-scroll", () => {
-  it("passes accessibility", async () => {
-    const div = document.createElement("div");
-    div.setAttribute("style", "width: 320px;");
-    const el = await fixture(`
-      <ic-horizontal-scroll>
-        <ul>
-          <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
-          <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
-          <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
-          <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
-          <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
-          <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
-        </ul>
-      </ic-horizontal-scroll>
-    `, { parentNode: div });
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
-});
-//# sourceMappingURL=ic-horizontal-scroll.test.a11y.js.map

package/dist/collection/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-horizontal-scroll.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;KAWD,EACC,EAAE,UAAU,EAAE,GAAG,EAAE,CACpB,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"passes accessibility\", async () => {\n    const div = document.createElement(\"div\");\n    div.setAttribute(\"style\", \"width: 320px;\");\n    const el = await fixture(\n      `\n      <ic-horizontal-scroll>\n        <ul>\n          <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </ul>\n      </ic-horizontal-scroll>\n    `,\n      { parentNode: div }\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js

@@ -1,180 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
-import { HorizontalScroll } from "../../ic-horizontal-scroll";
-const testHorizontalScroll = `<ic-horizontal-scroll>
-  <div>
-    <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
-    <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
-    <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
-    <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
-    <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
-    <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
-  </div>
-  </ic-horizontal-scroll>`;
-describe("ic-horizontal-scroll", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    expect(page.root).toMatchSnapshot("renders");
-  });
-  it("should render the correct HTML for the chosen appearance", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    expect(page.root).toMatchSnapshot("renders-appearance");
-  });
-  it("should scroll item into view", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    page.rootInstance.scrollItemIntoView(6);
-    expect(page.rootInstance.buttonStateSet).toBe(true);
-  });
-  it("should long scroll left", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    page.rootInstance.longScrollLeft();
-    page.waitForChanges();
-    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
-  });
-  it("should long scroll right", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    page.rootInstance.longScrollRight();
-    page.waitForChanges();
-    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
-  });
-  it("should delay on left arrow mouse down and set a timeout after the scrolling ends", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    const event = new Event("mousedown", {
-      bubbles: true,
-      cancelable: true,
-    });
-    page.rootInstance.leftArrowMouseDownHandler(event);
-    page.waitForChanges();
-    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
-    page.rootInstance.isScrolling = 200;
-    page.waitForChanges();
-    page.rootInstance.scrollHandler();
-    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);
-  });
-  it("should delay on right arrow mouse down and revoke delay on mouse up", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    const event = new Event("mousedown", {
-      bubbles: true,
-      cancelable: true,
-    });
-    page.rootInstance.rightArrowMouseDownHandler(event);
-    page.waitForChanges();
-    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
-    page.rootInstance.arrowMouseUpHandler();
-    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();
-  });
-  it("should stop scrolling if mouse leaves the scroll button", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    const scrollContainer = page.root.shadowRoot.querySelector(".scroll-container-right");
-    const mouseDownEvent = new Event("mousedown", {
-      bubbles: true,
-      cancelable: true,
-    });
-    const mouseLeaveEvent = new Event("mouseleave", {
-      bubbles: true,
-      cancelable: true,
-    });
-    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);
-    page.waitForChanges();
-    scrollContainer.dispatchEvent(mouseLeaveEvent);
-    page.waitForChanges();
-    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;
-  });
-  it("should stop scrolling", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    //when buttonStateSet is true
-    page.rootInstance.buttonStateSet = true;
-    page.rootInstance.scrollStopped();
-    page.waitForChanges();
-    expect(page.rootInstance.buttonStateSet).toBe(false);
-    //when buttonStateSet is false
-    page.rootInstance.itemsContainerEl.scrollLeft = 0;
-    page.rootInstance.scrollStopped();
-    page.waitForChanges();
-    expect(page.rootInstance.firstItemVisible).toBe(true);
-  });
-  it("should handle item focus", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: testHorizontalScroll,
-    });
-    page.rootInstance.itemOverflow = true;
-    page.waitForChanges();
-    const item = page.root.querySelector("[label='Test nav item 4']");
-    item.focus();
-    page.waitForChanges();
-    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;
-    expect(page.rootInstance.firstItemVisible).toBe(false);
-  });
-  it("should render scroll arrows when items overflow", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: `<ic-horizontal-scroll>
-        <div>
-        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
-        </div>
-      </ic-horizontal-scroll>`,
-    });
-    page.rootInstance.itemOverflow = true;
-    page.waitForChanges();
-    const scroll = page.root.shadowRoot.querySelector(".scroll-arrow");
-    expect(scroll).not.toBeNull();
-    //call runResizeObserver
-    page.rootInstance.runResizeObserver();
-    //test disconnected callback
-    page.setContent("");
-  });
-  it("should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element", async () => {
-    const page = await newSpecPage({
-      components: [HorizontalScroll, NavigationItem],
-      html: `<ic-horizontal-scroll>
-        <div>
-        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
-        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
-        </div>
-      </ic-horizontal-scroll>`,
-    });
-    page.rootInstance.itemsContainerEl.scrollWidth = 100;
-    page.rootInstance.itemsContainerEl.clientWidth = 50;
-    page.rootInstance.resizeObserverCallback();
-    page.waitForChanges();
-    expect(page.rootInstance.itemOverflow).toBe(true);
-  });
-});
-//# sourceMappingURL=ic-horizontal-scroll.spec.js.map

package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-horizontal-scroll.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { HorizontalScroll } from \"../../ic-horizontal-scroll\";\n\nconst testHorizontalScroll = `<ic-horizontal-scroll>\n  <div>\n    <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n  </div>\n  </ic-horizontal-scroll>`;\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render the correct HTML for the chosen appearance\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-appearance\");\n  });\n\n  it(\"should scroll item into view\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.scrollItemIntoView(6);\n    expect(page.rootInstance.buttonStateSet).toBe(true);\n  });\n\n  it(\"should long scroll left\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollLeft();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should long scroll right\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollRight();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should delay on left arrow mouse down and set a timeout after the scrolling ends\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.leftArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.isScrolling = 200;\n    page.waitForChanges();\n\n    page.rootInstance.scrollHandler();\n\n    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);\n  });\n\n  it(\"should delay on right arrow mouse down and revoke delay on mouse up\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.arrowMouseUpHandler();\n    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();\n  });\n\n  it(\"should stop scrolling if mouse leaves the scroll button\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const scrollContainer = page.root.shadowRoot.querySelector(\n      \".scroll-container-right\"\n    );\n    const mouseDownEvent = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n    const mouseLeaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);\n    page.waitForChanges();\n\n    scrollContainer.dispatchEvent(mouseLeaveEvent);\n    page.waitForChanges();\n\n    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;\n  });\n\n  it(\"should stop scrolling\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    //when buttonStateSet is true\n    page.rootInstance.buttonStateSet = true;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.buttonStateSet).toBe(false);\n\n    //when buttonStateSet is false\n    page.rootInstance.itemsContainerEl.scrollLeft = 0;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.firstItemVisible).toBe(true);\n  });\n\n  it(\"should handle item focus\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n\n    const item: HTMLElement = page.root.querySelector(\n      \"[label='Test nav item 4']\"\n    );\n    item.focus();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;\n    expect(page.rootInstance.firstItemVisible).toBe(false);\n  });\n\n  it(\"should render scroll arrows when items overflow\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n    const scroll = page.root.shadowRoot.querySelector(\".scroll-arrow\");\n\n    expect(scroll).not.toBeNull();\n\n    //call runResizeObserver\n    page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemsContainerEl.scrollWidth = 100;\n    page.rootInstance.itemsContainerEl.clientWidth = 50;\n    page.rootInstance.resizeObserverCallback();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemOverflow).toBe(true);\n  });\n});\n"]}