npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.1 → 3.0.0-alpha.11 - Mend

@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (967) hide show

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

@@ -3,7 +3,7 @@ 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";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 const SCROLL_DELAY_MS = 200;
 export class HorizontalScroll {
     constructor() {
@@ -80,6 +80,8 @@ export class HorizontalScroll {
         this.itemOverflow = false;
         this.lastItemVisible = false;
         this.appearance = "default";
+        this.monochrome = false;
+        this.theme = "inherit";
         this.focusTrigger = "focus";
     }
     componentWillLoad() {
@@ -108,6 +110,7 @@ export class HorizontalScroll {
         });
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.resizeObserver !== undefined) {
             this.resizeObserver.disconnect();
         }
@@ -115,12 +118,12 @@ export class HorizontalScroll {
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
         });
-        this.items.forEach((item) => {
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
             if (item.removeEventListener) {
                 item.removeEventListener(this.focusTrigger, this.focusHandler);
             }
         });
-        this.itemsContainerEl.removeEventListener("scroll", this.scrollHandler);
+        (_b = this.itemsContainerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.scrollHandler);
     }
     /**
      * @internal if side scrolling enabled, scrolls the specified item into view.
@@ -140,20 +143,25 @@ export class HorizontalScroll {
         }
     }
     render() {
-        const { appearance, firstItemVisible, lastItemVisible, itemOverflow } = this;
+        const { firstItemVisible, lastItemVisible, itemOverflow } = this;
         return (h(Host, { class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
-                ["ic-horizontal-scroll-dark"]: this.appearance === IcThemeForegroundEnum.Dark,
-                ["ic-horizontal-scroll-light"]: this.appearance === IcThemeForegroundEnum.Light,
+                ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
+                ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, 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: {
+            }, role: "tab" }, h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+                ? "dark"
+                : "light", monochrome: this.monochrome, 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 }))));
+            }, role: "tab" }, h("span", { class: "scroll-splitter-right" }), h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+                ? "dark"
+                : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }
     static get is() { return "ic-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }
@@ -173,13 +181,13 @@ export class HorizontalScroll {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcThemeForeground",
+                    "original": "IcBrandForeground",
                     "resolved": "\"dark\" | \"default\" | \"light\"",
                     "references": {
-                        "IcThemeForeground": {
+                        "IcBrandForeground": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
+                            "id": "src/utils/types.ts::IcBrandForeground"
                         }
                     }
                 },
@@ -193,6 +201,54 @@ export class HorizontalScroll {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Determines whether black variant of the tabs should be displayed."
+                        }],
+                    "text": ""
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                        }],
+                    "text": ""
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "focusTrigger": {
                 "type": "string",
                 "mutable": false,

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

	@@ -1 +1 @@
1	- {"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;;QACnB,mBAAc,GAAY,KAAK,CAAC;QA+FhC,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3C,IAAI,CAAC,gBAAgB,CACnB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,MAAqB,CAAC,CAC5D,CAAC;QACJ,CAAC,CAAC;QAQM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC7D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC/D,CAAC;YAED,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,IAAI,CAAC,eAAe;oBAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU;wBACpE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACrD,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC9E,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEM,8BAAyB,GAAG,CAAC,CAAa,EAAE,EAAE;YACpD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEM,+BAA0B,GAAG,CAAC,CAAa,EAAE,EAAE;YACrD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC9E,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAW,EAAE;YACxC,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;YACF,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/B,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACtC,4CAA4C;YAC5C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,+EAA+E;YAC/E,kFAAkF;YAClF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAChE,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;gBAClC,IAAI,CAAC,gBAAgB,GAAG,UAAU,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,eAAe;oBAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,UAAU;wBAC9C,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YACtC,CAAC;YACD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC,CAAC;gCA9KmC,IAAI;4BACR,KAAK;+BACF,KAAK;0BAKA,SAAS;4BAKlB,OAAO;;IAEvC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACrE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAkB,CAAC;QACrE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC9D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC;YACjC,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAE5C,oHAAoH;QACpH,yFAAyF;QACzF,+DAA+D;QAC/D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC1B,CAAC;QACnB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC1C,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAC7B,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CACxD,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC1B,CAAC;QACnB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC1C,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAC7B,KAAK,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAC3D,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACjE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1E,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,kBAAkB,CAAC,YAAoB;QAC3C,IAAI,CAAC,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAC;QAC1C,MAAM,YAAY,GAChB,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,YAAY;gBAChD,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,YAAY,CAAC;IAClD,CAAC;IAQO,gBAAgB,CAAC,YAAoB;QAC3C,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAiFD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,GACnE,IAAI,CAAC;QAEP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,8BAA8B,CAAC,EAAE,YAAY;gBAC9C,CAAC,2BAA2B,CAAC,EAC3B,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;gBAChD,CAAC,4BAA4B,CAAC,EAC5B,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;aAClD;YAED,0BACc,MAAM,EAClB,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY;oBACzB,CAAC,UAAU,CAAC,EAAE,gBAAgB;iBAC/B,EACD,IAAI,EAAC,KAAK;gBAEV,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;gBACb,YAAM,KAAK,EAAC,sBAAsB,GAAQ,CACtC;YACN,eAAa;YACb,0BACc,MAAM,EAClB,KAAK,EAAE;oBACL,CAAC,wBAAwB,CAAC,EAAE,IAAI;oBAChC,CAAC,QAAQ,CAAC,EAAE,CAAC,YAAY;oBACzB,CAAC,UAAU,CAAC,EAAE,eAAe;iBAC9B,EACD,IAAI,EAAC,KAAK;gBAEV,YAAM,KAAK,EAAC,uBAAuB,GAAQ;gBAC3C,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;IACJ,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 /\n @internal The name of the event that triggers focus handler logic.\n /\n @Prop() focusTrigger?: string = \"focus\";\n\n componentWillLoad(): void {\n this.itemsContainerEl = this.el.children[0] as HTMLElement;\n this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n this.items.forEach((item) => {\n if (item.addEventListener) {\n item.addEventListener(this.focusTrigger, 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(this.focusTrigger, 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 [\"ic-horizontal-scroll-visible\"]: itemOverflow,\n [\"ic-horizontal-scroll-dark\"]:\n this.appearance === IcThemeForegroundEnum.Dark,\n [\"ic-horizontal-scroll-light\"]:\n 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"]}
1	+ {"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"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","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 {\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} 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?: IcBrandForeground = \"default\";\n\n /* @internal Determines whether black variant of the tabs should be displayed. /\n @Prop() monochrome?: boolean = false;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal The name of the event that triggers focus handler logic.\n /\n @Prop() focusTrigger?: string = \"focus\";\n\n componentWillLoad(): void {\n this.itemsContainerEl = this.el.children[0] as HTMLElement;\n this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n this.items.forEach((item) => {\n if (item.addEventListener) {\n item.addEventListener(this.focusTrigger, 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(this.focusTrigger, 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 { firstItemVisible, lastItemVisible, itemOverflow } = this;\n\n return (\n <Host\n class={{\n [\"ic-horizontal-scroll-visible\"]: itemOverflow,\n [\"ic-horizontal-scroll-dark\"]:\n this.appearance === IcBrandForegroundEnum.Dark,\n [\"ic-horizontal-scroll-light\"]:\n this.appearance === IcBrandForegroundEnum.Light,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\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-tertiary\"\n aria-label=\"Scroll left\"\n theme={\n this.theme === \"light\" \|\| this.theme === \"inherit\"\n ? \"dark\"\n : \"light\"\n }\n monochrome={this.monochrome}\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-tertiary\"\n aria-label=\"Scroll right\"\n theme={\n this.theme === \"light\" \|\| this.theme === \"inherit\"\n ? \"dark\"\n : \"light\"\n }\n monochrome={this.monochrome}\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/basic/ic-horizontal-scroll.spec.js CHANGED Viewed

@@ -11,6 +11,18 @@ const testHorizontalScroll = `<ic-horizontal-scroll>
     <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
   </div>
   </ic-horizontal-scroll>`;
+const testTheme = (theme) => {
+    return `<ic-horizontal-scroll theme="${theme}">
+  <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({
@@ -19,6 +31,20 @@ describe("ic-horizontal-scroll", () => {
         });
         expect(page.root).toMatchSnapshot("renders");
     });
+    it("should render light", async () => {
+        const page = await newSpecPage({
+            components: [HorizontalScroll, NavigationItem],
+            html: testTheme("light"),
+        });
+        expect(page.root).toMatchSnapshot("renders");
+    });
+    it("should render dark", async () => {
+        const page = await newSpecPage({
+            components: [HorizontalScroll, NavigationItem],
+            html: testTheme("dark"),
+        });
+        expect(page.root).toMatchSnapshot("renders");
+    });
     it("should render the correct HTML for the chosen appearance", async () => {
         const page = await newSpecPage({
             components: [HorizontalScroll, NavigationItem],
@@ -176,5 +202,22 @@ describe("ic-horizontal-scroll", () => {
         page.waitForChanges();
         expect(page.rootInstance.itemOverflow).toBe(true);
     });
+    // Code Coverage
+    it("should call the runResizeObserver function", async () => {
+        const page = await newSpecPage({
+            components: [HorizontalScroll, NavigationItem],
+            html: `<ic-horizontal-scroll appearance="dark">
+        <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.runResizeObserver();
+    });
 });
 //# sourceMappingURL=ic-horizontal-scroll.spec.js.map

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

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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\nconst testTheme = (theme: string) => {\n return `<ic-horizontal-scroll theme=\"${theme}\">\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\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 it(\"should render light\", async () => {\n const page = await newSpecPage({\n components: [HorizontalScroll, NavigationItem],\n html: testTheme(\"light\"),\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n it(\"should render dark\", async () => {\n const page = await newSpecPage({\n components: [HorizontalScroll, NavigationItem],\n html: testTheme(\"dark\"),\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 // Code Coverage\n it(\"should call the runResizeObserver function\", async () => {\n const page = await newSpecPage({\n components: [HorizontalScroll, NavigationItem],\n html: `<ic-horizontal-scroll appearance=\"dark\">\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.runResizeObserver();\n });\n});\n"]}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css CHANGED Viewed

@@ -1,6 +1,18 @@
 ic-input-component-container {
   /**
    * @prop --border-color: Border colour of the input component container
+   * @prop --border-color-hover: Border colour of the input component container on hover
+   * @prop --border-color-pressed: Border colour of the input component container when pressed
+   * @prop --border-color-disabled: Border colour of the input component container when disabled
+   * @prop --border-color-error: Border colour of the error variant for input component container
+   * @prop --border-color-error-hover: Border colour of the error hover variant for input component container
+   * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container
+   * @prop --border-color-warning: Border colour of the warning variant for input component container
+   * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container
+   * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container
+   * @prop --border-color-success: Border colour of the success variant for input component container
+   * @prop --border-color-success-hover: Border colour of the success hover variant for input component container
+   * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container
    */
   display: flex;
