@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/esm/stzh-pi-content-navigation.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { h as hasSlot } from './utils-54aead01.js';
+import './string-utils-e252977e.js';
+
+const stzhPiContentNavigationCss = ".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 StzhPiContentNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
+    this.handleCardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-pi-content-navigation",
+        originalEvent,
+        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 _a, _b;
+      const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+      if (objectId) {
+        (_b = this.titleLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+      }
+    });
+  }
+  renderHeading() {
+    const Heading = `h${this.headingLevel}`;
+    const TitleLink = this.href ? "a" : "button";
+    return (h(Heading, { class: "stzh-pi-content-navigation__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))));
+  }
+  render() {
+    const hasLead = !!this.lead || hasSlot(this.element, "lead");
+    const hasImageSlot = hasSlot(this.element, "image");
+    const isNavigationLevel1or2 = this.navigationLevel === "1" || this.navigationLevel === "2";
+    const hasImage = hasImageSlot && isNavigationLevel1or2;
+    const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;
+    const classes = {
+      "stzh-pi-content-navigation": true,
+      "stzh-pi-content-navigation--has-lead": hasLead,
+      "stzh-pi-content-navigation--has-image": hasImage,
+      "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
+    };
+    return (h(Host, { "has-lead": hasLead }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { ratio: "2:1" }, h("slot", { name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { class: "stzh-pi-content-navigation__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" })))));
+  }
+  get element() { return getElement(this); }
+};
+StzhPiContentNavigation.style = stzhPiContentNavigationCss;
+
+export { StzhPiContentNavigation as stzh_pi_content_navigation };
+
+//# sourceMappingURL=stzh-pi-content-navigation.entry.js.map

package/dist/esm/stzh-pi-content-navigation.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pi-content-navigation.entry.js","mappings":"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","names":[],"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"],"version":3}

package/dist/esm/stzh-pi-menu.entry.js

@@ -0,0 +1,198 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { w as waitForEvent } from './event-utils-d5f6817b.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-795e7c40.js';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-d80f83d2.js';
+
+const stzhPiMenuCss = ":host{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;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{max-height:100%;height:100%;overflow:auto;--padding-left:var(--stzh-pi-menu-padding-left, 20px);--trigger-size:var(--stzh-icon-size-large);--trigger-color:var(--stzh-color-black);--content-background:var(--stzh-color-primary20);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-black);--button-background-color:var(--stzh-color-primary30);--stzh-pi-menu-max-width:18.75rem;--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-primary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}.stzh-pi-menu{max-height:100%;height:100%;overflow:auto;max-width:var(--stzh-pi-menu-max-width);transition:width 0.15s ease;width:100%;z-index:1;position:absolute;}.stzh-pi-menu__heading{margin:0;position:-webkit-sticky;position:sticky;top:0}.stzh-pi-menu__button{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);width:100%;min-height:3.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 600px){.stzh-pi-menu__button{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-menu__button{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button{transition:none}}.stzh-pi-menu__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-pi-menu__button-spacer{visibility:hidden;pointer-events:none}.stzh-pi-menu__subheading{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-pi-menu__button,.stzh-pi-menu__subheading{padding-left:var(--padding-left);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-menu__button,.stzh-pi-menu__subheading{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__button,.stzh-pi-menu__subheading{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button,.stzh-pi-menu__subheading{padding-right:var(--stzh-space-xxlarge)}}.stzh-pi-menu__content-inner{background-color:var(--content-background);height:auto;min-height:100%}.stzh-pi-menu__button-text{flex-grow:1;display:none}@media screen and (min-width: 600px){.stzh-pi-menu__button-text{display:inherit}}.stzh-pi-menu__button-icon{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button-icon{transition:none}}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon{color:var(--hover-trigger-color)}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::before,.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-pi-menu__content{height:100%;overflow:auto;}.stzh-pi-menu__content::-webkit-scrollbar{width:0.5rem}.stzh-pi-menu__content::-webkit-scrollbar-thumb{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__content::-webkit-scrollbar-track{background:var(--content-background)}@media print{.stzh-pi-menu__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-pi-menu__heading-text{display:block}@media screen and (min-width: 900px){.stzh-pi-menu{max-width:100%}}.stzh-pi-menu__nav{padding-bottom:var(--stzh-space-xlarge)}.stzh-pi-menu__nav-list{list-style:none;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-padding-start:0;padding-inline-start:0}.stzh-pi-menu__nav-item{display:block;padding-top:var(--stzh-space-xsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xsmall);padding-left:var(--padding-left);text-decoration:none;color:var(--stzh-color-black)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-medium)}}.stzh-pi-menu__nav-item:hover{color:var(--stzh-color-primary70)}.stzh-pi-menu__nav-item.active{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__nav-item.is-level-1{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-pi-menu__nav-item.is-level-2{padding-left:calc(var(--padding-left) + var(--stzh-space-xlarge))}.stzh-pi-menu--breakout{min-width:100%;overflow:visible}.stzh-pi-menu__button-space-helper{visibility:hidden;pointer-events:none}.stzh-pi-menu--is-open .stzh-pi-menu__button-icon{transform:rotate(180deg)}.stzh-pi-menu--is-open:not(.stzh-pi-menu--breakout){width:var(--stzh-pi-menu-max-width);overflow:visible}@media screen and (min-width: 900px){.stzh-pi-menu--is-open:not(.stzh-pi-menu--breakout){width:100%;z-index:inherit;overflow:hidden}}.stzh-pi-menu--is-open.stzh-pi-menu--breakout{width:var(--stzh-pi-menu-max-width)}";
+
+const ANIMATION_SHOW = {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "100%", opacity: "1" },
+  ],
+  options: { duration: 300, easing: "linear" },
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { height: "100%", opacity: "1" },
+    { height: "0", opacity: "0" },
+  ],
+  options: { duration: 300, easing: "linear" },
+};
+let accordionItemCounter = 0;
+const StzhPiMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = createEvent(this, "stzhOpened", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.stzhClosed = createEvent(this, "stzhClosed", 7);
+    this.stzhMenuItemClick = createEvent(this, "stzhMenuItemClick", 7);
+    this.toggledByMethod = false;
+    this.focusedByInput = false;
+    this.mediaChangeHandler = () => {
+      this.isSmallOrMedium = !media("small").matches || !media("medium").matches;
+    };
+    this.handleHeaderClick = () => {
+      this.toggle();
+    };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.buttonElement.focus();
+      }
+      this.focusedByInput = false;
+    };
+    this.handleMenuItemClick = (event) => {
+      this.stzhMenuItemClick.emit({
+        component: "stzh-pi-menu",
+        originalEvent: event,
+      });
+    };
+    this.localization = undefined;
+    this.breakout = false;
+    this.menuItems = [];
+    this.open = false;
+    this.heading = "";
+    this.subheading = "";
+    this.headingLevel = "3";
+    this.analyticsId = undefined;
+    this.rootTabindex = 0;
+    this.isSmallOrMedium = undefined;
+  }
+  menuItemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._menuItems = JSON.parse(newValue);
+    }
+    else {
+      this._menuItems = newValue;
+    }
+    this._menuItems = this._menuItems.map((menuItem, index) => (Object.assign({ id: `submenu-${index}` }, menuItem)));
+  }
+  async openWatcher(newValue) {
+    if (!this.bodyElement) {
+      return;
+    }
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {
+        height: this.bodyElement.scrollHeight,
+      }), ANIMATION_SHOW.options);
+      if (this.isSmallOrMedium) {
+        this.bodyElement.style.height = "auto";
+      }
+      else {
+        this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;
+      }
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {
+        height: this.bodyElement.scrollHeight,
+      }), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = "0px";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show piMenu item content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  /** Toggle piMenu item content */
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  async componentWillLoad() {
+    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;
+    this.menuItemsWatcher(this.menuItems);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "pi-pagetitle");
+    }
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.mediaChangeHandler();
+    if (this.isSmallOrMedium) {
+      this.bodyElement.style.height = this.open ? "auto" : "0px";
+    }
+    else {
+      this.bodyElement.style.height = this.open ? `calc(100% - ${this.headingElement.clientHeight})px` : "0px";
+    }
+  }
+  async connectedCallback() {
+    addMediaChangeListener(this.mediaChangeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
+  }
+  render() {
+    const Heading = `h${this.headingLevel}`;
+    const classes = {
+      "stzh-pi-menu": true,
+      "stzh-pi-menu--is-open": this.open,
+      "stzh-pi-menu--breakout": this.breakout,
+    };
+    return (h(Host, { tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { class: classes }, h(Heading, { class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick, ref: el => (this.headingElement = el) }, h("button", { ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { class: "stzh-pi-menu__button-text" }, h("span", { class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { class: "stzh-pi-menu__content-inner" }, h("nav", { class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map(item => {
+      var _a;
+      return (h("li", { class: "stzh-pi-menu__nav-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e), class: {
+          "stzh-pi-menu__nav-item": true,
+          "is-level-1": true,
+          active: item.active,
+        } }, item.label), ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("ul", { id: item.id, class: "stzh-pi-menu__nav-list is-level-2" }, item.items.map(item => (h("li", { class: "stzh-pi-menu__nav-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e), class: {
+          "stzh-pi-menu__nav-item": true,
+          "is-level-2": true,
+          active: item.active,
+        } }, item.label))))))));
+    })))))), h("button", { class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { class: "stzh-pi-menu__button-text" }, h("span", { class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { name: "angle-down", class: "stzh-pi-menu__button-icon" }))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "menuItems": ["menuItemsWatcher"],
+    "open": ["openWatcher"]
+  }; }
+};
+StzhPiMenu.style = stzhPiMenuCss;
+
+export { StzhPiMenu as stzh_pi_menu };
+
+//# sourceMappingURL=stzh-pi-menu.entry.js.map

package/dist/esm/stzh-pi-menu.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pi-menu.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-pi-menu/stzh-pi-menu.scss?tag=stzh-pi-menu&encapsulation=shadow","src/components/stzh-pi-menu/stzh-pi-menu.tsx"],"sourcesContent":["/**\n * @prop --stzh-pi-menu-padding-left\n */\n\n:host {\n  max-height: 100%;\n  height: 100%;\n  overflow: auto;\n\n  --padding-left: var(--stzh-pi-menu-padding-left, #{$containerMargin});\n  --trigger-size: #{iconSize(large)};\n  --trigger-color: #{$colorBlack};\n  --content-background: #{$colorPrimary20};\n  --icon-size: #{iconSize()};\n  --button-color: #{$colorBlack};\n  --button-background-color: #{$colorPrimary30};\n  --stzh-pi-menu-max-width: 300px;\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorPrimary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n.stzh-pi-menu {\n  max-height: 100%;\n  height: 100%;\n  overflow: auto;\n  max-width: var(--stzh-pi-menu-max-width);\n  transition: width 0.15s ease;\n  width: 100%;\n  z-index: 1;\n  position: absolute;\n\n  &__heading {\n    margin: 0;\n    position: sticky;\n    top: 0;\n  }\n\n  &__button {\n    @include fontSize('centi');\n    @include font('heavy');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    width: 100%;\n    min-height: 56px;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xsmall);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    @include mq($from: large) {\n      @include fontSize('deci');\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button-spacer {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  &__subheading {\n    @include fontSize('centi');\n    @include font('heavy');\n    margin: 0;\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'tiny');\n\n    @include mq($from: large) {\n      @include fontSize('deci');\n    }\n  }\n\n  &__button,\n  &__subheading {\n    padding-left: var(--padding-left);\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &__content-inner {\n    background-color: var(--content-background);\n    height: auto;\n    min-height: 100%;\n  }\n\n  &__button-text {\n    flex-grow: 1;\n    display: none;\n\n    @include mq($from: small) {\n      display: inherit;\n    }\n  }\n\n  &__button-icon {\n    --size: var(--trigger-size);\n\n    transition-property: transform, color;\n    transition-duration: 500ms;\n    color: var(--trigger-color);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    color: var(--hover-trigger-color);\n  }\n\n  &__content {\n    height: 100%;\n    overflow: auto;\n\n    /* Scrollbar styling */\n\n    &::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: var(--stzh-color-primary30);\n    }\n\n    &::-webkit-scrollbar-track {\n      background: var(--content-background);\n    }\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__heading-text {\n    display: block;\n  }\n\n  @include mq($from: medium) {\n    max-width: 100%;\n  }\n\n  /* Nav */\n\n  &__nav {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n\n  &__nav-list {\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n\n  &__nav-item {\n    display: block;\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-right', 'regular');\n    @include spaceCurve('padding-bottom', 'tiny');\n    padding-left: var(--padding-left);\n    text-decoration: none;\n    color: var(--stzh-color-black);\n\n    &:hover {\n      color: var(--stzh-color-primary70);\n    }\n  }\n\n  &__nav-item.active {\n    background-color: var(--stzh-color-primary30);\n  }\n\n  &__nav-item.is-level-1 {\n    @include font('heavy');\n  }\n\n  &__nav-item.is-level-2 {\n    padding-left: calc(var(--padding-left) + var(--stzh-space-xlarge));\n  }\n\n  /* absolute positioned */\n\n  &--breakout {\n    min-width: 100%;\n    overflow: visible;\n  }\n\n  &__button-space-helper {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    transform: rotate(180deg);\n  }\n\n  &--is-open:not(&--breakout) {\n    width: var(--stzh-pi-menu-max-width);\n    overflow: visible;\n\n    @include mq($from: medium) {\n      width: 100%;\n      z-index: inherit;\n      overflow: hidden;\n    }\n  }\n\n  &--is-open#{&}--breakout {\n    width: var(--stzh-pi-menu-max-width);\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPiMenuClosedEvent,\n  StzhPiMenuCloseEvent,\n  StzhPiMenuItemClickEvent,\n  StzhPiMenuOpenedEvent,\n  StzhPiMenuOpenEvent,\n  StzhPiPagetitleMenuItem,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"100%\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"100%\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n@Component({\n  tag: \"stzh-pi-menu\",\n  styleUrl: \"stzh-pi-menu.scss\",\n  shadow: true,\n})\nexport class StzhPiMenu {\n  /** Translation strings */\n  @Prop() localization: StzhPiMenuLocalization;\n\n  /** Breakout from layout */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /** Menu navigation items */\n  @Prop() menuItems: StzhPiPagetitleMenuItem[] | string = [];\n  private _menuItems: StzhPiPagetitleMenuItem[];\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Heading title */\n  @Prop() subheading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhPiMenuElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem,\n    }));\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      if (this.isSmallOrMedium) {\n        this.bodyElement.style.height = \"auto\";\n      } else {\n        this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n      }\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show piMenu item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle piMenu item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private headingElement: HTMLHeadingElement;\n  private piMenuId: string;\n  private focusedByInput: boolean = false;\n  @State() isSmallOrMedium: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmallOrMedium = !media(\"small\").matches || !media(\"medium\").matches;\n  };\n\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private handleMenuItemClick = (event: MouseEvent) => {\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-pi-menu\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n    this.menuItemsWatcher(this.menuItems);\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n    }\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.mediaChangeHandler();\n    if (this.isSmallOrMedium) {\n      this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    } else {\n      this.bodyElement.style.height = this.open ? `calc(100% - ${this.headingElement.clientHeight})px` : \"0px\";\n    }\n  }\n\n  async connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-menu\": true,\n      \"stzh-pi-menu--is-open\": this.open,\n      \"stzh-pi-menu--breakout\": this.breakout,\n    };\n\n    return (\n      <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <Heading\n            class=\"stzh-pi-menu__heading\"\n            onClick={this.handleHeaderClick}\n            ref={el => (this.headingElement = el as HTMLHeadingElement)}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-pi-menu__button\"\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-pi-menu__button-text\">\n                <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n              </span>\n              <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n            </button>\n          </Heading>\n          <div\n            id={`${this.piMenuId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-pi-menu__content\"\n            aria-labelledby={`${this.piMenuId}-header`}\n            role=\"region\"\n          >\n            <div class=\"stzh-pi-menu__content-inner\">\n              <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n                {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n                <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n                  {this._menuItems.map(item => (\n                    <li class=\"stzh-pi-menu__nav-list-item\">\n                      <a\n                        href={item.href}\n                        onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n                        class={{\n                          \"stzh-pi-menu__nav-item\": true,\n                          \"is-level-1\": true,\n                          active: item.active,\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                      {item.items?.length > 0 && (\n                        <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n                          {item.items.map(item => (\n                            <li class=\"stzh-pi-menu__nav-list-item\">\n                              <a\n                                href={item.href}\n                                onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n                                class={{\n                                  \"stzh-pi-menu__nav-item\": true,\n                                  \"is-level-2\": true,\n                                  active: item.active,\n                                }}\n                              >\n                                {item.label}\n                              </a>\n                            </li>\n                          ))}\n                        </ul>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n        <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n          <span class=\"stzh-pi-menu__button-text\">\n            <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n          </span>\n          <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-pi-pagetitle.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-54aead01.js';
+import './string-utils-e252977e.js';
+
+const stzhPiPagetitleCss = ".sc-stzh-pi-pagetitle-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-pagetitle-h{display:none}.sc-stzh-pi-pagetitle-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::before,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::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-pagetitle-h .has-focus.sc-stzh-pi-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle{outline-style:none !important}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pi-pagetitle-h{--hero-background-color:var(--stzh-pi-pagetitle-hero-background-color, var(--stzh-color-primary10));--lead-background-color:var(--stzh-pi-pagetitle-lead-background-color, var(--stzh-color-primary40));--grid-template-areas:\"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}@media screen and (min-width: 900px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=dateline]{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);--color:var(--stzh-color-black80op)}.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=heading],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=lead] *,.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=breadcrumb]{--color:var(--stzh-color-black)}.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=readspeaker] *{--color:var(--stzh-color-coolgrey70);--hover-color:var(--stzh-color-coolgrey70)}.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:1.25rem}@media screen and (min-width: 600px){.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:2rem}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:4rem}}@media screen and (min-width: 1600px){.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color);padding-top:var(--stzh-space-medium);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:1.25rem;padding-right:1.25rem}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 900px) and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"lead lead lead lead\";background-color:var(--lead-background-color);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . . lead lead lead lead lead lead . . .\"}}.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-area:image-lead-menu;-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"image image image image\" \"lead lead lead lead\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . image image image image image image\" \"lead lead lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\"}}.stzh-pi-pagetitle__hero.sc-stzh-pi-pagetitle{grid-area:hero}.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{display:none;grid-area:menu}.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{grid-area:image}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color);grid-area:lead;background-color:var(--lead-background-color);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{flex-direction:row}}.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__menu-inner.sc-stzh-pi-pagetitle{position:absolute;top:0;right:0;bottom:0;left:0}}.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xxlarge);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"article-info article-info article-info article-info\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . article-info article-info article-info article-info article-info article-info\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\"}}.stzh-pi-pagetitle__article-info.sc-stzh-pi-pagetitle{grid-area:article-info}.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{margin-top:0;margin-bottom:var(--stzh-space-xxsmall);color:var(--stzh-color-coolgrey70);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-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{margin:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:auto repeat(3, minmax(0, 1fr));grid-template-areas:\"menu image image image\" \"menu lead lead lead\"}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr));grid-template-areas:\"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr));grid-template-areas:\"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\"}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{background-color:var(--stzh-color-coolgrey10)}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{position:relative;display:inherit;margin-right:calc(var(--stzh-grid-gutter) * -1)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-small) * -1)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-medium) * -1);margin-left:-2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-large) * -1);margin-left:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-ultra) * -1);margin-left:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle--level-3.sc-stzh-pi-pagetitle,.stzh-pi-pagetitle--level-4.sc-stzh-pi-pagetitle{--hero-background-color:var(--stzh-color-coolgrey20);--lead-background-color:var(--stzh-color-coolgrey30)}";
+
+const StzhPiPagetitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.init = () => {
+      const heading = this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const readspeakerButton = this.element.querySelector('[slot="readspeaker"] stzh-button');
+      if (heading) {
+        setPropsIfNull(heading, {
+          curve: "hero",
+          level: "1",
+        });
+      }
+      if (readspeakerButton) {
+        setPropsIfNull(readspeakerButton, {
+          variant: "tertiary-plain",
+          noPaddingLeft: true,
+          noPaddingRight: true,
+          size: "small",
+          sizeMedium: "tiny",
+          buttonAccesskey: "L",
+        });
+      }
+      leads.forEach(lead => {
+        setPropsIfNull(lead, {
+          lead: true,
+        });
+      });
+    };
+    this.level = 1;
+    this.author = "";
+    this.date = "";
+  }
+  handleLevelChange(level) {
+    const menuElement = this.element.querySelector("stzh-pi-menu");
+    if (menuElement) {
+      menuElement.breakout = level >= 3;
+    }
+  }
+  async componentDidLoad() {
+    this.handleLevelChange(this.level);
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const readspeakerSlotUsed = hasSlot(this.element, "readspeaker");
+    const menuSlotUsed = hasSlot(this.element, "menu");
+    const hasArticleInfo = !!this.author || !!this.date;
+    const classes = {
+      "stzh-pi-pagetitle": true,
+      "stzh-pi-pagetitle--has-image": imageSlotUsed,
+      "stzh-pi-pagetitle--has-no-image": !imageSlotUsed,
+      "stzh-pi-pagetitle--has-lead": leadSlotUsed,
+      "stzh-pi-pagetitle--has-meta": readspeakerSlotUsed,
+      "stzh-pi-pagetitle--has-menu": menuSlotUsed,
+      "stzh-pi-pagetitle--has-article-info": hasArticleInfo,
+      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
+    };
+    return (h(Host, { "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { class: classes }, h("div", { class: "stzh-pi-pagetitle__hero-container" }, h("div", { class: "stzh-pi-pagetitle__hero" }, h("div", { class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { name: "breadcrumb" })), h("div", { class: "stzh-pi-pagetitle__meta" }, h("div", { class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { name: "readspeaker" }))), h("div", { class: "stzh-pi-pagetitle__dateline" }, h("slot", { name: "dateline" })), h("div", { class: "stzh-pi-pagetitle__heading" }, h("slot", { name: "heading" })))), h("div", { class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { name: "menu" })))), h("div", { class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { name: "image" }))))), menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__lead" }, h("slot", { name: "lead" }))))), !menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__lead-container" }, h("div", { class: "stzh-pi-pagetitle__lead" }, h("slot", { name: "lead" })))), hasArticleInfo && (h("div", { class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { class: "stzh-pi-pagetitle__article-info" }, this.author && h("p", { class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { class: "stzh-pi-pagetitle__date" }, this.date)))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "level": ["handleLevelChange"]
+  }; }
+};
+StzhPiPagetitle.style = stzhPiPagetitleCss;
+
+export { StzhPiPagetitle as stzh_pi_pagetitle };
+
+//# sourceMappingURL=stzh-pi-pagetitle.entry.js.map

