@oiz/stzh-components 0.0.0-pretest

package/dist/components/stzh-fieldset.d.ts

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

package/dist/components/stzh-fieldset.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './stzh-heading2.js';
+
+const stzhFieldsetCss = ".sc-stzh-fieldset-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-fieldset-h{display:none}.sc-stzh-fieldset-h *.sc-stzh-fieldset,.sc-stzh-fieldset-h *.sc-stzh-fieldset::before,.sc-stzh-fieldset-h *.sc-stzh-fieldset::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-hspace{margin-bottom:var(--stzh-space-large)}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>:last-child{margin-bottom:0}.stzh-fieldset.sc-stzh-fieldset{margin:0;padding:0;border:none}.stzh-fieldset__legend.sc-stzh-fieldset{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);padding:0;margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 1024px){.stzh-fieldset__legend.sc-stzh-fieldset{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-fieldset--hide-legend.sc-stzh-fieldset .stzh-fieldset__legend.sc-stzh-fieldset{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+
+const StzhFieldset$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Legend describing the field group inside the fieldset */
+    this.legend = "";
+    /** Hide legend to show only for screenreaders */
+    this.hideLegend = false;
+    /** Heading level inside legend */
+    this.legendLevel = "";
+    /** Type of curve to overwrite the curve inherited from `level` attribute */
+    this.legendCurve = "auto";
+  }
+  render() {
+    const classes = {
+      "stzh-fieldset": true,
+      "stzh-fieldset--hide-legend": this.hideLegend
+    };
+    return (h(Host, null, h("fieldset", { class: classes }, this.legend &&
+      h("legend", { class: "stzh-fieldset__legend" }, this.legendLevel ?
+        h("stzh-heading", { level: this.legendLevel, curve: this.legendCurve }, this.legend)
+        :
+          this.legend), h("slot", null))));
+  }
+  static get style() { return stzhFieldsetCss; }
+}, [6, "stzh-fieldset", {
+    "legend": [1],
+    "hideLegend": [4, "hide-legend"],
+    "legendLevel": [1, "legend-level"],
+    "legendCurve": [1, "legend-curve"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-fieldset", "stzh-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-fieldset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhFieldset$1);
+      }
+      break;
+    case "stzh-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhFieldset = StzhFieldset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhFieldset, defineCustomElement };

package/dist/components/stzh-figure.d.ts

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

package/dist/components/stzh-figure.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
+
+const stzhFigureCss = ".sc-stzh-figure-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-figure-h{display:none}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-figure-h .sc-stzh-figure-s>img,.sc-stzh-figure-h .sc-stzh-figure-s>video,.sc-stzh-figure-h .sc-stzh-figure-s>picture{width:100%;max-width:100%}.stzh-figure.sc-stzh-figure{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:-ms-flexbox;display:flex}.stzh-figure__caption.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));color:var(--stzh-base-color);margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-figure__caption.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-figure__caption.sc-stzh-figure:empty{display:none}.stzh-figure__copyright.sc-stzh-figure{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-figure__copyright.sc-stzh-figure:not(:empty){margin-left:var(--stzh-space-xxsmall)}";
+
+const StzhFigure$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Caption */
+    this.caption = "";
+    /** Copyright */
+    this.copyright = "";
+  }
+  render() {
+    const captionSlotUsed = hasSlot(this.element, 'caption');
+    const classes = {
+      "stzh-figure": true,
+      "stzh-figure--has-caption": captionSlotUsed
+    };
+    return (h(Host, null, h("figure", { class: classes }, h("div", { class: "stzh-figure__element" }, h("slot", null)), h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : h("slot", { name: "caption" }), h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : h("slot", { name: "copyright" }))))));
+  }
+  get element() { return this; }
+  static get style() { return stzhFigureCss; }
+}, [6, "stzh-figure", {
+    "caption": [1],
+    "copyright": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-figure"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-figure":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhFigure$1);
+      }
+      break;
+  } });
+}
+
+const StzhFigure = StzhFigure$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhFigure, defineCustomElement };

package/dist/components/stzh-flyingfocus.d.ts

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

package/dist/components/stzh-flyingfocus.js

