@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/stzh-components/p-edf77853.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as n,h as i,a,g as o}from"./p-c7bfac7a.js";import{h as e}from"./p-7e304ea3.js";import"./p-9b063923.js";const s='.sc-stzh-pi-content-navigation-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-content-navigation-h{display:none}.sc-stzh-pi-content-navigation-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-content-navigation-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation,.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation::before,.sc-stzh-pi-content-navigation-h *.sc-stzh-pi-content-navigation::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-content-navigation-h .has-focus.sc-stzh-pi-content-navigation{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-content-navigation-h .stzh-fylingfocus-focused.sc-stzh-pi-content-navigation{outline-style:none !important}.sc-stzh-pi-content-navigation-h .stzh-fylingfocus-focused.sc-stzh-pi-content-navigation::-moz-focus-inner{border:0 !important}.sc-stzh-pi-content-navigation-h{--arrow-background-color:var(--stzh-pi-content-navigation-arrow-background-color, var(--stzh-color-secondary30));display:flex;flex-direction:column}.stzh-pi-content-navigation.sc-stzh-pi-content-navigation{position:relative;flex-grow:1;display:flex;flex-direction:column;gap:var(--stzh-space-small);background-color:var(--stzh-color-coolgrey20)}.stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-medium);display:flex;align-items:center;flex-grow:1;padding-top:0.625rem;padding-bottom:0.625rem}@media screen and (min-width: 900px){.stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-large)}}.stzh-pi-content-navigation__image.sc-stzh-pi-content-navigation{width:100%;display:none}.stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--stzh-color-black);margin:0}.stzh-pi-content-navigation__title-link.sc-stzh-pi-content-navigation{display:block;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-content-navigation__title-link.sc-stzh-pi-content-navigation::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-content-navigation__title-link.sc-stzh-pi-content-navigation::after{z-index:1}.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation__lead.sc-stzh-pi-content-navigation{margin-bottom:var(--stzh-space-large)}}.stzh-pi-content-navigation__arrow.sc-stzh-pi-content-navigation{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:4rem;height:4rem;color:var(--stzh-color-black);background-color:var(--arrow-background-color)}.stzh-pi-content-navigation__arrow-icon.sc-stzh-pi-content-navigation{--size:var(--stzh-icon-size-large)}.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-small);padding-left:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-large)}}.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-small);padding-left:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation.sc-stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-large)}}.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__wrapper.sc-stzh-pi-content-navigation{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pi-content-navigation--has-lead.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__arrow.sc-stzh-pi-content-navigation{position:absolute;right:0;bottom:0;width:2.75rem;height:2.75rem}.stzh-pi-content-navigation--has-image.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__image.sc-stzh-pi-content-navigation{display:block}.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-ratio.sc-stzh-pi-content-navigation{background-color:var(--stzh-color-coolgrey30)}.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{display:flex;align-items:center;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-content-navigation__title-ratio.sc-stzh-pi-content-navigation .stzh-pi-content-navigation__title.sc-stzh-pi-content-navigation{padding-left:var(--stzh-space-large)}}';const c=class{constructor(i){t(this,i);this.stzhClick=n(this,"stzhClick",7);this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-pi-content-navigation",originalEvent:t,href:this.href})};this.href=undefined;this.target=undefined;this.analyticsId=undefined;this.navigationLevel="1";this.heading="";this.headingLevel="3";this.lead=""}componentDidRender(){requestAnimationFrame((()=>{var t,n;const i=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(i){(n=this.titleLinkElement)===null||n===void 0?void 0:n.setAttribute("s-object-id",i)}}))}renderHeading(){const t=`h${this.headingLevel}`;const n=this.href?"a":"button";return i(t,{class:"stzh-pi-content-navigation__title"},i(n,{ref:t=>this.titleLinkElement=t,class:"stzh-pi-content-navigation__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},i("div",{ref:t=>this.headingTextElement=t},this.heading?this.heading:i("slot",{name:"heading"}))))}render(){const t=!!this.lead||e(this.element,"lead");const n=e(this.element,"image");const o=this.navigationLevel==="1"||this.navigationLevel==="2";const s=n&&o;const c=o&&!s;const h={"stzh-pi-content-navigation":true,"stzh-pi-content-navigation--has-lead":t,"stzh-pi-content-navigation--has-image":s,"stzh-pi-content-navigation--is-navigation-level-1-or-2":o};return i(a,{"has-lead":t},i("article",{class:h,"aria-label":this.heading,role:"listitem"},i("div",{class:"stzh-pi-content-navigation__image"},i("stzh-ratio",{ratio:"2:1"},i("slot",{name:"image"}))),c&&i("stzh-ratio",{class:"stzh-pi-content-navigation__title-ratio",ratio:"2:1"},this.renderHeading()),i("div",{class:"stzh-pi-content-navigation__wrapper"},!c&&this.renderHeading(),i("div",{class:"stzh-pi-content-navigation__lead"},this.lead?this.lead:i("slot",{name:"lead"}))),i("div",{class:"stzh-pi-content-navigation__arrow"},i("stzh-icon",{class:"stzh-pi-content-navigation__arrow-icon",name:"arrow-right"}))))}get element(){return o(this)}};c.style=s;export{c as stzh_pi_content_navigation};
+//# sourceMappingURL=p-edf77853.entry.js.map

