{"version":3,"names":["createSchemes","newSchemes","AllColors.SITELINK_SCHEMES","forEach","element","schemeName","linkColor","AllColors","toConstantCase","linkHoverColor","scheme","SITELINK_SCHEME_CONFIG","SITELINK_SCHEME_MAP","Map","Object","entries","createSitelinkMapDefinition","map","background","config","sitelinkCss","EonUiSitelinkStyle0","Sitelink","this","schemeConfig","schemeMap","componentWillLoad","applyScheme","linkElement","getFirstNestedChild","hostElement","slot","headlineLinkTitle","text","onViewportChange","componentDidLoad","setCssVariables","applyAccordionScheme","applySchemeDelegate","setCssVariablesDelegate","isDesktopOrLarger","paneTitle","accordionComponent","setAttribute","activeScheme","replace","render","h","Host","key","ref","el","class","pfx","name"],"sources":["src/components/sitelink/constants/sitelink-constants.ts","src/components/sitelink/sitelink.scss?tag=eon-ui-sitelink&encapsulation=shadow","src/components/sitelink/sitelink.tsx"],"sourcesContent":["import { SitelinkSchemeDefinition } from \"./sitelink-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\n\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createSitelinkMapDefinition } from \"../../../utils/scheme-helper\";\n\nfunction createSchemes() {\n  let newSchemes: AllColors.SitelinkSchemeConfiguration<SitelinkSchemeDefinition> = {};\n  AllColors.SITELINK_SCHEMES.forEach((element) => {\n    newSchemes[element.schemeName] = {\n      linkColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n      linkHoverColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_SHADE_1`]\n    };\n    if (element.scheme) {\n      newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n    }\n  });\n  return newSchemes;\n}\n\nexport const SITELINK_SCHEME_CONFIG: AllColors.SitelinkSchemeConfiguration<SitelinkSchemeDefinition> = createSchemes();\n\nexport const SITELINK_SCHEME_MAP: Map<BackgroundColor | \"default\", SitelinkSchemeDefinition> = new Map(\n  Object.entries(createSitelinkMapDefinition()).map(([background, config]) => [\n    background as BackgroundColor,\n    SITELINK_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$sitelink-link-font-size: 14px !default;\n$sitelink-link-line-height: 18px !default;\n$sitelink-link-font-weight: 400 !default;\n$sitelink-headline-link-font-size: 18px !default;\n$sitelink-headline-link-line-height: 24px !default;\n$sitelink-headline-link-font-weight: 700 !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n:host {\n  display: block;\n  font-family: $font-family-base;\n}\n\n::slotted([slot=\"links\"]) {\n  display: flex;\n  text-align: left;\n  padding: 8px 0px !important;\n  --fontWeight: #{$sitelink-link-font-weight};\n  --fontSize: #{$sitelink-link-font-size};\n  --lineHeight: #{$sitelink-link-line-height};\n  --minHeight: auto;\n  --borderBottomWidth: 1px;\n  --contentColor: var(--linkColor) !important;\n  --contentHoverColor: var(--linkHoverColor) !important;\n  --contentFocusColor: var(--linkHoverColor) !important;\n}\n\n::slotted([slot=\"headline-link\"]) {\n  display: flex;\n  text-align: left;\n  --fontWeight: #{$sitelink-headline-link-font-weight};\n  --fontSize: #{$sitelink-headline-link-font-size};\n  --lineHeight: #{$sitelink-headline-link-line-height};\n  --minHeight: auto;\n  --borderBottomWidth: 1px;\n  --contentColor: var(--linkColor) !important;\n  --contentHoverColor: var(--linkHoverColor) !important;\n  --contentFocusColor: var(--linkHoverColor) !important;\n}\n\n@include for-size(phone) {\n  ::slotted([slot=\"headline-link\"]) {\n    --fontSize: #{$sitelink-link-font-size};\n    --lineHeight: #{$sitelink-link-line-height};\n  }\n}\n\n@include for-size(tablet) {\n  ::slotted([slot=\"links\"]) {\n    position: relative;\n    white-space: break-spaces;\n    -moz-page-break-inside: avoid;\n    -moz-column-break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n    break-inside: avoid;\n    page-break-inside: avoid;\n  }\n\n  ::slotted([slot=\"headline-link\"]) {\n    --fontSize: 14px;\n    --lineHeight: 18px;\n  }\n\n  .#{$prefix}links {\n    position: relative;\n    -moz-column-count: 3;\n    -moz-column-gap: 24px;\n    -webkit-column-count: 3;\n    -webkit-column-gap: 24px;\n    column-count: 3;\n    column-gap: 50px;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { SitelinkSchemeDefinition, SitelinkSchemeName } from \"./constants/sitelink-types\";\nimport { SITELINK_SCHEME_CONFIG, SITELINK_SCHEME_MAP } from \"./constants/sitelink-constants\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { isDesktopOrLarger } from \"../../utils/screen-helper\";\nimport { getFirstNestedChild } from \"../../utils/dom-helper\";\nimport { SitelinkSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot headline-link - Holds a single eon-ui-link element\n * @slot links - Holds any number of eon-ui-link elements. Use small size and hide-icon on these links.\n */\n@Component({\n  tag: \"eon-ui-sitelink\",\n  styleUrl: \"sitelink.scss\",\n  shadow: true\n})\nexport class Sitelink implements ColorableComponent<SitelinkSchemeConfiguration<SitelinkSchemeDefinition>> {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: SitelinkSchemeConfiguration<SitelinkSchemeDefinition> = SITELINK_SCHEME_CONFIG;\n  schemeMap = SITELINK_SCHEME_MAP;\n\n  @Element() hostElement: HTMLEonUiSitelinkElement;\n  private linkElement: HTMLEonUiLinkElement;\n  private headlineLinkTitle: any;\n  private accordionComponent: HTMLEonUiAccordionElement;\n\n  /**\n   * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\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  @State() activeScheme: SitelinkSchemeDefinition;\n  @State() isDesktopOrLarger: boolean;\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: SitelinkSchemeName;\n\n  /**\n   * Defines the sitlink accordion pane name.\n   */\n  @Prop() paneTitle: string;\n\n  componentWillLoad() {\n    this.applyScheme();\n    /**\n     * Below we have updated the Mapping of \"Pane-Title\" and \"Headline link title\" for Desktop view\n     * \"Pane-title\" should remain consistent througout the viewport\n     * Hence in onViewportChange() we have maintained the title of \"header-link\" same as that of \"pane\" on desktop view\n     */\n    this.linkElement = getFirstNestedChild<HTMLEonUiLinkElement>(this.hostElement, \"eon-ui-link\");\n    if (this.linkElement != null && this.linkElement.slot === \"headline-link\") {\n      this.headlineLinkTitle = this.linkElement.text;\n      this.onViewportChange();\n    }\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n    this.applyAccordionScheme();\n  }\n\n  @Watch(\"scheme\")\n  applyScheme() {\n    applySchemeDelegate(this);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onViewportChange() {\n    this.isDesktopOrLarger = isDesktopOrLarger();\n    this.linkElement && (this.linkElement.text = this.isDesktopOrLarger ? this.paneTitle : this.headlineLinkTitle);\n  }\n\n  @Watch(\"scheme\")\n  applyAccordionScheme(): void {\n    this.accordionComponent &&\n      this.accordionComponent.setAttribute(\"scheme\", this.activeScheme.linkColor.replace(\"eon-\", \"\"));\n  }\n\n  render() {\n    return (\n      <Host>\n        <eon-ui-accordion\n          ref={(el) => (this.accordionComponent = el as HTMLEonUiAccordionElement)}\n          hide-pane-title-on-desktop=\"true\"\n          expand-on-desktop=\"true\"\n        >\n          <eon-ui-accordion-pane pane-title={this.paneTitle} slot=\"sitelinkPane\">\n            <div class={pfx(\"headline-link\")}>\n              <slot name=\"headline-link\"></slot>\n            </div>\n            <div class={pfx(\"links\")}>\n              <slot name=\"links\"></slot>\n            </div>\n          </eon-ui-accordion-pane>\n        </eon-ui-accordion>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mXAOA,SAASA,IACP,IAAIC,EAA8E,GAClFC,EAA2BC,SAASC,IAClCH,EAAWG,EAAQC,YAAc,CAC/BC,UAAWC,EAAU,SAASC,EAAeJ,EAAQC,eACrDI,eAAgBF,EAAU,SAASC,EAAeJ,EAAQC,wBAE5D,GAAID,EAAQM,OAAQ,CAClBT,EAAWG,EAAQC,YAAc,IAAKJ,EAAWG,EAAQC,eAAgBD,EAAQM,O,KAGrF,OAAOT,CACT,CAEO,MAAMU,EAA0FX,IAEhG,MAAMY,EAAkF,IAAIC,IACjGC,OAAOC,QAAQC,KAA+BC,KAAI,EAAEC,EAAYC,KAAY,CAC1ED,EACAP,EAAuBQ,OC1B3B,MAAMC,EAAc,ss/CACpB,MAAAC,EAAeD,E,MCkBFE,EAAQ,M,yBAEnBC,KAAAC,aAAsEb,EACtEY,KAAAE,UAAYb,E,4GAyBZ,iBAAAc,GACEH,KAAKI,cAMLJ,KAAKK,YAAcC,EAA0CN,KAAKO,YAAa,eAC/E,GAAIP,KAAKK,aAAe,MAAQL,KAAKK,YAAYG,OAAS,gBAAiB,CACzER,KAAKS,kBAAoBT,KAAKK,YAAYK,KAC1CV,KAAKW,kB,EAIT,gBAAAC,GACEZ,KAAKa,kBACLb,KAAKc,sB,CAIP,WAAAV,GACEW,EAAoBf,K,CAItB,eAAAa,GACEG,EAAwBhB,K,CAI1B,gBAAAW,GACEX,KAAKiB,kBAAoBA,IACzBjB,KAAKK,cAAgBL,KAAKK,YAAYK,KAAOV,KAAKiB,kBAAoBjB,KAAKkB,UAAYlB,KAAKS,kB,CAI9F,oBAAAK,GACEd,KAAKmB,oBACHnB,KAAKmB,mBAAmBC,aAAa,SAAUpB,KAAKqB,aAAatC,UAAUuC,QAAQ,OAAQ,I,CAG/F,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,IAAMC,GAAQ5B,KAAKmB,mBAAqBS,EAAgC,6BAC7C,OAAM,oBACf,QAElBJ,EAAA,yBAAAE,IAAA,wDAAmC1B,KAAKkB,UAAWV,KAAK,gBACtDgB,EAAA,OAAAE,IAAA,2CAAKG,MAAOC,EAAI,kBACdN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,mBAEbP,EAAA,OAAAE,IAAA,2CAAKG,MAAOC,EAAI,UACdN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,a"}