npm - @oiz/stzh-components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@oiz/stzh-components 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (713) hide show

package/dist/components/stzh-pi-content-navigation.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface StzhPiContentNavigation extends Components.StzhPiContentNavigation, HTMLElement {}
+export const StzhPiContentNavigation: {
+  prototype: StzhPiContentNavigation;
+  new (): StzhPiContentNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-pi-content-navigation.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-ratio2.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$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiContentNavigation extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return stzhPiContentNavigationCss; }
+}, [6, "stzh-pi-content-navigation", {
+    "href": [513],
+    "target": [1],
+    "analyticsId": [1, "analytics-id"],
+    "navigationLevel": [513, "navigation-level"],
+    "heading": [1],
+    "headingLevel": [1, "heading-level"],
+    "lead": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-pi-content-navigation", "stzh-icon", "stzh-ratio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-pi-content-navigation":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPiContentNavigation$1);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-ratio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+const StzhPiContentNavigation = StzhPiContentNavigation$1;
+const defineCustomElement = defineCustomElement$1;
+export { StzhPiContentNavigation, defineCustomElement };
+//# sourceMappingURL=stzh-pi-content-navigation.js.map

package/dist/components/stzh-pi-content-navigation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"stzh-pi-content-navigation.js","mappings":"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","names":["StzhPiContentNavigation"],"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/components/stzh-pi-menu.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface StzhPiMenu extends Components.StzhPiMenu, HTMLElement {}
+export const StzhPiMenu: {
+  prototype: StzhPiMenu;
+  new (): StzhPiMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-pi-menu.js ADDED Viewed

@@ -0,0 +1,239 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { w as waitForEvent } from './event-utils.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils.js';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils.js';
+import { d as defineCustomElement$2 } from './stzh-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiMenu extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "menuItems": ["menuItemsWatcher"],
+    "open": ["openWatcher"]
+  }; }
+  static get style() { return stzhPiMenuCss; }
+}, [1, "stzh-pi-menu", {
+    "localization": [16],
+    "breakout": [516],
+    "menuItems": [1, "menu-items"],
+    "open": [1540],
+    "heading": [1],
+    "subheading": [1],
+    "headingLevel": [513, "heading-level"],
+    "analyticsId": [1, "analytics-id"],
+    "rootTabindex": [32],
+    "isSmallOrMedium": [32],
+    "show": [64],
+    "hide": [64],
+    "toggle": [64]
+  }, undefined, {
+    "menuItems": ["menuItemsWatcher"],
+    "open": ["openWatcher"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-pi-menu", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-pi-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPiMenu$1);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+const StzhPiMenu = StzhPiMenu$1;
+const defineCustomElement = defineCustomElement$1;
+export { StzhPiMenu, defineCustomElement };
+//# sourceMappingURL=stzh-pi-menu.js.map

package/dist/components/stzh-pi-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"stzh-pi-menu.js","mappings":"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","names":["StzhPiMenu"],"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/components/stzh-pi-pagetitle.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface StzhPiPagetitle extends Components.StzhPiPagetitle, HTMLElement {}
+export const StzhPiPagetitle: {
+  prototype: StzhPiPagetitle;
+  new (): StzhPiPagetitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;