@@ -11,7 +23,7 @@ ic-input-component-container {
   height: 2.5rem;
   width: var(--input-width, 20rem);
   padding: var(--ic-space-1px);
-  background-color: var(--ic-architectural-white);
+  background-color: var(--input-bg-color, var(--ic-color-background-primary));
   box-sizing: border-box;
   fill: var(--ic-architectural-400);
   outline: none;
@@ -23,7 +35,8 @@ ic-input-component-container.ic-input-component-container-full-width {
 ic-input-component-container.ic-input-component-container-disabled,
 ic-input-component-container.ic-input-component-container-disabled:hover {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed
+    var(--border-color-disabled, var(--ic-color-border-neutral-disabled));
 }
 ic-input-component-container.ic-input-component-container-readonly,
@@ -33,42 +46,51 @@ ic-input-component-container.ic-input-component-container-readonly:hover {
 }
 ic-input-component-container.ic-input-component-container-error {
-  border: var(--ic-error-border-default);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-error, var(--ic-color-border-error));
   padding: 0;
 }
 ic-input-component-container.ic-input-component-container-error:hover {
-  border: var(--ic-error-border-hover);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-error-hover, var(--ic-color-border-error-hover));
 }
 ic-input-component-container.ic-input-component-container-error:focus-within {
-  border: var(--ic-error-border-pressed);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-error-pressed, var(--ic-color-border-error-pressed));
 }
 ic-input-component-container.ic-input-component-container-warning {
-  border: var(--ic-warning-border-default);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-warning, var(--ic-color-border-warning));
   padding: 0;
 }
 ic-input-component-container.ic-input-component-container-warning:hover {
-  border: var(--ic-warning-border-hover);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-warning-hover, var(--ic-color-border-warning-hover));
 }
 ic-input-component-container.ic-input-component-container-warning:focus-within {
-  border: var(--ic-warning-border-pressed);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));
 }
 ic-input-component-container.ic-input-component-container-success {
-  border: var(--ic-success-border-default);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-success, var(--ic-color-border-success));
   padding: 0;
 }
 ic-input-component-container.ic-input-component-container-success:hover {
-  border: var(--ic-success-border-hover);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-success-hover, var(--ic-color-border-success-hover));
 }
 ic-input-component-container.ic-input-component-container-success:focus-within {
-  border: var(--ic-success-border-pressed);
+  border: var(--ic-space-xxxs) solid
+    var(--border-color-success-pressed, var(--ic-color-border-success-pressed));
 }
 ic-input-component-container.ic-input-component-container-small {
@@ -119,23 +141,24 @@ ic-input-component-container .inline-success {
   align-items: center;
 }
-ic-input-component-container.ic-input-component-container-dark:hover {
-  --border-color: var(--ic-architectural-400);
-}
 ic-input-component-container .inline-success > svg {
-  fill: var(--ic-status-success);
+  fill: var(--ic-input-component-container-success-icon-inline-color);
   height: 1.25rem;
   width: 1.25rem;
 }
 ic-input-component-container:hover {
-  border: var(--ic-border-hover);
+  border: var(--ic-input-component-container-hover-border);
+  border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));
   color: var(--ic-action-dark-hover);
 }
 ic-input-component-container:focus {
   border: var(--ic-border-pressed);
+  border-color: var(
+    --border-color-pressed,
+    var(--ic-color-border-neutral-pressed)
+  );
 }
 .focus-indicator {

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js CHANGED Viewed

@@ -1,20 +1,12 @@
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { IcInformationStatus, } from "../../utils/types";
 import successIcon from "../../assets/success-icon.svg";
-import { checkSlotInChildMutations, slotHasContent } from "../../utils/helpers";
+import { removeDisabledFalse, renderDynamicChildSlots, slotHasContent, } from "../../utils/helpers";
 /**
  * @slot left-icon - Content will be placed to the left of the input.
  */
 export class InputComponentContainer {
     constructor() {
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, "left-icon")
-                : false)) {
-                forceUpdate(this);
-            }
-        };
-        this.appearance = "default";
         this.disabled = false;
         this.fullWidth = false;
         this.multiLine = false;
