@ukic/web-components 2.1.0-beta.8 → 2.1.0-beta.9

package/dist/components/ic-checkbox.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox.js","mappings":"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","names":[],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n}\n\n:host([small]) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: 0.063rem solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: 0.063rem solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: 0.063rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: 0.063rem solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: 0.063rem dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  top: 0.688rem;\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: true,\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox.js","mappings":"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","names":[],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n}\n\n:host([small]) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: 0.063rem solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: 0.063rem solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: 0.063rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: 0.063rem solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: 0.063rem dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  top: 0.688rem;\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-chip.js

@@ -66,9 +66,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ["dismiss-icon"]: true,
       }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return icChipCss; }
-}, [1, "ic-chip", {
+}, [17, "ic-chip", {
     "label": [1],
     "appearance": [1],
     "size": [1],

package/dist/components/ic-chip.js.map

@@ -1 +1 @@
-{"file":"ic-chip.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0jJAA0jJ;;MC0B/jJ,IAAI;;;;;;;IA2CP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;sBA5CsC,QAAQ;gBAInB,SAAS;uBAIN,KAAK;oBAIR,KAAK;mBAEN,IAAI;qBAEF,KAAK;;EAGnC,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EA6BD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1C,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACL,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEb,gBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACV,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 0.875rem;\n  border-radius: 5rem;\n  text-align: center;\n  align-items: center;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: 0.063rem solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 0.063rem);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 0.063rem);\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - 0.063rem);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 0.063rem);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 0.063rem);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-chip.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0jJAA0jJ;;MC4B/jJ,IAAI;;;;;;;IA2CP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;sBA5CsC,QAAQ;gBAInB,SAAS;uBAIN,KAAK;oBAIR,KAAK;mBAEN,IAAI;qBAEF,KAAK;;EAGnC,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EA6BD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1C,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACL,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEb,gBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACV,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 0.875rem;\n  border-radius: 5rem;\n  text-align: center;\n  align-items: center;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: 0.063rem solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 0.063rem);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 0.063rem);\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - 0.063rem);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 0.063rem);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 0.063rem);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-classification-banner.js.map

@@ -1 +1 @@
-{"file":"ic-classification-banner.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,m0GAAm0G;;ACGr2G,MAAM,kBAAkB,GAAG;EACzB,OAAO,EAAE,4BAA4B;EACrC,QAAQ,EAAE,UAAU;EACpB,oBAAoB,EAAE,oBAAoB;EAC1C,MAAM,EAAE,QAAQ;EAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;MAOW,oBAAoB;;;;;+BAIQ,EAAE;0BAIO,SAAS;mBAI9B,IAAI;kBAIJ,KAAK;gBAIP,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAE5E,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,GAAG,MAAM,EAAE,IACjC,4BACa,oBAAoB,EAC/B,KAAK,EAAE;QACL,CAAC,uBAAuB,GAAG,IAAI;QAC/B,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc;OACtC,IAEA,cAAc,KAAK,SAAS,IAC3B,YAAM,KAAK,EAAC,WAAW,+CACmB,GAAG,CACtC,IACL,IAAI,EACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;QACzB,kBAAkB,CAAC,cAAc,CAAC;QAClC,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE;iBACrB,OAAO,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE;iBAC7B,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,KAAK,EAAE,GAAG,mBAAmB,GAAG,EAAE,EAAE,CAC9C,CACT,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","./src/components/ic-classification-banner/ic-classification-banner.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n}\n\n:host(.inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-classification-not-set);\n  color: var(--ic-classification-not-set-foreground);\n}\n\n.official,\n.official-sensitive {\n  background-color: var(--ic-classification-official);\n  color: var(--ic-classification-official-foreground);\n}\n\n.secret {\n  background-color: var(--ic-classification-secret);\n  color: var(--ic-classification-secret-foreground);\n}\n\n.top-secret {\n  background-color: var(--ic-classification-top-secret);\n  color: var(--ic-classification-top-secret-foreground);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-hc-border);\n  }\n}\n","import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { classification, inline, country, upTo, additionalSelectors } = this;\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country !== \"\" ? country : \"\"} \n               ${classificationText[classification]} \n               ${additionalSelectors !== \"\" ? additionalSelectors : \"\"}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-classification-banner.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,m0GAAm0G;;ACGr2G,MAAM,kBAAkB,GAAG;EACzB,OAAO,EAAE,4BAA4B;EACrC,QAAQ,EAAE,UAAU;EACpB,oBAAoB,EAAE,oBAAoB;EAC1C,MAAM,EAAE,QAAQ;EAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;MAOW,oBAAoB;;;;;+BAIQ,EAAE;0BAIO,SAAS;mBAI9B,IAAI;kBAIJ,KAAK;gBAIP,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAE5E,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,GAAG,MAAM,EAAE,IACjC,4BACa,oBAAoB,EAC/B,KAAK,EAAE;QACL,CAAC,uBAAuB,GAAG,IAAI;QAC/B,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc;OACtC,IAEA,cAAc,KAAK,SAAS,IAC3B,YAAM,KAAK,EAAC,WAAW,+CACmB,GAAG,CACtC,IACL,IAAI,EACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;QACzB,kBAAkB,CAAC,cAAc,CAAC;QAClC,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE;iBACrB,OAAO,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE;iBAC7B,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,KAAK,EAAE,GAAG,mBAAmB,GAAG,EAAE,EAAE,CAC9C,CACT,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","./src/components/ic-classification-banner/ic-classification-banner.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-classification-banner: z-index of classification banner\n */\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n}\n\n:host(.inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-classification-not-set);\n  color: var(--ic-classification-not-set-foreground);\n}\n\n.official,\n.official-sensitive {\n  background-color: var(--ic-classification-official);\n  color: var(--ic-classification-official-foreground);\n}\n\n.secret {\n  background-color: var(--ic-classification-secret);\n  color: var(--ic-classification-secret-foreground);\n}\n\n.top-secret {\n  background-color: var(--ic-classification-top-secret);\n  color: var(--ic-classification-top-secret-foreground);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-hc-border);\n  }\n}\n","import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { classification, inline, country, upTo, additionalSelectors } = this;\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country !== \"\" ? country : \"\"} \n               ${classificationText[classification]} \n               ${additionalSelectors !== \"\" ? additionalSelectors : \"\"}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-footer-link-group.js

@@ -60,9 +60,10 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         [`footer-link-group-${this.dropdownIconStyle}`]: true,
       }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-haspopup": "true", "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links" }, h("slot", null))))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return icFooterLinkGroupCss; }
-}, [1, "ic-footer-link-group", {
+}, [17, "ic-footer-link-group", {
     "groupTitle": [1, "group-title"],
     "small": [32],
     "expanded": [32],

package/dist/components/ic-footer-link-group.js.map

@@ -1 +1 @@
-{"file":"ic-footer-link-group.js","mappings":"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","names":[],"sources":["./src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","./src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n  --footer-link-group-margin-right: 5.938rem;\n  --footer-link-group-border-bottom: 0 solid transparent;\n  --footer-link-group-title-margin-top: 0;\n  --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-margin-right: 0;\n  --footer-link-group-title-margin-top: var(--ic-space-md);\n  --footer-link-group-title-margin-bottom: var(--ic-space-md);\n  --footer-link-group-links-padding-left: var(--ic-space-md);\n  --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n  margin-right: var(--footer-link-group-margin-right);\n  border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n  background-color: var(--ic-action-light-bg-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n  background-color: var(--ic-action-dark-bg-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n  background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.footer-link-group-title {\n  margin-top: var(--footer-link-group-title-margin-top);\n  margin-bottom: var(--footer-link-group-title-margin-bottom);\n  flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n  fill: white !important;\n}\n\n.footer-link-group-links {\n  display: flex;\n  flex-direction: column;\n}\n\n.footer-link-group-header {\n  display: flex;\n  align-items: center;\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: true,\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  @State() small: boolean = false;\n\n  @State() expanded: boolean = false;\n\n  @State() dropdownIconStyle = getThemeForegroundColor();\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-footer-link-group.js","mappings":"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","names":[],"sources":["./src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","./src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n  --footer-link-group-margin-right: 5.938rem;\n  --footer-link-group-border-bottom: 0 solid transparent;\n  --footer-link-group-title-margin-top: 0;\n  --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-margin-right: 0;\n  --footer-link-group-title-margin-top: var(--ic-space-md);\n  --footer-link-group-title-margin-bottom: var(--ic-space-md);\n  --footer-link-group-links-padding-left: var(--ic-space-md);\n  --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n  margin-right: var(--footer-link-group-margin-right);\n  border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n  background-color: var(--ic-action-light-bg-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n  background-color: var(--ic-action-dark-bg-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n  background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.footer-link-group-title {\n  margin-top: var(--footer-link-group-title-margin-top);\n  margin-bottom: var(--footer-link-group-title-margin-bottom);\n  flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n  fill: white !important;\n}\n\n.footer-link-group-links {\n  display: flex;\n  flex-direction: column;\n}\n\n.footer-link-group-header {\n  display: flex;\n  align-items: center;\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  @State() small: boolean = false;\n\n  @State() expanded: boolean = false;\n\n  @State() dropdownIconStyle = getThemeForegroundColor();\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-footer-link.js

@@ -48,9 +48,10 @@ const FooterLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [`footer-link-${this.foregroundColor}`]: true,
       } }, h("a", { href: href }, h("slot", null))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return icFooterLinkCss; }
-}, [1, "ic-footer-link", {
+}, [17, "ic-footer-link", {
     "href": [1],
     "footerConfig": [32],
     "deviceSize": [32],

package/dist/components/ic-footer-link.js.map

@@ -1 +1 @@
-{"file":"ic-footer-link.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,q4KAAq4K;;MCmBh5K,UAAU;;;;;gBAMG,IAAI;wBAEU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;sBAExC,YAAY,CAAC,EAAE;2BAEC,uBAAuB,EAAE;;EAE/D,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;GACF;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC/C;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC/C;EAED,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;OAC9C,IAED,SAAG,IAAI,EAAE,IAAI,IACX,eAAQ,CACN,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","./src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n/* Link styling */\n\n:host(.footer-link) a,\n:host(.footer-link) a ::slotted(a) {\n  display: block;\n  font-weight: var(--ic-font-weight-bold);\n  color: inherit;\n  width: fit-content;\n  font-size: var(--ic-font-size-regular);\n}\n\n:host(.footer-link) a:link,\n:host(.footer-link) a ::slotted(a:link) {\n  color: inherit;\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.footer-link) a:link > ::slotted(svg),\n:host(.footer-link) a:link > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link > ::slotted(img)) {\n  padding: var(--ic-space-xxxs);\n  pointer-events: none;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/*\nThere's an apparent defect in Chrome that means this isn't always re-rendered if changed.\nNot an issue in Safari. Line 73-79 implement the same function but less clean.\n\na:link > ::slotted(svg) ,\na:link:visited > ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n*/\n\n:host(.footer-link-light) ::slotted(svg) {\n  fill: var(--ic-architectural-white);\n}\n\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-architectural-black);\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:hover),\n:host(.footer-link) a ::slotted(a:link:focus) {\n  text-decoration-line: underline;\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a ::slotted(a:link:hover) {\n  outline: none;\n}\n\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.footer-link) a:link:focus > ::slotted(svg),\n:host(.footer-link) a:link:focus > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(img)) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.footer-link) a:focus,\n:host(.footer-link) a ::slotted(a:focus) {\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.footer-link) a:link:active,\n:host(.footer-link) a:link:focus:active,\n:host(.footer-link) a:link:visited:active,\n:host(.footer-link) a ::slotted(a:link:active),\n:host(.footer-link) a ::slotted(a:link:focus:active),\n:host(.footer-link) a ::slotted(a:link:visited:active) {\n  color: inherit;\n  text-decoration: none;\n}\n\n:host(.footer-link) a:hover,\n:host(.footer-link) a ::slotted(a:hover) {\n  text-decoration: none;\n}\n\n@media screen and (min-width: 769px) {\n  :host(.footer-link.footer-link-ungrouped-sparse:last-of-type) {\n    margin-right: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: true,\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  render() {\n    const { footerConfig, href } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a href={href}>\n          <slot />\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-footer-link.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,q4KAAq4K;;MCqBh5K,UAAU;;;;;gBAMG,IAAI;wBAEU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;sBAExC,YAAY,CAAC,EAAE;2BAEC,uBAAuB,EAAE;;EAE/D,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;GACF;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC/C;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC/C;EAED,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;OAC9C,IAED,SAAG,IAAI,EAAE,IAAI,IACX,eAAQ,CACN,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","./src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n/* Link styling */\n\n:host(.footer-link) a,\n:host(.footer-link) a ::slotted(a) {\n  display: block;\n  font-weight: var(--ic-font-weight-bold);\n  color: inherit;\n  width: fit-content;\n  font-size: var(--ic-font-size-regular);\n}\n\n:host(.footer-link) a:link,\n:host(.footer-link) a ::slotted(a:link) {\n  color: inherit;\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.footer-link) a:link > ::slotted(svg),\n:host(.footer-link) a:link > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link > ::slotted(img)) {\n  padding: var(--ic-space-xxxs);\n  pointer-events: none;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/*\nThere's an apparent defect in Chrome that means this isn't always re-rendered if changed.\nNot an issue in Safari. Line 73-79 implement the same function but less clean.\n\na:link > ::slotted(svg) ,\na:link:visited > ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n*/\n\n:host(.footer-link-light) ::slotted(svg) {\n  fill: var(--ic-architectural-white);\n}\n\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-architectural-black);\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:hover),\n:host(.footer-link) a ::slotted(a:link:focus) {\n  text-decoration-line: underline;\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a ::slotted(a:link:hover) {\n  outline: none;\n}\n\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.footer-link) a:link:focus > ::slotted(svg),\n:host(.footer-link) a:link:focus > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(img)) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.footer-link) a:focus,\n:host(.footer-link) a ::slotted(a:focus) {\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.footer-link) a:link:active,\n:host(.footer-link) a:link:focus:active,\n:host(.footer-link) a:link:visited:active,\n:host(.footer-link) a ::slotted(a:link:active),\n:host(.footer-link) a ::slotted(a:link:focus:active),\n:host(.footer-link) a ::slotted(a:link:visited:active) {\n  color: inherit;\n  text-decoration: none;\n}\n\n:host(.footer-link) a:hover,\n:host(.footer-link) a ::slotted(a:hover) {\n  text-decoration: none;\n}\n\n@media screen and (min-width: 769px) {\n  :host(.footer-link.footer-link-ungrouped-sparse:last-of-type) {\n    margin-right: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  render() {\n    const { footerConfig, href } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a href={href}>\n          <slot />\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-horizontal-scroll.d.ts

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

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

@@ -0,0 +1,8 @@
+import { H as HorizontalScroll, d as defineCustomElement$1 } from './ic-horizontal-scroll2.js';
+
+const IcHorizontalScroll = HorizontalScroll;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcHorizontalScroll, defineCustomElement };
+
+//# sourceMappingURL=ic-horizontal-scroll.js.map

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

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

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

@@ -0,0 +1,199 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { G as elementOverflowsX, H as getSlotElements, c as checkResizeObserver } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.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(.light){--splitter-color:var(--ic-keyline-lighten-rgb)}:host(.dark){--splitter-color:var(--ic-keyline-darken-rgb)}:host([inline]){margin-bottom:0}::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(.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 var(--ic-space-xs) 0}.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:0.063rem;margin-top:var(--ic-space-xs);border-radius:0.063rem;background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:calc(var(--ic-space-xxs) - 0.063rem)}.scroll-splitter-right{margin-right:calc(var(--ic-space-xxs) - 0.063rem)}.disabled .scroll-splitter-left,.disabled .scroll-splitter-right{background-color:transparent}.disabled ic-button>svg{color:var(--ic-keyline-darken-rgb)}:host(.dark) .disabled ic-button>svg,:host(.light) .disabled ic-button>svg{color:var(--splitter-color) !important}";
+
+const SCROLL_DELAY_MS = 200;
+const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.buttonStateSet = false;
+    this.resizeObserverCallback = () => {
+      if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {
+        this.itemOverflow = false;
+      }
+      else {
+        this.itemOverflow = elementOverflowsX(this.itemsContainerEl);
+      }
+      if (this.itemOverflow) {
+        this.lastItemVisible =
+          this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=
+            this.itemsContainerEl.scrollWidth;
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.itemsContainerEl);
+    };
+    this.scrollLeft = () => {
+      this.scrollItemIntoView(this.getCurrentLeftItem() - 1);
+    };
+    this.scrollRight = () => {
+      this.scrollItemIntoView(this.getCurrentLeftItem() + 1);
+    };
+    this.longScrollRight = () => {
+      this.scrollRight();
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.longScrollLeft = () => {
+      this.scrollLeft();
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.leftArrowMouseDownHandler = (e) => {
+      e.preventDefault();
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.rightArrowMouseDownHandler = (e) => {
+      e.preventDefault();
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.arrowMouseUpHandler = () => {
+      window.clearTimeout(this.scrollDelay);
+    };
+    this.getCurrentLeftItem = () => {
+      const index = this.itemOffsets.findIndex((el) => el > Math.round(this.itemsContainerEl.scrollLeft));
+      return index < 0 ? 0 : index;
+    };
+    this.scrollHandler = () => {
+      window.clearTimeout(this.isScrolling);
+      // Set a timeout to run after scrolling ends
+      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
+    };
+    this.scrollStopped = () => {
+      // If scrollItemIntoView has been called, the button states will already be set
+      // Can't just handle it here as it causes strange jumping behaviour in positioning
+      const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);
+      if (this.buttonStateSet === false) {
+        this.firstItemVisible = scrollLeft === 0;
+        this.lastItemVisible =
+          this.itemsContainerEl.offsetWidth + scrollLeft >=
+            this.itemsContainerEl.scrollWidth;
+      }
+      this.buttonStateSet = false;
+    };
+    this.appearance = "default";
+    this.firstItemVisible = true;
+    this.lastItemVisible = false;
+    this.itemOverflow = false;
+  }
+  /**
+   * @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);
+    }
+  }
+  componentWillLoad() {
+    this.itemsContainerEl = this.el.children[0];
+    this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
+    this.items = (getSlotElements(this.itemsContainerEl) ||
+      Array.from(this.itemsContainerEl.children));
+    this.items.forEach((item) => item.addEventListener("focus", () => this.itemFocusHandler(Array.from(this.items).indexOf(item))));
+  }
+  componentDidLoad() {
+    let runningTotal = 0;
+    this.itemOffsets = this.items.map((item) => {
+      runningTotal += item.offsetWidth;
+      return runningTotal;
+    });
+    checkResizeObserver(this.runResizeObserver);
+    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)
+    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons
+    // - 'mouseup' otherwise not detected and scrolling not stopped
+    const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+    ["mouseup", "mouseleave"].forEach((event) => {
+      scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
+    });
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } = this;
+    return (h(Host, { class: {
+        ["visible"]: itemOverflow,
+        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
+      } }, h("div", { "aria-hidden": "true", class: {
+        ["scroll-container-left"]: true,
+        ["hidden"]: !itemOverflow,
+        ["disabled"]: firstItemVisible,
+      } }, h("ic-button", { class: "scroll-arrow", variant: "icon", "aria-label": "Scroll left", appearance: appearance, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { class: "scroll-splitter-left" })), h("slot", null), h("div", { "aria-hidden": "true", class: {
+        ["scroll-container-right"]: true,
+        ["hidden"]: !itemOverflow,
+        ["disabled"]: lastItemVisible,
+      } }, 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 }))));
+  }
+  get el() { return this; }
+  static get style() { return icHorizontalScrollCss; }
+}, [1, "ic-horizontal-scroll", {
+    "appearance": [1],
+    "firstItemVisible": [32],
+    "lastItemVisible": [32],
+    "itemOverflow": [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/dist/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(.light) {\n  --splitter-color: var(--ic-keyline-lighten-rgb);\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-keyline-darken-rgb);\n}\n\n:host([inline]) {\n  margin-bottom: 0;\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(.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 var(--ic-space-xs) 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: 0.063rem;\n  margin-top: var(--ic-space-xs);\n  border-radius: 0.063rem;\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n.disabled ic-button > svg {\n  color: var(--ic-keyline-darken-rgb);\n}\n\n:host(.dark) .disabled ic-button > svg,\n:host(.light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\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 { 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  @Element() el: HTMLIcHorizontalScrollElement;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  @State() firstItemVisible: boolean = true;\n  @State() lastItemVisible: boolean = false;\n  @State() itemOverflow: boolean = false;\n\n  private itemOffsets: number[];\n  private itemsContainerEl: HTMLElement;\n  private items: HTMLElement[];\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\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  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  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) =>\n      item.addEventListener(\"focus\", () =>\n        this.itemFocusHandler(Array.from(this.items).indexOf(item))\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    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n        >\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        >\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"],"version":3}

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as IcInformationStatus } from './types.js';
-import { s as successIcon } from './success-icon.js';
-import { i as isSlotUsed } from './helpers.js';
+import { i as isSlotUsed, J as successIcon } from './helpers.js';
 
 const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:0.063rem solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:0.063rem;background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:0.063rem 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.small{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:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}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) 0.375rem;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);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.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.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:0.063rem solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:0.063rem dashed GrayText}}";
 

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

@@ -1 +1 @@
-{"file":"ic-input-component-container2.js","mappings":";;;;;AAAA,MAAM,4BAA4B,GAAG,ikFAAikF;;MCgBzlF,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;QAC5D,IAAI;QACJ,KAAK,CAAC;IACZ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,KAAK;QAChB,CAAC,gBAAgB,GAAG,mBAAmB;QACvC,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,WAAW,GAAG,SAAS;QACxB,CAAC,WAAW,GAAG,SAAS;QACxB,CAAC,MAAM,GAAG,IAAI;OACf,IAED,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,IAAI,EAAE,IAAI;OACX,IAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,KACjC,WACE,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAG,IAAI;OACzB,IAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,eAAa,EAEZ,gBAAgB;MACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,YACE,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAG,IAAI;OACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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   */\n\n  display: flex;\n  border: 0.063rem solid 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  width: var(--input-width, 20rem);\n  padding: 0.063rem;\n  background-color: var(--ic-architectural-white);\n  box-sizing: border-box;\n  fill: var(--ic-architectural-400);\n  outline: none;\n}\n\nic-input-component-container.fullwidth {\n  width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n  border: 0.063rem dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n  border: none;\n  padding: 0;\n}\n\nic-input-component-container.error {\n  border: var(--ic-space-xxxs) solid var(--ic-status-error);\n  padding: 0;\n}\n\nic-input-component-container.warning {\n  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n  padding: 0;\n}\n\nic-input-component-container.success {\n  border: var(--ic-space-xxxs) solid var(--ic-status-success);\n  padding: 0;\n}\n\nic-input-component-container.small {\n  height: var(--ic-space-xl);\n}\n\nic-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.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n  margin-top: 0.375rem;\n  display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n  margin-left: -0.313rem;\n}\n\nic-input-component-container.disabled ::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.dark:hover {\n  --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-status-success);\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-component-container:hover {\n  border-color: var(--ic-action-dark-hover);\n  color: var(--ic-action-dark-hover);\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.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: 0.063rem solid Highlight;\n    outline: 0.125rem solid Highlight;\n  }\n\n  ic-input-component-container.disabled,\n  ic-input-component-container.disabled:hover {\n    border: 0.063rem dashed GrayText;\n  }\n}\n","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   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the small styling will be applied to the input component container.\n   */\n  @Prop() small: boolean = false;\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  If `true`, the dark variant of the input component container will be displayed.\n   */\n  @Prop() dark?: boolean = false;\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  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      small,\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          [\"small\"]: small,\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"],"version":3}
+{"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,ikFAAikF;;MCgBzlF,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;QAC5D,IAAI;QACJ,KAAK,CAAC;IACZ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,KAAK;QAChB,CAAC,gBAAgB,GAAG,mBAAmB;QACvC,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,WAAW,GAAG,SAAS;QACxB,CAAC,WAAW,GAAG,SAAS;QACxB,CAAC,MAAM,GAAG,IAAI;OACf,IAED,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,IAAI,EAAE,IAAI;OACX,IAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,KACjC,WACE,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAG,IAAI;OACzB,IAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,eAAa,EAEZ,gBAAgB;MACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,YACE,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAG,IAAI;OACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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   */\n\n  display: flex;\n  border: 0.063rem solid 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  width: var(--input-width, 20rem);\n  padding: 0.063rem;\n  background-color: var(--ic-architectural-white);\n  box-sizing: border-box;\n  fill: var(--ic-architectural-400);\n  outline: none;\n}\n\nic-input-component-container.fullwidth {\n  width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n  border: 0.063rem dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n  border: none;\n  padding: 0;\n}\n\nic-input-component-container.error {\n  border: var(--ic-space-xxxs) solid var(--ic-status-error);\n  padding: 0;\n}\n\nic-input-component-container.warning {\n  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n  padding: 0;\n}\n\nic-input-component-container.success {\n  border: var(--ic-space-xxxs) solid var(--ic-status-success);\n  padding: 0;\n}\n\nic-input-component-container.small {\n  height: var(--ic-space-xl);\n}\n\nic-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.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n  margin-top: 0.375rem;\n  display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n  margin-left: -0.313rem;\n}\n\nic-input-component-container.disabled ::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.dark:hover {\n  --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-status-success);\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-component-container:hover {\n  border-color: var(--ic-action-dark-hover);\n  color: var(--ic-action-dark-hover);\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.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: 0.063rem solid Highlight;\n    outline: 0.125rem solid Highlight;\n  }\n\n  ic-input-component-container.disabled,\n  ic-input-component-container.disabled:hover {\n    border: 0.063rem dashed GrayText;\n  }\n}\n","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   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the small styling will be applied to the input component container.\n   */\n  @Prop() small: boolean = false;\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  If `true`, the dark variant of the input component container will be displayed.\n   */\n  @Prop() dark?: boolean = false;\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  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      small,\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          [\"small\"]: small,\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"],"version":3}