@ukic/web-components 2.1.0-beta.5 → 2.1.0-beta.7

package/dist/core/p-d599cf4f.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"names":["icCardCss","Card","this","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","[object Object]","event","disabled","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","newTheme","foregroundColor","getThemeFromContext","el","IcThemeForegroundEnum","Default","appearance","parentEl","parentElement","tagName","clickable","parentIsAnchorTag","classList","add","addEventListener","removeEventListener","onComponentRequiredPropUndefined","prop","heading","propName","expandable","message","href","hreflang","referrerpolicy","rel","subheading","target","fullWidth","Component","undefined","attrs","hrefLang","referrerPolicy","h","Object","assign","class","Dark","tabindex","aria-disabled","isSlotUsed","name","variant","disableTooltip","aria-label","aria-expanded","aria-controls","onClick","innerHTML","chevronIcon","id"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.dark.card,\n.dark.card.clickable {\n  border: 1px solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-hover);\n  cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card.clickable:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n  border: var(--ic-border-disabled);\n}\n\n.card.fullwidth,\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n.card.clickable:active .card-title {\n  text-decoration: none;\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n  color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-controls {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  align-items: center;\n}\n\n.toggle-button {\n  margin-left: auto;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-controls\">\n            <slot name=\"interaction-controls\"></slot>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"names":["icCardCss","Card","this","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","[object Object]","event","disabled","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","newTheme","foregroundColor","getThemeFromContext","el","IcThemeForegroundEnum","Default","appearance","parentEl","parentElement","tagName","clickable","parentIsAnchorTag","classList","add","addEventListener","removeEventListener","onComponentRequiredPropUndefined","prop","heading","propName","expandable","message","href","hreflang","referrerpolicy","rel","subheading","target","fullWidth","Component","undefined","attrs","hrefLang","referrerPolicy","h","Object","assign","class","Dark","tabindex","aria-disabled","isSlotUsed","name","variant","disableTooltip","aria-label","aria-expanded","aria-controls","onClick","innerHTML","chevronIcon","id"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.dark.card,\n.dark.card.clickable {\n  border: 1px solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-hover);\n  cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card.clickable:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n  border: var(--ic-border-disabled);\n}\n\n.card.fullwidth,\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n.card.clickable:active .card-title {\n  text-decoration: none;\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n  color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-controls {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  align-items: center;\n}\n\n.toggle-button {\n  margin-left: auto;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-controls\">\n            <slot name=\"interaction-controls\"></slot>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"]}

package/dist/esm/core.js

