@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

package/dist/esm/stzh-overlay.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { c as createBaseFocusTrapOptions } from './overlay-utils-4da78ee6.js';
+import { c as createFocusTrap } from './focus-trap.esm-5ca3a3f7.js';
+
+const stzhOverlayCss = ".sc-stzh-overlay-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-overlay-h{display:none}.sc-stzh-overlay-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-overlay-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::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-overlay-h .has-focus.sc-stzh-overlay{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-overlay-h .stzh-fylingfocus-focused.sc-stzh-overlay{outline-style:none !important}.sc-stzh-overlay-h .stzh-fylingfocus-focused.sc-stzh-overlay::-moz-focus-inner{border:0 !important}.sc-stzh-overlay-h{--backdrop-opacity:var(--stzh-overlay-backdrop-opacity);--backdrop-background-color:var(--stzh-overlay-backdrop-background-color)}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;justify-content:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity);position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:flex;flex-direction:column;align-items:center;position:relative;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:flex}";
+
+const CLASS_BODY_OPEN = "stzh-overlay-open";
+const StzhOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.open = false;
+    this.stay = true;
+    this.a11yLabel = "";
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-overlay"
+    });
+  }
+  async hide() {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-overlay"
+    });
+  }
+  getSiblings() {
+    if (!this.parentElement) {
+      return [];
+    }
+    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
+  }
+  disableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.setAttribute("aria-hidden", "true");
+    });
+  }
+  enableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.removeAttribute("aria-hidden");
+    });
+  }
+  dialogShown() {
+    document.body.classList.add(CLASS_BODY_OPEN);
+    this.disableSiblings();
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  dialogHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    this.enableSiblings();
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+  }
+  connectedCallback() {
+    if (!this.stay && this.element.parentElement !== document.body) {
+      document.body.appendChild(this.element);
+    }
+    this.parentElement = this.element.parentElement;
+  }
+  componentDidRender() {
+    this.open ? this.dialogShown() : this.dialogHidden();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.element);
+  }
+  componentDidLoad() {
+    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
+    if (this.open) {
+      this.dialogShown();
+    }
+  }
+  disconnectedCallback() {
+    this.dialogHidden();
+  }
+  render() {
+    const classes = {
+      "stzh-overlay": true,
+      "stzh-overlay--is-open": this.open
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-overlay__backdrop" }), h("div", { class: "stzh-overlay__content" }, h("div", { class: "stzh-overlay__content-inner", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", null))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhOverlay.style = stzhOverlayCss;
+
+export { StzhOverlay as stzh_overlay };
+
+//# sourceMappingURL=stzh-overlay.entry.js.map

package/dist/esm/stzh-overlay.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhOverlayOpenEvent,\n  StzhOverlayCloseEvent\n} from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\"\n    });\n  }\n\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, a as Host, g as getElement
 import { h as hasSlot } from './utils-4f9b3f37.js';
 import './string-utils-e252977e.js';
 