@@ -0,0 +1,199 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as prefersReducedMotion } from './animation-utils.js';
+
+const stzhFlyingfocusCss = ".sc-stzh-flyingfocus-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-flyingfocus-h{display:none}.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus,.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus::before,.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-flyingfocus.sc-stzh-flyingfocus{border:0 solid currentColor;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;will-change:top, left, width, height;-webkit-box-sizing:content-box;box-sizing:content-box;pointer-events:none;overflow:hidden;z-index:9999999999}.stzh-flyingfocus--is-moving.sc-stzh-flyingfocus{-webkit-transition-property:opacity, left, top, width, height, border-width, border-radius;transition-property:opacity, left, top, width, height, border-width, border-radius;-webkit-transition-duration:0.2s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s;transition-duration:0.2s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s;-webkit-transition-timing-function:linear, ease, ease, ease, ease, ease, ease;transition-timing-function:linear, ease, ease, ease, ease, ease, ease}@media (prefers-reduced-motion: reduce){.stzh-flyingfocus--is-moving.sc-stzh-flyingfocus{-webkit-transition:none;transition:none}}.stzh-flyingfocus--is-enabled.stzh-flyingfocus--is-visible.sc-stzh-flyingfocus{opacity:1}.stzh-flyingfocus.sc-stzh-flyingfocus::after{content:\"\";background:currentColor;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}@media (prefers-reduced-motion: reduce){.stzh-flyingfocus.sc-stzh-flyingfocus::after{-webkit-transition:none;transition:none}}.stzh-flyingfocus--has-helper.sc-stzh-flyingfocus::after{-webkit-transition-duration:0.1s;transition-duration:0.1s;opacity:0.16}";
+
+const HELPER_FADE_TIME = 400;
+const MONITOR_INTERVAL = 250;
+const CLASS_FOCUS = "has-focus";
+const CLASS_TARGET_FOCUSED = "stzh-fylingfocus-focused";
+const CLASS_CONTAINER_ENABLED = "stzh-flyingfocus-enabled";
+const StzhFlyingfocus$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.style = {};
+    this.position = {};
+    this.enabled = false;
+    this.visible = false;
+    this.helper = false;
+    this.moving = false;
+    this.container = document.body;
+    this.previousTargetRect = null;
+    this.repositionElement = () => {
+      if (!this.target) {
+        return;
+      }
+      this.position = this.getFloaterPosition();
+    };
+    this.handleTransitionEnd = () => {
+      this.moving = false;
+    };
+    this.monitorElementPosition = () => {
+      if (!this.target || !this.previousTargetRect || this.moving) {
+        return;
+      }
+      const { left, top, width, height } = this.target.getBoundingClientRect();
+      const { left: leftPrev, top: topPrev, width: widthPrev, height: heightPrev } = this.previousTargetRect;
+      if (left === leftPrev && top === topPrev && width === widthPrev && height === heightPrev) {
+        return;
+      }
+      if (!prefersReducedMotion()) {
+        this.moving = true;
+      }
+      this.repositionElement();
+    };
+  }
+  handleKeydown(e) {
+    // Show animation only upon Tab or Arrow keys press.
+    if (e.keyCode !== 9 && !(e.keyCode > 36 && e.keyCode < 41)) {
+      return;
+    }
+    this.enableFloatingFocus();
+  }
+  handleMousedown() {
+    this.disableFloatingFocus();
+  }
+  handleFocus(e) {
+    let target = e.target;
+    if (!this.container) {
+      return;
+    }
+    if (target === this.element || !this.container.contains(target)) {
+      this.handleBlur();
+      return;
+    }
+    this.visible = true;
+    this.helper = true;
+    if (!prefersReducedMotion()) {
+      this.moving = true;
+    }
+    const focusTargetAttribute = target.getAttribute('focus-target');
+    if (focusTargetAttribute) {
+      target = document.querySelector(`#${focusTargetAttribute}`) || target;
+    }
+    this.target = target;
+    // make sure we can read the target style (even when refocussing the viewport)
+    this.target.classList.remove(CLASS_TARGET_FOCUSED);
+    this.target.classList.add(CLASS_FOCUS);
+    this.resolveTargetOutlineStyle();
+    this.repositionElement();
+    this.target.classList.add(CLASS_TARGET_FOCUSED);
+    clearTimeout(this.helperFadeTimeout);
+    this.helperFadeTimeout = setTimeout(() => this.helper = false, HELPER_FADE_TIME);
+  }
+  handleBlur() {
+    this.visible = false;
+    this.helper = false;
+    if (!prefersReducedMotion()) {
+      this.moving = false;
+    }
+    if (this.target) {
+      this.target.classList.remove(CLASS_TARGET_FOCUSED);
+      this.target.classList.remove(CLASS_FOCUS);
+    }
+  }
+  handleScrollResize() {
+    if (this.debounceScroll) {
+      window.cancelAnimationFrame(this.debounceScroll);
+    }
+    this.debounceScroll = requestAnimationFrame(this.repositionElement);
+  }
+  async reposition() {
+    this.repositionElement();
+  }
+  /**
+   * Get the border radius that the outline element should have:
+   * element border radius + outline width + outline offset
+   */
+  getOffsetBorderRadius(baseRadius, outlineOffset, outlineWidth) {
+    baseRadius = parseFloat(baseRadius);
+    outlineOffset = parseFloat(outlineOffset);
+    outlineWidth = parseFloat(outlineWidth);
+    if (baseRadius === 0) {
+      return '0px';
+    }
+    outlineOffset = Math.max(outlineOffset, 0);
+    return `${baseRadius + outlineWidth + outlineOffset}px`;
+  }
+  resolveTargetOutlineStyle() {
+    const targetStyle = window.getComputedStyle(this.target);
+    const outlineOffset = targetStyle.outlineOffset || null;
+    let outlineWidth = targetStyle.outlineWidth || null;
+    this.style = {
+      color: targetStyle.outlineColor,
+      borderStyle: targetStyle.outlineStyle,
+      borderWidth: outlineWidth,
+      borderBottomLeftRadius: this.getOffsetBorderRadius(targetStyle.borderBottomLeftRadius, outlineOffset, outlineWidth),
+      borderBottomRightRadius: this.getOffsetBorderRadius(targetStyle.borderBottomRightRadius, outlineOffset, outlineWidth),
+      borderTopLeftRadius: this.getOffsetBorderRadius(targetStyle.borderTopLeftRadius, outlineOffset, outlineWidth),
+      borderTopRightRadius: this.getOffsetBorderRadius(targetStyle.borderTopRightRadius, outlineOffset, outlineWidth)
+    };
+  }
+  getFloaterPosition() {
+    const targetStyle = window.getComputedStyle(this.target);
+    const padding = parseFloat(targetStyle.outlineOffset || '0px');
+    const rect = this.target.getBoundingClientRect();
+    this.previousTargetRect = rect;
+    const width = rect.width + padding * 2;
+    const height = rect.height + padding * 2;
+    const left = window.scrollX + rect.left - padding + width / 2;
+    const top = window.scrollY + rect.top - padding + height / 2;
+    return {
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+  }
+  enableFloatingFocus() {
+    this.container.classList.add(CLASS_CONTAINER_ENABLED);
+    this.enabled = true;
+    clearInterval(this.monitorElementPositionInterval);
+    this.monitorElementPositionInterval = setInterval(this.monitorElementPosition, MONITOR_INTERVAL);
+  }
+  disableFloatingFocus() {
+    this.container.classList.remove(CLASS_CONTAINER_ENABLED);
+    this.enabled = false;
+    clearInterval(this.monitorElementPositionInterval);
+  }
+  render() {
+    const classes = {
+      "stzh-flyingfocus": true,
+      "stzh-flyingfocus--is-enabled": this.enabled,
+      "stzh-flyingfocus--is-visible": this.visible,
+      "stzh-flyingfocus--is-moving": this.moving,
+      "stzh-flyingfocus--has-helper": this.helper
+    };
+    const style = Object.assign(Object.assign({}, this.style), this.position);
+    return (h(Host, null, h("div", { class: classes, style: style, onTransitionEnd: this.moving ? this.handleTransitionEnd : null })));
+  }
+  get element() { return this; }
+  static get style() { return stzhFlyingfocusCss; }
+}, [2, "stzh-flyingfocus", {
+    "style": [32],
+    "position": [32],
+    "enabled": [32],
+    "visible": [32],
+    "helper": [32],
+    "moving": [32],
+    "reposition": [64]
+  }, [[4, "keydown", "handleKeydown"], [5, "mousedown", "handleMousedown"], [6, "focus", "handleFocus"], [6, "blur", "handleBlur"], [7, "scroll", "handleScrollResize"], [11, "resize", "handleScrollResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-flyingfocus"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-flyingfocus":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhFlyingfocus$1);
+      }
+      break;
+  } });
+}
+
+const StzhFlyingfocus = StzhFlyingfocus$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhFlyingfocus, defineCustomElement };