package/dist/stzh-components/p-edf77853.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhPiContentNavigationCss","StzhPiContentNavigation","this","handleCardClick","originalEvent","stzhClick","emit","component","href","componentDidRender","requestAnimationFrame","objectId","analyticsId","_a","headingTextElement","innerText","_b","titleLinkElement","setAttribute","renderHeading","Heading","headingLevel","TitleLink","h","class","ref","el","target","onClick","heading","name","render","hasLead","lead","hasSlot","element","hasImageSlot","isNavigationLevel1or2","navigationLevel","hasImage","shouldRenderTitleRatio","classes","Host","role","ratio"],"sources":["src/components/stzh-pi-content-navigation/stzh-pi-content-navigation.scss?tag=stzh-pi-content-navigation&encapsulation=scoped","src/components/stzh-pi-content-navigation/stzh-pi-content-navigation.tsx"],"sourcesContent":["/**\n * @prop --stzh-pi-content-navigation-arrow-background-color: Background color of the arrow\n */\n\n\n:host {\n  --arrow-background-color: var(--stzh-pi-content-navigation-arrow-background-color, #{$colorSecondary30});\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-content-navigation {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  gap: space('small');\n  background-color: var(--stzh-color-coolgrey20);\n\n  &__wrapper {\n    @include spaceCurve('padding-left', 'intermediary');\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    // safe space padding top/bottom when it would go to three lines\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__title {\n    @include font('heavy');\n    @include fontSize('hecto', 'heading');\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontCurve('p2');\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__arrow {\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 64px;\n    height: 64px;\n    color: var(--stzh-color-black);\n    background-color: var(--arrow-background-color);\n  }\n\n  &__arrow-icon {\n    --size: #{iconSize('large')};\n  }\n\n  /* Level 3 and 4 */\n\n  &:not(&--is-navigation-level-1-or-2) &__wrapper {\n    @include spaceCurve('padding-right', 'small');\n    @include spaceCurve('padding-left', 'small');\n  }\n\n  &:not(&--is-navigation-level-1-or-2) &__title-ratio &__title {\n    @include spaceCurve('padding-right', 'small');\n    @include spaceCurve('padding-left', 'small');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__wrapper {\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-left', 'intermediary');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'large');\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &--has-lead &__arrow {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 44px;\n    height: 44px;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  /* Title ratio styling (when navigation level 1 and 2 and no image) */\n  &__title-ratio .stzh-ratio {\n    background-color: var(--stzh-color-coolgrey30);\n  }\n\n  &__title-ratio &__title {\n    display: flex;\n    align-items: center;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-left', 'intermediary');\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiCardNavigationClickEvent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-content-navigation\",\n  styleUrl: \"stzh-pi-content-navigation.scss\",\n  scoped: true,\n})\nexport class StzhPiContentNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Content navigation level */\n  @Prop({ reflect: true }) navigationLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"1\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-content-navigation\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <Heading class=\"stzh-pi-content-navigation__title\">\n        <TitleLink\n          ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n          class=\"stzh-pi-content-navigation__title-link\"\n          href={this.href}\n          target={this.target}\n          onClick={this.handleCardClick}\n        >\n          <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n          </div>\n        </TitleLink>\n      </Heading>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const isNavigationLevel1or2 = this.navigationLevel === \"1\" || this.navigationLevel === \"2\";\n    const hasImage = hasImageSlot && isNavigationLevel1or2;\n    const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;\n\n    const classes = {\n      \"stzh-pi-content-navigation\": true,\n      \"stzh-pi-content-navigation--has-lead\": hasLead,\n      \"stzh-pi-content-navigation--has-image\": hasImage,\n      \"stzh-pi-content-navigation--is-navigation-level-1-or-2\": isNavigationLevel1or2,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-content-navigation__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-content-navigation__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-content-navigation__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-content-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n          </div>\n\n          <div class=\"stzh-pi-content-navigation__arrow\">\n            <stzh-icon class=\"stzh-pi-content-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAA6B,whY,MCetBC,EAAuB,M,8DAkC1BC,KAAAC,gBAAmBC,IACzBF,KAAKG,UAAUC,KAAK,CAClBC,UAAW,6BACXH,gBACAI,KAAMN,KAAKM,MACX,E,0FAxB8D,I,aAGxC,G,kBAGoB,I,UAGvB,E,CAkBvB,kBAAAC,GACEC,uBAAsB,K,QACpB,MAAMC,EAAWT,KAAKU,eAAeC,EAAAX,KAAKY,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,WAE9D,GAAIJ,EAAU,EACZK,EAAAd,KAAKe,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAeP,E,KAKzD,aAAAQ,GACE,MAAMC,EAAU,IAAIlB,KAAKmB,eACzB,MAAMC,EAAYpB,KAAKM,KAAO,IAAM,SACpC,OACEe,EAACH,EAAO,CAACI,MAAM,qCACbD,EAACD,EAAS,CACRG,IAAKC,GAAOxB,KAAKe,iBAAmBS,EACpCF,MAAM,yCACNhB,KAAMN,KAAKM,KACXmB,OAAQzB,KAAKyB,OACbC,QAAS1B,KAAKC,iBAEdoB,EAAA,OAAKE,IAAKC,GAAOxB,KAAKY,mBAAqBY,GACxCxB,KAAK2B,QAAU3B,KAAK2B,QAAUN,EAAA,QAAMO,KAAK,c,CAOpD,MAAAC,GACE,MAAMC,IAAY9B,KAAK+B,MAAQC,EAAQhC,KAAKiC,QAAS,QACrD,MAAMC,EAAeF,EAAQhC,KAAKiC,QAAS,SAC3C,MAAME,EAAwBnC,KAAKoC,kBAAoB,KAAOpC,KAAKoC,kBAAoB,IACvF,MAAMC,EAAWH,GAAgBC,EACjC,MAAMG,EAAyBH,IAA0BE,EAEzD,MAAME,EAAU,CACd,6BAA8B,KAC9B,uCAAwCT,EACxC,wCAAyCO,EACzC,yDAA0DF,GAG5D,OACEd,EAACmB,EAAI,YAAWV,GACdT,EAAA,WAASC,MAAOiB,EAAO,aAAcvC,KAAK2B,QAASc,KAAK,YACtDpB,EAAA,OAAKC,MAAM,qCACTD,EAAA,cAAYqB,MAAM,OAChBrB,EAAA,QAAMO,KAAM,YAGfU,GACCjB,EAAA,cAAYC,MAAM,0CAA0CoB,MAAO,OAChE1C,KAAKiB,iBAGVI,EAAA,OAAKC,MAAM,wCACPgB,GAA0BtC,KAAKiB,gBACjCI,EAAA,OAAKC,MAAM,oCAAoCtB,KAAK+B,KAAO/B,KAAK+B,KAAOV,EAAA,QAAMO,KAAK,WAGpFP,EAAA,OAAKC,MAAM,qCACTD,EAAA,aAAWC,MAAM,yCAAyCM,KAAK,kB"}