-const stzhPiTeaserCss = ".sc-stzh-pi-teaser-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-teaser-h{display:none}.sc-stzh-pi-teaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(--stzh-pi-teaser-image-background-color, var(--stzh-color-primary30));display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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-teaser__title.sc-stzh-pi-teaser{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-teaser__title-link.sc-stzh-pi-teaser{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-teaser__title-link.sc-stzh-pi-teaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{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);margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-large)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;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: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}";
+const stzhPiTeaserCss = ".sc-stzh-pi-teaser-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-teaser-h{display:none}.sc-stzh-pi-teaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(--stzh-pi-teaser-image-background-color, var(--stzh-color-primary30));display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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-teaser__title.sc-stzh-pi-teaser{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-deci-font-size);line-height:var(--stzh-font-deci-heading-line-height);letter-spacing:var(--stzh-font-curve---heading-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;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1 !important}@media screen and (min-width: 1600px){.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{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-teaser__title-link.sc-stzh-pi-teaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{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);margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-large)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;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: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}";
 
 const StzhPiTeaser = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-pi-teaser.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,4yNAA4yN;;MCevzN,YAAY;;;;IAqCf,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,gBAAgB;QAC3B,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,CAAC;;;;oBA5ByB,EAAE;mBAGH,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;gBAGF,EAAE;;EAkBzB,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,aAAa;IACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC7C,QACE,WAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,QAAQ,IAAI,SAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzE,EAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpC,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,CACN,EACN;GACH;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpD,MAAM,sBAAsB,GAAG,CAAC,YAAY,CAAC;IAE7C,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,0BAA0B,EAAE,OAAO;MACnC,2BAA2B,EAAE,YAAY;KAC1C,CAAC;IAEF,QACE,EAAC,IAAI,gBAAW,OAAO,IACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChE,WAAK,KAAK,EAAC,uBAAuB,IAChC,kBAAY,KAAK,EAAC,KAAK,IACrB,YAAM,IAAI,EAAE,OAAO,GAAS,CACjB,CACT,EACL,sBAAsB,KACrB,kBAAY,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAE,KAAK,IACzD,IAAI,CAAC,aAAa,EAAE,CACV,CACd,EACD,WAAK,KAAK,EAAC,yBAAyB,IACjC,CAAC,sBAAsB,IAAI,IAAI,CAAC,aAAa,EAAE,EAChD,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC1F,IAAI,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACE,CACL,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-image-background-color, #{$colorPrimary30});\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-teaser {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--stzh-color-white);\n\n  &__wrapper {\n    display: flex;\n    flex-grow: 1;\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-left', 'intermediary');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__dateline {\n    @include font('heavy');\n    @include fontCurve('p1');\n    color: var(--stzh-color-coolgrey70);\n    margin: 0 0 var(--stzh-space-small);\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 fontSize('milli');\n    margin-top: 0;\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__date {\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    text-align: right;\n    width: 100%;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  &--has-image &__lead {\n    @include spaceCurve('margin-top', 'small');\n  }\n\n  /* Title ratio styling (no image) */\n  &__title-ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__title-ratio &__title-wrapper {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve('padding-top', 'intermediary');\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-bottom', 'intermediary');\n    @include spaceCurve('padding-left', 'intermediary');\n  }\n\n  &__title-ratio &__dateline {\n    margin-bottom: var(--stzh-space-xxsmall);\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } 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-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\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  /** Dateline */\n  @Prop() dateline: string = \"\";\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  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\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      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__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      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__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-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,6pOAA6pO;;MCexqO,YAAY;;;;IAqCf,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,gBAAgB;QAC3B,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,CAAC;;;;oBA5ByB,EAAE;mBAGH,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;gBAGF,EAAE;;EAkBzB,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,aAAa;IACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC7C,QACE,WAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,QAAQ,IAAI,SAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzE,EAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpC,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,CACN,EACN;GACH;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpD,MAAM,sBAAsB,GAAG,CAAC,YAAY,CAAC;IAE7C,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,0BAA0B,EAAE,OAAO;MACnC,2BAA2B,EAAE,YAAY;KAC1C,CAAC;IAEF,QACE,EAAC,IAAI,gBAAW,OAAO,IACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChE,WAAK,KAAK,EAAC,uBAAuB,IAChC,kBAAY,KAAK,EAAC,KAAK,IACrB,YAAM,IAAI,EAAE,OAAO,GAAS,CACjB,CACT,EACL,sBAAsB,KACrB,kBAAY,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAE,KAAK,IACzD,IAAI,CAAC,aAAa,EAAE,CACV,CACd,EACD,WAAK,KAAK,EAAC,yBAAyB,IACjC,CAAC,sBAAsB,IAAI,IAAI,CAAC,aAAa,EAAE,EAChD,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC1F,IAAI,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACE,CACL,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-image-background-color, #{$colorPrimary30});\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-teaser {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--stzh-color-white);\n\n  &__wrapper {\n    display: flex;\n    flex-grow: 1;\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-left', 'intermediary');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__dateline {\n    @include font('heavy');\n    @include fontCurve('p1');\n    color: var(--stzh-color-coolgrey70);\n    margin: 0 0 var(--stzh-space-small);\n  }\n\n  &__title {\n    @include font('heavy');\n    @include fontSize('deci', 'heading');\n    @include wordWrap;\n\n    color: var(--stzh-color-black);\n    margin: 0;\n\n    @include mq($from: ultra) {\n      @include fontSize('deca', 'heading');\n    }\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3; /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis; /* Adds \"...\" at the end if truncated */\n    line-height: 1.0 !important;\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 fontSize('milli');\n    margin-top: 0;\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__date {\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    text-align: right;\n    width: 100%;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  &--has-image &__lead {\n    @include spaceCurve('margin-top', 'small');\n  }\n\n  /* Title ratio styling (no image) */\n  &__title-ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__title-ratio &__title-wrapper {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve('padding-top', 'intermediary');\n    @include spaceCurve('padding-right', 'intermediary');\n    @include spaceCurve('padding-bottom', 'intermediary');\n    @include spaceCurve('padding-left', 'intermediary');\n  }\n\n  &__title-ratio &__dateline {\n    margin-bottom: var(--stzh-space-xxsmall);\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } 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-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\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  /** Dateline */\n  @Prop() dateline: string = \"\";\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  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\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      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__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      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__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-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-poicard.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+