package/dist/components/stzh-footer.d.ts

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

package/dist/components/stzh-footer.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { f as fetchTranslations } from './translation-utils.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils.js';
+import { d as defineCustomElement$4 } from './stzh-badge2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-link2.js';
+
+const stzhFooterCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-footer{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);background-color:var(--stzh-color-white);padding:var(--stzh-space-xlarge) 0}.stzh-footer[hidden]{display:none}.stzh-footer *,.stzh-footer *::before,.stzh-footer *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-footer stzh-link[slot=link],.stzh-footer stzh-link[slot=social-link],.stzh-footer stzh-link.stzh-footer__link{--color:var(--stzh-base-color);--text-decoration:none;--icon-wrapper-height:auto;--icon-size:var(--stzh-icon-size-large)}.stzh-footer stzh-link[slot=link] .stzh-link,.stzh-footer stzh-link[slot=social-link] .stzh-link,.stzh-footer stzh-link.stzh-footer__link .stzh-link{font-size:inherit}.stzh-footer stzh-link[slot=social-link]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-footer stzh-link[slot=social-link]{margin-bottom:0;margin-right:var(--stzh-space-large)}}.stzh-footer stzh-link[slot=link]:not(:last-child){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 800px){.stzh-footer stzh-link[slot=link]:not(:last-child){margin-bottom:0;margin-right:var(--stzh-space-large)}}.stzh-footer__wrapper{margin:0 1.25rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 600px){.stzh-footer__wrapper{margin:0 2rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{margin:0 2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__wrapper{margin:0 5.5rem}}@media screen and (min-width: 1440px){.stzh-footer__wrapper{margin:0 auto;width:78.75rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}}@media screen and (min-width: 1024px){.stzh-footer__links{margin-left:auto}}.stzh-footer__links,.stzh-footer__link-list,.stzh-footer slot-fb[name=link]:not([hidden]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 800px){.stzh-footer__links,.stzh-footer__link-list,.stzh-footer slot-fb[name=link]:not([hidden]){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-footer__copyright:not(:empty)+.stzh-footer__link-list:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 800px){.stzh-footer__copyright:not(:empty)+.stzh-footer__link-list:not(:empty){margin-top:0;margin-left:var(--stzh-space-large)}}";
+
+const StzhFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Footer variant */
+    this.variant = "default";
+    /** Main URL for shortlinks */
+    this.mainUrl = "https://stadt-zuerich.ch";
+    this.init = () => {
+      const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
+      const links = this.element.querySelectorAll('stzh-link[slot="link"]');
+      if (socialLink) {
+        setPropsIfNull(socialLink, {
+          icon: "social-media"
+        });
+      }
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  async componentWillLoad() {
+    if (typeof this.copyright === "undefined") {
+      const currentDate = new Date();
+      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;
+    }
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'footer');
+    }
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const linkSlotUsed = hasSlot(this.element, 'link');
+    const socialLinkSlotUsed = hasSlot(this.element, 'social-link');
+    const classes = {
+      "stzh-footer": true,
+      "stzh-footer--has-links": linkSlotUsed,
+      "stzh-footer--has-social-link": socialLinkSlotUsed
+    };
+    return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("slot", { name: "social-link" }), h("div", { class: "stzh-footer__links" }, this.copyright &&
+      h("div", { class: "stzh-footer__copyright" }, this.copyright), h("div", { class: "stzh-footer__link-list", role: "list" }, h("slot", { name: "link" }, this.variant === "egov" &&
+      h(Fragment, null, h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), h("stzh-link", { class: "stzh-footer__link", slot: "link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
+  }
+  get element() { return this; }
+  static get style() { return stzhFooterCss; }
+}, [4, "stzh-footer", {
+    "copyright": [1],
+    "variant": [1],
+    "mainUrl": [1, "main-url"],
+    "localization": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-footer", "stzh-badge", "stzh-icon", "stzh-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhFooter$1);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhFooter = StzhFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhFooter, defineCustomElement };

package/dist/components/stzh-ghettobox.d.ts

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

package/dist/components/stzh-ghettobox.js

@@ -0,0 +1,6 @@
+import { S as StzhGhettobox$1, d as defineCustomElement$1 } from './stzh-ghettobox2.js';
+
+const StzhGhettobox = StzhGhettobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhGhettobox, defineCustomElement };

package/dist/components/stzh-ghettobox2.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { j as js_cookie } from './js.cookie.js';
+import { s as setPropsIfNull } from './utils.js';
+import { f as fetchTranslations } from './translation-utils.js';
+import { d as defineCustomElement$1 } from './stzh-icon2.js';
+
+const stzhGhettoboxCss = ".sc-stzh-ghettobox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-ghettobox-h{--stzh-color-primary:var(--stzh-base-invert-color);--stzh-color-primary-hover:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-richttext-blockquote-footer-color:var(--stzh-base-invert-color);--background-color:var(--stzh-color-error);--color:var(--stzh-base-invert-color);--close-color:var(--stzh-base-invert-color);--button-border-color:var(--stzh-base-invert-color);--button-hover-color:var(--background-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=secondary]{--border-color:var(--button-border-color);--hover-color:var(--button-hover-color);--background-color:transparent}.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large);padding-left:var(--stzh-space-xxlarge);padding-right:var(--stzh-space-xxlarge);position:relative;display:-ms-flexbox;display:flex;background-color:var(--background-color);color:var(--color);-webkit-box-shadow:var(--stzh-box-shadow-message);box-shadow:var(--stzh-box-shadow-message)}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 600px) and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{border-radius:0.1875rem}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-ghettobox__message.sc-stzh-ghettobox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing));margin:0;color:inherit}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox{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-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-medium)}}.stzh-ghettobox__close.sc-stzh-ghettobox{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{margin-left:var(--stzh-space-small)}}.stzh-ghettobox__close-button.sc-stzh-ghettobox{top:var(--stzh-space-medium);right:var(--stzh-space-medium);position:absolute;display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:var(--stzh-space-xsmall);margin:calc(var(--stzh-space-xsmall) * -1);border-radius:var(--stzh-button-border-radius);cursor:pointer}@media screen and (min-width: 1024px){.stzh-ghettobox__close-button.sc-stzh-ghettobox{top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-ghettobox__close-button.sc-stzh-ghettobox{top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox__close-button.sc-stzh-ghettobox{right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-ghettobox__close-button.sc-stzh-ghettobox{right:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox__close-button.sc-stzh-ghettobox{position:initial;top:initial;right:initial}}.stzh-ghettobox__close-icon.sc-stzh-ghettobox{--size:var(--stzh-icon-size-medium);color:var(--close-color)}";
+
+const KEY_PREFIX_CLOSE_TIME = "stzh-components-ghettobox-close-time";
+const StzhGhettobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    /** Overwrite hidden h1 title */
+    this.hiddenTitle = "";
+    /** Main title */
+    this.mainTitle = "";
+    /** Description */
+    this.description = "";
+    /**
+     * Name of cookie to compare its value with set `publishDate`
+     * to determine if ghettobox was already closed before by the user.
+     * If empty (""), no check is done and ghettobox
+     * will always be shown again after a refresh.
+     * Cookie name will be prefixed with `stzh-components-ghettobox-close-time`.
+     */
+    this.closeTimeKey = "global-alert";
+    /** Open state */
+    this.open = true;
+    this.onCloseButtonClick = () => {
+      this.hide();
+    };
+    this.init = () => {
+      const button = this.element.querySelector('stzh-button[slot="button"]');
+      if (button) {
+        setPropsIfNull(button, {
+          size: "small",
+          variant: "secondary",
+          effect: "cta",
+          icon: "arrow-right-long",
+          iconPosition: "right"
+        });
+      }
+    };
+  }
+  publishDateWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._publishDate = new Date(newValue);
+    }
+    else {
+      this._publishDate = newValue;
+    }
+    if (this.closeTimeKey && this._publishDate) {
+      const timeClosed = js_cookie.get(`${KEY_PREFIX_CLOSE_TIME}-${this.closeTimeKey}`);
+      if (timeClosed && Number(timeClosed) >= this._publishDate.getTime()) {
+        this.hide(false);
+      }
+    }
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-ghettobox"
+    });
+  }
+  async hide(setCloseKey = true) {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-ghettobox"
+    });
+    if (this.closeTimeKey && setCloseKey) {
+      js_cookie.set(`${KEY_PREFIX_CLOSE_TIME}-${this.closeTimeKey}`, Date.now().toString());
+    }
+  }
+  async componentWillLoad() {
+    this.publishDateWatcher(this.publishDate);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "ghettobox");
+    }
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-ghettobox": true
+    };
+    return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("h1", { class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { class: "stzh-ghettobox__message" }, h("h2", { class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-ghettobox__button" }, h("slot", { name: "button" }))), h("div", { class: "stzh-ghettobox__close" }, h("button", { class: "stzh-ghettobox__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-ghettobox__close-icon", name: "close" }))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "publishDate": ["publishDateWatcher"]
+  }; }
+  static get style() { return stzhGhettoboxCss; }
+}, [6, "stzh-ghettobox", {
+    "hiddenTitle": [1, "hidden-title"],
+    "mainTitle": [1, "main-title"],
+    "description": [1],
+    "publishDate": [1, "publish-date"],
+    "closeTimeKey": [1, "close-time-key"],
+    "localization": [16],
+    "open": [32],
+    "show": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-ghettobox", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-ghettobox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhGhettobox);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhGhettobox as S, defineCustomElement as d };

package/dist/components/stzh-header.d.ts

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