@@ -23,32 +15,27 @@ export class InputComponentContainer {
         this.validationInline = false;
         this.validationStatus = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     componentDidLoad() {
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "left-icon", this));
         this.hostMutationObserver.observe(this.el, { childList: true });
     }
     render() {
-        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, appearance, validationInline, } = this;
-        const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
-            ? true
-            : false;
+        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
         return (h(Host, { class: {
                 [`ic-input-component-container-${size}`]: true,
-                [`ic-input-component-container-${validationStatus}`]: hasValidationStatus,
-                [`ic-input-component-container-disabled`]: disabled,
-                [`ic-input-component-container-readonly`]: readonly,
-                ["ic-input-component-container-multiline"]: multiLine,
-                ["ic-input-component-container-full-width"]: fullWidth,
-                ["ic-input-component-container-dark"]: appearance === "dark",
-            }, "aria-disabled": disabled && `${disabled}` }, h("div", { class: {
-                "focus-indicator": true,
-                dark: appearance === "dark",
-            } }, slotHasContent(this.el, "left-icon") && (h("div", { class: {
-                ["icon-container"]: true,
-            } }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { class: {
-                ["inline-success"]: true,
-            }, innerHTML: successIcon })))));
+                [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
+                "ic-input-component-container-disabled": disabled,
+                "ic-input-component-container-readonly": readonly,
+                "ic-input-component-container-multiline": multiLine,
+                "ic-input-component-container-full-width": fullWidth,
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { class: "inline-success", innerHTML: successIcon })))));
     }
     static get is() { return "ic-input-component-container"; }
     static get originalStyleUrls() {
@@ -63,24 +50,6 @@ export class InputComponentContainer {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"dark\" | \"default\"",
-                    "resolved": "\"dark\" | \"default\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The appearance of the input component container."
-                },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -222,5 +191,11 @@ export class InputComponentContainer {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-input-component-container.js.map