@oiz/stzh-components 4.9.0-beta3 → 4.9.0-beta4

package/dist/components/p-B06iivO6.js

@@ -1,152 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-import { d as abbreviateText, e as getMeta } from './p-CN5apKPb.js';
-import { d as defineCustomElement$5 } from './p-BaC_gScF.js';
-import { d as defineCustomElement$4 } from './p-ka1rmhv9.js';
-import { d as defineCustomElement$3 } from './p-B8VeEjIy.js';
-import { d as defineCustomElement$2 } from './p-BxhXhWgp.js';
-import { d as defineCustomElement$1 } from './p-BVrrMSYA.js';
-
-const stzhShareCss = () => `.sc-stzh-share-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-share-h,[stzh-hidden].sc-stzh-share-h{display:none}.sc-stzh-share-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::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-share-h .has-focus.sc-stzh-share{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share{outline-style:none !important}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share::-moz-focus-inner{border:0 !important}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-xxsmall)}`;
-
-// 280 - URL (always 24) = 256
-const MAX_TWEET_LENGTH = 256;
-const StzhShare = /*@__PURE__*/ proxyCustomElement(class StzhShare extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /** URL of current site (uses full URL by default) */
-        this.url = window.location.href;
-        /**
-         * Array of enabled share buttons.
-         * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`
-         */
-        this.services = ["mail", "facebook", "twitter", "linkedin", "xing"];
-        this._services = [];
-        this.openPopup = (url, event) => {
-            event.preventDefault();
-            window.open(url, "_blank", "width=600,height=460");
-        };
-    }
-    servicesWatcher(newValue) {
-        if (typeof newValue === "string") {
-            this._services = JSON.parse(newValue);
-        }
-        else {
-            this._services = newValue;
-        }
-    }
-    async componentWillLoad() {
-        this.servicesWatcher(this.services);
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "share");
-        }
-    }
-    render() {
-        var _a;
-        const classes = {
-            "stzh-share": true,
-        };
-        const shareUrl = encodeURIComponent(this.url);
-        const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);
-        const mailBody = encodeURIComponent((_a = (this.mailBody || this.localization.mailBody)) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
-        const title = encodeURIComponent(document.title);
-        const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));
-        const description = encodeURIComponent(getMeta("description"));
-        const serviceData = {
-            mail: {
-                popup: false,
-                blank: false,
-                url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
-                text: this.localization.shareMail,
-                icon: "mail",
-            },
-            facebook: {
-                popup: true,
-                blank: true,
-                url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
-                text: this.localization.shareFacebook,
-                icon: "facebook",
-            },
-            twitter: {
-                popup: true,
-                blank: true,
-                url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,
-                text: this.localization.shareTwitter,
-                icon: "twitter",
-            },
-            linkedin: {
-                popup: true,
-                blank: true,
-                url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
-                text: this.localization.shareLinkedin,
-                icon: "linkedin",
-            },
-            xing: {
-                popup: true,
-                blank: true,
-                url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
-                text: this.localization.shareXing,
-                icon: "xing",
-            },
-        };
-        return (h(Host, { key: 'ba8bc5d8f6a453874af6ca90b82fa7cb2da8cd80' }, h("div", { key: '83b128f037a1ab39ea3148a8ea2f7595be1c2bc9', class: classes }, h("ul", { key: '527de85326a806872ddb555fe44d5a212867f8b4', class: "stzh-share__list" }, this._services.map(service => (h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "services": ["servicesWatcher"]
-    }; }
-    static get style() { return stzhShareCss(); }
-}, [258, "stzh-share", {
-        "localization": [16],
-        "url": [1],
-        "mailSubject": [1, "mail-subject"],
-        "mailBody": [1, "mail-body"],
-        "services": [1]
-    }, undefined, {
-        "services": ["servicesWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-share", "stzh-badge", "stzh-button", "stzh-icon", "stzh-text", "stzh-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-share":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhShare);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "stzh-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-text":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhShare as S, defineCustomElement as d };
-//# sourceMappingURL=p-B06iivO6.js.map
-
-//# sourceMappingURL=p-B06iivO6.js.map

package/dist/components/p-B06iivO6.js.map

@@ -1 +0,0 @@
-{"file":"p-B06iivO6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space(\"xxsmall\");\n    }\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch } from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\";\nimport { getMeta } from \"../../utils/utils\";\nimport { abbreviateText } from \"../../utils/string-utils\";\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true,\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  };\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true,\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url),\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      mail: {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\",\n      },\n      facebook: {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\",\n      },\n      twitter: {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\",\n      },\n      linkedin: {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\",\n      },\n      xing: {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\",\n      },\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map(service => (\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip content={serviceData[service].text} size=\"small\">\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-B1xdvkSy.js

@@ -1,61 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-
-const stzhSpaceCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--space:var(--stzh-space-default);--around:0;display:flex;color:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit}:host ::slotted(*){max-width:100%;padding:calc(var(--space) / 2 * var(--around));margin:calc(var(--space) / 2 * (1 - var(--around)))}:host ::slotted(stzh-show){--show-display:block}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){align-self:stretch;flex-grow:1}:host(:empty){--around:1;width:var(--space);height:var(--space)}:host([around]:not([around=false])){--around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--space:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){:host([curve=tiny]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--space:var(--stzh-space-small)}}:host([curve=small]){--space:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){:host([curve=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([curve=small]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--space:var(--stzh-space-xlarge)}}:host([curve=intermediary]){--space:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([curve=intermediary]){--space:var(--stzh-space-large)}}:host([curve=regular]){--space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=regular]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=regular]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=regular]){--space:var(--stzh-space-xxlarge)}}:host([curve=medium]){--space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=medium]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=medium]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){:host([curve=large]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([curve=big]){--space:var(--stzh-space-xbig)}}:host([curve=huge]){--space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=huge]){--space:var(--stzh-space-huge)}}:host([curve=section-inner]){--space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=section-inner]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=section-inner]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=section-inner]){--space:var(--stzh-space-xxxlarge)}}:host([curve=background-section-inner]){--space:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=background-section-outer]){--space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=background-section-outer]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=background-section-outer]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-outer]){--space:var(--stzh-space-xxlarge)}}:host([size=xxxsmall]){--space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--space:var(--stzh-space-xsmall)}:host([size=small]){--space:var(--stzh-space-small)}:host([size=medium]){--space:var(--stzh-space-medium)}:host([size=large]){--space:var(--stzh-space-large)}:host([size=xlarge]){--space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}:host([size=big]){--space:var(--stzh-space-big)}:host([size=xbig]){--space:var(--stzh-space-xbig)}:host([size=huge]){--space:var(--stzh-space-huge)}:host([size=xhuge]){--space:var(--stzh-space-xhuge)}:host([size=none]){--space:var(--stzh-space-none)}:host([size=default]){--space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 900px){:host([size-medium=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){:host([size-medium=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([size-medium=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host([size-medium=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([size-medium=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([size-medium=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 900px){:host([size-medium=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 900px){:host([size-medium=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 900px){:host([size-medium=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 900px){:host([size-medium=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1600px){:host([size-ultra=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){:host([size-ultra=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1600px){:host([size-ultra=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1600px){:host([size-ultra=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1600px){:host([size-ultra=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1600px){:host([size-ultra=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1600px){:host([size-ultra=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1600px){:host([size-ultra=default]){--space:var(--stzh-space-default)}}.stzh-space{flex-grow:1;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:calc(var(--space) / -2 * var(--around));margin:calc(var(--space) / -2 * (1 - var(--around)))}.stzh-space--is-around{padding:calc(var(--space) / 2 * var(--around));margin:calc(var(--space) / 2 * (1 - var(--around)))}.stzh-space{}.stzh-space--justify-center{justify-content:center}.stzh-space--justify-end{justify-content:flex-end}.stzh-space--justify-between{justify-content:space-between}.stzh-space--justify-around{justify-content:space-around}.stzh-space--justify-evenly{justify-content:space-evenly}.stzh-space{}.stzh-space--items-end{align-items:flex-end}.stzh-space--items-center{align-items:center}.stzh-space--items-baseline{align-items:baseline}.stzh-space--items-stretch{align-items:stretch}`;
-
-const StzhSpace = /*@__PURE__*/ proxyCustomElement(class StzhSpace extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */
-        this.curve = "none";
-        /** Alignment */
-        this.justify = "start";
-        /** Control how cells items are positioned along a container's cross axis */
-        this.items = "start";
-        /** Apply spacing to slotted elements */
-        this.around = false;
-        /** Add border */
-        this.border = "none";
-    }
-    render() {
-        return (h(Host, { key: '0127d359c7ace541aae74f5395a44f4a88d324d9' }, h("div", { key: '9dd25b5e4f694b81aa4bfb47fca7dd5347b9a353', class: {
-                "stzh-space": true,
-                "stzh-space--is-around": this.around,
-                [`stzh-space--justify-${this.justify}`]: !!this.justify,
-                [`stzh-space--items-${this.items}`]: !!this.items,
-            } }, h("slot", { key: 'eb8dcf7931a28c4f866458154c063c4a115c7ed5' }))));
-    }
-    static get style() { return stzhSpaceCss(); }
-}, [257, "stzh-space", {
-        "curve": [513],
-        "size": [513],
-        "sizeSmall": [513, "size-small"],
-        "sizeMedium": [513, "size-medium"],
-        "sizeLarge": [513, "size-large"],
-        "sizeUltra": [513, "size-ultra"],
-        "justify": [513],
-        "items": [513],
-        "around": [516],
-        "border": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-space"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-space":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhSpace);
-            }
-            break;
-    } });
-}
-
-export { StzhSpace as S, defineCustomElement as d };
-//# sourceMappingURL=p-B1xdvkSy.js.map
-
-//# sourceMappingURL=p-B1xdvkSy.js.map

package/dist/components/p-B1xdvkSy.js.map

@@ -1 +0,0 @@
-{"file":"p-B1xdvkSy.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ynaAAyna,CAAC;;MCYzoa,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAc5B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAM,CAAA,MAAA,GAA+E,MAAM;AAkBrH;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAClD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":["@use \"sass:map\";\n\n:host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map.get($value, \"size\");\n  $breakpointSizes: map.get($value, \"sizes\");\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-B6zrbO8N.js

@@ -1,63 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-
-const stzhRatioCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--background-color:var(--stzh-ratio-background-color);--ratio:16 /
-    9;--max-height:inherit;--overflow:inherit}:host ::slotted(*){position:absolute;width:100%;height:100%;inset:0;object-fit:cover}:host ::slotted(.stzh-card-searchresult__image-placeholder){display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--placeholder-image-color)}:host([fit=contain]) ::slotted(*){object-fit:contain}:host([portrait]:not([portrait=false])){--ratio:9 /
-    16}:host([ratio="16:9"]){--ratio:16 / 9}:host([ratio="16:9"][portrait]:not([portrait=false])){--ratio:9 / 16}:host([ratio="1:1"]){--ratio:1 / 1}:host([ratio="1:1"][portrait]:not([portrait=false])){--ratio:1 / 1}:host([ratio="21:9"]){--ratio:21 / 9}:host([ratio="21:9"][portrait]:not([portrait=false])){--ratio:9 / 21}:host([ratio="2:1"]){--ratio:2 / 1}:host([ratio="2:1"][portrait]:not([portrait=false])){--ratio:1 / 2}:host([ratio="3:2"]){--ratio:3 / 2}:host([ratio="3:2"][portrait]:not([portrait=false])){--ratio:2 / 3}:host([ratio="4:3"]){--ratio:4 / 3}:host([ratio="4:3"][portrait]:not([portrait=false])){--ratio:3 / 4}:host([ratio="5:4"]){--ratio:5 / 4}:host([ratio="5:4"][portrait]:not([portrait=false])){--ratio:4 / 5}@media screen and (min-width: 600px){:host([ratio-small="16:9"]){--ratio:16 / 9}}@media screen and (min-width: 600px){:host([ratio-small="16:9"][portrait]:not([portrait=false])){--ratio:9 / 16}}@media screen and (min-width: 600px){:host([ratio-small="1:1"]){--ratio:1 / 1}}@media screen and (min-width: 600px){:host([ratio-small="1:1"][portrait]:not([portrait=false])){--ratio:1 / 1}}@media screen and (min-width: 600px){:host([ratio-small="21:9"]){--ratio:21 / 9}}@media screen and (min-width: 600px){:host([ratio-small="21:9"][portrait]:not([portrait=false])){--ratio:9 / 21}}@media screen and (min-width: 600px){:host([ratio-small="2:1"]){--ratio:2 / 1}}@media screen and (min-width: 600px){:host([ratio-small="2:1"][portrait]:not([portrait=false])){--ratio:1 / 2}}@media screen and (min-width: 600px){:host([ratio-small="3:2"]){--ratio:3 / 2}}@media screen and (min-width: 600px){:host([ratio-small="3:2"][portrait]:not([portrait=false])){--ratio:2 / 3}}@media screen and (min-width: 600px){:host([ratio-small="4:3"]){--ratio:4 / 3}}@media screen and (min-width: 600px){:host([ratio-small="4:3"][portrait]:not([portrait=false])){--ratio:3 / 4}}@media screen and (min-width: 600px){:host([ratio-small="5:4"]){--ratio:5 / 4}}@media screen and (min-width: 600px){:host([ratio-small="5:4"][portrait]:not([portrait=false])){--ratio:4 / 5}}@media screen and (min-width: 900px){:host([ratio-medium="16:9"]){--ratio:16 / 9}}@media screen and (min-width: 900px){:host([ratio-medium="16:9"][portrait]:not([portrait=false])){--ratio:9 / 16}}@media screen and (min-width: 900px){:host([ratio-medium="1:1"]){--ratio:1 / 1}}@media screen and (min-width: 900px){:host([ratio-medium="1:1"][portrait]:not([portrait=false])){--ratio:1 / 1}}@media screen and (min-width: 900px){:host([ratio-medium="21:9"]){--ratio:21 / 9}}@media screen and (min-width: 900px){:host([ratio-medium="21:9"][portrait]:not([portrait=false])){--ratio:9 / 21}}@media screen and (min-width: 900px){:host([ratio-medium="2:1"]){--ratio:2 / 1}}@media screen and (min-width: 900px){:host([ratio-medium="2:1"][portrait]:not([portrait=false])){--ratio:1 / 2}}@media screen and (min-width: 900px){:host([ratio-medium="3:2"]){--ratio:3 / 2}}@media screen and (min-width: 900px){:host([ratio-medium="3:2"][portrait]:not([portrait=false])){--ratio:2 / 3}}@media screen and (min-width: 900px){:host([ratio-medium="4:3"]){--ratio:4 / 3}}@media screen and (min-width: 900px){:host([ratio-medium="4:3"][portrait]:not([portrait=false])){--ratio:3 / 4}}@media screen and (min-width: 900px){:host([ratio-medium="5:4"]){--ratio:5 / 4}}@media screen and (min-width: 900px){:host([ratio-medium="5:4"][portrait]:not([portrait=false])){--ratio:4 / 5}}@media screen and (min-width: 1260px){:host([ratio-large="16:9"]){--ratio:16 / 9}}@media screen and (min-width: 1260px){:host([ratio-large="16:9"][portrait]:not([portrait=false])){--ratio:9 / 16}}@media screen and (min-width: 1260px){:host([ratio-large="1:1"]){--ratio:1 / 1}}@media screen and (min-width: 1260px){:host([ratio-large="1:1"][portrait]:not([portrait=false])){--ratio:1 / 1}}@media screen and (min-width: 1260px){:host([ratio-large="21:9"]){--ratio:21 / 9}}@media screen and (min-width: 1260px){:host([ratio-large="21:9"][portrait]:not([portrait=false])){--ratio:9 / 21}}@media screen and (min-width: 1260px){:host([ratio-large="2:1"]){--ratio:2 / 1}}@media screen and (min-width: 1260px){:host([ratio-large="2:1"][portrait]:not([portrait=false])){--ratio:1 / 2}}@media screen and (min-width: 1260px){:host([ratio-large="3:2"]){--ratio:3 / 2}}@media screen and (min-width: 1260px){:host([ratio-large="3:2"][portrait]:not([portrait=false])){--ratio:2 / 3}}@media screen and (min-width: 1260px){:host([ratio-large="4:3"]){--ratio:4 / 3}}@media screen and (min-width: 1260px){:host([ratio-large="4:3"][portrait]:not([portrait=false])){--ratio:3 / 4}}@media screen and (min-width: 1260px){:host([ratio-large="5:4"]){--ratio:5 / 4}}@media screen and (min-width: 1260px){:host([ratio-large="5:4"][portrait]:not([portrait=false])){--ratio:4 / 5}}@media screen and (min-width: 1600px){:host([ratio-ultra="16:9"]){--ratio:16 / 9}}@media screen and (min-width: 1600px){:host([ratio-ultra="16:9"][portrait]:not([portrait=false])){--ratio:9 / 16}}@media screen and (min-width: 1600px){:host([ratio-ultra="1:1"]){--ratio:1 / 1}}@media screen and (min-width: 1600px){:host([ratio-ultra="1:1"][portrait]:not([portrait=false])){--ratio:1 / 1}}@media screen and (min-width: 1600px){:host([ratio-ultra="21:9"]){--ratio:21 / 9}}@media screen and (min-width: 1600px){:host([ratio-ultra="21:9"][portrait]:not([portrait=false])){--ratio:9 / 21}}@media screen and (min-width: 1600px){:host([ratio-ultra="2:1"]){--ratio:2 / 1}}@media screen and (min-width: 1600px){:host([ratio-ultra="2:1"][portrait]:not([portrait=false])){--ratio:1 / 2}}@media screen and (min-width: 1600px){:host([ratio-ultra="3:2"]){--ratio:3 / 2}}@media screen and (min-width: 1600px){:host([ratio-ultra="3:2"][portrait]:not([portrait=false])){--ratio:2 / 3}}@media screen and (min-width: 1600px){:host([ratio-ultra="4:3"]){--ratio:4 / 3}}@media screen and (min-width: 1600px){:host([ratio-ultra="4:3"][portrait]:not([portrait=false])){--ratio:3 / 4}}@media screen and (min-width: 1600px){:host([ratio-ultra="5:4"]){--ratio:5 / 4}}@media screen and (min-width: 1600px){:host([ratio-ultra="5:4"][portrait]:not([portrait=false])){--ratio:4 / 5}}.stzh-ratio{position:relative;width:100%;aspect-ratio:var(--stzh-ratio, var(--ratio));background:var(--background-color);max-height:var(--max-height);overflow:var(--overflow)}`;
-
-const StzhRatio = /*@__PURE__*/ proxyCustomElement(class StzhRatio extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Aspect ratio */
-        this.ratio = "16:9";
-        /** Aspect ratio above small breakpoint */
-        this.ratioSmall = "inherit";
-        /** Aspect ratio above medium breakpoint */
-        this.ratioMedium = "inherit";
-        /** Aspect ratio above large breakpoint */
-        this.ratioLarge = "inherit";
-        /** Aspect ratio above ultra breakpoint */
-        this.ratioUltra = "inherit";
-        /** Whether aspect ratio is in portrait mode */
-        this.portrait = false;
-        /** Fit mode */
-        this.fit = "cover";
-    }
-    render() {
-        const classes = {
-            "stzh-ratio": true,
-        };
-        return (h(Host, { key: '59dba18b85d09ea3e5fdad242e85055a6f50af54' }, h("div", { key: 'fc916e690a8076b27c25f148142a54c516cc511c', class: classes }, h("slot", { key: '68e15d52a884fbed1db71e883c9548b360727b35', name: "image" }), h("slot", { key: 'ee3202e10014a88968f6aac83b7d6740a87f5b42' }))));
-    }
-    get element() { return this; }
-    static get style() { return stzhRatioCss(); }
-}, [257, "stzh-ratio", {
-        "ratio": [513],
-        "ratioSmall": [513, "ratio-small"],
-        "ratioMedium": [513, "ratio-medium"],
-        "ratioLarge": [513, "ratio-large"],
-        "ratioUltra": [513, "ratio-ultra"],
-        "portrait": [516],
-        "fit": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-ratio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-ratio":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhRatio);
-            }
-            break;
-    } });
-}
-
-export { StzhRatio as S, defineCustomElement as d };
-//# sourceMappingURL=p-B6zrbO8N.js.map
-
-//# sourceMappingURL=p-B6zrbO8N.js.map

package/dist/components/p-B6zrbO8N.js.map

@@ -1 +0,0 @@
-{"file":"p-B6zrbO8N.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-B8VeEjIy.js

@@ -1,127 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-
-const stzhIconCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}`;
-
-let iconCounter = 0;
-// Shared cache for all instances to store fetched SVG icons
-const iconCache = new Map();
-const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Icon which should be displayed
-         * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
-         */
-        this.name = "";
-        /**
-         * Hidden icon title for screenreader
-         * (usually not needed when e.g. inside links or buttons that have text)
-         */
-        this.a11yTitle = "";
-        this.svgHtml = "";
-        this.iconDisplay = "none";
-    }
-    async nameWatcher(name) {
-        this.iconDisplay = "none";
-        if (name) {
-            if (iconCache.has(name)) {
-                this.svgHtml = await iconCache.get(name);
-                this.updateAccessibilityAttributes();
-                this.showIcon();
-            }
-            else {
-                const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)
-                    .then(response => {
-                    if (response.status === 200) {
-                        return response.text();
-                    }
-                    throw new Error("Failed to fetch icon");
-                })
-                    .then(svgString => {
-                    const parser = new DOMParser();
-                    const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
-                    const svgElement = svgDoc.documentElement;
-                    svgElement.classList.add("stzh-icon__svg");
-                    return svgElement.outerHTML;
-                });
-                iconCache.set(name, fetchSvgPromise);
-                this.svgHtml = await fetchSvgPromise;
-                this.updateAccessibilityAttributes();
-                this.showIcon();
-            }
-        }
-        else {
-            this.svgElement = null;
-            this.svgHtml = "";
-        }
-    }
-    a11yTitleWatcher(a11yTitle) {
-        if (!this.svgElement)
-            return;
-        this.svgElement.setAttribute("aria-hidden", a11yTitle ? "false" : "true");
-        this.svgElement.setAttribute("focusable", a11yTitle ? "true" : "false");
-        this.svgElement.setAttribute("aria-labelledby", a11yTitle ? `${this.iconId}-title` : null);
-        let title = this.svgElement.querySelector("title");
-        if (!title) {
-            title = document.createElement("title");
-            title.id = `${this.iconId}-title`;
-            this.svgElement.appendChild(title);
-        }
-        title.innerHTML = a11yTitle;
-        this.svgHtml = this.svgElement.outerHTML;
-    }
-    async componentWillLoad() {
-        this.iconId = `stzh-icon-${iconCounter++}`;
-        await this.nameWatcher(this.name);
-    }
-    updateAccessibilityAttributes() {
-        this.a11yTitleWatcher(this.a11yTitle);
-    }
-    showIcon() {
-        // for some obscure reason we need to delay showing the icon in safari,
-        // otherwise the icon doesn't show up randomly
-        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)
-        window.setTimeout(() => {
-            this.iconDisplay = "contents";
-        }, 0);
-    }
-    render() {
-        return (h(Host, { key: '48bec2666774f99ae81c11a48beb8138b9b107ac' }, h("div", { key: '65b8489b21a64236e6964fca027a2f7f3c963b88', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "name": ["nameWatcher"],
-        "a11yTitle": ["a11yTitleWatcher"]
-    }; }
-    static get style() { return stzhIconCss(); }
-}, [257, "stzh-icon", {
-        "name": [1],
-        "a11yTitle": [1, "a11y-title"],
-        "svgHtml": [32],
-        "iconDisplay": [32]
-    }, undefined, {
-        "name": ["nameWatcher"],
-        "a11yTitle": ["a11yTitleWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhIcon);
-            }
-            break;
-    } });
-}
-
-export { StzhIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-B8VeEjIy.js.map
-
-//# sourceMappingURL=p-B8VeEjIy.js.map

package/dist/components/p-B8VeEjIy.js.map

@@ -1 +0,0 @@
-{"file":"p-B8VeEjIy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}