package/dist/esm/stzh-pi-pagetitle.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pi-pagetitle.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-pagetitle-hero-background-color: Background color\n   * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n */\n\n:host {\n  --hero-background-color: var(--stzh-pi-pagetitle-hero-background-color, #{$colorPrimary10});\n  --lead-background-color: var(--stzh-pi-pagetitle-lead-background-color, #{$colorPrimary40});\n  --grid-template-areas: \"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n\n  @include mq($from: medium) {\n    --grid-template-areas: \". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n  }\n\n  ::slotted([slot=\"dateline\"]) {\n    @include fontSize('milli');\n    @include font('heavy');\n    --color: var(--stzh-color-black80op);\n  }\n\n  ::slotted([slot=\"heading\"]),\n  ::slotted([slot=\"lead\"]) *,\n  ::slotted([slot=\"breadcrumb\"]) {\n    --color: var(--stzh-color-black);\n  }\n\n  ::slotted([slot=\"readspeaker\"]) * {\n    --color: var(--stzh-color-coolgrey70);\n    --hover-color: var(--stzh-color-coolgrey70);\n  }\n\n  ::slotted([slot=\"menu\"]) {\n    --stzh-pi-menu-padding-left: #{$containerMargin};\n\n    @include mq($from: small) {\n      --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n    }\n\n    @include mq($from: large) {\n      --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n    }\n\n    @include mq($from: ultra) {\n      --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n    }\n  }\n}\n\n.stzh-pi-pagetitle {\n  @include spaceCurve('margin-bottom', 'large');\n\n\n  /* Containers */\n\n  &__hero-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n    @include spaceCurve('padding-top', 'regular');\n    @include containerPadding;\n  }\n\n  &__image-lead-menu-container {\n    @include grid;\n    grid-template-areas: var(--grid-template-areas);\n    background-color: var(--hero-background-color);\n\n    @include mq($from: medium) {\n      @include containerPadding;\n    }\n  }\n\n  &__lead-container {\n    @include grid;\n    grid-template-areas: \"lead lead lead lead\";\n    background-color: var(--lead-background-color);\n    @include containerPadding;\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n    }\n  }\n\n  &__image-lead-menu {\n    grid-area: image-lead-menu;\n\n    @include grid;\n    grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  /* Elements */\n\n  &__hero {\n    grid-area: hero;\n  }\n\n  &__menu {\n    display: none;\n    grid-area: menu;\n  }\n\n  &__image {\n    grid-area: image;\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2)\n    }\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n    grid-area: lead;\n    background-color: var(--lead-background-color);\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__readspeaker {\n    margin-bottom: space('medium');\n\n    @include mq($from: small) {\n      margin-bottom: space('large');\n    }\n\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n\n  &__dateline {\n    margin-bottom: space('xxsmall');\n\n    @include mq($from: medium) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__breadcrumbs {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  &__heading {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  /**\n   * Menu.\n   */\n\n  &__menu-inner {\n    @include mq($from: medium) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  }\n\n\n  /* Article Info */\n  &__article-info-wrapper {\n    @include container();\n    @include spaceCurve('padding-top', 'large');\n    @include grid;\n    grid-template-areas: \"article-info article-info article-info article-info\";\n\n    @include mq($from: medium) {\n      grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n    }\n\n    @include mq($from: large) {\n      grid-template-areas: \". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n    }\n  }\n\n  &__article-info {\n    grid-area: article-info;\n  }\n\n  &__author {\n    margin-top: 0;\n    margin-bottom: var(--stzh-space-xxsmall);\n    color: var(--stzh-color-coolgrey70);\n    @include font('heavy');\n    @include fontCurve('p1');\n  }\n\n  &__date {\n    margin: 0;\n    @include fontCurve('p1');\n  }\n\n  /**\n   * Has menu.\n   */\n  &--has-menu &__image-lead-menu {\n    grid-template-columns: auto repeat(3, minmax(0, 1fr));\n    grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n    @include mq($from: medium) {\n      grid-template-columns: $gridColumnsMedium;\n      grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: $gridColumnsLarge;\n      grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n    }\n  }\n\n  &--has-menu &__image-lead-menu-container {\n    background-color: var(--stzh-color-coolgrey10);\n  }\n\n  &--has-menu &__menu {\n    position: relative;\n    display: inherit;\n    margin-right: calc(#{$gridGutter} * -1);\n\n    @include mq($from: small) {\n      margin-right: calc(#{$gridGutterSmall} * -1);\n    }\n\n    @include mq($from: medium) {\n      margin-right: calc(#{$gridGutterMedium} * -1);\n      margin-left: -$containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: calc(#{$gridGutterLarge} * -1);\n      margin-left: -$containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(#{$gridGutterUltra} * -1);\n      margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n    }\n  }\n\n  &--has-menu &__lead {\n    @include spaceCurve('padding-left', 'regular');\n\n    @include mq($from: medium) {\n      margin-right: -$containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      margin-right: -$containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n      padding-right: calc((100vw - 84.25rem) / 2);\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Level 3-4 */\n  &--level-3,\n  &--level-4 {\n    --hero-background-color: var(--stzh-color-coolgrey20);\n    --lead-background-color: var(--stzh-color-coolgrey30);\n  }\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pi-pagetitle\",\n  styleUrl: \"stzh-pi-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPiPagetitle {\n  /** Level */\n  @Prop({ reflect: true }) level: 1 | 2 | 3 | 4 = 1;\n\n  /** Author of the content */\n  @Prop({ reflect: true }) author: string = \"\";\n\n  /** Date of the content */\n  @Prop({ reflect: true }) date: string = \"\";\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  @Watch(\"level\")\n  handleLevelChange(level: number) {\n    const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n    if (menuElement) {\n      menuElement.breakout = level >= 3;\n    }\n  }\n\n  async componentDidLoad() {\n    this.handleLevelChange(this.level);\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n    const menuSlotUsed = hasSlot(this.element, \"menu\");\n    const hasArticleInfo = !!this.author || !!this.date;\n\n    const classes = {\n      \"stzh-pi-pagetitle\": true,\n      \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n      \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n      \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n    };\n\n    return (\n      <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n        <div class={classes}>\n          <div class=\"stzh-pi-pagetitle__hero-container\">\n            <div class=\"stzh-pi-pagetitle__hero\">\n              <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n                <slot name=\"breadcrumb\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__meta\">\n                <div class=\"stzh-pi-pagetitle__readspeaker\">\n                  <slot name=\"readspeaker\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__dateline\">\n                <slot name=\"dateline\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__heading\">\n                <slot name=\"heading\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n            <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n              <div class=\"stzh-pi-pagetitle__menu\">\n                {menuSlotUsed && (\n                  <div class=\"stzh-pi-pagetitle__menu-inner\">\n                    <slot name=\"menu\"></slot>\n                  </div>\n                )}\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__image\">\n                {[1, 2].indexOf(this.level) > -1 && (\n                  <div class=\"stzh-pi-pagetitle__image-wrapper\">\n                    <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n                      <slot name={\"image\"}></slot>\n                    </stzh-ratio>\n                  </div>\n                )}\n              </div>\n\n              {menuSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {!menuSlotUsed && (\n            <div class=\"stzh-pi-pagetitle__lead-container\">\n              <div class=\"stzh-pi-pagetitle__lead\">\n                <slot name=\"lead\"></slot>\n              </div>\n            </div>\n          )}\n\n          {hasArticleInfo && (\n            <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n              <div class=\"stzh-pi-pagetitle__article-info\">\n                {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n                {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-pi-quote.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+
+const stzhPiQuoteCss = "@charset \"UTF-8\";.sc-stzh-pi-quote-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-quote-h{display:none}.sc-stzh-pi-quote-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-quote-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-quote-h *.sc-stzh-pi-quote,.sc-stzh-pi-quote-h *.sc-stzh-pi-quote::before,.sc-stzh-pi-quote-h *.sc-stzh-pi-quote::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-quote-h .has-focus.sc-stzh-pi-quote{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-quote-h .stzh-fylingfocus-focused.sc-stzh-pi-quote{outline-style:none !important}.sc-stzh-pi-quote-h .stzh-fylingfocus-focused.sc-stzh-pi-quote::-moz-focus-inner{border:0 !important}.sc-stzh-pi-quote-h{--background-color:var(--stzh-pi-quote-background-color, var(--stzh-color-primary30));--color:var(--stzh-pi-quote-color, var(--stzh-color-primary50))}.stzh-pi-quote.sc-stzh-pi-quote{position:relative;background-color:var(--background-color);padding-top:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:5.4375rem}}@media screen and (min-width: 900px){.stzh-pi-quote.sc-stzh-pi-quote{padding-left:9.875rem}}@media print{.stzh-pi-quote.sc-stzh-pi-quote{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:0;display:flex}@media screen and (min-width: 600px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-pi-quote__text.sc-stzh-pi-quote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-pi-quote__text.sc-stzh-pi-quote::before,.stzh-pi-quote__text.sc-stzh-pi-quote::after{display:block;font-size:var(--stzh-font-mega-font-size)}@media screen and (min-width: 1260px){.stzh-pi-quote__text.sc-stzh-pi-quote::before,.stzh-pi-quote__text.sc-stzh-pi-quote::after{font-size:var(--stzh-font-hero-font-size)}}.stzh-pi-quote__text.sc-stzh-pi-quote::before{content:\"«\";color:var(--color);display:flex;align-items:flex-start;padding-right:var(--stzh-space-xsmall);line-height:0;padding-top:var(--stzh-space-small)}.stzh-pi-quote__text.sc-stzh-pi-quote::after{content:\"»\";color:var(--color);display:flex;align-items:flex-end;padding-left:var(--stzh-space-xsmall);line-height:0;padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1260px){.stzh-pi-quote__text.sc-stzh-pi-quote::after{padding-bottom:var(--stzh-space-large)}}";
+
+const StzhPiQuote = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.text = "";
+  }
+  render() {
+    const classes = {
+      "stzh-pi-quote": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("blockquote", { class: "stzh-pi-quote__text" }, this.text))));
+  }
+  get element() { return getElement(this); }
+};
+StzhPiQuote.style = stzhPiQuoteCss;
+
+export { StzhPiQuote as stzh_pi_quote };
+
+//# sourceMappingURL=stzh-pi-quote.entry.js.map