+const stzhPoicardCss = ".sc-stzh-poicard-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-poicard-h{display:none}.sc-stzh-poicard-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h *.sc-stzh-poicard,.sc-stzh-poicard-h *.sc-stzh-poicard::before,.sc-stzh-poicard-h *.sc-stzh-poicard::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-poicard-h .has-focus.sc-stzh-poicard{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard{outline-style:none !important}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard::-moz-focus-inner{border:0 !important}.sc-stzh-poicard-h{--background-color:var(--stzh-color-grey10);--hover-background-color:var(--stzh-color-grey20);--title-color:var(--stzh-color-primary70);--title-hover-color:var(--stzh-color-primary80);--title-background-color:var(--stzh-color-secondary20);--title-hover-background-color:var(--stzh-color-secondary30)}.stzh-poicard.sc-stzh-poicard{display:block;background-color:var(--background-color);text-decoration:none;height:100%}.stzh-poicard.sc-stzh-poicard:hover{--title-color:var(--title-hover-color);--title-background-color:var(--title-hover-background-color);--background-color:var(--hover-background-color)}.stzh-poicard__content.sc-stzh-poicard{display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-poicard__content-with-icon.sc-stzh-poicard,.stzh-poicard__content-with-badge.sc-stzh-poicard{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-badge.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-grey80)}.stzh-poicard__content-head.sc-stzh-poicard{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);--color:var(--title-color);background-color:var(--title-background-color)}.stzh-poicard__content-head.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary)}.stzh-poicard__content-title.sc-stzh-poicard{width:100%;--color:var(--stzh-color-grey80)}.stzh-poicard.sc-stzh-poicard:hover .stzh-poicard__content-title.sc-stzh-poicard{--color:var(--stzh-color-black)}.stzh-poicard__content-body.sc-stzh-poicard{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}";
+
+const StzhPoicard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.init = () => {
+      this.itemWatcher(this.item);
+    };
+    this.item = "";
+  }
+  itemWatcher(newValue) {
+    if (!newValue) {
+      this._item = undefined;
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._item = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._item = undefined;
+      }
+    }
+    else {
+      this._item = newValue;
+    }
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const classes = {
+      "stzh-poicard": true,
+    };
+    return (h(Host, null, h("a", { class: classes, href: this._item.url, target: "_blank" }, h("div", { class: "stzh-poicard__content" }, h("div", { class: "stzh-poicard__content-head" }, h("stzh-heading", null, this._item.title)), h("div", { class: "stzh-poicard__content-body" }, this._item.distance && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "pin" }), h("stzh-text", null, this._item.distance))), this._item.temp && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "thermometer" }), h("stzh-text", null, this._item.temp))), (this._item.statusMessageContent ||
+      this._item.statusMessage) && (h("div", { class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && (h("stzh-text", { size: "milli" }, this._item.statusMessage)), this._item.statusMessageContent && (h("stzh-chip", { variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "item": ["itemWatcher"]
+  }; }
+};
+StzhPoicard.style = stzhPoicardCss;
+
+export { StzhPoicard as stzh_poicard };
+
+//# sourceMappingURL=stzh-poicard.entry.js.map

package/dist/esm/stzh-poicard.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-poicard.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8nGAA8nG;;MCWxoG,WAAW;;;IAsBd,SAAI,GAAG;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B,CAAC;gBApB2C,EAAE;;EAI/C,WAAW,CAAC,QAAsC;IAChD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACnC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAMD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,wBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,KAAK,GAAa,EAClC,qBAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,qBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;MAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,iBACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-poilist.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, F as Fragment, a as Host, g as getElement } from './index-e3050b18.js';
+import { a as axios } from './axios-1264ee0b.js';
+
+const stzhPoilistCss = ".sc-stzh-poilist-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-poilist-h{display:none}.sc-stzh-poilist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h *.sc-stzh-poilist,.sc-stzh-poilist-h *.sc-stzh-poilist::before,.sc-stzh-poilist-h *.sc-stzh-poilist::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-poilist-h .has-focus.sc-stzh-poilist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist{outline-style:none !important}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist::-moz-focus-inner{border:0 !important}.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-small);display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 900px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-large)}}.stzh-poilist__header.sc-stzh-poilist stzh-text.sc-stzh-poilist{--color:var(--stzh-color-grey80);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xlarge);display:grid}@media screen and (min-width: 900px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{justify-content:center}}.stzh-poilist.sc-stzh-poilist stzh-dropdown.sc-stzh-poilist{--color:var(--stzh-color-primary90);--icon-color:var(--stzh-color-primary90);--icon-angle-color:var(--stzh-color-primary90)}";
+
+const StzhPoilist = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.handleMoreClick = async () => {
+      this.loadingText = this.localization.dataLoading;
+      this.isLoading = true;
+      this.currentOffset++;
+      const { data } = await axios.get(this.getCurrentApiUrl());
+      this.meta = data.meta;
+      this.items = this.items.concat(data.items);
+      this.isLoading = false;
+    };
+    this.onSortChange = async (e) => {
+      this.activeSorting = e.detail.value;
+      this.currentOffset = 0;
+      this.items = [];
+      await this.apiWatcher(this.api);
+    };
+    this.localization = undefined;
+    this.api = undefined;
+    this.currentOffset = 0;
+    this.meta = undefined;
+    this.items = [];
+    this.isLoading = true;
+    this.dropdownOptions = [];
+    this.activeSorting = undefined;
+    this.latitude = 47.3714332;
+    this.longitude = 8.542093;
+    this.geopositionError = "";
+    this.loadingText = "";
+  }
+  async apiWatcher(newValue) {
+    this.loadingText = this.localization.dataLoading;
+    if (!newValue) {
+      return;
+    }
+    // load data from API
+    const { data } = await axios.get(this.getCurrentApiUrl());
+    this.meta = data.meta;
+    this.items = data.items;
+    this.isLoading = false;
+  }
+  getCurrentApiUrl() {
+    return `${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`;
+  }
+  getNumberOfLoadedItems() {
+    if (this.meta.currentPage !== this.meta.totalPages) {
+      return this.meta.itemsPerPage * this.meta.currentPage;
+    }
+    else {
+      return this.meta.totalItems;
+    }
+  }
+  async getUserPosition() {
+    this.loadingText = this.localization.geopositionLoading;
+    try {
+      const position = await this.getPositionAsync();
+      this.latitude = position.coords.latitude;
+      this.longitude = position.coords.longitude;
+    }
+    catch (geopositionNotFoundException) {
+      console.error("geopositionNotFoundException", geopositionNotFoundException);
+      this.geopositionError = this.localization.geopositionError;
+    }
+  }
+  getPositionAsync() {
+    return new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => resolve(position), (error) => reject(error));
+      }
+      else {
+        reject(new Error("Geolocation is not supported by this browser."));
+      }
+    });
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "poilist");
+    }
+    this.dropdownOptions = [
+      {
+        text: this.localization.sortByDistance,
+        value: "distance",
+      },
+      {
+        text: this.localization.sortByName,
+        value: "name",
+      },
+    ];
+    this.activeSorting = this.dropdownOptions[0].value;
+  }
+  async componentDidLoad() {
+    await this.getUserPosition();
+    await this.apiWatcher(this.api);
+  }
+  render() {
+    const classes = {
+      "stzh-poilist": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-overlay", { open: this.isLoading }, h("stzh-loader", { label: this.loadingText })), this.geopositionError && (h("stzh-message", { type: "error", label: this.geopositionError })), (this.items.length > 0 || this.meta) && (h(Fragment, null, h("div", { class: "stzh-poilist__header" }, h("stzh-text", { size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), h("stzh-dropdown", { label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting)
+        ? this.activeSorting
+        : [this.activeSorting], options: this.dropdownOptions })), h("stzh-cardlist", { layout: "teasers" }, this.items.map((item) => (h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (h("div", { class: "stzh-poilist__show-more" }, h("stzh-button", { variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "api": ["apiWatcher"]
+  }; }
+};
+StzhPoilist.style = stzhPoilistCss;
+
+export { StzhPoilist as stzh_poilist };
+
+//# sourceMappingURL=stzh-poilist.entry.js.map

package/dist/esm/stzh-poilist.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-poilist.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,83EAA83E;;MC4Bx4E,WAAW;;;IA2Cd,oBAAe,GAAG;MACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;MACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,KAAK,CAAC,GAAG,CAAkB,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;MAC3E,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;IAUM,iBAAY,GAAG,OACrB,CAAmD;MAEnD,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;MACvB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACjC,CAAC;;;yBA3D+B,CAAC;;iBAEM,EAAE;qBACZ,IAAI;2BAGe,EAAE;;oBAIvB,UAAU;qBACT,QAAQ;4BACD,EAAE;uBAEP,EAAE;;EAGjC,MAAM,UAAU,CAAC,QAAgB;IAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACjD,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO;KACR;;IAGD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,KAAK,CAAC,GAAG,CAAkB,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC3E,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAEO,gBAAgB;IACtB,OAAO,GAAG,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,aAAa,SAAS,IAAI,CAAC,aAAa,kBAAkB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,SAAS,EAAE,CAAC;GACzI;EAYO,sBAAsB;IAC5B,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClD,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;KACvD;SAAM;MACL,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;KAC7B;GACF;EAWO,MAAM,eAAe;IAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC;IACxD,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;MAC/C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;MACzC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC;KAC5C;IAAC,OAAO,4BAA4B,EAAE;MACrC,OAAO,CAAC,KAAK,CACX,8BAA8B,EAC9B,4BAA4B,CAC7B,CAAC;MACF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC;KAC5D;GACF;EAEO,gBAAgB;IACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;MACjC,IAAI,SAAS,CAAC,WAAW,EAAE;QACzB,SAAS,CAAC,WAAW,CAAC,kBAAkB,CACtC,CAAC,QAAQ,KAAK,OAAO,CAAC,QAAQ,CAAC,EAC/B,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CACzB,CAAC;OACH;WAAM;QACL,MAAM,CAAC,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC,CAAC;OACpE;KACF,CAAC,CAAC;GACJ;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CACrE,IAAI,CAAC,OAAO,EACZ,SAAS,CACV,CAAC;KACH;IACD,IAAI,CAAC,eAAe,GAAG;MACrB;QACE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,cAAc;QACtC,KAAK,EAAE,UAAU;OAClB;MACD;QACE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU;QAClC,KAAK,EAAE,MAAM;OACd;KACF,CAAC;IACF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;GACpD;EAED,MAAM,gBAAgB;IACpB,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;IAC7B,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,oBAAc,IAAI,EAAE,IAAI,CAAC,SAAS,IAChC,mBAAa,KAAK,EAAE,IAAI,CAAC,WAAW,GAAgB,CACvC,EAEd,IAAI,CAAC,gBAAgB,KACpB,oBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,gBAAgB,GACd,CACjB,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,MAClC,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,sBAAsB,IAC/B,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,sBAAsB,EAAE,OAAG,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,GAAG,EACzD,IAAI,CAAC,IAAI,CAAC,UAAU,CACX,EACZ,qBACE,KAAK,EAAC,YAAY,mBACH,IAAI,EACnB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;UAC7B,IAAI,CAAC,aAAa;UAClB,CAAC,IAAI,CAAC,aAAa,CAAC,EAE1B,OAAO,EAAE,IAAI,CAAC,eAAe,GACd,CACb,EAEN,qBAAe,MAAM,EAAC,SAAS,IAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,oBAAc,IAAI,EAAE,IAAI,GAAiB,CAC1C,CAAC,CACY,EAEf,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,KAC7C,WAAK,KAAK,EAAC,yBAAyB,IAClC,mBACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,CACX,CACP,CACQ,CACZ,CACG,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-poilist/stzh-poilist.scss?tag=stzh-poilist&encapsulation=scoped","src/components/stzh-poilist/stzh-poilist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-poilist {\n  &__header {\n    @include spaceCurve('margin-bottom', 'small');\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  &__header stzh-text {\n    --color: var(--stzh-color-grey80);\n    @include font(heavy);\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n\n  stzh-dropdown {\n    --color: var(--stzh-color-primary90);\n    --icon-color: var(--stzh-color-primary90);\n    --icon-angle-color: var(--stzh-color-primary90);\n  }\n}\n","import {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhDropdownOption,\n  StzhPoiCardItemData,\n  StzhPoiListData,\n  StzhPoiListMetaData,\n} from \"../../index\";\nimport { StzhPoilistLocalizedText } from \"./stzh-poilist.localization\"; // export type StzhPoiListMetaData = {\n\n@Component({\n  tag: \"stzh-poilist\",\n  styleUrl: \"stzh-poilist.scss\",\n  scoped: true,\n})\nexport class StzhPoilist {\n  /** Translation strings */\n  @Prop() localization: StzhPoilistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  @Element() element: HTMLStzhPoilistElement;\n\n  @State() currentOffset: number = 0;\n  @State() meta: StzhPoiListMetaData;\n  @State() items: StzhPoiCardItemData[] = [];\n  @State() isLoading: boolean = true;\n\n  /** Sorting */\n  @State() dropdownOptions: StzhDropdownOption[] = [];\n  @State() activeSorting: string | string[];\n\n  /** Geoposition (STZH Rathaus by default) */\n  @State() latitude: number = 47.3714332;\n  @State() longitude: number = 8.542093;\n  @State() geopositionError: string = \"\";\n\n  @State() loadingText: string = \"\";\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    this.loadingText = this.localization.dataLoading;\n    if (!newValue) {\n      return;\n    }\n\n    // load data from API\n    const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n    this.meta = data.meta;\n    this.items = data.items;\n    this.isLoading = false;\n  }\n\n  private getCurrentApiUrl() {\n    return `${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`;\n  }\n\n  private handleMoreClick = async () => {\n    this.loadingText = this.localization.dataLoading;\n    this.isLoading = true;\n    this.currentOffset++;\n    const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n    this.meta = data.meta;\n    this.items = this.items.concat(data.items);\n    this.isLoading = false;\n  };\n\n  private getNumberOfLoadedItems(): number {\n    if (this.meta.currentPage !== this.meta.totalPages) {\n      return this.meta.itemsPerPage * this.meta.currentPage;\n    } else {\n      return this.meta.totalItems;\n    }\n  }\n\n  private onSortChange = async (\n    e: StzhDropdownCustomEvent<StzhDropdownChangeEvent>\n  ) => {\n    this.activeSorting = e.detail.value;\n    this.currentOffset = 0;\n    this.items = [];\n    await this.apiWatcher(this.api);\n  };\n\n  private async getUserPosition() {\n    this.loadingText = this.localization.geopositionLoading;\n    try {\n      const position = await this.getPositionAsync();\n      this.latitude = position.coords.latitude;\n      this.longitude = position.coords.longitude;\n    } catch (geopositionNotFoundException) {\n      console.error(\n        \"geopositionNotFoundException\",\n        geopositionNotFoundException\n      );\n      this.geopositionError = this.localization.geopositionError;\n    }\n  }\n\n  private getPositionAsync(): Promise<GeolocationPosition> {\n    return new Promise((resolve, reject) => {\n      if (navigator.geolocation) {\n        navigator.geolocation.getCurrentPosition(\n          (position) => resolve(position),\n          (error) => reject(error)\n        );\n      } else {\n        reject(new Error(\"Geolocation is not supported by this browser.\"));\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(\n        this.element,\n        \"poilist\"\n      );\n    }\n    this.dropdownOptions = [\n      {\n        text: this.localization.sortByDistance,\n        value: \"distance\",\n      },\n      {\n        text: this.localization.sortByName,\n        value: \"name\",\n      },\n    ];\n    this.activeSorting = this.dropdownOptions[0].value;\n  }\n\n  async componentDidLoad() {\n    await this.getUserPosition();\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poilist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-overlay open={this.isLoading}>\n            <stzh-loader label={this.loadingText}></stzh-loader>\n          </stzh-overlay>\n\n          {this.geopositionError && (\n            <stzh-message\n              type=\"error\"\n              label={this.geopositionError}\n            ></stzh-message>\n          )}\n\n          {(this.items.length > 0 || this.meta) && (\n            <Fragment>\n              <div class=\"stzh-poilist__header\">\n                <stzh-text size=\"micro\">\n                  {this.getNumberOfLoadedItems()} {this.localization.of}{\" \"}\n                  {this.meta.totalItems}\n                </stzh-text>\n                <stzh-dropdown\n                  label=\"Sortierung\"\n                  hide-optional={true}\n                  variant=\"plain\"\n                  noSearch={true}\n                  inline={true}\n                  noWrap={true}\n                  onStzhChange={this.onSortChange}\n                  items={\n                    Array.isArray(this.activeSorting)\n                      ? this.activeSorting\n                      : [this.activeSorting]\n                  }\n                  options={this.dropdownOptions}\n                ></stzh-dropdown>\n              </div>\n\n              <stzh-cardlist layout=\"teasers\">\n                {this.items.map((item) => (\n                  <stzh-poicard item={item}></stzh-poicard>\n                ))}\n              </stzh-cardlist>\n\n              {this.meta.currentPage !== this.meta.totalPages && (\n                <div class=\"stzh-poilist__show-more\">\n                  <stzh-button\n                    variant=\"secondary\"\n                    label={this.localization.showMore}\n                    onClick={this.handleMoreClick}\n                  ></stzh-button>\n                </div>\n              )}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}