@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/components/stzh-footer.js

@@ -4,22 +4,38 @@ 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:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media print{stzh-footer{display:none}}.stzh-footer{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-footer .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.stzh-footer .stzh-fylingfocus-focused{outline-style:none !important}.stzh-footer .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-footer [slot=logo],.stzh-footer [slot=logo] img{display:block;height:2.375rem}.stzh-footer [slot=info]{margin:0}.stzh-footer stzh-link[slot=info],.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-line:none;--icon-wrapper-height:auto;--icon-size:var(--stzh-icon-size-large)}.stzh-footer stzh-link[slot=info] .stzh-link,.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=info]:not(:last-child){margin-bottom:var(--stzh-space-small)}.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-left:1.25rem;margin-right: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-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__wrapper{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.stzh-footer__wrapper{margin-left:auto;margin-right: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}}.stzh-footer__logo:empty,.stzh-footer__info:empty,.stzh-footer__social-link:empty,.stzh-footer__links:empty{display:none}.stzh-footer__logo:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-footer__logo:not(:empty){margin-bottom:0}}.stzh-footer__info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-footer__info:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-footer__info:not(:empty){margin-bottom:0}}@media screen and (min-width: 1024px){.stzh-footer__logo,.stzh-footer__social-link{margin-right:auto}}@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)}}@media screen and (min-width: 1024px){.stzh-footer--has-logo .stzh-footer__wrapper,.stzh-footer--has-info .stzh-footer__wrapper{-ms-flex-align:start;align-items:flex-start}}.stzh-footer--has-border{border-top:0.0625rem solid var(--stzh-base-border-color)}";
+const stzhFooterCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media print{stzh-footer{display:none}}.stzh-footer{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-footer .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.stzh-footer .stzh-fylingfocus-focused{outline-style:none !important}.stzh-footer .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-footer [slot=logo],.stzh-footer [slot=logo] img{display:block;height:2.375rem}.stzh-footer [slot=info]{margin:0}.stzh-footer stzh-link[slot=info],.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-line:none;--icon-wrapper-height:auto}.stzh-footer stzh-link[slot=social-link]{--icon-size:var(--stzh-icon-size-large);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=info]:not(:last-child){margin-bottom:var(--stzh-space-small)}.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-left:1.25rem;margin-right: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-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__wrapper{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.stzh-footer__wrapper{margin-left:auto;margin-right: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}}.stzh-footer__logo:empty,.stzh-footer__info:empty,.stzh-footer__social-link:empty,.stzh-footer__links:empty{display:none}.stzh-footer__logo:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-footer__logo:not(:empty){margin-bottom:0}}.stzh-footer__info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-footer__info:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-footer__info:not(:empty){margin-bottom:0}}@media screen and (min-width: 1024px){.stzh-footer__logo,.stzh-footer__social-link{margin-right:auto}}@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)}}@media screen and (min-width: 1024px){.stzh-footer--has-logo .stzh-footer__wrapper,.stzh-footer--has-info .stzh-footer__wrapper{-ms-flex-align:start;align-items:flex-start}}.stzh-footer--has-border{border-top:0.0625rem solid var(--stzh-base-border-color)}";
 
 const StzhFooter$1 = /*@__PURE__*/ proxyCustomElement(class StzhFooter extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.init = () => {
-      const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
-      const links = this.element.querySelectorAll('stzh-link[slot="link"]');
+      const socialLink = this.element.querySelector('stzh-link[slot="social-link"], [slot="social-link"] stzh-link');
+      const links = this.element.querySelectorAll('stzh-link[slot="link"], [slot="link"] stzh-link');
+      const infoTexts = this.element.querySelectorAll('stzh-text[slot="info"], [slot="info"] stzh-text');
+      const infoLinks = this.element.querySelectorAll('stzh-link[slot="info"], [slot="info"] stzh-link');
       if (socialLink) {
         setPropsIfNull(socialLink, {
-          icon: "social-media"
+          icon: "social-media",
+          size: "inherit"
         });
       }
       links.forEach((link) => {
         link.setAttribute("role", "listitem");
+        setPropsIfNull(link, {
+          size: "inherit"
+        });
+      });
+      infoLinks.forEach((link) => {
+        setPropsIfNull(link, {
+          size: "inherit"
+        });
+      });
+      infoTexts.forEach((link) => {
+        setPropsIfNull(link, {
+          curve: "none"
+        });
       });
     };
     this.localization = undefined;
@@ -65,7 +81,7 @@ const StzhFooter$1 = /*@__PURE__*/ proxyCustomElement(class StzhFooter extends H
     };
     return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("div", { class: "stzh-footer__social-link" }, h("slot", { name: "social-link" })), h("div", { class: "stzh-footer__logo" }, h("slot", { name: "logo" })), h("div", { class: "stzh-footer__info" }, h("slot", { name: "info" })), 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)))))))));