package/dist/esm/stzh-pi-quote.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-pi-quote.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,isKAAisK;;MCO3sK,WAAW;;;gBAIC,EAAE;;EAEzB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,kBAAY,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,IAAI,CAAc,CAC5D,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pi-quote/stzh-pi-quote.scss?tag=stzh-pi-quote&encapsulation=scoped","src/components/stzh-pi-quote/stzh-pi-quote.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-pi-quote-background-color, #{$colorPrimary30});\n  --color: var(--stzh-pi-quote-color, #{$colorPrimary50});\n}\n\n.stzh-pi-quote {\n  position: relative;\n  background-color: var(--background-color);\n  @include spaceCurve('padding-top', medium);\n  @include spaceCurve('padding-right', medium);\n  @include spaceCurve('padding-bottom', medium);\n  @include spaceCurve('padding-left', medium);\n\n  @include mq($from: small) {\n    padding-left: 87px;\n  }\n\n  @include mq($from: medium) {\n    padding-left: 158px;\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &__text {\n    @include fontCurve('h3');\n    @include font('heavy');\n    margin: 0;\n    padding: 0;\n    display: flex;\n\n    &::before,\n    &::after {\n      display: block;\n      font-size: var(--stzh-font-mega-font-size);\n\n      @include mq($from: large) {\n        font-size: var(--stzh-font-hero-font-size);\n      }\n    }\n\n    &::before {\n      content: '\\00AB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-start;\n      padding-right: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-top: var(--stzh-space-small);\n    }\n\n    &::after {\n      content: '\\00BB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-end;\n      padding-left: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-bottom: var(--stzh-space-medium);\n\n      @include mq($from: large) {\n        padding-bottom: var(--stzh-space-large);\n      }\n    }\n  }\n}\n\n\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"stzh-pi-quote\",\n  styleUrl: \"stzh-pi-quote.scss\",\n  scoped: true,\n})\nexport class StzhPiQuote {\n  @Element() element: HTMLStzhListElement;\n\n  /* Text for quote */\n  @Prop() text: string = \"\";\n\n  render() {\n    const classes = {\n      \"stzh-pi-quote\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <blockquote class=\"stzh-pi-quote__text\">{this.text}</blockquote>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}