{"version":3,"names":["STAGE_INDICATOR_COLOR_LIGHT","STAGE_VIDEO_CONTROL_COLOR_LIGHT","STAGE_HEADLINE_SIZES","HEADLINE_SIZE_H1","HEADLINE_SIZE_H2","HEADLINE_SIZE_H3","createSchemes","newSchemes","AllColors.STAGE_SCHEMES","forEach","element","schemeName","contentBoxBackgroundColor","AllColors","toConstantCase","contentBoxBackgroundColorBlurred","contentBoxSubheadlineColor","contentBoxHeadlineScheme","contentBoxLinkScheme","contentBoxButtonScheme","subheadlineColor","headlineScheme","linkScheme","buttonScheme","scheme","STAGE_SCHEME_CONFIG","STAGE_SCHEME_MAP","Map","Object","entries","createStageMapDefinition","map","background","config","STAGE_LOCALIZATION","en","play","pause","de","sv","nl","it","hu","da","fr","es","pl","ro","hr","cs","sl","stageSvgs","h","width","height","viewBox","fill","xmlns","d","stageCss","EonUiStageStyle0","Stage","this","schemeConfig","schemeMap","localization","headlineShadow","schemeForGradients","STAGE_DEFAULT_CONTENT_WIDTH","STAGE_DEFAULT_ALIGNMENT","STAGE_DEFAULT_VIOLATOR_HORIZONTAL_POSITION","componentWillLoad","headline","getFirstNestedChild","hostElement","buttons","Array","from","getNestedChildrenOf","links","hasViolator","violatorSize","getAttribute","contentAlignment","applyScheme","setCurrentLocalization","setImageRatio","video","setVideoProperties","enterViewport","size","clampHeadlineSizeTo","setAttribute","headlineAlignment","enableContentOnBackground","textShadow","removeAttribute","handleHeadlineTag","contentWidth","updateProcessedText","fullHeight","handleHeightCalculation","handleSchemeForGradients","componentDidLoad","setCssVariables","stageLoad","emit","headerHeight","navigationHeight","_a","document","getElementsByTagName","updateNavigationHeight","thirdLevelNavigationHeight","_b","updateHeight","bottomDrawerHeight","_c","getHeight","heightAdjustment","Number","isInteger","style","setProperty","updateHeaderHeightCSSVariable","applySchemeDelegate","setSlottedComponentSchemes","relevantScheme","activeScheme","subheadlineText","button","link","setCssVariablesDelegate","innerBackground","slashN","split","join","handeWatch","aspectRatio","isMobile","ASPECTRATIO_1X1","ASPECTRATIO_2X1","imageComponents","length","image","handleIndicatorClick","scrollToElement","targetPosition","offset","offsetHeight","window","innerHeight","headlineHtmlTag","allowContentAlignment","STAGE_ALIGNMENT","includes","alignment","setCurrentLocalizationDelegate","backgroundVideo","children","filter","call","child","tagName","handlePlayToggle","isPlaying","pausePlayback","startPlayback","IntersectionObserver","videoObserver","entry","intersectionRatio","threshold","observe","gradientForImages","render","showVideoPlayBackControls","videoPlaybackOption","isTouchDevice","Host","key","class","pfx","stage","contentPosition","name","violatorHorizontalPosition","enableBlurredBackground","innerHTML","tabindex","videoControlColor","onClick","currentLocalization","role","tabIndex","indicatorColor"],"sources":["src/components/stage/constants/stage-constants.ts","src/components/stage/constants/stage-i18n.ts","src/components/stage/icon-svgs.tsx","src/components/stage/stage.scss?tag=eon-ui-stage&encapsulation=shadow","src/components/stage/stage.tsx"],"sourcesContent":["import { StageSchemeDefinition } from \"./stage-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\nimport { HEADLINE_SIZE_H1, HEADLINE_SIZE_H2, HEADLINE_SIZE_H3 } from \"../../headline/constants/headline-constants\";\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createStageMapDefinition } from \"../../../utils/scheme-helper\";\n\nexport const STAGE_POSITION_TOP = \"top\";\nexport const STAGE_POSITION_CENTER = \"center\";\nexport const STAGE_POSITION_BOTTOM = \"bottom\";\n\nexport const STAGE_WIDTH_WIDE = \"wide\";\nexport const STAGE_WIDTH_NORMAL = \"normal\";\nexport const STAGE_WIDTH_NARROW = \"narrow\";\n\nexport const STAGE_INDICATOR_COLOR_LIGHT = \"light\";\nexport const STAGE_INDICATOR_COLOR_DARK = \"dark\";\n\nexport const STAGE_VIDEO_CONTROL_COLOR_LIGHT = \"light\";\nexport const STAGE_VIDEO_CONTROL_COLOR_DARK = \"dark\";\n\nexport const STAGE_POSITIONS = [STAGE_POSITION_TOP, STAGE_POSITION_CENTER, STAGE_POSITION_BOTTOM] as const;\nexport const STAGE_WIDTHS = [STAGE_WIDTH_WIDE, STAGE_WIDTH_NORMAL, STAGE_WIDTH_NARROW] as const;\nexport const STAGE_INDICATOR_COLORS = [STAGE_INDICATOR_COLOR_LIGHT, STAGE_INDICATOR_COLOR_DARK] as const;\nexport const STAGE_HEADLINE_SIZES = [HEADLINE_SIZE_H1, HEADLINE_SIZE_H2, HEADLINE_SIZE_H3] as const;\nexport const STAGE_VIDEO_CONTROL_COLORS = [STAGE_VIDEO_CONTROL_COLOR_LIGHT, STAGE_VIDEO_CONTROL_COLOR_DARK] as const;\n\nfunction createSchemes() {\n let newSchemes: AllColors.StageSchemeConfiguration = {};\n AllColors.STAGE_SCHEMES.forEach((element) => {\n newSchemes[element.schemeName] = {\n contentBoxBackgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n contentBoxBackgroundColorBlurred: AllColors[`COLOR_${toConstantCase(element.schemeName)}_OPACITY_90`],\n contentBoxSubheadlineColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_FONT`],\n contentBoxHeadlineScheme: \"\",\n contentBoxLinkScheme: \"\",\n contentBoxButtonScheme: \"\",\n subheadlineColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n headlineScheme: \"\",\n linkScheme: \"\",\n buttonScheme: \"\"\n };\n if (element.scheme) {\n newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n }\n });\n return newSchemes;\n}\n\nexport const STAGE_SCHEME_CONFIG: AllColors.StageSchemeConfiguration = createSchemes();\n\nexport const STAGE_SCHEME_MAP: Map = new Map(\n Object.entries(createStageMapDefinition()).map(([background, config]) => [\n background as BackgroundColor,\n STAGE_SCHEME_CONFIG[config as string]\n ])\n);\n","import { Localization } from \"../../../common/localizable-component\";\nimport { StageLocalization } from \"./stage-types\";\n\nexport const STAGE_LOCALIZATION: Localization = {\n en: {\n play: \"Pause playback\",\n pause: \"Resume playback\"\n },\n de: {\n play: \"Wiedergabe anhalten\",\n pause: \"Wiedergabe fortsetzen\"\n },\n sv: {\n play: \"Pausa uppspelning\",\n pause: \"Återuppta uppspelning\"\n },\n nl: {\n play: \"Afspelen onderbreken\",\n pause: \"afspelen hervatten\"\n },\n it: {\n play: \"Interrompere la riproduzione\",\n pause: \"Riprendere la riproduzione\"\n },\n hu: {\n play: \"Lejátszás szüneteltetése\",\n pause: \"Lejátszás folytatása\"\n },\n da: {\n play: \"Pause playback\",\n pause: \"Fortsæt playback\"\n },\n fr: {\n play: \"Pause de la lecture\",\n pause: \"Reprise de la lecture\"\n },\n es: {\n play: \"Pausa la reproducción\",\n pause: \"Reanudar la reproducción\"\n },\n pl: {\n play: \"Wstrzymanie odtwarzania\",\n pause: \"Wznowienie odtwarzania\"\n },\n ro: {\n play: \"Pauză la redare\",\n pause: \"Reluarea redării\"\n },\n hr: {\n play: \"Pauziraj reprodukciju\",\n pause: \"Nastavak reprodukcije\"\n },\n cs: {\n play: \"Pozastavení přehrávání\",\n pause: \"Obnovení přehrávání\"\n },\n sl: {\n play: \"Prekinitev predvajanja\",\n pause: \"Nadaljevanje predvajanja\"\n }\n};\n","import { h } from \"@stencil/core\";\n\n// the props in this are (factory) functions instead of attributes because it's not recommended to reuse JSX elements in Stencil\n// see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes\nexport const stageSvgs = {\n pause: () => (\n \n \n \n ),\n play: () => (\n \n \n \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$stage-default-radius: 0 !default;\n$stage-default-shadow: none !default;\n$stage-margin-desktop: 48px !default;\n$stage-margin-tablet: 32px !default;\n$stage-margin-tablet-or-smaller: 24px !default;\n$stage-blurred-background: 10px !default;\n$stage-indicator-border-radius: 0 !default;\n$stage-indicator-height: 48px !default;\n$stage-indicator-width: 48px !default;\n$stage-indicator-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !default;\n$stage-indicator-color-light: #ffffff !default;\n$stage-indicator-color-dark: #000000 !default;\n$stage-video-control-color-light: #ffffff !default;\n$stage-video-control-color-dark: #000000 !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n$content-spacing: 15px;\n$content-padding: 24px;\n$content-width-wide: 100%;\n$content-width-normal: 75%;\n$content-max-width-normal: 900px;\n$content-width-narrow: 50%;\n$content-max-width-narrow: 600px;\n$tiny-shadow: 0px 1px 1px rgba(57, 57, 58, 0.2);\n\n@mixin min-max-height($min, $max) {\n min-height: $min;\n max-height: $max;\n}\n\n:host {\n // Estimation of height of header of the page. This value will be overwritten if a real calculated\n // height is passed down as attribute to the web component.\n // --header-height: 120px;\n --header-height: 0px;\n\n display: block;\n font-family: $font-family-base;\n}\n\n.#{$prefix}stage {\n position: relative;\n width: 100%;\n overflow: hidden;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n height: calc(80vh - var(--header-height));\n\n &.#{$prefix}full-height {\n max-height: unset;\n height: calc(100vh - var(--header-height));\n\n .#{$prefix}full-height-indicator-wrapper {\n position: absolute;\n left: 50%;\n z-index: 2;\n height: 48px;\n cursor: pointer;\n bottom: 48px;\n\n @include for-size(tablet) {\n bottom: 40px;\n left: 47%;\n }\n\n @include for-size(phone) {\n bottom: 32px;\n left: 45%;\n }\n\n .#{$prefix}indicator-svg {\n border-radius: $stage-indicator-border-radius;\n height: $stage-indicator-height;\n width: $stage-indicator-width;\n\n &.#{$prefix}indicator-light {\n filter: drop-shadow($stage-indicator-shadow);\n\n .#{$prefix}indicator-path {\n transition: opacity 0.2s;\n fill: $stage-indicator-color-light;\n opacity: 0.6;\n }\n\n &:hover {\n .#{$prefix}indicator-path {\n fill: $stage-indicator-color-light;\n opacity: 1;\n }\n }\n }\n\n &.#{$prefix}indicator-dark {\n .#{$prefix}indicator-path {\n transition: opacity 0.2s;\n fill: $stage-indicator-color-dark;\n opacity: 0.6;\n }\n\n &:hover {\n .#{$prefix}indicator-path {\n fill: $stage-indicator-color-dark;\n opacity: 1;\n }\n }\n }\n }\n }\n\n .#{$prefix}content-wrapper {\n // 1. indicator distance from bottom + 2. height of indicator + 3. content distance from indicator\n\n margin-bottom: calc(48px + 48px + 48px);\n\n @include for-size(tablet) {\n margin-bottom: calc(40px + 48px + 48px);\n }\n\n @include for-size(phone) {\n margin-bottom: calc(32px + 48px + 48px);\n }\n .#{$prefix}stage-content {\n margin-bottom: 0 !important;\n }\n\n .#{$prefix}stage-content:not(.#{$prefix}has-colored-background):not(.#{$prefix}is-blurred-background) {\n padding-bottom: 0;\n }\n }\n }\n\n border-radius: $stage-default-radius;\n box-shadow: $stage-default-shadow;\n\n .#{$prefix}stage-video {\n min-width: 100%;\n min-height: 100%;\n position: absolute;\n }\n\n @include for-size(\"phone\") {\n @include min-max-height(350px, 420px);\n\n .#{$prefix}stage-video {\n height: 100%;\n ::slotted(eon-ui-videoplayer) {\n height: 100%;\n }\n }\n }\n\n @include for-size(\"tablet\") {\n @include min-max-height(350px, 400px);\n }\n\n @include for-size(\"desktop\") {\n @include min-max-height(450px, 550px);\n }\n\n @include for-size(\"desktop-l-or-larger\") {\n @include min-max-height(550px, 700px);\n }\n\n ::slotted(eon-ui-button),\n ::slotted(eon-ui-link) {\n margin-left: $content-padding !important;\n }\n\n ::slotted(eon-ui-button) {\n flex-shrink: 0;\n }\n\n &.#{$prefix}top {\n align-items: flex-start;\n .#{$prefix}has-colored-background {\n margin-top: $stage-margin-desktop !important;\n @include for-size(tablet) {\n margin-top: $stage-margin-tablet !important;\n }\n @include for-size(phone) {\n margin-top: $stage-margin-tablet-or-smaller !important;\n }\n }\n\n .#{$prefix}stage-content {\n padding-top: 48px;\n }\n }\n\n &.#{$prefix}bottom {\n align-items: flex-end;\n .#{$prefix}has-colored-background {\n margin-bottom: $stage-margin-desktop !important;\n @include for-size(tablet) {\n margin-bottom: $stage-margin-tablet !important;\n }\n @include for-size(phone) {\n margin-bottom: $stage-margin-tablet-or-smaller !important;\n }\n }\n\n .#{$prefix}stage-content {\n padding-bottom: 48px;\n }\n }\n\n .#{$prefix}content-wrapper {\n margin: 0 $stage-margin-desktop;\n z-index: 2;\n display: flex;\n width: $content-max-width-desktop-l;\n\n @include for-size(desktop-or-smaller) {\n width: $content-max-width-desktop;\n }\n\n @include for-size(desktop-l-or-larger) {\n margin: 0 auto;\n }\n\n @include for-size(tablet-or-smaller) {\n margin: 0 $stage-margin-tablet-or-smaller 0 $stage-margin-tablet-or-smaller;\n }\n\n @include for-size(tablet) {\n margin: 0 $stage-margin-tablet 0 $stage-margin-tablet;\n }\n }\n\n .#{$prefix}stage-content {\n display: flex;\n flex-direction: column;\n padding: 0;\n z-index: 1;\n\n &.#{$prefix}wide {\n width: $content-width-wide;\n margin-left: auto;\n }\n\n &.#{$prefix}normal {\n width: $content-width-normal;\n margin-left: auto;\n\n @include for-size(phone) {\n width: $content-width-wide;\n }\n }\n\n &.#{$prefix}narrow {\n width: $content-width-narrow;\n margin-left: auto;\n\n @include for-size(phone) {\n width: $content-width-wide;\n }\n @include for-size(tablet) {\n width: $content-width-normal;\n }\n }\n &.#{$prefix}has-colored-background {\n &.#{$prefix}is-blurred-background {\n background-color: v(contentBoxBackgroundColorBlurred);\n backdrop-filter: blur($stage-blurred-background);\n }\n background-color: v(contentBoxBackgroundColor);\n padding: $stage-margin-desktop;\n @include for-size(tablet) {\n padding: $stage-margin-tablet;\n }\n @include for-size(phone) {\n padding: $stage-margin-tablet-or-smaller;\n }\n }\n\n ::slotted(eon-ui-headline) {\n z-index: 99 !important; //MS Edge needs that\n display: block;\n }\n\n .#{$prefix}subheadline {\n font-family: $abstract-font-family;\n font-size: $abstract-font-size;\n font-weight: $abstract-font-weight;\n line-height: $abstract-line-height;\n margin: unset;\n text-align: right;\n color: v(subheadlineColor);\n\n &.#{$prefix}shadow {\n text-shadow: $tiny-shadow;\n }\n &.#{$prefix}left {\n text-align: left;\n }\n &.#{$prefix}center {\n text-align: center;\n }\n &.#{$prefix}right {\n text-align: right;\n }\n }\n\n .#{$prefix}stage-ctas {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n z-index: 1;\n margin-top: 33px;\n row-gap: 15px;\n\n @include for-size(phone) {\n width: auto;\n flex-wrap: wrap;\n margin: 17px 0 0;\n\n ::slotted(eon-ui-button[full-width-on-mobile=\"true\"]) {\n width: 100%;\n text-align: right;\n }\n }\n @include for-size(tablet) {\n margin-top: 25px;\n }\n }\n\n & > *:not(:last-child) {\n margin-bottom: $content-spacing;\n }\n &.#{$prefix}left {\n align-items: flex-start;\n margin-left: unset;\n margin-right: auto;\n ::slotted(*:first-of-type) {\n margin-left: unset !important;\n margin-right: $content-padding !important;\n }\n ::slotted(*:last-of-type) {\n margin-left: unset !important;\n }\n .#{$prefix}stage-ctas {\n justify-content: flex-start;\n }\n }\n &.#{$prefix}center {\n align-items: center;\n margin: auto;\n .#{$prefix}stage-ctas {\n justify-content: center;\n }\n }\n &.#{$prefix}right {\n align-items: flex-end;\n margin-left: auto;\n .#{$prefix}stage-ctas {\n justify-content: flex-end;\n }\n }\n }\n\n &.#{$prefix}has-violator {\n .#{$prefix}stage-content {\n padding-top: 16px;\n }\n\n .#{$prefix}stage-violator {\n position: absolute;\n top: 32px;\n\n &.#{$prefix}left {\n left: 32px;\n }\n\n &.#{$prefix}right {\n right: 32px;\n }\n\n @include for-size(tablet-or-smaller) {\n top: 24px;\n\n &.#{$prefix}left {\n left: 24px;\n }\n\n &.#{$prefix}right {\n right: 24px;\n }\n }\n }\n\n &.#{$prefix}violator-xlarge {\n .#{$prefix}content-wrapper {\n margin-top: calc(112px + 32px);\n\n @include for-size(tablet-or-smaller) {\n margin-top: calc(112px + 24px);\n }\n }\n }\n\n &.#{$prefix}violator-large {\n .#{$prefix}content-wrapper {\n margin-top: calc(80px + 32px);\n\n @include for-size(tablet-or-smaller) {\n margin-top: calc(80px + 24px);\n }\n }\n }\n\n &.#{$prefix}violator-small {\n .#{$prefix}content-wrapper {\n margin-top: calc(68px + 32px);\n\n @include for-size(tablet-or-smaller) {\n margin-top: calc(68px + 24px);\n }\n }\n }\n }\n\n .#{$prefix}icon-text-wrapper {\n position: absolute;\n bottom: 48px;\n left: 11%;\n display: flex;\n gap: 4px;\n align-items: center;\n background: none;\n border: none;\n margin: 0;\n padding: 0 8px 0 0;\n\n @include for-size(tablet-or-smaller) {\n bottom: 0;\n }\n\n .#{$prefix}icon-wrapper {\n svg {\n display: block;\n }\n }\n\n .#{$prefix}text {\n font-family: \"EONBrixSans\";\n font-style: normal;\n height: 18px;\n font-weight: 700;\n font-size: 14px;\n line-height: 18px;\n padding-top: 3px;\n }\n\n &.#{$prefix}video-control-light {\n &:focus {\n outline: $stage-video-control-color-light solid 2px;\n outline-offset: 4px;\n }\n path {\n fill: $stage-video-control-color-light;\n }\n .#{$prefix}text {\n color: $stage-video-control-color-light;\n\n &:hover {\n border-bottom: 2px solid $stage-video-control-color-light;\n }\n }\n }\n\n &.#{$prefix}video-control-dark {\n &:focus {\n outline: $stage-video-control-color-dark solid 2px;\n outline-offset: 4px;\n }\n path {\n fill: $stage-video-control-color-dark;\n }\n .#{$prefix}text {\n color: $stage-video-control-color-dark;\n\n &:hover {\n border-bottom: 2px solid $stage-video-control-color-dark;\n }\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport {\n StageContentIndicatorColor,\n StageContentPosition,\n StageContentWidth,\n StageLocalization,\n StageSchemeDefinition,\n StageSchemeName,\n StageVideoControlColor\n} from \"./constants/stage-types\";\nimport {\n STAGE_HEADLINE_SIZES,\n STAGE_INDICATOR_COLOR_LIGHT,\n STAGE_SCHEME_CONFIG,\n STAGE_SCHEME_MAP,\n STAGE_VIDEO_CONTROL_COLOR_LIGHT\n} from \"./constants/stage-constants\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { isMobile } from \"../../utils/screen-helper\";\nimport { ASPECTRATIO_1X1, ASPECTRATIO_2X1 } from \"../../common/constants\";\nimport { clampHeadlineSizeTo } from \"../../utils/headline-helper\";\nimport { getFirstNestedChild, getNestedChildrenOf } from \"../../utils/dom-helper\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { HeadlineTag } from \"../headline/constants/headline-types\";\nimport { StageSchemeConfiguration } from \"../../constants/colors\";\nimport {\n STAGE_ALIGNMENT,\n STAGE_DEFAULT_ALIGNMENT,\n STAGE_DEFAULT_CONTENT_WIDTH,\n STAGE_DEFAULT_VIOLATOR_HORIZONTAL_POSITION,\n StageAlignment,\n StageViolatorHorizontalPosition\n} from \"../../constants/global-constants\";\nimport { scrollToElement } from \"../../utils/scroll-helper\";\nimport { STAGE_LOCALIZATION } from \"./constants/stage-i18n\";\nimport { LocalizableComponent, Localization, setCurrentLocalizationDelegate } from \"../../common/localizable-component\";\nimport { stageSvgs } from \"./icon-svgs\";\nimport { isTouchDevice } from \"../../utils/touch-helper\";\nimport { GradientsOnImage } from \"../gradient/constants/gradient-types\";\n\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot headline - Holds a single eon-ui-headline element. Use headline sizes between h1 and h3. Other sizes are clamped automatically to ensure brand compliance.\n * @slot image - Holds a single eon-ui-image element\n * @slot ctas - Holds one or two eon-ui-link and/or eon-ui-button elements.\n */\n@Component({\n tag: \"eon-ui-stage\",\n styleUrl: \"stage.scss\",\n assetsDirs: [\"assets-stage\"],\n shadow: true\n})\nexport class Stage\n implements\n ColorableComponent>,\n LocalizableComponent {\n // @InitLogging() sentryTransaction;\n schemeConfig: StageSchemeConfiguration = STAGE_SCHEME_CONFIG;\n schemeMap = STAGE_SCHEME_MAP;\n\n localization: Localization = STAGE_LOCALIZATION;\n currentLocalization: StageLocalization;\n\n @State() activeScheme: StageSchemeDefinition;\n @State() backgroundVideo;\n @State() allowContentAlignment: boolean = false;\n @State() heightAdjustment;\n @State() isPlaying: boolean = true;\n\n @Element() hostElement: HTMLEonUiStageElement;\n\n private headline: HTMLEonUiHeadlineElement;\n private video: HTMLEonUiVideoplayerElement;\n private headlineShadow = false;\n private violatorSize: string;\n private buttons: Array;\n private links: Array;\n private schemeForGradients: String = \"neutral100\";\n\n /**\n * Raised when the component has been loaded.\n */\n @Event() stageLoad: EventEmitter;\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, mutable: true }) scheme: StageSchemeName;\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 * Enable the colored Contentbox.
That means that Headline, Subheadline and other slotted Components have a colored background. The background is dependent from the chosen Scheme
\n * E.g. Scheme \"red\" enabled the red background, if this property is set to false the scheme \"red\" ensures that color of the headline and subheadline is red.\n */\n @Prop({ reflect: true }) enableContentOnBackground: boolean = false;\n\n /**\n * Enable a blurred background for the Contentbox. It only works if the enable-content-on-background-property is true!\n */\n @Prop({ reflect: true }) enableBlurredBackground: boolean = false;\n\n /**\n * Defines where the content is shown inside the stage\n * @example \n */\n @Prop() contentPosition: StageContentPosition;\n\n /**\n * Defines the width of the content is shown inside the stage.
- \"wide\" corresponds to 100%,
- \"normal\" to 75%,
- narrow to 50%\n * @default normal\n * @example \n */\n @Prop({ mutable: true }) contentWidth: StageContentWidth = STAGE_DEFAULT_CONTENT_WIDTH;\n\n /**\n * Alignment of the content-box.\n */\n @Prop() alignment: StageAlignment = STAGE_DEFAULT_ALIGNMENT;\n\n /**\n * Defines the text inside the sub headline\n * @example \n */\n @Prop({ mutable: true }) subheadlineText: string;\n\n /**\n * Defines the height of the header of the page where the stage is used. The height of the stage is calculated depending onthis height since\n * both the header and the stage together should take up to 80% of the hight of the viewport. The client should find that value dynamically\n * and pass it down.\n * @example \n */\n @Prop() headerHeight: number;\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 the name- and info-properties,
\n * the HTML-Tag for the info (subheadline) is set automatically depending on this property (headline-html-tag -1 ), e.g
\n * name(Headline) is H2, then info(subheadline) is H3, name(Headline) is H4, then info(subheadline) is H5, and so on\n *\n */\n @Prop() headlineHtmlTag: HeadlineTag;\n\n /**\n * Defines the image width and height of the stage to be scaled across the viewport.\n * @example \n */\n @Prop() fullHeight: boolean;\n\n /**\n * Defines Color of full height indicator\n * @example \n */\n @Prop({ reflect: true }) indicatorColor: StageContentIndicatorColor = STAGE_INDICATOR_COLOR_LIGHT;\n\n /*\n * Check if violator is available for image\n */\n @State() hasViolator: boolean;\n\n /**\n * Defines horizontal position of the violator\n */\n // prettier-ignore\n @Prop({ mutable: true }) violatorHorizontalPosition: StageViolatorHorizontalPosition = STAGE_DEFAULT_VIOLATOR_HORIZONTAL_POSITION;\n\n /**\n * Defines color of pause/resume icon and text\n * @example \n */\n @Prop({ reflect: true }) videoControlColor: StageVideoControlColor = STAGE_VIDEO_CONTROL_COLOR_LIGHT;\n\n /**\n * Enables the playback option for the video. This property will only be used when video is set to the background.\n */\n @Prop() videoPlaybackOption: boolean = false;\n\n /**\n * Gradient for images\n */\n @Prop() gradientForImages: GradientsOnImage;\n\n componentWillLoad() {\n this.headline = getFirstNestedChild(this.hostElement, \"eon-ui-headline\");\n this.buttons = Array.from(getNestedChildrenOf(this.hostElement, \"eon-ui-button\"));\n this.links = Array.from(getNestedChildrenOf(this.hostElement, \"eon-ui-link\"));\n this.hasViolator = !!getFirstNestedChild(this.hostElement, \"eon-ui-violator\");\n if (this.hasViolator) {\n this.violatorSize = (getFirstNestedChild(this.hostElement, \"eon-ui-violator\") as HTMLElement).getAttribute(\n \"size\"\n );\n }\n this.contentAlignment();\n this.applyScheme();\n this.setCurrentLocalization();\n this.setImageRatio();\n this.video = getFirstNestedChild(this.hostElement, \"eon-ui-videoplayer\");\n if (this.video) {\n this.setVideoProperties();\n }\n this.video && this.enterViewport(this.hostElement);\n if (this.headline) {\n const size = clampHeadlineSizeTo(STAGE_HEADLINE_SIZES, this.headline.size);\n if (size) this.headline.setAttribute(\"size\", size);\n //run HeadlineAlignment\n this.headlineAlignment();\n if (!this.enableContentOnBackground) {\n this.headlineShadow = this.headline.textShadow;\n } else {\n this.headline.removeAttribute(\"text-shadow\");\n }\n this.handleHeadlineTag();\n }\n this.contentWidth = this.contentWidth ? this.contentWidth : \"normal\";\n this.updateProcessedText();\n this.fullHeight && this.handleHeightCalculation();\n this.handleSchemeForGradients();\n }\n\n componentDidLoad() {\n this.setCssVariables();\n this.stageLoad.emit();\n }\n\n /**\n * This function is calculating the Stage height\n * On basis of whether Navigation or ThirdlevelNavigation is present\n * And then summation value is assigned to \"header-height\" property for final Stage height calculation.\n */\n @Listen(\"resize\", { target: \"window\" })\n @Watch(\"fullHeight\")\n async handleHeightCalculation() {\n if (!this.headerHeight) {\n const navigationHeight = await document.getElementsByTagName(\"eon-ui-navigation\")[0]?.updateNavigationHeight();\n const thirdLevelNavigationHeight = await document\n .getElementsByTagName(\"eon-ui-third-level-navigation\")[0]\n ?.updateHeight();\n const bottomDrawerHeight = await document.getElementsByTagName(\"eon-ui-bottom-drawer\")[0]?.getHeight();\n\n this.heightAdjustment =\n (navigationHeight ? navigationHeight : 0) +\n (thirdLevelNavigationHeight ? thirdLevelNavigationHeight : 0) +\n (bottomDrawerHeight ? bottomDrawerHeight : 0);\n\n if (Number.isInteger(this.heightAdjustment)) {\n this.hostElement.style.setProperty(\"--header-height\", `${this.heightAdjustment}px`);\n } else {\n this.hostElement.style.setProperty(\"--header-height\", \"0px\");\n }\n }\n }\n\n @Watch(\"headerHeight\")\n updateHeaderHeightCSSVariable() {\n if (Number.isInteger(this.headerHeight)) {\n this.hostElement.style.setProperty(\"--header-height\", `${this.headerHeight}px`);\n } else {\n this.hostElement.style.setProperty(\"--header-height\", \"0px\");\n }\n }\n\n @Watch(\"enableContentOnBackground\")\n @Watch(\"scheme\")\n applyScheme() {\n applySchemeDelegate(this);\n this.setSlottedComponentSchemes();\n }\n\n /**\n * Set slotted component schemes if no background is enabled.\n * If content background is active, the schemes will stick to background mapping or defined content on background schemes.\n */\n setSlottedComponentSchemes() {\n if (this.headline) {\n let relevantScheme = this.enableContentOnBackground\n ? this.activeScheme.contentBoxHeadlineScheme\n : this.activeScheme.headlineScheme;\n\n this.headline.setAttribute(\"scheme\", relevantScheme);\n }\n\n if (this.subheadlineText) {\n let relevantScheme = this.enableContentOnBackground\n ? this.activeScheme.contentBoxSubheadlineColor\n : this.activeScheme.subheadlineColor;\n\n this.hostElement.style.setProperty(\"--subheadlineColor\", `var(--${relevantScheme})`);\n }\n\n if (this.buttons) {\n let relevantScheme = this.enableContentOnBackground\n ? this.activeScheme.contentBoxButtonScheme\n : this.activeScheme.buttonScheme;\n\n this.buttons.forEach((button) => {\n button.setAttribute(\"scheme\", relevantScheme);\n });\n }\n\n if (this.links) {\n let relevantScheme = this.enableContentOnBackground\n ? this.activeScheme.contentBoxLinkScheme\n : this.activeScheme.linkScheme;\n\n this.links.forEach((link) => {\n link.setAttribute(\"scheme\", relevantScheme);\n });\n }\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n this.innerBackground = this.activeScheme.contentBoxBackgroundColor;\n }\n\n /**\n * Executes whenever the text property changes. Replaced the specified linewrap symbol with
.\n */\n @Watch(\"subheadlineText\")\n updateProcessedText(): void {\n const slashN = \"\\\\n\";\n this.subheadlineText = this.subheadlineText && this.subheadlineText.split(slashN).join(\"
\");\n }\n @Watch(\"gradientForImages\")\n handeWatch() {\n this.handleSchemeForGradients();\n }\n\n @Listen(\"resize\", { target: \"window\" })\n private setImageRatio() {\n const aspectRatio = isMobile() ? ASPECTRATIO_1X1 : ASPECTRATIO_2X1;\n const imageComponents = this.hostElement.getElementsByTagName(\"eon-ui-image\");\n if (imageComponents?.length > 0) {\n const image = imageComponents[0];\n image.setAttribute(\"aspect-ratio\", aspectRatio);\n image.setAttribute(\"use-as-background\", \"true\");\n }\n }\n\n handleIndicatorClick() {\n scrollToElement(this.hostElement, {\n targetPosition: \"end\",\n offset:\n this.hostElement.offsetHeight +\n (Number.isInteger(this.heightAdjustment)\n ? this.heightAdjustment\n : window.innerHeight - this.hostElement.offsetHeight)\n });\n }\n\n @Watch(\"headlineHtmlTag\")\n handleHeadlineTag() {\n if (!!this.headlineHtmlTag) {\n if (this.headline.getAttribute(\"slot\") === \"headline\") {\n this.headline.setAttribute(\"headline-html-tag\", this.headlineHtmlTag);\n }\n }\n }\n\n @Watch(\"alignment\")\n contentAlignment() {\n this.allowContentAlignment = (STAGE_ALIGNMENT as ReadonlyArray).includes(this.alignment);\n }\n\n @Watch(\"alignment\")\n headlineAlignment() {\n if (this.headline && this.allowContentAlignment) {\n this.headline.setAttribute(\"alignment\", this.alignment);\n } else {\n this.headline.setAttribute(\"alignment\", \"right\");\n }\n }\n\n setCurrentLocalization() {\n setCurrentLocalizationDelegate(this);\n }\n\n private setVideoProperties() {\n this.backgroundVideo = Array.from(this.hostElement.children).filter.call(\n this.hostElement.children,\n function (child: HTMLElement) {\n return child.tagName === \"EON-UI-VIDEOPLAYER\";\n }\n );\n this.backgroundVideo.forEach((backgroundVideo) => {\n backgroundVideo.setAttribute(\"use-as-background\", \"true\");\n });\n }\n\n handlePlayToggle() {\n this.isPlaying ? this.video.pausePlayback() : this.video.startPlayback();\n this.isPlaying = !this.isPlaying;\n }\n\n private enterViewport(element: HTMLElement) {\n if (window && window.IntersectionObserver) {\n const videoObserver = new window.IntersectionObserver(\n (entries: IntersectionObserverEntry[]) => {\n entries.forEach((entry) => {\n if (entry.intersectionRatio > 0) {\n this.isPlaying = true;\n } else {\n this.isPlaying = false;\n }\n });\n },\n {\n threshold: [0, 1]\n }\n );\n videoObserver.observe(element);\n }\n }\n\n handleSchemeForGradients() {\n if (this.gradientForImages) this.scheme = this.schemeForGradients as StageSchemeName;\n }\n\n render() {\n const showVideoPlayBackControls =\n (this.video && this.videoPlaybackOption) || (this.video && (isMobile() || isTouchDevice()));\n\n return (\n \n \n {this.video && (\n
\n \n
\n )}\n
\n \n {this.gradientForImages && }\n
\n \n {this.hasViolator && (\n \n \n \n )}\n \n
\n \n
\n\n {this.subheadlineText && (\n \n )}\n
\n \n
\n {showVideoPlayBackControls && (\n this.handlePlayToggle()}\n >\n
{this.isPlaying ? stageSvgs.pause() : stageSvgs.play()}
\n
\n \n {this.isPlaying ? this.currentLocalization.play : this.currentLocalization.pause}\n \n
\n \n )}\n \n \n {this.fullHeight && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n this.handleIndicatorClick()}\n >\n \n \n \n \n )}\n \n \n );\n }\n}\n"],"mappings":"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"}