@@ -13,7 +13,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"ic-typography\",[[1,\"ic-typography\",{\"variant\":[1],\"applyVerticalMargins\":[4,\"apply-vertical-margins\"]}]]],[\"ic-search-bar\",[[1,\"ic-search-bar\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"disableFilter\":[4,\"disable-filter\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"value\":[1537],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"name\":[1],\"spellcheck\":[4],\"options\":[16],\"focusOnLoad\":[4,\"focus-on-load\"],\"hintText\":[1,\"hint-text\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"charactersUntilSuggestion\":[2,\"characters-until-suggestion\"],\"open\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"showClearButton\":[32],\"clearButtonFocused\":[32],\"searchSubmitFocused\":[32],\"prevNoOption\":[32],\"highlightedValue\":[32],\"setFocus\":[64]},[[0,\"icKeydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"],[0,\"icMenuStateChange\",\"onMenuClose\"],[0,\"menuOptionId\",\"onMenuOptionHighlighted\"]]]]],[\"ic-select\",[[1,\"ic-select\",{\"label\":[1],\"options\":[16],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[516],\"readonly\":[4],\"placeholder\":[1],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"fullWidth\":[4,\"full-width\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"value\":[1025],\"name\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"searchable\":[4],\"includeDescriptionsInSearch\":[4,\"include-descriptions-in-search\"],\"includeGroupTitlesInSearch\":[4,\"include-group-titles-in-search\"],\"searchMatchPosition\":[1,\"search-match-position\"],\"charactersUntilSuggestions\":[2,\"characters-until-suggestions\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"open\":[32],\"clearButtonFocused\":[32],\"searchableSelectInputValue\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"noOptions\":[32],\"initialValue\":[32],\"setFocus\":[64]}]]],[\"ic-top-navigation\",[[1,\"ic-top-navigation\",{\"appTitle\":[1,\"app-title\"],\"href\":[1],\"version\":[1],\"status\":[1],\"contentAligned\":[1,\"content-aligned\"],\"inline\":[4],\"menuOpen\":[32],\"deviceSize\":[32],\"mobileSearchBarVisible\":[32],\"navMenuVisible\":[32],\"searchValue\":[32],\"mobileSearchHiddenOnBlur\":[32],\"searchButtonClick\":[32],\"foregroundColor\":[32],\"hasFullWidthSearchBar\":[32]},[[0,\"icNavigationMenuClose\",\"navBarMenuCloseHandler\"],[0,\"icSearchBarBlur\",\"searchInputBlurHandler\"],[0,\"icChange\",\"searchValueChangeHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-side-navigation\",[[1,\"ic-side-navigation\",{\"appTitle\":[1,\"app-title\"],\"status\":[1],\"version\":[1],\"expanded\":[4],\"href\":[1],\"static\":[4],\"collapsedIconLabels\":[4,\"collapsed-icon-labels\"],\"inline\":[4],\"disableAutoParentStyling\":[4,\"disable-auto-parent-styling\"],\"foregroundColor\":[32],\"menuOpen\":[32],\"menuExpanded\":[32],\"deviceSize\":[32],\"deviceSizeAppTitle\":[32],\"hasSecondaryNavigation\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-alert\",[[1,\"ic-alert\",{\"variant\":[1],\"heading\":[1],\"message\":[1],\"titleAbove\":[4,\"title-above\"],\"dismissible\":[4],\"announced\":[4],\"visible\":[32],\"alertTitleWrap\":[32]},[[2,\"icDismiss\",\"handleClick\"]]]]],[\"ic-card\",[[1,\"ic-card\",{\"clickable\":[1028],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"heading\":[1],\"subheading\":[1],\"message\":[1],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"expandable\":[4],\"parentIsAnchorTag\":[32],\"isFocussed\":[32],\"parentEl\":[32],\"appearance\":[32],\"areaExpanded\":[32]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-navigation-button\",[[1,\"ic-navigation-button\",{\"label\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"mode\":[32],\"initialAppearance\":[32],\"setFocus\":[64]},[[4,\"icNavigationMenuOpened\",\"navBarMenuOpenHandler\"],[4,\"icNavigationMenuClosed\",\"navBarMenuCloseHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-checkbox-group\",[[1,\"ic-checkbox-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedOptions\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-radio-group\",[[1,\"ic-radio-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedValue\":[32],\"selectedChild\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-breadcrumb-group\",[[1,\"ic-breadcrumb-group\",{\"backBreadcrumbOnly\":[4,\"back-breadcrumb-only\"],\"collapsed\":[4],\"deviceSize\":[32],\"expandedBreadcrumbs\":[32]}]]],[\"ic-chip\",[[1,\"ic-chip\",{\"label\":[1],\"appearance\":[1],\"size\":[1],\"dismissible\":[4],\"disabled\":[4],\"visible\":[32],\"isHovered\":[32]},[[2,\"dismiss\",\"handleClick\"]]]]],[\"ic-footer\",[[1,\"ic-footer\",{\"description\":[1],\"aligned\":[1],\"breakpoint\":[1],\"groupLinks\":[4,\"group-links\"],\"caption\":[1],\"copyright\":[4],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-footer-link-group\",[[1,\"ic-footer-link-group\",{\"groupTitle\":[1,\"group-title\"],\"small\":[32],\"expanded\":[32],\"dropdownIconStyle\":[32],\"deviceSize\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-hero\",[[1,\"ic-hero\",{\"heading\":[1],\"subheading\":[1],\"secondaryHeading\":[1,\"secondary-heading\"],\"secondarySubheading\":[1,\"secondary-subheading\"],\"backgroundImage\":[1,\"background-image\"],\"disableBackgroundParallax\":[4,\"disable-background-parallax\"],\"aligned\":[1],\"contentAligned\":[1,\"content-aligned\"],\"small\":[4],\"rightContent\":[32],\"scrollFactor\":[32],\"leftContentFullWidth\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"],[5,\"scroll\",\"doScroll\"]]]]],[\"ic-navigation-item\",[[1,\"ic-navigation-item\",{\"label\":[1],\"href\":[1],\"selected\":[4],\"expandable\":[4],\"displayNavigationTooltip\":[4,\"display-navigation-tooltip\"],\"collapsedIconLabel\":[4,\"collapsed-icon-label\"],\"isTopNavChild\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"sideNavExpanded\":[32],\"isSideNavMobile\":[32],\"setFocus\":[64]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-page-header\",[[1,\"ic-page-header\",{\"heading\":[1],\"subheading\":[1],\"aligned\":[1],\"small\":[4],\"border\":[4],\"sticky\":[4],\"stickyDesktopOnly\":[4,\"sticky-desktop-only\"],\"reverseOrder\":[4,\"reverse-order\"],\"deviceSize\":[32],\"areButtonsReversed\":[32],\"actionContent\":[32]}]]],[\"ic-step\",[[1,\"ic-step\",{\"variant\":[1],\"stepTitle\":[1,\"step-title\"],\"stepSubtitle\":[1,\"step-subtitle\"],\"stepStatus\":[1,\"step-status\"],\"stepType\":[1,\"step-type\"],\"current\":[1028],\"compactStepStyling\":[1,\"compact-step-styling\"],\"stepNum\":[2,\"step-num\"],\"lastStep\":[4,\"last-step\"],\"lastStepNum\":[2,\"last-step-num\"],\"nextStepTitle\":[1,\"next-step-title\"],\"progress\":[2]}]]],[\"ic-switch\",[[1,\"ic-switch\",{\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"checked\":[4],\"small\":[4],\"disabled\":[4],\"name\":[1],\"showState\":[4,\"show-state\"],\"value\":[1],\"checkedState\":[32],\"initiallyChecked\":[32]}]]],[\"ic-tab-group\",[[1,\"ic-tab-group\",{\"contextId\":[513,\"context-id\"],\"inline\":[516],\"label\":[1],\"appearance\":[1],\"firstTabVisible\":[32],\"lastTabVisible\":[32],\"tabOverflow\":[32],\"scrollTabIntoView\":[64]},[[0,\"tabFocus\",\"tabFocusHandler\"]]]]],[\"ic-back-to-top\",[[1,\"ic-back-to-top\",{\"target\":[1],\"bannerOffset\":[32],\"targetElVisible\":[32],\"footerVisible\":[32]}]]],[\"ic-checkbox\",[[1,\"ic-checkbox\",{\"checked\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"indeterminate\":[4],\"initiallyChecked\":[32]}]]],[\"ic-classification-banner\",[[1,\"ic-classification-banner\",{\"additionalSelectors\":[1,\"additional-selectors\"],\"classification\":[1],\"country\":[1],\"inline\":[4],\"upTo\":[4,\"up-to\"]}]]],[\"ic-data-entity\",[[1,\"ic-data-entity\",{\"heading\":[1],\"small\":[4]}]]],[\"ic-data-row\",[[1,\"ic-data-row\",{\"label\":[1],\"value\":[1],\"small\":[4],\"deviceSize\":[32],\"entitySize\":[32]}]]],[\"ic-navigation-group\",[[1,\"ic-navigation-group\",{\"label\":[1],\"expandable\":[4],\"dropdownOpen\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"expanded\":[32],\"setFocus\":[64]},[[0,\"childBlur\",\"childBlurHandler\"],[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-radio-option\",[[1,\"ic-radio-option\",{\"selected\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1025],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"initiallySelected\":[32]},[[0,\"icChange\",\"textfieldValueHandler\"]]]]],[\"ic-status-tag\",[[1,\"ic-status-tag\",{\"label\":[1],\"status\":[1],\"appearance\":[1],\"small\":[4],\"announced\":[4]}]]],[\"ic-tab\",[[1,\"ic-tab\",{\"contextId\":[513,\"context-id\"],\"disabled\":[4],\"selected\":[516],\"tabId\":[513,\"tab-id\"],\"tabPosition\":[2,\"tab-position\"],\"appearance\":[1]}]]],[\"ic-footer-link\",[[1,\"ic-footer-link\",{\"href\":[1],\"footerConfig\":[32],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-skeleton\",[[1,\"ic-skeleton\",{\"variant\":[1],\"light\":[4],\"hasChild\":[32],\"default\":[32],\"heightOnly\":[32],\"widthOnly\":[32]}]]],[\"ic-stepper\",[[1,\"ic-stepper\",{\"aligned\":[1],\"variant\":[1025],\"connectorWidth\":[2,\"connector-width\"],\"hideStepInfo\":[4,\"hide-step-info\"],\"stepperWidth\":[32],\"lastStepWidth\":[32],\"stepTypes\":[32],\"alignedFullWidth\":[32],\"autoSetStepTitles\":[32],\"variantOverride\":[32],\"noOfResizes\":[32]}]]],[\"ic-tab-context\",[[4,\"ic-tab-context\",{\"contextId\":[513,\"context-id\"],\"activationType\":[1,\"activation-type\"],\"selectedTabIndex\":[2,\"selected-tab-index\"],\"appearance\":[1],\"selectedTab\":[32]},[[0,\"tabClick\",\"tabClickHandler\"]]]]],[\"ic-tab-panel\",[[1,\"ic-tab-panel\",{\"contextId\":[513,\"context-id\"],\"tabPosition\":[514,\"tab-position\"],\"panelId\":[513,\"panel-id\"],\"selectedTab\":[1,\"selected-tab\"],\"appearance\":[1]}]]],[\"ic-theme\",[[1,\"ic-theme\",{\"color\":[1]}]]],[\"ic-input-component-container_3\",[[1,\"ic-menu\",{\"open\":[516],\"options\":[16],\"small\":[516],\"menuId\":[1,\"menu-id\"],\"value\":[1],\"activationType\":[1,\"activation-type\"],\"inputEl\":[16],\"parentEl\":[16],\"inputLabel\":[1,\"input-label\"],\"anchorEl\":[16],\"fullWidth\":[4,\"full-width\"],\"autoFocusOnSelected\":[4,\"auto-focus-on-selected\"],\"keyboardNav\":[32],\"optionHighlighted\":[32],\"focusFromSearchKeypress\":[32],\"initialOptionsListRender\":[32],\"preventIncorrectTabOrder\":[32],\"handleClickOpen\":[64],\"handleKeyboardOpen\":[64],\"handleSetFirstOption\":[64]},[[4,\"icClear\",\"handleClearListener\"],[4,\"icSubmitSearch\",\"handleSubmitSearch\"]]],[4,\"ic-input-component-container\",{\"disabled\":[4],\"readonly\":[4],\"validationStatus\":[1,\"validation-status\"],\"small\":[4],\"multiLine\":[4,\"multi-line\"],\"validationInline\":[4,\"validation-inline\"],\"dark\":[4],\"fullWidth\":[4,\"full-width\"]}],[4,\"ic-input-container\",{\"disabled\":[4],\"readonly\":[4]}]]],[\"ic-input-label_2\",[[4,\"ic-input-validation\",{\"message\":[1],\"for\":[1],\"status\":[1],\"fullWidth\":[4,\"full-width\"],\"ariaLiveMode\":[1,\"aria-live-mode\"]}],[0,\"ic-input-label\",{\"for\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"label\":[1],\"disabled\":[4],\"readonly\":[4],\"error\":[4],\"dark\":[4]}]]],[\"ic-text-field\",[[1,\"ic-text-field\",{\"inputId\":[1,\"input-id\"],\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[516],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"rows\":[2],\"resize\":[4],\"small\":[516],\"value\":[1537],\"maxLength\":[2,\"max-length\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"validationInline\":[4,\"validation-inline\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autoFocus\":[4,\"auto-focus\"],\"debounce\":[2],\"type\":[1],\"inputmode\":[1],\"name\":[1],\"spellcheck\":[4],\"ariaActiveDescendant\":[1,\"aria-active-descendant\"],\"truncateValue\":[4,\"truncate-value\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"role\":[1],\"hiddenInput\":[4,\"hidden-input\"],\"numChars\":[32],\"maxLengthExceeded\":[32],\"initialValue\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-button_3\",[[1,\"ic-button\",{\"disabled\":[4],\"loading\":[4],\"type\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"variant\":[1],\"size\":[1],\"fullWidth\":[4,\"full-width\"],\"disableTooltip\":[4,\"disable-tooltip\"],\"tooltipPlacement\":[1,\"tooltip-placement\"],\"appearance\":[1025],\"setFocus\":[64],\"updateAriaLabel\":[64]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]],[1,\"ic-loading-indicator\",{\"progress\":[2],\"min\":[2],\"max\":[2],\"label\":[1],\"description\":[1],\"innerLabel\":[2,\"inner-label\"],\"labelDuration\":[2,\"label-duration\"],\"size\":[513],\"type\":[513],\"fullWidth\":[516,\"full-width\"],\"appearance\":[1],\"indicatorLabel\":[32],\"indeterminate\":[32],\"showSecond\":[32],\"circularLineWidth\":[32],\"compactStepCircularLineWidth\":[32],\"circularDiameter\":[32]}],[1,\"ic-tooltip\",{\"target\":[513],\"placement\":[1],\"label\":[1],\"disableHover\":[4,\"disable-hover\"]}]]],[\"ic-navigation-menu\",[[1,\"ic-navigation-menu\",{\"version\":[1],\"status\":[1]},[[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-link\",[[1,\"ic-link\",{\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"showIcon\":[4,\"show-icon\"],\"appearance\":[1025]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-breadcrumb\",[[1,\"ic-breadcrumb\",{\"pageTitle\":[1,\"page-title\"],\"href\":[1],\"current\":[4],\"showBackIcon\":[516,\"show-back-icon\"]}]]],[\"ic-divider\",[[2,\"ic-divider\",{\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-section-container\",[[1,\"ic-section-container\",{\"aligned\":[1],\"fullHeight\":[4,\"full-height\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"ic-typography\",[[1,\"ic-typography\",{\"variant\":[1],\"applyVerticalMargins\":[4,\"apply-vertical-margins\"]}]]],[\"ic-search-bar\",[[1,\"ic-search-bar\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"disableFilter\":[4,\"disable-filter\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"value\":[1537],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"name\":[1],\"spellcheck\":[4],\"options\":[16],\"focusOnLoad\":[4,\"focus-on-load\"],\"hintText\":[1,\"hint-text\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"charactersUntilSuggestion\":[2,\"characters-until-suggestion\"],\"open\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"showClearButton\":[32],\"clearButtonFocused\":[32],\"searchSubmitFocused\":[32],\"prevNoOption\":[32],\"highlightedValue\":[32],\"setFocus\":[64]},[[0,\"icKeydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"],[0,\"icMenuStateChange\",\"onMenuClose\"],[0,\"menuOptionId\",\"onMenuOptionHighlighted\"]]]]],[\"ic-select\",[[1,\"ic-select\",{\"label\":[1],\"options\":[16],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[516],\"readonly\":[4],\"placeholder\":[1],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"fullWidth\":[4,\"full-width\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"value\":[1025],\"name\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"searchable\":[4],\"includeDescriptionsInSearch\":[4,\"include-descriptions-in-search\"],\"includeGroupTitlesInSearch\":[4,\"include-group-titles-in-search\"],\"searchMatchPosition\":[1,\"search-match-position\"],\"charactersUntilSuggestions\":[2,\"characters-until-suggestions\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"open\":[32],\"clearButtonFocused\":[32],\"searchableSelectInputValue\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"noOptions\":[32],\"initialValue\":[32],\"setFocus\":[64]}]]],[\"ic-top-navigation\",[[1,\"ic-top-navigation\",{\"appTitle\":[1,\"app-title\"],\"href\":[1],\"version\":[1],\"status\":[1],\"contentAligned\":[1,\"content-aligned\"],\"inline\":[4],\"menuOpen\":[32],\"deviceSize\":[32],\"mobileSearchBarVisible\":[32],\"navMenuVisible\":[32],\"searchValue\":[32],\"mobileSearchHiddenOnBlur\":[32],\"searchButtonClick\":[32],\"foregroundColor\":[32],\"hasFullWidthSearchBar\":[32]},[[0,\"icNavigationMenuClose\",\"navBarMenuCloseHandler\"],[0,\"icSearchBarBlur\",\"searchInputBlurHandler\"],[0,\"icChange\",\"searchValueChangeHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-side-navigation\",[[1,\"ic-side-navigation\",{\"appTitle\":[1,\"app-title\"],\"status\":[1],\"version\":[1],\"expanded\":[4],\"href\":[1],\"static\":[4],\"collapsedIconLabels\":[4,\"collapsed-icon-labels\"],\"inline\":[4],\"disableAutoParentStyling\":[4,\"disable-auto-parent-styling\"],\"foregroundColor\":[32],\"menuOpen\":[32],\"menuExpanded\":[32],\"deviceSize\":[32],\"deviceSizeAppTitle\":[32],\"hasSecondaryNavigation\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-alert\",[[1,\"ic-alert\",{\"variant\":[1],\"heading\":[1],\"message\":[1],\"titleAbove\":[4,\"title-above\"],\"dismissible\":[4],\"announced\":[4],\"visible\":[32],\"alertTitleWrap\":[32]},[[2,\"icDismiss\",\"handleClick\"]]]]],[\"ic-card\",[[1,\"ic-card\",{\"clickable\":[1028],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"heading\":[1],\"subheading\":[1],\"message\":[1],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"expandable\":[4],\"parentIsAnchorTag\":[32],\"isFocussed\":[32],\"parentEl\":[32],\"appearance\":[32],\"areaExpanded\":[32]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-navigation-button\",[[1,\"ic-navigation-button\",{\"label\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"mode\":[32],\"initialAppearance\":[32],\"setFocus\":[64]},[[4,\"icNavigationMenuOpened\",\"navBarMenuOpenHandler\"],[4,\"icNavigationMenuClosed\",\"navBarMenuCloseHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-checkbox-group\",[[1,\"ic-checkbox-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedOptions\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-radio-group\",[[1,\"ic-radio-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedValue\":[32],\"selectedChild\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-breadcrumb-group\",[[1,\"ic-breadcrumb-group\",{\"backBreadcrumbOnly\":[4,\"back-breadcrumb-only\"],\"collapsed\":[4],\"deviceSize\":[32],\"expandedBreadcrumbs\":[32]}]]],[\"ic-chip\",[[1,\"ic-chip\",{\"label\":[1],\"appearance\":[1],\"size\":[1],\"dismissible\":[4],\"disabled\":[4],\"visible\":[32],\"isHovered\":[32]},[[2,\"icDismiss\",\"handleClick\"]]]]],[\"ic-footer\",[[1,\"ic-footer\",{\"description\":[1],\"aligned\":[1],\"breakpoint\":[1],\"groupLinks\":[4,\"group-links\"],\"caption\":[1],\"copyright\":[4],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-footer-link-group\",[[1,\"ic-footer-link-group\",{\"groupTitle\":[1,\"group-title\"],\"small\":[32],\"expanded\":[32],\"dropdownIconStyle\":[32],\"deviceSize\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-hero\",[[1,\"ic-hero\",{\"heading\":[1],\"subheading\":[1],\"secondaryHeading\":[1,\"secondary-heading\"],\"secondarySubheading\":[1,\"secondary-subheading\"],\"backgroundImage\":[1,\"background-image\"],\"disableBackgroundParallax\":[4,\"disable-background-parallax\"],\"aligned\":[1],\"contentAligned\":[1,\"content-aligned\"],\"small\":[4],\"rightContent\":[32],\"scrollFactor\":[32],\"leftContentFullWidth\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"],[5,\"scroll\",\"doScroll\"]]]]],[\"ic-navigation-item\",[[1,\"ic-navigation-item\",{\"label\":[1],\"href\":[1],\"selected\":[4],\"expandable\":[4],\"displayNavigationTooltip\":[4,\"display-navigation-tooltip\"],\"collapsedIconLabel\":[4,\"collapsed-icon-label\"],\"isTopNavChild\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"sideNavExpanded\":[32],\"isSideNavMobile\":[32],\"setFocus\":[64]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-page-header\",[[1,\"ic-page-header\",{\"heading\":[1],\"subheading\":[1],\"aligned\":[1],\"small\":[4],\"border\":[4],\"sticky\":[4],\"stickyDesktopOnly\":[4,\"sticky-desktop-only\"],\"reverseOrder\":[4,\"reverse-order\"],\"deviceSize\":[32],\"areButtonsReversed\":[32],\"actionContent\":[32]}]]],[\"ic-step\",[[1,\"ic-step\",{\"variant\":[1],\"stepTitle\":[1,\"step-title\"],\"stepSubtitle\":[1,\"step-subtitle\"],\"stepStatus\":[1,\"step-status\"],\"stepType\":[1,\"step-type\"],\"current\":[1028],\"compactStepStyling\":[1,\"compact-step-styling\"],\"stepNum\":[2,\"step-num\"],\"lastStep\":[4,\"last-step\"],\"lastStepNum\":[2,\"last-step-num\"],\"nextStepTitle\":[1,\"next-step-title\"],\"progress\":[2]}]]],[\"ic-switch\",[[1,\"ic-switch\",{\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"checked\":[4],\"small\":[4],\"disabled\":[4],\"name\":[1],\"showState\":[4,\"show-state\"],\"value\":[1],\"checkedState\":[32],\"initiallyChecked\":[32]}]]],[\"ic-tab-group\",[[1,\"ic-tab-group\",{\"contextId\":[513,\"context-id\"],\"inline\":[516],\"label\":[1],\"appearance\":[1],\"firstTabVisible\":[32],\"lastTabVisible\":[32],\"tabOverflow\":[32],\"scrollTabIntoView\":[64]},[[0,\"tabFocus\",\"tabFocusHandler\"]]]]],[\"ic-back-to-top\",[[1,\"ic-back-to-top\",{\"target\":[1],\"bannerOffset\":[32],\"targetElVisible\":[32],\"footerVisible\":[32]}]]],[\"ic-checkbox\",[[1,\"ic-checkbox\",{\"checked\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"indeterminate\":[4],\"initiallyChecked\":[32]}]]],[\"ic-classification-banner\",[[1,\"ic-classification-banner\",{\"additionalSelectors\":[1,\"additional-selectors\"],\"classification\":[1],\"country\":[1],\"inline\":[4],\"upTo\":[4,\"up-to\"]}]]],[\"ic-data-entity\",[[1,\"ic-data-entity\",{\"heading\":[1],\"small\":[4]}]]],[\"ic-data-row\",[[1,\"ic-data-row\",{\"label\":[1],\"value\":[1],\"small\":[4],\"deviceSize\":[32],\"entitySize\":[32]}]]],[\"ic-navigation-group\",[[1,\"ic-navigation-group\",{\"label\":[1],\"expandable\":[4],\"dropdownOpen\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"expanded\":[32],\"setFocus\":[64]},[[0,\"childBlur\",\"childBlurHandler\"],[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-radio-option\",[[1,\"ic-radio-option\",{\"selected\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1025],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"initiallySelected\":[32]},[[0,\"icChange\",\"textfieldValueHandler\"]]]]],[\"ic-status-tag\",[[1,\"ic-status-tag\",{\"label\":[1],\"status\":[1],\"appearance\":[1],\"small\":[4],\"announced\":[4]}]]],[\"ic-tab\",[[1,\"ic-tab\",{\"contextId\":[513,\"context-id\"],\"disabled\":[4],\"selected\":[516],\"tabId\":[513,\"tab-id\"],\"tabPosition\":[2,\"tab-position\"],\"appearance\":[1]}]]],[\"ic-footer-link\",[[1,\"ic-footer-link\",{\"href\":[1],\"footerConfig\":[32],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-skeleton\",[[1,\"ic-skeleton\",{\"variant\":[1],\"light\":[4],\"hasChild\":[32],\"default\":[32],\"heightOnly\":[32],\"widthOnly\":[32]}]]],[\"ic-stepper\",[[1,\"ic-stepper\",{\"aligned\":[1],\"variant\":[1025],\"connectorWidth\":[2,\"connector-width\"],\"hideStepInfo\":[4,\"hide-step-info\"],\"stepperWidth\":[32],\"lastStepWidth\":[32],\"stepTypes\":[32],\"alignedFullWidth\":[32],\"autoSetStepTitles\":[32],\"variantOverride\":[32],\"noOfResizes\":[32]}]]],[\"ic-tab-context\",[[4,\"ic-tab-context\",{\"contextId\":[513,\"context-id\"],\"activationType\":[1,\"activation-type\"],\"selectedTabIndex\":[2,\"selected-tab-index\"],\"appearance\":[1],\"selectedTab\":[32]},[[0,\"tabClick\",\"tabClickHandler\"]]]]],[\"ic-tab-panel\",[[1,\"ic-tab-panel\",{\"contextId\":[513,\"context-id\"],\"tabPosition\":[514,\"tab-position\"],\"panelId\":[513,\"panel-id\"],\"selectedTab\":[1,\"selected-tab\"],\"appearance\":[1]}]]],[\"ic-theme\",[[1,\"ic-theme\",{\"color\":[1]}]]],[\"ic-input-component-container_3\",[[1,\"ic-menu\",{\"open\":[516],\"options\":[16],\"small\":[516],\"menuId\":[1,\"menu-id\"],\"value\":[1],\"activationType\":[1,\"activation-type\"],\"inputEl\":[16],\"parentEl\":[16],\"inputLabel\":[1,\"input-label\"],\"anchorEl\":[16],\"fullWidth\":[4,\"full-width\"],\"autoFocusOnSelected\":[4,\"auto-focus-on-selected\"],\"keyboardNav\":[32],\"optionHighlighted\":[32],\"focusFromSearchKeypress\":[32],\"initialOptionsListRender\":[32],\"preventIncorrectTabOrder\":[32],\"handleClickOpen\":[64],\"handleKeyboardOpen\":[64],\"handleSetFirstOption\":[64]},[[4,\"icClear\",\"handleClearListener\"],[4,\"icSubmitSearch\",\"handleSubmitSearch\"]]],[4,\"ic-input-component-container\",{\"disabled\":[4],\"readonly\":[4],\"validationStatus\":[1,\"validation-status\"],\"small\":[4],\"multiLine\":[4,\"multi-line\"],\"validationInline\":[4,\"validation-inline\"],\"dark\":[4],\"fullWidth\":[4,\"full-width\"]}],[4,\"ic-input-container\",{\"disabled\":[4],\"readonly\":[4]}]]],[\"ic-input-label_2\",[[4,\"ic-input-validation\",{\"message\":[1],\"for\":[1],\"status\":[1],\"fullWidth\":[4,\"full-width\"],\"ariaLiveMode\":[1,\"aria-live-mode\"]}],[0,\"ic-input-label\",{\"for\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"label\":[1],\"disabled\":[4],\"readonly\":[4],\"error\":[4],\"dark\":[4]}]]],[\"ic-text-field\",[[1,\"ic-text-field\",{\"inputId\":[1,\"input-id\"],\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[516],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"rows\":[2],\"resize\":[4],\"small\":[516],\"value\":[1537],\"maxLength\":[2,\"max-length\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"validationInline\":[4,\"validation-inline\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autoFocus\":[4,\"auto-focus\"],\"debounce\":[2],\"type\":[1],\"inputmode\":[1],\"name\":[1],\"spellcheck\":[4],\"ariaActiveDescendant\":[1,\"aria-active-descendant\"],\"truncateValue\":[4,\"truncate-value\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"role\":[1],\"hiddenInput\":[4,\"hidden-input\"],\"numChars\":[32],\"maxLengthExceeded\":[32],\"initialValue\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-button_3\",[[1,\"ic-button\",{\"disabled\":[4],\"loading\":[4],\"type\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"variant\":[1],\"size\":[1],\"fullWidth\":[4,\"full-width\"],\"disableTooltip\":[4,\"disable-tooltip\"],\"tooltipPlacement\":[1,\"tooltip-placement\"],\"appearance\":[1025],\"setFocus\":[64],\"updateAriaLabel\":[64]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]],[1,\"ic-loading-indicator\",{\"progress\":[2],\"min\":[2],\"max\":[2],\"label\":[1],\"description\":[1],\"innerLabel\":[2,\"inner-label\"],\"labelDuration\":[2,\"label-duration\"],\"size\":[513],\"type\":[513],\"fullWidth\":[516,\"full-width\"],\"appearance\":[1],\"indicatorLabel\":[32],\"indeterminate\":[32],\"showSecond\":[32],\"circularLineWidth\":[32],\"compactStepCircularLineWidth\":[32],\"circularDiameter\":[32]}],[1,\"ic-tooltip\",{\"target\":[513],\"placement\":[1],\"label\":[1],\"disableHover\":[4,\"disable-hover\"]}]]],[\"ic-navigation-menu\",[[1,\"ic-navigation-menu\",{\"version\":[1],\"status\":[1]},[[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-link\",[[1,\"ic-link\",{\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"showIcon\":[4,\"show-icon\"],\"appearance\":[1025]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-breadcrumb\",[[1,\"ic-breadcrumb\",{\"pageTitle\":[1,\"page-title\"],\"href\":[1],\"current\":[4],\"showBackIcon\":[516,\"show-back-icon\"]}]]],[\"ic-divider\",[[2,\"ic-divider\",{\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-section-container\",[[1,\"ic-section-container\",{\"aligned\":[1],\"fullHeight\":[4,\"full-height\"]}]]]]"), options);
 });
 
 //# sourceMappingURL=core.js.map

