{"version":3,"names":["createSchemes","newSchemes","AllColors.TILES_TEASER_SCHEMES","forEach","element","schemeName","backgroundColor","AllColors","toConstantCase","hoverBackgroundColor","hoverColor","scheme","TILES_TEASER_SCHEME_CONFIG","TILES_TEASER_SCHEME_MAP","Map","Object","entries","createTilesTeaserMapDefinition","map","background","config","tilesTeaserCss","EonUiTilesTeaserStyle0","TilesTeaser","this","schemeConfig","schemeMap","containerBreakpoints","copyCharacterLimit","TILES_TEASER_COLORS","TILES_TEASER_DEFAULT_HORIZONTAL_CONTENT_ALIGNMENT","TILES_TEASER_DEFAULT_VERTICAL_CONTENT_ALIGNMENT","ASPECTRATIO_1X1","TILES_TEASER_DEFAULT_VIOLATOR_HORIZONTAL_POSITION","hasImage","imageElement","initContainerBreakpoints","initContainerBreakpointsDelegate","hostElement","componentWillLoad","getFirstNestedChild","hasViolator","setAttribute","removeAttribute","linkElement","infoElement","textElement","getTruncatedBody","headlineElement","HEADLINE_SIZE_H4","useTheRightHtmlTagForHeadline","headlineHtmlTag","HEADLINE_TAG_H4","alignHeadline","checkHorizontalContentAlignment","checkVerticalContentAlignment","applyScheme","setAspectRatio","_a","addEventListener","e","preventDefault","handleSchemeForGradients","componentDidLoad","setCssVariables","applyTextColor","tilesTeaserLoad","emit","applySchemeDelegate","setCssVariablesDelegate","setCssVariable","camelToDashCase","textColor","contentAlignment","allowHorizontalContentAlignment","TILES_TEASER_HORIZONTAL_CONTENT_ALIGNMENTS","includes","horizontalContentAlignment","allowVerticalContentAlignment","TILES_TEASER_VERTICAL_CONTENT_ALIGNMENTS","verticalContentAlignment","handeWatch","bodyLength","innerHTML","stripHtml","length","shortenString","aspectRatio","onMouseEnter","String","onMouseLeave","gradientForText","gradientForImages","render","h","Host","key","class","ConditionalWrapper","condition","wrapper","children","pfx","teaser","removeBorderRadius","href","target","_b","title","_c","defaultWrapper","aspectRatioTablet","aspectRatioMobile","name","overlay","content","violatorHorizontalPosition","pictogram"],"sources":["src/components/tiles-teaser/constants/tiles-teaser-constants.ts","src/components/tiles-teaser/tiles-teaser.scss?tag=eon-ui-tiles-teaser&encapsulation=shadow","src/components/tiles-teaser/tiles-teaser.tsx"],"sourcesContent":["import { toConstantCase } from \"../../../utils/string-format\";\nimport { TilesTeaserSchemeDefinition } from \"./tiles-teaser-types\";\nimport * as AllColors from \"../../../constants/colors\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\nimport { createTilesTeaserMapDefinition } from \"../../../utils/scheme-helper\";\n\nfunction createSchemes() {\n  let newSchemes: AllColors.TilesTeaserSchemeConfiguration<TilesTeaserSchemeDefinition> = {};\n  AllColors.TILES_TEASER_SCHEMES.forEach((element) => {\n    newSchemes[element.schemeName] = {\n      backgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n      hoverBackgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_SHADE_1`],\n      hoverColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_FONT`]\n    };\n    if (element.scheme) {\n      newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n    }\n  });\n  return newSchemes;\n}\n\nexport const TILES_TEASER_SCHEME_CONFIG: AllColors.TilesTeaserSchemeConfiguration<TilesTeaserSchemeDefinition> = createSchemes();\n\nexport const TILES_TEASER_SCHEME_MAP: Map<BackgroundColor | \"default\", TilesTeaserSchemeDefinition> = new Map(\n  Object.entries(createTilesTeaserMapDefinition()).map(([background, config]) => [\n    background as BackgroundColor,\n    TILES_TEASER_SCHEME_CONFIG[config as string]\n  ])\n);\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$tiles-teaser-small-content-margin: 24px !default;\n$tiles-teaser-tablet-content-margin: 32px !default;\n$tiles-teaser-large-content-margin: 40px !default;\n$tiles-teaser-x-large-content-margin: 48px !default;\n$tiles-teaser-default-shadow: none !default;\n$tiles-teaser-default-radius: 0 !default;\n$tiles-teaser-drop-shadow: none !default;\n$tiles-teaser-drop-shadow-on-hover: none !default;\n$tiles-teaser-mobile-radius: 0 !default;\n$tiles-teaser-tablet-radius: 0 !default;\n$tiles-teaser-desktop-radius: 0 !default;\n$tiles-teaser-desktop-large-radius: 0 !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n:host {\n  display: block;\n  box-shadow: $tiles-teaser-default-shadow;\n  border-radius: $tiles-teaser-default-radius;\n  overflow: hidden;\n}\n\n:host(:not(.no-link)) {\n  filter: drop-shadow($tiles-teaser-drop-shadow);\n  transition: filter $transition-duration ease-in-out;\n}\n\n:host(:not(.no-link):hover) {\n  filter: drop-shadow($tiles-teaser-drop-shadow-on-hover);\n}\n\n:host([background-color]) {\n  ::slotted(eon-ui-image) {\n    display: block;\n  }\n}\n\n::slotted(*:not(eon-ui-image)) {\n  transition: color $transition-duration ease-in-out !important;\n}\n\n::slotted(eon-ui-headline) {\n  --color: var(--textColor) !important; // v(...) helper doesn't work with nested vars\n}\n\n::slotted(eon-ui-link) {\n  --contentColor: var(--textColor) !important;\n  --contentHoverColor: var(--textColor) !important;\n  --contentFocusColor: var(--textColor) !important;\n}\n\n::slotted(eon-ui-text) {\n  --color: var(--textColor) !important;\n}\n\ndiv.#{$prefix}pictogram-wrapper > eon-ui-pictogram {\n  transition: color $transition-duration ease-in-out !important;\n  --color: var(--textColor) !important;\n}\n\n:host(:not(.no-link)[background-color]:hover),\n:host([background-color].no-image),\n:host(.no-image) {\n  &:host(.has-text-gradient){\n  --hoverColor: var(--eon-neutral100);\n  }\n  ::slotted(eon-ui-image) {\n    opacity: 0 !important;\n  }\n\n  // Overriding the CSS variables of child components only works if they are defined in the <style> tag of the shadowRoot.\n  // IE/Edge don't support ShadowDOM, so we have to remove the existing inline(!) CSS variable declarations on hover in JS (see teaser.tsx).\n  // If we don't do that, the inline styles will always win in terms of specificity and the definitions here won't have any effect.\n  ::slotted(eon-ui-headline) {\n    --color: var(--hoverColor) !important; // v(...) helper doesn't work with nested vars\n  }\n\n  ::slotted(eon-ui-link) {\n    --contentColor: var(--hoverColor) !important;\n    --contentHoverColor: var(--hoverColor) !important;\n    --contentFocusColor: var(--hoverColor) !important;\n  }\n\n  ::slotted(eon-ui-text) {\n    --color: var(--hoverColor) !important;\n  }\n\n  div.#{$prefix}pictogram-wrapper > eon-ui-pictogram {\n    --color: var(--hoverColor) !important;\n  }\n}\n\n.#{$prefix}teaser {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  text-decoration: none;\n  overflow: hidden;\n  border-radius: $tiles-teaser-desktop-large-radius;\n\n  @include for-size(desktop) {\n    border-radius: $tiles-teaser-desktop-radius;\n  }\n\n  @include for-size(tablet) {\n    border-radius: $tiles-teaser-tablet-radius;\n  }\n\n  @include for-size(phone) {\n    border-radius: $tiles-teaser-mobile-radius;\n  }\n\n  ::slotted(eon-ui-image) {\n    transition: opacity $transition-duration ease-in-out;\n  }\n\n  ::slotted(eon-ui-info-icon) {\n    margin-top: 16px;\n  }\n}\n\n.#{$prefix}teaser.#{$prefix}no-radius {\n  border-radius: 0 !important;\n}\n\n.#{$prefix}wrapper {\n  position: relative;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  display: inline-block;\n  background-color: v(backgroundColor);\n  z-index: 1;\n\n  &.#{$prefix}only-visible-on-hover {\n    background-color: v(backgroundColor);\n  }\n\n  &.#{$prefix}ratio-2x1 {\n    display: flow-root;\n    position: relative;\n    &::before {\n      @include aspect-ratio-tiles-teaser(2, 1);\n    }\n  }\n\n  &.#{$prefix}ratio-16x9 {\n    display: flow-root;\n    position: relative;\n    &::before {\n      @include aspect-ratio-tiles-teaser(16, 9);\n    }\n  }\n\n  &.#{$prefix}ratio-1x1 {\n    display: flow-root;\n    position: relative;\n    &::before {\n      @include aspect-ratio-tiles-teaser(1, 1);\n    }\n  }\n\n  &.#{$prefix}ratio-3x4 {\n    display: flow-root;\n    position: relative;\n    &::before {\n      @include aspect-ratio-tiles-teaser(3, 4);\n    }\n  }\n\n  &.#{$prefix}ratio-4x3 {\n    display: flow-root;\n    position: relative;\n    &::before {\n      @include aspect-ratio-tiles-teaser(4, 3);\n    }\n  }\n\n  /*\n    * Aspect ratios for tablet breakpoint\n    */\n  &.#{$prefix}tablet-ratio-2x1 {\n    @include for-size(\"tablet\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(2, 1);\n      }\n    }\n  }\n\n  &.#{$prefix}tablet-ratio-16x9 {\n    @include for-size(\"tablet\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(16, 9);\n      }\n    }\n  }\n\n  &.#{$prefix}tablet-ratio-1x1 {\n    @include for-size(\"tablet\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(1, 1);\n      }\n    }\n  }\n\n  &.#{$prefix}tablet-ratio-3x4 {\n    @include for-size(\"tablet\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(3, 4);\n      }\n    }\n  }\n\n  &.#{$prefix}ratio-4x3 {\n    @include for-size(\"tablet\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(4, 3);\n      }\n    }\n  }\n\n  /*\n    * Aspect ratios for tablet breakpoint\n    */\n  &.#{$prefix}mobile-ratio-2x1 {\n    @include for-size(\"phone\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(2, 1);\n      }\n    }\n  }\n\n  &.#{$prefix}mobile-ratio-16x9 {\n    @include for-size(\"phone\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(16, 9);\n      }\n    }\n  }\n\n  &.#{$prefix}mobile-ratio-1x1 {\n    @include for-size(\"phone\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(1, 1);\n      }\n    }\n  }\n\n  &.#{$prefix}mobile-ratio-3x4 {\n    @include for-size(\"phone\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(3, 4);\n      }\n    }\n  }\n\n  &.#{$prefix}mobile-4x3 {\n    @include for-size(\"phone\") {\n      &::before {\n        @include aspect-ratio-tiles-teaser(4, 3);\n      }\n    }\n  }\n\n  &.#{$prefix}hover-overlay {\n    .#{$prefix}overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.2);\n      transition: all $transition-duration ease-in-out;\n      visibility: hidden;\n      opacity: 0;\n\n      &.#{$prefix}color-shade {\n        background-color: v(hoverBackgroundColor);\n      }\n    }\n\n    &:hover {\n      .#{$prefix}overlay {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    .#{$prefix}content {\n      z-index: 11;\n    }\n  }\n}\n\n.#{$prefix}content {\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  &.#{$prefix}vertical-content-alignment {\n    &-top {\n      justify-content: flex-start;\n    }\n\n    &-center {\n      justify-content: center;\n    }\n\n    &-bottom {\n      justify-content: flex-end;\n    }\n\n    &-distant {\n      justify-content: flex-end;\n\n      .#{$prefix}content-wrapper {\n        flex: 1 1 0%;\n        justify-content: space-between;\n      }\n\n      .#{$prefix}header-wrapper {\n        justify-content: flex-start;\n        flex: 1;\n      }\n\n      .#{$prefix}cta-wrapper {\n        justify-content: flex-end;\n        flex: 1;\n        align-items: flex-start;\n      }\n    }\n  }\n\n\n  &.#{$prefix}horizontal-content-alignment {\n    &-left {\n      align-items: flex-start;\n\n      .#{$prefix}content-wrapper {\n        align-items: flex-start;\n      }\n    }\n\n    &-center {\n      align-items: center;\n\n      .#{$prefix}content-wrapper {\n        align-items: center;\n        text-align: center;\n\n        .#{$prefix}pictogram-wrapper {\n          align-self: center;\n        }\n\n        .#{$prefix}headline-wrapper {\n          display: flex;\n          justify-content: center;\n        }\n\n        .#{$prefix}cta-wrapper {\n          align-items: center;\n        }\n      }\n    }\n\n    &-right {\n      align-items: flex-end;\n\n      .#{$prefix}content-wrapper {\n        align-items: flex-end;\n        text-align: right;\n        left: initial;\n\n        .#{$prefix}headline-wrapper {\n          align-items: flex-end;\n        }\n      }\n    }\n  }\n\n  &.#{$prefix}content-alignment {\n    &-left {\n      align-items: flex-start;\n      .#{$prefix}content-wrapper {\n        align-items: flex-start;\n      }\n    }\n\n    &-center,\n    &-distant {\n      align-items: center;\n\n      .#{$prefix}content-wrapper {\n        align-items: center;\n        text-align: center;\n\n        .#{$prefix}pictogram-wrapper {\n          align-self: center;\n        }\n\n        .#{$prefix}cta-wrapper {\n          align-items: center;\n        }\n      }\n    }\n\n    &-left,\n    &-distant {\n      justify-content: flex-end;\n\n      .#{$prefix}content-wrapper {\n        flex: 1 1 0%;\n      }\n      .#{$prefix}header-wrapper {\n        justify-content: flex-start;\n        flex: 1;\n      }\n      .#{$prefix}cta-wrapper {\n        justify-content: flex-end;\n        flex: 1;\n        align-items: flex-start;\n      }\n    }\n\n    &-center {\n      justify-content: center;\n    }\n  }\n\n  .#{$prefix}tiles-teaser-violator {\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex: 1 1 100%;\n    box-sizing: border-box;\n\n    &.#{$prefix}right {\n      justify-content: flex-end;\n    }\n\n    &.#{$prefix}center {\n      justify-content: center;\n    }\n\n    @include for-size(desktop-l-or-larger) {\n      padding: 48px 48px 0 48px;\n    }\n\n    @include for-size(desktop) {\n      padding: 40px 40px 0 40px;\n    }\n\n    @include for-size(tablet) {\n      padding: 32px 32px 0 32px;\n    }\n\n    @include for-size(phone) {\n      padding: 24px 24px 0 24px;\n    }\n  }\n\n  &.#{$prefix}vertical-content-alignment-distant {\n    .#{$prefix}tiles-teaser-violator {\n      flex: 0;\n\n      &.#{$prefix}right {\n        align-self: flex-end;\n        flex: 0;\n        width: auto;\n      }\n    }\n  }\n\n  .#{$prefix}content-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    flex: 0 0 0%;\n    margin: $tiles-teaser-x-large-content-margin;\n    box-sizing: border-box;\n\n    @include for-size(desktop) {\n      margin: $tiles-teaser-large-content-margin;\n    }\n\n    @include for-size(tablet) {\n      margin: $tiles-teaser-tablet-content-margin;\n    }\n\n    @include for-size(phone) {\n      margin: $tiles-teaser-small-content-margin;\n    }\n\n    .#{$prefix}header-wrapper,\n    .#{$prefix}cta-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n}\n@include teaserHeadlinesMargin(\".#{$prefix}headline-wrapper\");\n@include teaserCtaMargin(\".#{$prefix}cta-wrapper\");\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { ConditionalWrapper } from \"../../common/conditional-wrapper\";\nimport {\n  TilesTeaserSchemeDefinition,\n  TilesTeaserSchemeName,\n  TilesTeaserTextColor\n} from \"./constants/tiles-teaser-types\";\nimport { AspectRatio } from \"../../common/types\";\nimport { HEADLINE_SIZE_H4, HEADLINE_TAG_H4 } from \"../headline/constants/headline-constants\";\nimport { getFirstNestedChild } from \"../../utils/dom-helper\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { TilesTeaserSchemeConfiguration } from \"../../constants/colors\";\nimport { TILES_TEASER_SCHEME_CONFIG, TILES_TEASER_SCHEME_MAP } from \"./constants/tiles-teaser-constants\";\nimport {\n  TILES_TEASER_COLORS,\n  TILES_TEASER_DEFAULT_HORIZONTAL_CONTENT_ALIGNMENT,\n  TILES_TEASER_DEFAULT_VERTICAL_CONTENT_ALIGNMENT,\n  TILES_TEASER_DEFAULT_VIOLATOR_HORIZONTAL_POSITION,\n  TILES_TEASER_HORIZONTAL_CONTENT_ALIGNMENTS,\n  TILES_TEASER_VERTICAL_CONTENT_ALIGNMENTS,\n  TilesTeaserContentAlignment,\n  TilesTeaserHorizontalContentAlignment,\n  TilesTeaserVerticalContentAlignment,\n  TilesTeaserViolatorHorizontalPosition\n} from \"../../constants/global-constants\";\nimport { camelToDashCase, shortenString, stripHtml } from \"../../utils/string-format\";\nimport { ASPECTRATIO_1X1 } from \"../../common/constants\";\nimport { setCssVariable } from \"../../utils/css-variables\";\nimport { HeadlineTag } from \"../headline/constants/headline-types\";\nimport { useTheRightHtmlTagForHeadline } from \"../../utils/headline-helper\";\nimport {\n  ContainerBreakpointComponent,\n  initContainerBreakpointsDelegate\n} from \"../../common/container-breakpoint-component\";\nimport { GradientsOnImage, GradientsOnText } from \"../gradient/constants/gradient-types\";\n\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot image (optional) - Holds a single eon-ui-image element. Can be omitted\n * @slot headline - Holds a single eon-ui-headline element\n * @slot text - Holds a single eon-ui-text element\n * @slot link - Holds a single eon-ui-link element\n * @slot violator - Holds a single eon-ui-violator element\n */\n@Component({\n  tag: \"eon-ui-tiles-teaser\",\n  styleUrl: \"tiles-teaser.scss\",\n  assetsDirs: [\"assets-tiles-teaser\"],\n  shadow: true\n})\nexport class TilesTeaser\n  implements\n    ColorableComponent<TilesTeaserSchemeConfiguration<TilesTeaserSchemeDefinition>>,\n    ContainerBreakpointComponent {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: TilesTeaserSchemeConfiguration<TilesTeaserSchemeDefinition> = TILES_TEASER_SCHEME_CONFIG;\n  schemeMap = TILES_TEASER_SCHEME_MAP;\n\n  /**\n   * Array that defines component specific container breakpoints.\n   */\n  containerBreakpoints = [1200, 800, 400];\n\n  @Element() hostElement: HTMLEonUiTilesTeaserElement;\n  private imageElement: HTMLEonUiImageElement;\n  private headlineElement: HTMLEonUiHeadlineElement;\n  private linkElement: HTMLEonUiLinkElement;\n  private infoElement: HTMLEonUiInfoIconElement;\n  private textElement: HTMLEonUiTextElement;\n  private hasViolator: boolean;\n\n  /**\n   * copyCharacterLimit will limit the charaters of copy text to the given value\n   * @disableControlInStorybook true\n   * @example default: 160\n   */\n  private copyCharacterLimit: number = 160;\n\n  @State() activeScheme: TilesTeaserSchemeDefinition;\n  @State() linkHover: boolean;\n  @State() allowHorizontalContentAlignment: boolean = false;\n  @State() allowVerticalContentAlignment: boolean = false;\n\n  private get hasImage(): boolean {\n    return this.imageElement != null;\n  }\n\n  /**\n   * Raised when the component has been loaded.\n   */\n  @Event() tilesTeaserLoad: EventEmitter;\n\n  /**\n   * The default (unhovered) text color of the teaser.\n   */\n  @Prop({ reflect: true }) textColor: TilesTeaserTextColor = TILES_TEASER_COLORS[0];\n\n  /**\n   * Represents the internal color of the component.\n   * It will be read by colorable-component.ts getColorOfNearestBackground() function to realize\n   * the detection of backgrounds inside of components, hidden by shadow dom.\n   * @disableControlInStorybook true\n   */\n  @Prop({ reflect: true, mutable: true }) innerBackground: string;\n\n  /**\n   * name of the eon-ui-pictogram inside the teaser (see eon-ui-pictogram)\n   */\n  @Prop() pictogram: string;\n\n  /**\n   * horizontal Alignment of the content-box.\n   * @example left | center | right\n   */\n  // prettier-ignore\n  @Prop() horizontalContentAlignment: TilesTeaserHorizontalContentAlignment = TILES_TEASER_DEFAULT_HORIZONTAL_CONTENT_ALIGNMENT;\n\n  /**\n   * vertical Alignment of the content-box.\n   * @example top | center | bottom | distant\n   */\n  // prettier-ignore\n  @Prop() verticalContentAlignment: TilesTeaserVerticalContentAlignment = TILES_TEASER_DEFAULT_VERTICAL_CONTENT_ALIGNMENT;\n\n  /**\n   * Alignment of the content-box.\n   * @example left | center | distant\n   */\n  @Prop() contentAlignment: TilesTeaserContentAlignment;\n\n  /**\n   * The color that should be displayed as overlay when hovering over the Teaser.\n   */\n  @Prop({ attribute: \"background-color\", reflect: true }) scheme: TilesTeaserSchemeName;\n\n  /**\n   * Defines the aspect ratio.\n   */\n  @Prop({ mutable: true, reflect: true }) aspectRatio: AspectRatio = ASPECTRATIO_1X1;\n\n  /**\n   * Defines the aspect ratio for tablet breakpoint.\n   */\n  @Prop({ mutable: true, reflect: true }) aspectRatioTablet: AspectRatio;\n\n  /**\n   * Defines the aspect ratio for mobile breakpoint.\n   */\n  @Prop({ mutable: true, reflect: true }) aspectRatioMobile: AspectRatio;\n\n  /**\n   * Defines horizontal position of the violator.\n   */\n  // prettier-ignore\n  @Prop({ mutable: true }) violatorHorizontalPosition: TilesTeaserViolatorHorizontalPosition = TILES_TEASER_DEFAULT_VIOLATOR_HORIZONTAL_POSITION;\n\n  /**\n   * This property is used for SEO-Optimisation.\n   */\n  @Prop() headlineHtmlTag: HeadlineTag;\n\n  /**\n   * Remove border radius completely to be able to use linked tiles teasers in teaser walls or grids without gutter.\n   */\n  @Prop() removeBorderRadius: boolean;\n\n  /**\n   * Gradient for Text<br><b>Only allowed for red background!!</b>\n   */\n  @Prop() gradientForText: GradientsOnText;\n\n  /**\n   * Gradient for images\n   */\n  @Prop() gradientForImages: GradientsOnImage;\n\n  initContainerBreakpoints(): void {\n    initContainerBreakpointsDelegate(this.hostElement, this.containerBreakpoints);\n  }\n\n  componentWillLoad() {\n    this.imageElement = getFirstNestedChild(this.hostElement, \"eon-ui-image\");\n    this.hasViolator = !!getFirstNestedChild(this.hostElement, \"eon-ui-violator\");\n\n    if (this.hasImage) {\n      this.imageElement.setAttribute(\"position-y\", \"center\");\n      this.imageElement.setAttribute(\"position-x\", \"center\");\n      this.imageElement.setAttribute(\"width\", \"100%\");\n      this.imageElement.setAttribute(\"height\", \"100%\");\n      this.imageElement.removeAttribute(\"caption\");\n    }\n\n    this.linkElement = getFirstNestedChild(this.hostElement, \"eon-ui-link\");\n    this.infoElement = getFirstNestedChild(this.hostElement, \"eon-ui-info-icon\");\n    this.textElement = getFirstNestedChild(this.hostElement, \"eon-ui-text\");\n\n    if (!!this.textElement) {\n      this.getTruncatedBody();\n    }\n\n    this.headlineElement = getFirstNestedChild(this.hostElement, \"eon-ui-headline\");\n    this.headlineElement.setAttribute(\"size\", HEADLINE_SIZE_H4);\n    this.headlineElement.setAttribute(\n      \"headline-html-tag\",\n      useTheRightHtmlTagForHeadline(this.headlineHtmlTag, HEADLINE_TAG_H4)\n    );\n    this.alignHeadline();\n\n    this.checkHorizontalContentAlignment();\n    this.checkVerticalContentAlignment();\n    this.applyScheme();\n    this.initContainerBreakpoints();\n    this.setAspectRatio();\n    this.infoElement?.addEventListener(\"click\", (e) => {\n      e.preventDefault();\n    });\n    this.handleSchemeForGradients();\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n    this.applyTextColor();\n    this.tilesTeaserLoad.emit();\n  }\n\n  @Watch(\"scheme\")\n  applyScheme(): void {\n    applySchemeDelegate(this);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n  }\n\n  @Watch(\"textColor\")\n  applyTextColor() {\n    setCssVariable(this.hostElement, \"--textColor\", `var(--eon-${camelToDashCase(this.textColor)})`);\n    this.infoElement?.setAttribute(\"scheme\", this.textColor);\n  }\n\n  @Watch(\"contentAlignment\")\n  alignHeadline() {\n    this.headlineElement.setAttribute(\"alignment\", this.contentAlignment === \"left\" ? \"left\" : \"center\");\n  }\n\n  @Watch(\"horizontalContentAlignment\")\n  checkHorizontalContentAlignment() {\n    this.allowHorizontalContentAlignment = (TILES_TEASER_HORIZONTAL_CONTENT_ALIGNMENTS as ReadonlyArray<string>).includes(\n      this.horizontalContentAlignment\n    );\n    if (this.allowHorizontalContentAlignment && !this.contentAlignment)\n      this.headlineElement.setAttribute(\"alignment\", this.horizontalContentAlignment);\n  }\n\n  @Watch(\"verticalContentAlignment\")\n  checkVerticalContentAlignment() {\n    this.allowVerticalContentAlignment = (TILES_TEASER_VERTICAL_CONTENT_ALIGNMENTS as ReadonlyArray<string>).includes(\n      this.verticalContentAlignment\n    );\n  }\n  @Watch(\"gradientForText\")\n  @Watch(\"gradientForImages\")\n  handeWatch() {\n    this.handleSchemeForGradients();\n  }\n\n  private getTruncatedBody() {\n    const bodyLength = this.textElement.innerHTML && stripHtml(this.textElement.innerHTML).length;\n    if (bodyLength > this.copyCharacterLimit) {\n      this.textElement.innerHTML = shortenString(this.textElement.innerHTML, this.copyCharacterLimit, \"...\");\n    }\n  }\n\n  @Watch(\"aspectRatio\")\n  @Listen(\"resize\", { target: \"window\" })\n  private setAspectRatio() {\n    if (this.imageElement) {\n      this.imageElement.setAttribute(\"use-as-background\", \"true\");\n\n      if (!this.aspectRatio) {\n        this.imageElement.removeAttribute(\"use-as-background\");\n      } else {\n        this.imageElement.setAttribute(\"use-as-background\", \"true\");\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  onMouseEnter() {\n    if (this.linkElement) this.linkElement.setAttribute(\"force-hover-style\", String(true));\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave() {\n    if (this.linkElement) this.linkElement.setAttribute(\"force-hover-style\", String(false));\n  }\n\n  handleSchemeForGradients() {\n    if (this.gradientForText || this.gradientForImages) {\n      this.hostElement.removeAttribute(\"background-color\");\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"no-image\": !this.hasImage,\n          \"no-link\": !this.linkElement,\n          \"has-text-gradient\": !!this.gradientForText\n        }}\n      >\n        <ConditionalWrapper\n          condition={!!this.linkElement}\n          wrapper={(children) => (\n            <a\n              class={pfx({ teaser: true, \"no-radius\": !!this.removeBorderRadius })}\n              href={this.linkElement?.href || \"#\"}\n              target={this.linkElement?.target}\n              title={this.linkElement?.title}\n            >\n              {children}\n            </a>\n          )}\n          defaultWrapper={(children) => <div class={pfx({ teaser: true, \"no-radius\": true })}>{children}</div>}\n        >\n          <div\n            class={pfx({\n              wrapper: true,\n              \"only-visible-on-hover\": this.hasImage && !!this.scheme,\n              \"hover-overlay\": this.linkElement && !(this.hasImage && !!this.scheme),\n              [`${this.aspectRatio}`]: !!this.aspectRatio,\n              [`tablet-${this.aspectRatioTablet}`]: !!this.aspectRatioTablet,\n              [`mobile-${this.aspectRatioMobile}`]: !!this.aspectRatioMobile\n            })}\n          >\n            {this.hasImage && <slot name=\"image\"></slot>}\n            {this.gradientForImages && <eon-ui-gradient gradient-for-images={this.gradientForImages}></eon-ui-gradient>}\n            <div class={pfx({ overlay: true, \"color-shade\": !!this.scheme })}></div>\n            <div\n              class={pfx({\n                content: true,\n                [`horizontal-content-alignment-${this.horizontalContentAlignment}`]:\n                  this.allowHorizontalContentAlignment && !this.contentAlignment,\n                [`vertical-content-alignment-${this.verticalContentAlignment}`]:\n                  this.allowVerticalContentAlignment && !this.contentAlignment,\n                [`content-alignment-${this.contentAlignment}`]: this.contentAlignment,\n                \"has-violator\": this.hasViolator\n              })}\n            >\n              {this.hasViolator && (\n                <div\n                  class={pfx({\n                    \"tiles-teaser-violator\": true,\n                    [this.violatorHorizontalPosition]: true\n                  })}\n                >\n                  <slot name=\"violator\"></slot>\n                </div>\n              )}\n\n              <div\n                class={pfx({\n                  [\"content-wrapper\"]: true\n                })}\n              >\n                <div\n                  class={pfx({\n                    [\"header-wrapper\"]: true\n                  })}\n                >\n                  {this.pictogram && (\n                    <div\n                      class={pfx({\n                        \"pictogram-wrapper\": true\n                      })}\n                    >\n                      <eon-ui-pictogram name={this.pictogram}></eon-ui-pictogram>\n                    </div>\n                  )}\n                  {/* Note that we can't use a eon-ui-background here as wrapper because slotted children can't access our ShadowDOM! */}\n                  <div class={pfx(\"headline-wrapper\")}>\n                    <slot name=\"headline\"></slot>\n                  </div>\n                  {!!this.textElement && <slot name=\"text\"></slot>}\n                </div>\n                <div\n                  class={pfx({\n                    [\"cta-wrapper\"]: true\n                  })}\n                >\n                  <slot name=\"link\"></slot>\n                  <slot name=\"info-icon\"></slot>\n                </div>\n              </div>\n            </div>\n            {this.gradientForText && <eon-ui-gradient gradient-for-text={this.gradientForText}></eon-ui-gradient>}\n          </div>\n        </ConditionalWrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}