+      h(Fragment, null, h("stzh-link", { slot: "link", size: "inherit", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), h("stzh-link", { slot: "link", size: "inherit", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), h("stzh-link", { slot: "link", size: "inherit", class: "stzh-footer__link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
   }
   get element() { return this; }
   static get style() { return stzhFooterCss; }

package/dist/components/stzh-footer.js.map

@@ -1 +1 @@
-{"file":"stzh-footer.js","mappings":"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","names":["StzhFooter"],"sources":["src/components/stzh-footer/stzh-footer.scss?tag=stzh-footer","src/components/stzh-footer/stzh-footer.tsx"],"sourcesContent":["stzh-footer {\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-footer {\n  @include host;\n  @include fontSize('pico');\n  background-color: $colorWhite;\n  padding: space('xlarge') 0;\n\n  [slot=\"logo\"],\n  [slot=\"logo\"] img {\n    display: block;\n    height: 38px;\n  }\n\n  [slot=\"info\"] {\n    margin: 0;\n  }\n\n  stzh-link[slot=\"info\"],\n  stzh-link[slot=\"link\"],\n  stzh-link[slot=\"social-link\"],\n  stzh-link#{&}__link {\n    --color: #{$baseColor};\n    --text-decoration-line: none;\n    --icon-wrapper-height: auto;\n    --icon-size: #{iconSize('large')};\n\n    .stzh-link {\n      font-size: inherit;\n    }\n  }\n\n  stzh-link[slot=\"social-link\"] {\n    margin-bottom: space('xlarge');\n\n    @include mq($from: medium) {\n      margin-bottom: 0;\n      margin-right: space('large');\n    }\n  }\n\n  stzh-link[slot=\"info\"] {\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  stzh-link[slot=\"link\"]{\n    &:not(:last-child) {\n      margin-bottom: space('small');\n\n      @include mq($from: smallheader) {\n        margin-bottom: 0;\n        margin-right: space('large');\n      }\n    }\n  }\n\n  &__wrapper {\n    @include container;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n    }\n  }\n\n  &__logo,\n  &__info,\n  &__social-link,\n  &__links {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__logo {\n    &:not(:empty) {\n      margin-bottom: space('medium');\n\n      @include mq($from: medium) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    &:not(:empty) {\n      margin-bottom: space('xlarge');\n\n      @include mq($from: medium) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__logo,\n  &__social-link {\n    @include mq($from: medium) {\n      margin-right: auto;\n    }\n  }\n\n  &__links {\n    @include mq($from: medium) {\n      margin-left: auto;\n    }\n  }\n\n  &__links,\n  &__link-list,\n  slot-fb[name=\"link\"]:not([hidden]) {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n\n  &__copyright:not(:empty) + &__link-list:not(:empty) {\n    margin-top: space('small');\n\n    @include mq($from: smallheader) {\n      margin-top: 0;\n      margin-left: space('large');\n    }\n  }\n\n  /* Logo or info filled variant */\n\n  &--has-logo &__wrapper,\n  &--has-info &__wrapper{\n    @include mq($from: medium) {\n      align-items: flex-start;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    border-top: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n} from \"@stencil/core\";\n\nimport { StzhFooterLocalizedText } from './stzh-footer.localization';\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content\n * @slot social-link - Slot for social `stzh-link`\n * @slot logo - Slot for logo `img`\n * @slot info - Slot for info content\n * @slot link - Slot for `stzh-link` elements\n */\n@Component({\n  tag: \"stzh-footer\",\n  styleUrl: \"stzh-footer.scss\"\n})\nexport class StzhFooter {\n  /** Translation strings */\n  @Prop() localization: StzhFooterLocalizedText;\n\n  /** Copyright text (will show default copyright string if undefined) */\n  @Prop() copyright: string;\n\n  /** Footer variant */\n  @Prop() variant: \"default\" | \"egov\" = \"default\";\n\n  /** Main URL for shortlinks */\n  @Prop() mainUrl: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to display separation border */\n  @Prop() withBorder: boolean = false;\n\n  @Element() element: HTMLStzhFooterElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const socialLink = this.element.querySelector('stzh-link[slot=\"social-link\"]');\n    const links = this.element.querySelectorAll('stzh-link[slot=\"link\"]');\n\n    if (socialLink) {\n      setPropsIfNull(socialLink, {\n        icon: \"social-media\"\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement);\n    }\n\n    links.forEach((link) => {\n      link.setAttribute(\"role\", \"listitem\");\n    });\n  }\n\n  async componentWillLoad() {\n    if (typeof this.copyright === \"undefined\") {\n      const currentDate = new Date();\n      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'footer');\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const logoSlotUsed = hasSlot(this.element, \"logo\");\n    const infoSlotUsed = hasSlot(this.element, \"info\");\n    const linkSlotUsed = hasSlot(this.element, \"link\");\n    const socialLinkSlotUsed = hasSlot(this.element, \"social-link\");\n\n    const classes = {\n      \"stzh-footer\": true,\n      \"stzh-footer--has-border\": this.withBorder,\n      \"stzh-footer--has-logo\": logoSlotUsed,\n      \"stzh-footer--has-info\": infoSlotUsed,\n      \"stzh-footer--has-links\": linkSlotUsed,\n      \"stzh-footer--has-social-link\": socialLinkSlotUsed\n    };\n\n    return (\n      <Host>\n        <footer class={classes}>\n          <div class=\"stzh-footer__wrapper\">\n            <div class=\"stzh-footer__social-link\">\n              <slot name=\"social-link\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__info\">\n              <slot name=\"info\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__links\">\n              {this.copyright &&\n                <div class=\"stzh-footer__copyright\">\n                  {this.copyright}\n                </div>\n              }\n              <div class=\"stzh-footer__link-list\" role=\"list\">\n                <slot name=\"link\">\n                  {this.variant === \"egov\" &&\n                    <Fragment>\n                      <stzh-link\n                        slot=\"link\"\n                        target=\"_blank\"\n                        class=\"stzh-footer__link\"\n                        href={`${this.mainUrl}/${this.localization.legalNoticeUrl}`}\n                      >\n                        {this.localization.legalNoticeText}\n                      </stzh-link>\n                      <stzh-link\n                        slot=\"link\"\n                        target=\"_blank\"\n                        class=\"stzh-footer__link\"\n                        href={`${this.mainUrl}/${this.localization.imprintUrl}`}\n                      >\n                        {this.localization.imprintText}\n                      </stzh-link>\n                      <stzh-link\n                        class=\"stzh-footer__link\"\n                        slot=\"link\"\n                        target=\"_blank\"\n                        href={`${this.mainUrl}/${this.localization.accessibilityUrl}`}\n                      >\n                        {this.localization.accessibilityText}\n                      </stzh-link>\n                    </Fragment>\n                  }\n                </slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-footer.js","mappings":"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","names":["StzhFooter"],"sources":["src/components/stzh-footer/stzh-footer.scss?tag=stzh-footer","src/components/stzh-footer/stzh-footer.tsx"],"sourcesContent":["stzh-footer {\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-footer {\n  @include host;\n  @include fontSize('pico');\n  background-color: $colorWhite;\n  padding: space('xlarge') 0;\n\n  [slot=\"logo\"],\n  [slot=\"logo\"] img {\n    display: block;\n    height: 38px;\n  }\n\n  [slot=\"info\"] {\n    margin: 0;\n  }\n\n  stzh-link[slot=\"info\"],\n  stzh-link[slot=\"link\"],\n  stzh-link[slot=\"social-link\"],\n  stzh-link#{&}__link {\n    --color: #{$baseColor};\n    --text-decoration-line: none;\n    --icon-wrapper-height: auto;\n  }\n\n  stzh-link[slot=\"social-link\"] {\n    --icon-size: #{iconSize('large')};\n\n    margin-bottom: space('xlarge');\n\n    @include mq($from: medium) {\n      margin-bottom: 0;\n      margin-right: space('large');\n    }\n  }\n\n  stzh-link[slot=\"info\"] {\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  stzh-link[slot=\"link\"]{\n    &:not(:last-child) {\n      margin-bottom: space('small');\n\n      @include mq($from: smallheader) {\n        margin-bottom: 0;\n        margin-right: space('large');\n      }\n    }\n  }\n\n  &__wrapper {\n    @include container;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n    }\n  }\n\n  &__logo,\n  &__info,\n  &__social-link,\n  &__links {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__logo {\n    &:not(:empty) {\n      margin-bottom: space('medium');\n\n      @include mq($from: medium) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    &:not(:empty) {\n      margin-bottom: space('xlarge');\n\n      @include mq($from: medium) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__logo,\n  &__social-link {\n    @include mq($from: medium) {\n      margin-right: auto;\n    }\n  }\n\n  &__links {\n    @include mq($from: medium) {\n      margin-left: auto;\n    }\n  }\n\n  &__links,\n  &__link-list,\n  slot-fb[name=\"link\"]:not([hidden]) {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n\n  &__copyright:not(:empty) + &__link-list:not(:empty) {\n    margin-top: space('small');\n\n    @include mq($from: smallheader) {\n      margin-top: 0;\n      margin-left: space('large');\n    }\n  }\n\n  /* Logo or info filled variant */\n\n  &--has-logo &__wrapper,\n  &--has-info &__wrapper{\n    @include mq($from: medium) {\n      align-items: flex-start;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    border-top: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n} from \"@stencil/core\";\n\nimport { StzhFooterLocalizedText } from './stzh-footer.localization';\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content\n * @slot social-link - Slot for social `stzh-link`\n * @slot logo - Slot for logo `img`\n * @slot info - Slot for info content `stzh-link` or `stzh-text` element\n * @slot link - Slot for `stzh-link` elements\n */\n@Component({\n  tag: \"stzh-footer\",\n  styleUrl: \"stzh-footer.scss\"\n})\nexport class StzhFooter {\n  /** Translation strings */\n  @Prop() localization: StzhFooterLocalizedText;\n\n  /** Copyright text (will show default copyright string if undefined) */\n  @Prop() copyright: string;\n\n  /** Footer variant */\n  @Prop() variant: \"default\" | \"egov\" = \"default\";\n\n  /** Main URL for shortlinks */\n  @Prop() mainUrl: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to display separation border */\n  @Prop() withBorder: boolean = false;\n\n  @Element() element: HTMLStzhFooterElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const socialLink = this.element.querySelector('stzh-link[slot=\"social-link\"], [slot=\"social-link\"] stzh-link');\n    const links = this.element.querySelectorAll('stzh-link[slot=\"link\"], [slot=\"link\"] stzh-link');\n    const infoTexts = this.element.querySelectorAll('stzh-text[slot=\"info\"], [slot=\"info\"] stzh-text');\n    const infoLinks = this.element.querySelectorAll('stzh-link[slot=\"info\"], [slot=\"info\"] stzh-link');\n\n    if (socialLink) {\n      setPropsIfNull(socialLink, {\n        icon: \"social-media\",\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    }\n\n    links.forEach((link) => {\n      link.setAttribute(\"role\", \"listitem\");\n\n      setPropsIfNull(link, {\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    });\n\n    infoLinks.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"inherit\"\n      } as HTMLStzhLinkElement);\n    });\n\n    infoTexts.forEach((link) => {\n      setPropsIfNull(link, {\n        curve: \"none\"\n      } as HTMLStzhTextElement);\n    });\n  }\n\n  async componentWillLoad() {\n    if (typeof this.copyright === \"undefined\") {\n      const currentDate = new Date();\n      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'footer');\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const logoSlotUsed = hasSlot(this.element, \"logo\");\n    const infoSlotUsed = hasSlot(this.element, \"info\");\n    const linkSlotUsed = hasSlot(this.element, \"link\");\n    const socialLinkSlotUsed = hasSlot(this.element, \"social-link\");\n\n    const classes = {\n      \"stzh-footer\": true,\n      \"stzh-footer--has-border\": this.withBorder,\n      \"stzh-footer--has-logo\": logoSlotUsed,\n      \"stzh-footer--has-info\": infoSlotUsed,\n      \"stzh-footer--has-links\": linkSlotUsed,\n      \"stzh-footer--has-social-link\": socialLinkSlotUsed\n    };\n\n    return (\n      <Host>\n        <footer class={classes}>\n          <div class=\"stzh-footer__wrapper\">\n            <div class=\"stzh-footer__social-link\">\n              <slot name=\"social-link\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__info\">\n              <slot name=\"info\"></slot>\n            </div>\n\n            <div class=\"stzh-footer__links\">\n              {this.copyright &&\n                <div class=\"stzh-footer__copyright\">\n                  {this.copyright}\n                </div>\n              }\n              <div class=\"stzh-footer__link-list\" role=\"list\">\n                <slot name=\"link\">\n                  {this.variant === \"egov\" &&\n                    <Fragment>\n                      <stzh-link\n                        slot=\"link\"\n                        size=\"inherit\"\n                        target=\"_blank\"\n                        class=\"stzh-footer__link\"\n                        href={`${this.mainUrl}/${this.localization.legalNoticeUrl}`}\n                      >\n                        {this.localization.legalNoticeText}\n                      </stzh-link>\n                      <stzh-link\n                        slot=\"link\"\n                        size=\"inherit\"\n                        target=\"_blank\"\n                        class=\"stzh-footer__link\"\n                        href={`${this.mainUrl}/${this.localization.imprintUrl}`}\n                      >\n                        {this.localization.imprintText}\n                      </stzh-link>\n                      <stzh-link\n                        slot=\"link\"\n                        size=\"inherit\"\n                        class=\"stzh-footer__link\"\n                        target=\"_blank\"\n                        href={`${this.mainUrl}/${this.localization.accessibilityUrl}`}\n                      >\n                        {this.localization.accessibilityText}\n                      </stzh-link>\n                    </Fragment>\n                  }\n                </slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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