package/dist/esm/ic-card.entry.js.map

@@ -1 +1 @@
-{"file":"ic-card.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","./src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.dark.card,\n.dark.card.clickable {\n  border: 1px solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-hover);\n  cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card.clickable:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n  border: var(--ic-border-disabled);\n}\n\n.card.fullwidth,\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n.card.clickable:active .card-title {\n  text-decoration: none;\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n  color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-controls {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  align-items: center;\n}\n\n.toggle-button {\n  margin-left: auto;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-controls\">\n            <slot name=\"interaction-controls\"></slot>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-card.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","./src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.dark.card,\n.dark.card.clickable {\n  border: 1px solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-hover);\n  cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card.clickable:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n  border: var(--ic-border-disabled);\n}\n\n.card.fullwidth,\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n.card.clickable:active .card-title {\n  text-decoration: none;\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n  color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-controls {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  align-items: center;\n}\n\n.toggle-button {\n  margin-left: auto;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-controls\">\n            <slot name=\"interaction-controls\"></slot>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-chip.entry.js

@@ -13,8 +13,10 @@ const Chip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dismiss = createEvent(this, "dismiss", 7);
+    this.icDismiss = createEvent(this, "icDismiss", 7);
     this.dismissAction = () => {
       this.dismiss.emit();
+      this.icDismiss.emit();
     };
     this.mouseEnterHandler = () => {
       this.isHovered = true;

package/dist/esm/ic-chip.entry.js.map

@@ -1 +1 @@
-{"file":"ic-chip.entry.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,o7IAAo7I;;MCyBz7I,IAAI;;;;IAqCP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,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;;sBArCsC,QAAQ;gBAInB,SAAS;uBAIN,KAAK;oBAIR,KAAK;mBAEN,IAAI;qBAEF,KAAK;;EAGnC,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;EAkBD,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: 14px;\n  border-radius: 80px;\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: 1px solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 1px);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 1px);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 1px);\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: 20px;\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) - 1px);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 1px);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 1px);\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} 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(\"dismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\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.entry.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,o7IAAo7I;;MCyBz7I,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;EAyBD,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: 14px;\n  border-radius: 80px;\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: 1px solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 1px);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 1px);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 1px);\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: 20px;\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) - 1px);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 1px);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 1px);\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} 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  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/esm/ic-data-row.entry.js

@@ -24,14 +24,16 @@ const DataRow = class {
   checkLabelAbove() {
     var _a;
     const rowSize = (_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    if (rowSize + 46 < DEVICE_SIZES.S) {
-      this.entitySize = "xs";
-    }
-    else if (rowSize + 46 < DEVICE_SIZES.M) {
-      this.entitySize = "m";
-    }
-    else {
-      this.entitySize = "xl";
+    if (rowSize) {
+      if (rowSize + 46 < DEVICE_SIZES.S) {
+        this.entitySize = "xs";
+      }
+      else if (rowSize + 46 < DEVICE_SIZES.M) {
+        this.entitySize = "m";
+      }
+      else {
+        this.entitySize = "xl";
+      }
     }
   }
   labelEndComponent() {
@@ -41,10 +43,10 @@ const DataRow = class {
   componentWillLoad() {
     this.deviceSize = getCurrentDeviceSize();
     this.hasEndComponent = slotHasContent(this.el, "end-component");
+    this.checkLabelAbove();
   }
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
-    this.checkLabelAbove();
     if (this.hasEndComponent) {
       this.labelEndComponent();
     }

package/dist/esm/ic-data-row.entry.js.map

@@ -1 +1 @@
-{"file":"ic-data-row.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.data {\n  display: flex;\n  align-items: center;\n}\n\n.text-cells {\n  display: flex;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.label {\n  width: 200px;\n  min-width: 200px;\n  margin-right: var(--ic-space-md);\n  color: var(--ic-color-tertiary-text);\n}\n\n.value {\n  flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n  margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n  width: fit-content;\n  margin-left: 56px;\n}\n\n.divider {\n  margin-top: var(--ic-space-md);\n  height: 1px;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n  width: 160px;\n  min-width: 160px;\n}\n\n:host(.breakpoint-xs) .text-cells {\n  flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n  width: 128px;\n  margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n  max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n  margin-left: 0;\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize + 46 < DEVICE_SIZES.S) {\n      this.entitySize = \"xs\";\n    } else if (rowSize + 46 < DEVICE_SIZES.M) {\n      this.entitySize = \"m\";\n    } else {\n      this.entitySize = \"xl\";\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    this.checkLabelAbove();\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-row.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.data {\n  display: flex;\n  align-items: center;\n}\n\n.text-cells {\n  display: flex;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.label {\n  width: 200px;\n  min-width: 200px;\n  margin-right: var(--ic-space-md);\n  color: var(--ic-color-tertiary-text);\n}\n\n.value {\n  flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n  margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n  width: fit-content;\n  margin-left: 56px;\n}\n\n.divider {\n  margin-top: var(--ic-space-md);\n  height: 1px;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n  width: 160px;\n  min-width: 160px;\n}\n\n:host(.breakpoint-xs) .text-cells {\n  flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n  width: 128px;\n  margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n  max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n  margin-left: 0;\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-hero.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-15
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
 import { k as getThemeForegroundColor, s as slotHasContent, a as onComponentRequiredPropUndefined } from './helpers-46e5291b.js';
 
-const icHeroCss = "/*! 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{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -100px;background-size:auto calc(100% + 100px);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -100px !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:144px}.right-container{flex-basis:33.3%;margin-left:50px}.secondary-container{min-height:144px}.secondary-heading,.secondary-subheading{margin-left:63px}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:94.75px}.right-container{margin-left:50px}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:34px}.right-container{margin-left:50px}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:280px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:40px}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:192px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:264px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const icHeroCss = "/*! 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{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -100px;background-size:auto calc(100% + 100px);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -100px !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:144px}.right-container{flex-basis:33.3%;margin-left:50px}.secondary-container{min-height:144px}.secondary-heading,.secondary-subheading{margin-left:63px}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:94.75px}.right-container{margin-left:50px}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:34px}.right-container{margin-left:50px}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:280px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:40px}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:192px}:host,.right-container{margin-bottom:var(--ic-space-md)}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:264px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
 
 const Hero = class {
   constructor(hostRef) {

package/dist/esm/ic-hero.entry.js.map

@@ -1 +1 @@
-{"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -100px;\n  background-size: auto calc(100% + 100px);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -100px !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 144px;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 50px;\n  }\n\n  .secondary-container {\n    min-height: 144px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 63px;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 94.75px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 34px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 280px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 192px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 264px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -100px;\n  background-size: auto calc(100% + 100px);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -100px !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 144px;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 50px;\n  }\n\n  .secondary-container {\n    min-height: 144px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 63px;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 94.75px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 34px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 280px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 192px;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 264px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-link.entry.js

@@ -39,8 +39,6 @@ const Link = class {
       ...IC_INHERITED_ARIA,
       "aria-expanded",
     ]);
-  }
-  componentDidLoad() {
     this.updateTheme();
   }
   hasRouterSlot() {

package/dist/esm/ic-link.entry.js.map

@@ -1 +1 @@
-{"file":"ic-link.entry.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,gpJAAgpJ;;MCoBrpJ,IAAI;;;IACP,wBAAmB,GAA6B,EAAE,CAAC;oBAQrB,KAAK;gBAKnB,IAAI;;;;;;sBA8B8B,SAAS;;EAGnE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAE7D,QAAQ,KAAK;MACX,KAAK,qBAAqB,CAAC,KAAK;QAC9B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC;QAC9C,MAAM;MACR,KAAK,qBAAqB,CAAC,IAAI;QAC7B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;QAC7C,MAAM;KACT;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;KAChB,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,aAAa;IACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;KACzD;IACD,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;GAC1B;EAED,MAAM;IACJ,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,GACX,GAAG,IAAI,CAAC;IAET,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI,EAAE,IACrD,IAAI,CAAC,aAAa,EAAE,IACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,KAEhC,uBACE,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,KAAK,IAAI;QAC1B,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI;OACjC,EACD,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,EAC9C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,IAChC,IAAI,CAAC,mBAAmB,GAE5B,eAAQ,EACP,QAAQ,KACP,YAAM,KAAK,EAAC,0BAA0B,EAAC,SAAS,EAAE,SAAS,GAAI,CAChE,CACC,CACL,CACI,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","./src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.link) .ic-link,\n:host(.link) ::slotted(a) {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.link.dark) .ic-link.dark,\n:host(.link.dark) ::slotted(a) {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.link.light) .ic-link.light,\n:host(.link.light) ::slotted(a) {\n  color: var(--ic-color-white-text);\n}\n\n:host(.link) .ic-link:visited,\n:host(.link) ::slotted(a:visited) {\n  color: var(--ic-hyperlink-visited);\n}\n\n:host(.link) .ic-link:hover,\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:hover),\n:host(.link) ::slotted(a:focus) {\n  text-decoration-line: underline;\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n:host(.link) .ic-link:hover,\n:host(.link) ::slotted(a:hover) {\n  outline: none;\n}\n\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.link) .ic-link:active,\n:host(.link) .ic-link:focus:active,\n:host(.link) .ic-link:visited:active,\n:host(.link) ::slotted(a:active),\n:host(.link) ::slotted(a:focus:active),\n:host(.link) ::slotted(a:visited:active) {\n  text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink);\n}\n\n.ic-link.dark > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-primary-text);\n}\n\n.ic-link.light > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-white-text);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-primary-text);\n}\n","import { Component, Element, Prop, h, Host, Listen } from \"@stencil/core\";\n\nimport OpenInNew from \"./assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: true,\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the 'open in new tab/window' icon will be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-link.entry.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,gpJAAgpJ;;MCoBrpJ,IAAI;;;IACP,wBAAmB,GAA6B,EAAE,CAAC;oBAQrB,KAAK;gBAKnB,IAAI;;;;;;sBA8B8B,SAAS;;EAGnE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAE7D,QAAQ,KAAK;MACX,KAAK,qBAAqB,CAAC,KAAK;QAC9B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC;QAC9C,MAAM;MACR,KAAK,qBAAqB,CAAC,IAAI;QAC7B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;QAC7C,MAAM;KACT;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;KAChB,CAAC,CAAC;IAEH,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,aAAa;IACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;KACzD;IACD,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;GAC1B;EAED,MAAM;IACJ,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,GACX,GAAG,IAAI,CAAC;IAET,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI,EAAE,IACrD,IAAI,CAAC,aAAa,EAAE,IACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,KAEhC,uBACE,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,KAAK,IAAI;QAC1B,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI;OACjC,EACD,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,EAC9C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,IAChC,IAAI,CAAC,mBAAmB,GAE5B,eAAQ,EACP,QAAQ,KACP,YAAM,KAAK,EAAC,0BAA0B,EAAC,SAAS,EAAE,SAAS,GAAI,CAChE,CACC,CACL,CACI,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","./src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.link) .ic-link,\n:host(.link) ::slotted(a) {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.link.dark) .ic-link.dark,\n:host(.link.dark) ::slotted(a) {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.link.light) .ic-link.light,\n:host(.link.light) ::slotted(a) {\n  color: var(--ic-color-white-text);\n}\n\n:host(.link) .ic-link:visited,\n:host(.link) ::slotted(a:visited) {\n  color: var(--ic-hyperlink-visited);\n}\n\n:host(.link) .ic-link:hover,\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:hover),\n:host(.link) ::slotted(a:focus) {\n  text-decoration-line: underline;\n  text-decoration-thickness: 25%;\n  text-underline-offset: 25%;\n}\n\n:host(.link) .ic-link:hover,\n:host(.link) ::slotted(a:hover) {\n  outline: none;\n}\n\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.link) .ic-link:active,\n:host(.link) .ic-link:focus:active,\n:host(.link) .ic-link:visited:active,\n:host(.link) ::slotted(a:active),\n:host(.link) ::slotted(a:focus:active),\n:host(.link) ::slotted(a:visited:active) {\n  text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink);\n}\n\n.ic-link.dark > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-primary-text);\n}\n\n.ic-link.light > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-white-text);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-primary-text);\n}\n","import { Component, Element, Prop, h, Host, Listen } from \"@stencil/core\";\n\nimport OpenInNew from \"./assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: true,\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the 'open in new tab/window' icon will be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}