@oiz/stzh-components 2.11.0-beta1 → 2.11.0

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

@@ -1 +1 @@
-{"file":"stzh-footer.entry.js","mappings":"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","names":[],"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.entry.js","mappings":"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","names":[],"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}