{"version":3,"names":["headlineCss","EonUiHeadlineStyle0","Headline","this","schemeConfig","HEADLINE_SCHEME_CONFIG","schemeMap","HEADLINE_SCHEME_MAP","containerBreakpoints","HEADLINE_SIZE_H3","HEADLINE_DEFAULT_ALIGNMENT","componentWillLoad","applyScheme","updateProcessedText","handleHeadlineTag","initContainerBreakpoints","infoIconComponent","hostElement","querySelector","componentDidLoad","setCssVariables","applyInfoIconScheme","applySchemeDelegate","setCssVariablesDelegate","initContainerBreakpointsDelegate","setAttribute","activeScheme","color","replace","slashN","text","disableLineWrap","processedText","split","join","size","seoHeadlineTag","useTheRightHtmlTagForHeadline","headlineHtmlTag","render","TagForHeadline","toLowerCase","h","key","lang","language","class","pfx","alignment","ignoreAlignment","margin","textShadow","hyphenation","sizeContainerBased","HEADLINE_SIZE_COPY","innerHTML","name"],"sources":["src/components/headline/headline.scss?tag=eon-ui-headline&encapsulation=shadow","src/components/headline/headline.tsx"],"sourcesContent":["/**\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$headline-big-shadow: 0px 1px 4px rgba(57, 57, 58, 0.2) !default;\n$headline-small-shadow: 0px 1px 2px rgba(57, 57, 58, 0.2) !default;\n$headline-tiny-shadow: 0px 1px 1px rgba(57, 57, 58, 0.2) !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n@mixin hyphenation {\n hyphens: auto;\n /*toDo:\n when support for hyphenation configuration grows, still clarify configuration with designers */\n hyphenate-limit-chars: 10 3 2;\n}\n\n:host {\n color: v(color);\n transition: color $transition-duration ease-in-out;\n}\n\n.#{$prefix}no-margin {\n margin: 0;\n}\n\n.#{$prefix}heading-h1 {\n @include eon-typography(\"h1\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-big-shadow;\n\n @include for-size(phone) {\n text-shadow: $headline-small-shadow;\n }\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 30px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 24px;\n }\n\n @include for-size(tablet) {\n margin-top: 18px;\n }\n\n @include for-size(phone) {\n margin-top: 12px;\n }\n }\n}\n\n.#{$prefix}heading-h1-display {\n @include eon-typography(\"h1-display\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-big-shadow;\n\n @include for-size(phone) {\n text-shadow: $headline-small-shadow;\n }\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 30px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 24px;\n }\n\n @include for-size(tablet) {\n margin-top: 18px;\n }\n\n @include for-size(phone) {\n margin-top: 12px;\n }\n }\n}\n\n.#{$prefix}heading-h2 {\n @include eon-typography(\"h2\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-big-shadow;\n\n @include for-size(tablet) {\n text-shadow: $headline-small-shadow;\n }\n\n @include for-size(phone) {\n text-shadow: $headline-small-shadow;\n }\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 24px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 17px;\n }\n\n @include for-size(tablet) {\n margin-top: 11px;\n }\n\n @include for-size(phone) {\n margin-top: 8px;\n }\n }\n}\n\n.#{$prefix}heading-h2-display {\n @include eon-typography(\"h2-display\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-big-shadow;\n\n @include for-size(tablet) {\n text-shadow: $headline-small-shadow;\n }\n\n @include for-size(phone) {\n text-shadow: $headline-small-shadow;\n }\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 24px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 17px;\n }\n\n @include for-size(tablet) {\n margin-top: 11px;\n }\n\n @include for-size(phone) {\n margin-top: 8px;\n }\n }\n}\n\n.#{$prefix}heading-h3 {\n @include eon-typography(\"h3\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-small-shadow;\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 14px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 11px;\n }\n\n @include for-size(tablet) {\n margin-top: 8px;\n }\n\n @include for-size(phone) {\n margin-top: 5px;\n }\n }\n}\n\n.#{$prefix}heading-h4 {\n @include eon-typography(\"h4\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-small-shadow;\n\n @include for-size(phone) {\n text-shadow: $headline-tiny-shadow;\n }\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 6px 16px 0;\n\n @include for-size(desktop-or-smaller) {\n margin-top: 3px;\n }\n\n @include for-size(phone) {\n margin-top: 1px;\n }\n }\n}\n\n.#{$prefix}heading-h5 {\n @include eon-typography(\"h5\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-tiny-shadow;\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 1px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 0;\n }\n }\n}\n\n.#{$prefix}heading-h6 {\n @include eon-typography(\"h6\");\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n &.#{$prefix}text-shadow {\n text-shadow: $headline-tiny-shadow;\n }\n\n .#{$prefix}headline-info-icon {\n align-items: flex-start;\n margin: 1px 16px 0;\n\n @include for-size(desktop) {\n margin-top: 0;\n }\n }\n}\n\n.#{$prefix}heading-copy.#{$prefix}copy {\n @include eon-typography(\"copy\");\n display: block;\n\n &.#{$prefix}hyphenation {\n @include hyphenation;\n }\n\n font-weight: 500;\n}\n\n.#{$prefix}headline {\n &.#{$prefix}right {\n text-align: right;\n }\n\n &.#{$prefix}left {\n text-align: left;\n }\n\n &.#{$prefix}center {\n text-align: center;\n }\n\n &.#{$prefix}ignore-alignment {\n text-align: unset;\n }\n}\n\n.#{$prefix}info-icon-display {\n display: flex;\n}\n\n:host(.container-breakpoint-1200) {\n .#{$prefix}container-based-size {\n &.#{$prefix}heading-h1 {\n font-size: $heading-h1-font-size-desktop;\n line-height: $heading-h1-line-height-desktop;\n }\n\n &.#{$prefix}heading-h2 {\n font-size: $heading-h2-font-size-desktop;\n line-height: $heading-h2-line-height-desktop;\n }\n\n &.#{$prefix}heading-h3 {\n font-size: $heading-h3-font-size-desktop;\n line-height: $heading-h3-line-height-desktop;\n }\n\n &.#{$prefix}heading-h4 {\n font-size: $heading-h4-font-size-desktop;\n line-height: $heading-h4-line-height-desktop;\n }\n\n &.#{$prefix}heading-h5 {\n font-size: $heading-h5-font-size-desktop;\n line-height: $heading-h5-line-height-desktop;\n }\n\n &.#{$prefix}heading-h6 {\n font-size: $heading-h6-font-size-desktop;\n line-height: $heading-h6-line-height-desktop;\n }\n }\n}\n\n:host(.container-breakpoint-800) {\n .#{$prefix}container-based-size {\n &.#{$prefix}heading-h1 {\n font-size: $heading-h1-font-size-tablet;\n line-height: $heading-h1-line-height-tablet;\n }\n\n &.#{$prefix}heading-h2 {\n font-size: $heading-h2-font-size-tablet;\n line-height: $heading-h2-line-height-tablet;\n }\n\n &.#{$prefix}heading-h3 {\n font-size: $heading-h3-font-size-tablet;\n line-height: $heading-h3-line-height-tablet;\n }\n\n &.#{$prefix}heading-h4 {\n font-size: $heading-h4-font-size-tablet;\n line-height: $heading-h4-line-height-tablet;\n }\n\n &.#{$prefix}heading-h5 {\n font-size: $heading-h5-font-size-tablet;\n line-height: $heading-h5-line-height-tablet;\n }\n\n &.#{$prefix}heading-h6 {\n font-size: $heading-h6-font-size-tablet;\n line-height: $heading-h6-line-height-tablet;\n }\n }\n}\n\n:host(.container-breakpoint-400) {\n .#{$prefix}container-based-size {\n &.#{$prefix}heading-h1 {\n font-size: $heading-h1-font-size-phone;\n line-height: $heading-h1-line-height-phone;\n }\n\n &.#{$prefix}heading-h2 {\n font-size: $heading-h2-font-size-phone;\n line-height: $heading-h2-line-height-phone;\n }\n\n &.#{$prefix}heading-h3 {\n font-size: $heading-h3-font-size-phone;\n line-height: $heading-h3-line-height-phone;\n }\n\n &.#{$prefix}heading-h4 {\n font-size: $heading-h4-font-size-phone;\n line-height: $heading-h4-line-height-phone;\n }\n\n &.#{$prefix}heading-h5 {\n font-size: $heading-h5-font-size-phone;\n line-height: $heading-h5-line-height-phone;\n }\n\n &.#{$prefix}heading-h6 {\n font-size: $heading-h6-font-size-phone;\n line-height: $heading-h6-line-height-phone;\n }\n }\n}\n","import { Component, Element, h, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport {\n HEADLINE_SCHEME_CONFIG,\n HEADLINE_SCHEME_MAP,\n HEADLINE_SIZE_COPY,\n HEADLINE_SIZE_H3\n} from \"./constants/headline-constants\";\nimport { HeadlineSchemeDefinition, HeadlineSchemeName, HeadlineSize, HeadlineTag } from \"./constants/headline-types\";\nimport { HeadlineSchemeConfiguration } from \"../../constants/colors\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { useTheRightHtmlTagForHeadline } from \"../../utils/headline-helper\";\nimport { HEADLINE_DEFAULT_ALIGNMENT, HeadlineAlignment } from \"../../constants/global-constants\";\nimport {\n ContainerBreakpointComponent,\n initContainerBreakpointsDelegate\n} from \"../../common/container-breakpoint-component\";\n\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot info-icon - Holds a single eon-ui-info-icon element\n */\n@Component({\n tag: \"eon-ui-headline\",\n styleUrl: \"headline.scss\",\n assetsDirs: [\"assets-headline\"],\n shadow: true\n})\nexport class Headline\n implements ColorableComponent>, ContainerBreakpointComponent {\n // @InitLogging() sentryTransaction;\n schemeConfig: HeadlineSchemeConfiguration = HEADLINE_SCHEME_CONFIG;\n schemeMap = HEADLINE_SCHEME_MAP;\n\n /**\n * Array that defines component specific container breakpoints.\n */\n containerBreakpoints = [1200, 800, 400];\n\n @State() activeScheme: HeadlineSchemeDefinition;\n\n @Element() hostElement: HTMLEonUiHeadlineElement;\n @State() processedText: string;\n @State() seoHeadlineTag: string;\n @State() infoIconComponent: HTMLEonUiInfoIconElement;\n\n /**\n * The name of the color scheme of the component.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @Prop({ reflect: true }) scheme: HeadlineSchemeName;\n\n /**\n * The size of the headline.
If the property \"headlineHtmlTag\" is not defined,\n * this property is used to generate the HTML-Tag for the headline,
\n * e.g.if size=\"h1\" the HTML-Tag \"H1\" is used for the headline.
\n * **IMPORTANT**: This property **has an** effect on the styles!\n * @example \n */\n @Prop() size: HeadlineSize = HEADLINE_SIZE_H3;\n\n /**\n * Container based size\n */\n @Prop({ reflect: true }) sizeContainerBased: boolean = false;\n\n /**\n * this property is used for SEO-Optimisation.
\n * If this property is used and fill-out, this property is used for HTML-Tag for headline,
\n * e.g. if headline-html-tag=\"h1\" the HTML-Tag \"H1\" is used for the headline.
\n * **IMPORTANT**: This property **does not** affect the styles!\n * @example \n */\n @Prop() headlineHtmlTag: HeadlineTag;\n\n /**\n * Alignment of the headline.\n * @example \n */\n @Prop() alignment: HeadlineAlignment = HEADLINE_DEFAULT_ALIGNMENT;\n\n /**\n * Ignore alignment property\n */\n @Prop() ignoreAlignment: boolean = false;\n\n /**\n * Text content of the headline\n *\n * @example \n */\n @Prop() text: string;\n\n /**\n * A boolean property that can be used to disable line breaks.\n */\n @Prop() disableLineWrap: boolean = false;\n\n /**\n * If the headline component has its natural margin defined by the e.on brand design. Omit only if the headline is used in spaces where the margin can be removed because of other css\n * (for example when using a headline in a flexbox layout)\n */\n @Prop() margin = true;\n\n /**\n * Whether or not the headline text should have a text shadow. Use this if the headline is placed on top of an image and you need more contrast between image and headline.\n */\n @Prop() textShadow = false;\n\n /**\n * A boolean property that can be used to enable line hyphenation.
\n * Important!: If you have activated hyphenation, note that you must then also set the language, see also the property \"language\".\n */\n @Prop() hyphenation: boolean = false;\n\n /**\n * if you enabled hyphenation, it is important that the language for the headline is defined.
\n * There is an automatism that finds out in which language the HTML document exists. If no lang attribute is specified at the parent tags, then the language must be set manually.\n *
Look here for a List of available language code.\n */\n @Prop() language: string;\n\n componentWillLoad() {\n this.applyScheme();\n this.updateProcessedText();\n this.handleHeadlineTag();\n this.initContainerBreakpoints();\n\n this.infoIconComponent = this.hostElement.querySelector('[slot=\"info-icon\"]');\n }\n\n componentDidLoad() {\n this.setCssVariables();\n this.applyInfoIconScheme();\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 initContainerBreakpoints(): void {\n initContainerBreakpointsDelegate(this.hostElement, this.containerBreakpoints);\n }\n\n @Watch(\"infoIconComponent\")\n @Watch(\"scheme\")\n applyInfoIconScheme(): void {\n this.infoIconComponent &&\n this.infoIconComponent.setAttribute(\"scheme\", this.activeScheme.color.replace(\"eon-\", \"\"));\n }\n\n /**\n * Executes whenever the text property changes. Replaced the specified linewrap symbol with
.\n */\n @Watch(\"text\")\n updateProcessedText() {\n const slashN = \"\\\\n\";\n if (this.text && !this.disableLineWrap) {\n this.processedText = this.text.split(slashN).join(\"
\");\n } else {\n this.processedText = this.text;\n }\n }\n\n @Watch(\"headlineHtmlTag\")\n @Watch(\"size\")\n handleHeadlineTag() {\n if (this.size === \"copy\") {\n this.seoHeadlineTag = useTheRightHtmlTagForHeadline(this.headlineHtmlTag, \"span\");\n } else if (this.size === \"h1-display\") {\n this.seoHeadlineTag = useTheRightHtmlTagForHeadline(this.headlineHtmlTag, \"h1\");\n } else if (this.size === \"h2-display\") {\n this.seoHeadlineTag = useTheRightHtmlTagForHeadline(this.headlineHtmlTag, \"h2\");\n } else {\n this.seoHeadlineTag = useTheRightHtmlTagForHeadline(this.headlineHtmlTag, this.size);\n }\n }\n\n render() {\n //build headline tag\n const TagForHeadline = `${this.seoHeadlineTag.toLowerCase()}` as keyof JSX.IntrinsicElements;\n // rename HeadlineTag in TagForHeadline because of using HeadlineTag in \"./constants/headline-types\" (sonar issue)\n return (\n \n \n {this.infoIconComponent && (\n
\n \n
\n )}\n \n );\n }\n}\n"],"mappings":"uYAAA,MAAMA,EAAc,m5wDACpB,MAAAC,EAAeD,E,MC4BFE,EAAQ,M,yBAGnBC,KAAAC,aAAsEC,EACtEF,KAAAG,UAAYC,EAKZJ,KAAAK,qBAAuB,CAAC,KAAM,IAAK,K,wJAsBNC,E,wBAK0B,M,8CAehBC,E,qBAKJ,M,yCAYA,M,YAMlB,K,gBAKI,M,iBAMU,M,wBAS/B,iBAAAC,GACER,KAAKS,cACLT,KAAKU,sBACLV,KAAKW,oBACLX,KAAKY,2BAELZ,KAAKa,kBAAoBb,KAAKc,YAAYC,cAAc,qB,CAG1D,gBAAAC,GACEhB,KAAKiB,kBACLjB,KAAKkB,qB,CAIP,WAAAT,GACEU,EAAoBnB,K,CAItB,eAAAiB,GACEG,EAAwBpB,K,CAG1B,wBAAAY,GACES,EAAiCrB,KAAKc,YAAad,KAAKK,qB,CAK1D,mBAAAa,GACElB,KAAKa,mBACHb,KAAKa,kBAAkBS,aAAa,SAAUtB,KAAKuB,aAAaC,MAAMC,QAAQ,OAAQ,I,CAO1F,mBAAAf,GACE,MAAMgB,EAAS,MACf,GAAI1B,KAAK2B,OAAS3B,KAAK4B,gBAAiB,CACtC5B,KAAK6B,cAAgB7B,KAAK2B,KAAKG,MAAMJ,GAAQK,KAAK,S,KAC7C,CACL/B,KAAK6B,cAAgB7B,KAAK2B,I,EAM9B,iBAAAhB,GACE,GAAIX,KAAKgC,OAAS,OAAQ,CACxBhC,KAAKiC,eAAiBC,EAA8BlC,KAAKmC,gBAAiB,O,MACrE,GAAInC,KAAKgC,OAAS,aAAc,CACrChC,KAAKiC,eAAiBC,EAA8BlC,KAAKmC,gBAAiB,K,MACrE,GAAInC,KAAKgC,OAAS,aAAc,CACrChC,KAAKiC,eAAiBC,EAA8BlC,KAAKmC,gBAAiB,K,KACrE,CACLnC,KAAKiC,eAAiBC,EAA8BlC,KAAKmC,gBAAiBnC,KAAKgC,K,EAInF,MAAAI,GAEE,MAAMC,EAAiB,GAAGrC,KAAKiC,eAAeK,gBAE9C,OACEC,EAACF,EAAc,CAAAG,IAAA,2CACbC,KAAMzC,KAAK0C,SACXC,MAAOC,EAAI,CACT,CAAC,YAAa,KACd,CAAC,qBAAsB5C,KAAKa,kBAC5B,CAACb,KAAK6C,WAAY7C,KAAK6C,UACvB,CAAC,oBAAqB7C,KAAK8C,gBAC3B,CAAC,WAAa9C,KAAKgC,MAAO,KAC1B,CAAC,cAAehC,KAAK+C,OACrB,CAAC,eAAgB/C,KAAKgD,WACtB,CAAC,eAAgBhD,KAAKiD,YACtB,CAAC,wBAAyBjD,KAAKkD,mBAC/B,CAAC,QAASlD,KAAKgC,OAASmB,KAG1BZ,EAAA,QAAAC,IAAA,2CAAMY,UAAWpD,KAAK6B,gBACrB7B,KAAKa,mBACJ0B,EAAA,OAAAC,IAAA,2CAAKG,MAAOC,EAAI,uBACdL,EAAA,QAAAC,IAAA,2CAAMa,KAAK,e"}