@ukic/web-components 2.0.0-alpha.121

package/dist/collection/components/ic-hero/ic-hero.js

@@ -0,0 +1,273 @@
+import { Host, h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+import { slotHasContent, getThemeForegroundColor, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+/**
+ * @slot heading - Content will be rendered in the title area, in place of the heading.
+ * @slot subheading - Content will be rendered in the title area, in place of the subheading.
+ * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.
+ * @slot right-content - Content will be rendered in the right content area.
+ */
+export class Hero {
+  constructor() {
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.secondaryHeading = undefined;
+    this.secondarySubheading = undefined;
+    this.backgroundImage = undefined;
+    this.disableBackgroundParallax = false;
+    this.aligned = "left";
+    this.contentAligned = "left";
+    this.dense = false;
+    this.rightContent = false;
+    this.scrollFactor = "right -100px";
+    this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
+    this.foregroundColor = getThemeForegroundColor();
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
+  }
+  doScroll() {
+    if (this.disableBackgroundParallax) {
+      return;
+    }
+    const scrolltotop = document.scrollingElement.scrollTop;
+    const factor = 0.4;
+    const y = -100 + scrolltotop * factor;
+    this.scrollFactor = "right " + y + "px";
+  }
+  componentWillLoad() {
+    this.rightContent = slotHasContent(this.el, "right-content");
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
+  }
+  componentWillRender() {
+    this.rightContent = slotHasContent(this.el, "right-content");
+  }
+  render() {
+    const { aligned, dense, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
+    let style = {};
+    if (backgroundImage !== undefined) {
+      style = {
+        "background-image": "url(" + backgroundImage + ")",
+        "background-position": scrollFactor,
+      };
+    }
+    return (h(Host, { class: {
+        [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+        ["has-background-image"]: backgroundImage !== undefined,
+      }, style: style }, h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { class: {
+        ["left-container"]: true,
+        ["left-container-full-width"]: this.leftContentFullWidth,
+      } }, h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: dense ? "h2" : "h1" }, heading))), h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading))), h("div", { class: "interaction-container" }, h("slot", { name: "interaction" }))), (secondaryHeading !== undefined || this.rightContent) && (h("div", { class: "right-container" }, h("slot", { name: "right-content" }, secondaryHeading && (h("div", { class: "secondary-container" }, h("div", { class: "secondary-heading" }, h("ic-typography", { variant: "h4" }, secondaryHeading)), h("div", { class: "secondary-subheading" }, h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+  }
+  static get is() { return "ic-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-hero.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-hero.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading of the hero"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Description for the hero"
+        },
+        "attribute": "subheading",
+        "reflect": false
+      },
+      "secondaryHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional secondary heading, replaced by slotted right content"
+        },
+        "attribute": "secondary-heading",
+        "reflect": false
+      },
+      "secondarySubheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional secondary subheading, replaced by slotted right content"
+        },
+        "attribute": "secondary-subheading",
+        "reflect": false
+      },
+      "backgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional background image"
+        },
+        "attribute": "background-image",
+        "reflect": false
+      },
+      "disableBackgroundParallax": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the background image (if set) scrolls using a parallax effect."
+        },
+        "attribute": "disable-background-parallax",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "aligned": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcAlignment",
+          "resolved": "\"center\" | \"full-width\" | \"left\"",
+          "references": {
+            "IcAlignment": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the hero content"
+        },
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
+      },
+      "contentAligned": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcHeroContentAlignments",
+          "resolved": "\"center\" | \"left\"",
+          "references": {
+            "IcHeroContentAlignments": {
+              "location": "import",
+              "path": "./ic-hero.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the hero content"
+        },
+        "attribute": "content-aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
+      },
+      "dense": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alter styling for use with dense content/pages"
+        },
+        "attribute": "dense",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rightContent": {},
+      "scrollFactor": {},
+      "leftContentFullWidth": {},
+      "foregroundColor": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "icThemeChange",
+        "method": "themeChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "scroll",
+        "method": "doScroll",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=ic-hero.js.map

