@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-horizontal-scroll2.js

@@ -0,0 +1,240 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { J as elementOverflowsX, n as getSlotElements, c as checkResizeObserver, I as IcBrandForegroundEnum } from './helpers.js';
+import { d as defineCustomElement$4 } from './ic-button2.js';
+import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$2 } from './ic-tooltip2.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const LeftArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M13.0875 6.175L11.9125 5L6.91251 10L11.9125 15L13.0875 13.825L9.27084 10L13.0875 6.175Z"/>
+</svg>`;
+
+const RightArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M8.08748 5L6.91248 6.175L10.7291 10L6.91248 13.825L8.08748 15L13.0875 10L8.08748 5Z"/>
+</svg>`;
+
+const icHorizontalScrollCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);display:flex;max-width:100%}:host(.ic-horizontal-scroll-light){--splitter-color:var(--ic-color-keyline-lighten)}:host(.ic-horizontal-scroll-light) ic-button>svg{color:var(--ic-color-text-action-monochrome-dark)}:host(.ic-horizontal-scroll-dark){--splitter-color:var(--ic-color-keyline-darken)}:host(.ic-horizontal-scroll-dark) ic-button>svg{color:var(--ic-color-text-action-monochrome-light)}::slotted(*){overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:calc(var(--ic-space-xs) * -1) !important;padding:var(--ic-space-xs) !important}:host(.ic-horizontal-scroll-visible) ::slotted(*){margin:calc(var(--ic-space-xs) * -1) 0 !important;padding:var(--ic-space-xs) !important}.tabs-container::-webkit-scrollbar{display:none}.scroll-container-left,.scroll-container-right{display:flex}.scroll-container-left{margin-left:var(--ic-space-xxs)}.scroll-container-right{margin-right:var(--ic-space-xxs)}.hidden{display:none}.scroll-arrow{margin:var(--ic-space-xxs) 0}.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:var(--ic-space-1px);margin-top:var(--ic-space-xs);border-radius:var(--ic-space-1px);background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.scroll-splitter-right{margin-right:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.disabled .scroll-splitter-left,.disabled .scroll-splitter-right{background-color:transparent}:host(.ic-horizontal-scroll-dark) .disabled ic-button>svg,:host(.ic-horizontal-scroll-light) .disabled ic-button>svg{color:var(--splitter-color) !important}@media (prefers-reduced-motion: reduce){::slotted(*){scroll-behavior:auto}}";
+const IcHorizontalScrollStyle0 = icHorizontalScrollCss;
+
+const SCROLL_DELAY_MS = 200;
+const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.buttonStateSet = false;
+        this.firstItemVisible = true;
+        this.itemOverflow = false;
+        this.lastItemVisible = false;
+        /**
+         * The appearance of the horizontal scroll, e.g. dark, light or the default.
+         */
+        this.appearance = "default";
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /**
+         * @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.
+         */
+        this.theme = "inherit";
+        /**
+         * @internal The name of the event that triggers focus handler logic.
+         */
+        this.focusTrigger = "focus";
+        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;
+        };
+    }
+    componentWillLoad() {
+        this.itemsContainerEl = this.el.children[0];
+        this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
+        this.items = getSlotElements(this.itemsContainerEl);
+        this.items.forEach((item) => {
+            if (item.addEventListener) {
+                item.addEventListener(this.focusTrigger, this.focusHandler);
+            }
+        });
+    }
+    componentDidLoad() {
+        var _a;
+        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(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
+        ["mouseup", "mouseleave"].forEach((event) => {
+            scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (this.resizeObserver !== undefined) {
+            this.resizeObserver.disconnect();
+        }
+        const scrollArrows = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
+        ["mouseup", "mouseleave"].forEach((event) => {
+            scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
+        });
+        (_b = this.items) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
+            if (item.removeEventListener) {
+                item.removeEventListener(this.focusTrigger, this.focusHandler);
+            }
+        });
+        (_c = this.itemsContainerEl) === null || _c === void 0 ? void 0 : _c.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 { firstItemVisible, lastItemVisible, itemOverflow } = this;
+        return (h(Host, { key: 'e62a9673acd5416d956f0f293682a45d8caad08f', class: {
+                ["ic-horizontal-scroll-visible"]: itemOverflow,
+                ["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", { key: 'e3c2707ab25d06342f46237efe0d28479ab042cf', "aria-hidden": "true", class: {
+                ["scroll-container-left"]: true,
+                ["hidden"]: !itemOverflow,
+                ["disabled"]: firstItemVisible,
+            }, role: "tab" }, h("ic-button", { key: '1240e1b97205b7b31c8d467982f8ac163fb89183', 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", { key: '96f80e692d71cf3d9903f60aa1c6322e68cddfe6', class: "scroll-splitter-left" })), h("slot", { key: '7b33db784648922f25369dc24beb3d50562d1090' }), h("div", { key: 'b9645cd33d53e6eafe01444236543fb503a75e1e', "aria-hidden": "true", class: {
+                ["scroll-container-right"]: true,
+                ["hidden"]: !itemOverflow,
+                ["disabled"]: lastItemVisible,
+            }, role: "tab" }, h("span", { key: '1e1e2c4992938e38068602d65db3f980308b0db6', class: "scroll-splitter-right" }), h("ic-button", { key: 'cae9a3da598885a5e12476f0ea85dcbc5e454266', 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 }))));
+    }
+    get el() { return this; }
+    static get style() { return IcHorizontalScrollStyle0; }
+}, [1, "ic-horizontal-scroll", {
+        "appearance": [1],
+        "monochrome": [4],
+        "theme": [1],
+        "focusTrigger": [1, "focus-trigger"],
+        "firstItemVisible": [32],
+        "itemOverflow": [32],
+        "lastItemVisible": [32],
+        "scrollItemIntoView": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-horizontal-scroll", "ic-button", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-horizontal-scroll":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HorizontalScroll);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { HorizontalScroll as H, defineCustomElement as d };
+
+//# sourceMappingURL=ic-horizontal-scroll2.js.map

package/components/ic-horizontal-scroll2.js.map

@@ -0,0 +1 @@
+{"file":"ic-horizontal-scroll2.js","mappings":"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","names":[],"sources":["src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n\n  display: flex;\n  max-width: 100%;\n}\n\n:host(.ic-horizontal-scroll-light) {\n  --splitter-color: var(--ic-color-keyline-lighten);\n}\n\n:host(.ic-horizontal-scroll-light) ic-button > svg {\n  color: var(--ic-color-text-action-monochrome-dark);\n}\n\n:host(.ic-horizontal-scroll-dark) {\n  --splitter-color: var(--ic-color-keyline-darken);\n}\n\n:host(.ic-horizontal-scroll-dark) ic-button > svg {\n  color: var(--ic-color-text-action-monochrome-light);\n}\n\n/* Slotted items container element */\n::slotted(*) {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  margin: calc(var(--ic-space-xs) * -1) !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.ic-horizontal-scroll-visible) ::slotted(*) {\n  margin: calc(var(--ic-space-xs) * -1) 0 !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n  display: flex;\n}\n\n.scroll-container-left {\n  margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n  margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n  display: none;\n}\n\n.scroll-arrow {\n  margin: var(--ic-space-xxs) 0;\n}\n\n.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-1px);\n  margin-top: var(--ic-space-xs);\n  border-radius: var(--ic-space-1px);\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n:host(.ic-horizontal-scroll-dark) .disabled ic-button > svg,\n:host(.ic-horizontal-scroll-light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ::slotted(*) {\n    scroll-behavior: auto;\n  }\n}\n","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(\n          this.focusTrigger as keyof HTMLElementEventMap,\n          this.focusHandler\n        );\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(\n          this.focusTrigger as keyof HTMLElementEventMap,\n          this.focusHandler\n        );\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: Event) => {\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"],"version":3}

package/components/ic-input-component-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcInputComponentContainer extends Components.IcInputComponentContainer, HTMLElement {}
+export const IcInputComponentContainer: {
+    prototype: IcInputComponentContainer;
+    new (): IcInputComponentContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-input-component-container.js

@@ -0,0 +1,8 @@
+import { I as InputComponentContainer, d as defineCustomElement$1 } from './ic-input-component-container2.js';
+
+const IcInputComponentContainer = InputComponentContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcInputComponentContainer, defineCustomElement };
+
+//# sourceMappingURL=ic-input-component-container.js.map

package/components/ic-input-component-container.js.map

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

package/components/ic-input-component-container2.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as removeDisabledFalse, e as renderDynamicChildSlots, B as slotHasContent, A as IcInformationStatus } from './helpers.js';
+import { s as successIcon } from './constants.js';
+
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%;max-width:none}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\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly{height:auto;background:transparent}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-space-xxxs) solid\n    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-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed))}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-space-xxxs) solid\n    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-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed))}ic-input-component-container.ic-input-component-container-success{border:var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-space-xxxs) solid\n    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-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed))}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl);min-height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl);min-height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container .inline-success>svg{fill:var(--ic-input-component-container-success-icon-inline-color);height:1.25rem;width:1.25rem}ic-input-component-container: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-monochrome-hover-dark)}ic-input-component-container:focus{border:var(--ic-border-pressed);border-color:var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  )}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}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 GrayText}}@media screen AND (max-width: 22rem){ic-input-component-container{max-width:var(--input-width, 20rem);width:100%}}@media (prefers-reduced-motion: reduce){ic-input-component-container,.focus-indicator{transition:none}}";
+const IcInputComponentContainerStyle0 = icInputComponentContainerCss;
+
+const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComponentContainer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         *  If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         *  If `true`, the input component container will fill the width of the container it is in.
+         */
+        this.fullWidth = false;
+        /**
+         *  If `true`, the input component container will allow for multiple lines.
+         */
+        this.multiLine = false;
+        /**
+         *  If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+        /**
+         * The size of the input component container component.
+         */
+        this.size = "medium";
+        /**
+         *  If `true`, the validation will display inline.
+         */
+        this.validationInline = false;
+        /**
+         * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.validationStatus = "";
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        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, validationInline, } = this;
+        return (h(Host, { key: '89ddddb905fb2169968a978feb1db2ddaed8fb0c', class: {
+                [`ic-input-component-container-${size}`]: true,
+                [`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", { key: 'e26afb0f2d7b78a1ca9b1ec3976b8e8fa3b2f3fe', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'd314cf7303bab259eb78c85f38b943d758e6d874', class: "icon-container" }, h("slot", { key: '128cdd1e6a537838dc490b33e2a657e613d6c969', name: "left-icon" }))), h("slot", { key: '9d5fd3e67c6658f988a335e080b6e7141d1c8712' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '119749d6c32bebe9c8540fa7fadb28e7387428e5', class: "inline-success", innerHTML: successIcon })))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
+    static get style() { return IcInputComponentContainerStyle0; }
+}, [4, "ic-input-component-container", {
+        "disabled": [4],
+        "fullWidth": [4, "full-width"],
+        "multiLine": [4, "multi-line"],
+        "readonly": [4],
+        "size": [1],
+        "validationInline": [4, "validation-inline"],
+        "validationStatus": [1, "validation-status"]
+    }, undefined, {
+        "disabled": ["watchDisabledHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-input-component-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-input-component-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputComponentContainer);
+            }
+            break;
+    } });
+}
+
+export { InputComponentContainer as I, defineCustomElement as d };
+
+//# sourceMappingURL=ic-input-component-container2.js.map

package/components/ic-input-component-container2.js.map

@@ -0,0 +1 @@
+{"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,62KAA62K,CAAC;AACn5K,wCAAe,4BAA4B;;MCoB9B,uBAAuB;IAJpC;;;;;;QAWU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,qBAAgB,GAAgC,EAAE,CAAC;KAqD5D;IArFC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,GAAG,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,GACjD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,wCAAwC,EAAE,CAAC,CAAC,SAAS;gBACrD,yCAAyC,EAAE,CAAC,CAAC,SAAS;aACvD,mBACc,QAAQ,GAAG,MAAM,GAAG,IAAI,IAEvC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KACnC,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,8DAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,6DAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n  /**\n   * @prop --border-color: Border colour of the input component container\n   * @prop --border-color-hover: Border colour of the input component container on hover\n   * @prop --border-color-pressed: Border colour of the input component container when pressed\n   * @prop --border-color-disabled: Border colour of the input component container when disabled\n   * @prop --border-color-error: Border colour of the error variant for input component container\n   * @prop --border-color-error-hover: Border colour of the error hover variant for input component container\n   * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container\n   * @prop --border-color-warning: Border colour of the warning variant for input component container\n   * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container\n   * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container\n   * @prop --border-color-success: Border colour of the success variant for input component container\n   * @prop --border-color-success-hover: Border colour of the success hover variant for input component container\n   * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container\n   */\n\n  display: flex;\n  border: var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-slow);\n  height: 2.5rem;\n  min-height: 2.5rem;\n  width: var(--input-width, 20rem);\n  padding: var(--ic-space-1px);\n  background-color: var(--input-bg-color, var(--ic-color-background-primary));\n  box-sizing: border-box;\n  fill: var(--ic-architectural-400);\n  outline: none;\n}\n\nic-input-component-container.ic-input-component-container-full-width {\n  width: 100%;\n  max-width: none;\n}\n\nic-input-component-container.ic-input-component-container-disabled,\nic-input-component-container.ic-input-component-container-disabled:hover {\n  border: var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled));\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly {\n  height: auto;\n  background: transparent;\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-readonly:hover {\n  border: none;\n  padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));\n  padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error:hover {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-error-hover, var(--ic-color-border-error-hover));\n}\n\nic-input-component-container.ic-input-component-container-error:focus-within {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed));\n}\n\nic-input-component-container.ic-input-component-container-warning {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));\n  padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-warning:hover {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-warning-hover, var(--ic-color-border-warning-hover));\n}\n\nic-input-component-container.ic-input-component-container-warning:focus-within {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));\n}\n\nic-input-component-container.ic-input-component-container-success {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));\n  padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-success:hover {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-success-hover, var(--ic-color-border-success-hover));\n}\n\nic-input-component-container.ic-input-component-container-success:focus-within {\n  border: var(--ic-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed));\n}\n\nic-input-component-container.ic-input-component-container-small {\n  height: var(--ic-space-xl);\n  min-height: var(--ic-space-xl);\n}\n\nic-input-component-container.ic-input-component-container-large {\n  height: var(--ic-space-xxl);\n  min-height: var(--ic-space-xxl);\n}\n\nic-input-component-container.ic-input-component-container-multiline {\n  height: auto;\n}\n\nic-input-component-container .icon-container {\n  margin-top: var(--ic-space-xxs);\n  margin-left: 0.438rem;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container.ic-input-component-container-multiline\n  .icon-container,\nic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small\n  .icon-container {\n  margin-top: 0.375rem;\n  display: block;\n}\n\nic-input-component-container.ic-input-component-container-readonly\n  .icon-container {\n  margin-left: -0.313rem;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n  ::placeholder {\n  display: none;\n}\n\nic-input-component-container .inline-success {\n  margin: var(--ic-space-xs) 0.375rem;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-input-component-container-success-icon-inline-color);\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-component-container:hover {\n  border: var(--ic-input-component-container-hover-border);\n  border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n  color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n  border: var(--ic-border-pressed);\n  border-color: var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  );\n}\n\n.focus-indicator {\n  display: flex;\n  width: 100%;\n  margin: -0.125rem;\n  padding: 0.125rem;\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n  box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n  box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  ic-input-component-container,\n  .focus-indicator {\n    transition: none;\n  }\n\n  ic-input-component-container:focus-within {\n    border: var(--ic-border-width) solid Highlight;\n    outline: 0.125rem solid Highlight;\n  }\n\n  ic-input-component-container.ic-input-component-container-disabled,\n  ic-input-component-container.ic-input-component-container-disabled:hover {\n    border: var(--ic-border-width) dashed GrayText;\n  }\n}\n\n/* Breakpoint value chosen as it's a small amount bigger than the input's default width */\n@media screen AND (max-width: 22rem) {\n  ic-input-component-container {\n    max-width: var(--input-width, 20rem);\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ic-input-component-container,\n  .focus-indicator {\n    transition: none;\n  }\n}\n","import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  private hostMutationObserver: MutationObserver;\n  @Element() el: HTMLIcInputComponentContainerElement;\n\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   *  If `true`, the input component container will fill the width of the container it is in.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine?: boolean = false;\n\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * The size of the input component container component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline?: boolean = false;\n\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"left-icon\", this)\n    );\n    this.hostMutationObserver.observe(this.el, { childList: true });\n  }\n\n  render() {\n    const {\n      size,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      validationInline,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-input-component-container-${size}`]: true,\n          [`ic-input-component-container-${validationStatus}`]:\n            validationStatus !== \"\" && !disabled && !readonly,\n          \"ic-input-component-container-disabled\": !!disabled,\n          \"ic-input-component-container-readonly\": !!readonly,\n          \"ic-input-component-container-multiline\": !!multiLine,\n          \"ic-input-component-container-full-width\": !!fullWidth,\n        }}\n        aria-disabled={disabled ? \"true\" : null}\n      >\n        <div class=\"focus-indicator\">\n          {slotHasContent(this.el, \"left-icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span class=\"inline-success\" innerHTML={successIcon} />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-input-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcInputContainer extends Components.IcInputContainer, HTMLElement {}
+export const IcInputContainer: {
+    prototype: IcInputContainer;
+    new (): IcInputContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-input-container.js

@@ -0,0 +1,8 @@
+import { I as InputContainer, d as defineCustomElement$1 } from './ic-input-container2.js';
+
+const IcInputContainer = InputContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcInputContainer, defineCustomElement };
+
+//# sourceMappingURL=ic-input-container.js.map

package/components/ic-input-container.js.map

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

package/components/ic-input-container2.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const icInputContainerCss = "ic-input-container .component-container{display:flex;flex-direction:column}";
+const IcInputContainerStyle0 = icInputContainerCss;
+
+const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+    }
+    render() {
+        return (h(Host, { key: 'f8a56b6ed7706188078d28f8fd7216c046fe32a2' }, h("div", { key: 'f7d41111869769c9ab8e5ad72ee936827ef36c91', class: {
+                ["component-container"]: true,
+                ["disabled"]: !!this.disabled,
+                ["readonly"]: !!this.readonly,
+            } }, h("slot", { key: '42fc42d0f226b11b93ab910c00ed25c027ebb549' }))));
+    }
+    static get style() { return IcInputContainerStyle0; }
+}, [4, "ic-input-container", {
+        "disabled": [4],
+        "readonly": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-input-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-input-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputContainer);
+            }
+            break;
+    } });
+}
+
+export { InputContainer as I, defineCustomElement as d };
+
+//# sourceMappingURL=ic-input-container2.js.map

package/components/ic-input-container2.js.map

@@ -0,0 +1 @@
+{"file":"ic-input-container2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6EAA6E,CAAC;AAC1G,+BAAe,mBAAmB;;MCKrB,cAAc;IAJ3B;;;;;;QAQU,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,aAAQ,GAAa,KAAK,CAAC;KAiBpC;IAfC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,CAAC,qBAAqB,GAAG,IAAI;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;aAC9B,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx"],"sourcesContent":["ic-input-container .component-container {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: !!this.disabled,\n            [\"readonly\"]: !!this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-input-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcInputLabel extends Components.IcInputLabel, HTMLElement {}
+export const IcInputLabel: {
+    prototype: IcInputLabel;
+    new (): IcInputLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-input-label.js

@@ -0,0 +1,8 @@
+import { I as InputLabel, d as defineCustomElement$1 } from './ic-input-label2.js';
+
+const IcInputLabel = InputLabel;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcInputLabel, defineCustomElement };
+
+//# sourceMappingURL=ic-input-label.js.map

package/components/ic-input-label.js.map

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