package/dist/collection/components/ic-hero/ic-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot right-content - Content will be rendered in the right content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Description for the hero\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Optional secondary heading, replaced by slotted right content\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * Optional secondary subheading, replaced by slotted right content\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * Optional background image\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Whether the background image (if set) scrolls using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * Alter styling for use with dense content/pages\n   */\n  @Prop() dense: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  render() {\n    const {\n      aligned,\n      dense,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography variant={dense ? \"h2\" : \"h1\"}>\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"subtitle-small\">\n                  {subheading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"right-content\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-hero/ic-hero.test.a11y.js

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("ic-hero", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-hero heading="Test" subheading="Test"></ic-hero>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-hero.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,sDAAsD,CACvD,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"ic-hero\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-hero heading=\"Test\" subheading=\"Test\"></ic-hero>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-hero/ic-hero.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-hero.types.js.map

package/dist/collection/components/ic-hero/ic-hero.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.types.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcHeroContentAlignments = \"left\" | \"center\";\n"]}

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

@@ -0,0 +1,118 @@
+ic-input-component-container {
+  /**
+   * @prop --border-color: Border colour of the input component container
+   */
+
+  display: flex;
+  border: 1px solid var(--border-color, var(--ic-architectural-400));
+  border-radius: var(--ic-border-radius);
+  transition: var(--ic-easing-transition-slow);
+  height: 40px;
+  width: var(--input-width, 320px);
+  padding: 1px;
+  background-color: var(--ic-architectural-white);
+  box-sizing: border-box;
+  position: relative;
+  fill: var(--ic-architectural-400);
+}
+
+ic-input-component-container.fullwidth {
+  width: 100%;
+}
+
+ic-input-component-container.disabled,
+ic-input-component-container.disabled:hover {
+  border: 1px dashed var(--ic-architectural-200);
+}
+
+ic-input-component-container.readonly,
+ic-input-component-container.readonly:hover {
+  border: none;
+  padding: 0;
+}
+
+ic-input-component-container.error {
+  border: var(--ic-space-xxxs) solid var(--ic-status-error);
+  padding: 0;
+}
+
+ic-input-component-container.warning {
+  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);
+  padding: 0;
+}
+
+ic-input-component-container.success {
+  border: var(--ic-space-xxxs) solid var(--ic-status-success);
+  padding: 0;
+}
+
+ic-input-component-container.dense {
+  height: var(--ic-space-xl);
+}
+
+ic-input-component-container.multiline {
+  height: auto;
+}
+
+ic-input-component-container .icon-container {
+  margin-top: var(--ic-space-xxs);
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+}
+
+ic-input-component-container.multiline .icon-container,
+ic-input-component-container.multiline.dense .icon-container {
+  margin-top: 6px;
+  display: block;
+}
+
+ic-input-component-container.readonly .icon-container {
+  margin-left: -5px;
+}
+
+ic-input-component-container.disabled ::-moz-placeholder {
+  display: none;
+}
+
+ic-input-component-container.disabled ::placeholder {
+  display: none;
+}
+
+ic-input-component-container .inline-success {
+  margin: var(--ic-space-xs) 6px;
+  display: flex;
+  align-items: center;
+}
+
+ic-input-component-container.dark:hover {
+  --border-color: var(--ic-architectural-400);
+}
+
+ic-input-component-container .inline-success > svg {
+  fill: var(--ic-status-success);
+}
+
+ic-input-component-container:hover {
+  border-color: var(--ic-action-dark-hover);
+  color: var(--ic-action-dark-hover);
+
+  --expand-icon-hover: var(--ic-action-dark-hover);
+}
+
+.focus-indicator {
+  display: flex;
+  width: 100%;
+  margin: -3px;
+  padding: 3px;
+  border-radius: var(--ic-border-radius);
+  transition: var(--ic-easing-transition-fast);
+}
+
+.focus-indicator:focus-within {
+  box-shadow: var(--ic-border-focus);
+}
+
+.focus-indicator.dark:focus-within {
+  box-shadow: var(--ic-border-focus);
+}

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

@@ -0,0 +1,208 @@
+import { Host, h } from "@stencil/core";
+import { IcInformationStatus, } from "../../utils/types";
+import successIcon from "../../assets/success-icon.svg";
+import { isSlotUsed } from "../../utils/helpers";
+/**
+ * @slot left-icon - Content will be placed to the left of the input.
+ */
+export class InputComponentContainer {
+  constructor() {
+    this.disabled = false;
+    this.readonly = false;
+    this.validationStatus = "";
+    this.dense = false;
+    this.multiLine = false;
+    this.validationInline = false;
+    this.dark = false;
+    this.fullWidth = false;
+  }
+  render() {
+    const { dense, validationStatus, disabled, readonly, multiLine, fullWidth, dark, validationInline, } = this;
+    const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
+      ? true
+      : false;
+    return (h(Host, { class: {
+        ["dense"]: dense,
+        [validationStatus]: hasValidationStatus,
+        ["disabled"]: disabled,
+        ["readonly"]: readonly,
+        ["multiline"]: multiLine,
+        ["fullwidth"]: fullWidth,
+        ["dark"]: dark,
+      } }, h("div", { class: {
+        "focus-indicator": true,
+        dark: dark,
+      } }, isSlotUsed(this.host, "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 })))));
+  }
+  static get is() { return "ic-input-component-container"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-input-component-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-input-component-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "readonly"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validationStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "validationStatus"
+        },
+        "attribute": "validation-status",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "dense": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "dense"
+        },
+        "attribute": "dense",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "multiLine"
+        },
+        "attribute": "multi-line",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validationInline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "validationInline"
+        },
+        "attribute": "validation-inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the dark variant of the input-component-container focus indicator should be displayed."
+        },
+        "attribute": "dark",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true then fill width of container"
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=ic-input-component-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;oBAIN,KAAK;oBAIL,KAAK;4BAIsB,EAAE;iBAIhC,KAAK;qBAID,KAAK;4BAIE,KAAK;gBAKhB,KAAK;qBAKD,KAAK;;EAIlC,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,gBAAgB,GACjB,GAAG,IAAI,CAAC;IACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;MAC9D,CAAC,CAAC,IAAI;MACN,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,KAAK;QAChB,CAAC,gBAAgB,CAAC,EAAE,mBAAmB;QACvC,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,MAAM,CAAC,EAAE,IAAI;OACf;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,IAAI,EAAE,IAAI;SACX;QAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CACrC,WACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB;UAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;QACD,eAAa;QAEZ,gBAAgB;UACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } 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  /**\n   * disabled\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * readonly\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * validationStatus\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * dense\n   */\n  @Prop() dense: boolean = false;\n  /**\n   * multiLine\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   * validationInline\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      dense,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"dense\"]: dense,\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark,\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark,\n          }}\n        >\n          {isSlotUsed(this.host, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-container/ic-input-container.css

@@ -0,0 +1,5 @@
+ic-input-container .component-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}