@oiz/stzh-components 2.1.0-alpha → 2.1.0

package/dist/components/stzh-pagetitle-hero.js

@@ -0,0 +1,116 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as setPropsIfNull, h as hasSlot } from './utils.js';
+import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils.js';
+
+/**
+ * fitty v2.3.6 - Snugly resizes text to fit its parent container
+ * Copyright (c) 2022 Rik Schennink <rik@pqina.nl> (https://pqina.nl/)
+ */
+
+var e=function(e){if(e){var t=function(e){return [].slice.call(e)},n=0,i=1,r=2,o=3,a=[],l=null,u="requestAnimationFrame"in e?function(){e.cancelAnimationFrame(l),l=e.requestAnimationFrame((function(){return s(a.filter((function(e){return e.dirty&&e.active})))}));}:function(){},c=function(e){return function(){a.forEach((function(t){return t.dirty=e})),u();}},s=function(e){e.filter((function(e){return !e.styleComputed})).forEach((function(e){e.styleComputed=m(e);})),e.filter(y).forEach(v);var t=e.filter(p);t.forEach(d),t.forEach((function(e){v(e),f(e);})),t.forEach(S);},f=function(e){return e.dirty=n},d=function(e){e.availableWidth=e.element.parentNode.clientWidth,e.currentWidth=e.element.scrollWidth,e.previousFontSize=e.currentFontSize,e.currentFontSize=Math.min(Math.max(e.minSize,e.availableWidth/e.currentWidth*e.previousFontSize),e.maxSize),e.whiteSpace=e.multiLine&&e.currentFontSize===e.minSize?"normal":"nowrap";},p=function(e){return e.dirty!==r||e.dirty===r&&e.element.parentNode.clientWidth!==e.availableWidth},m=function(t){var n=e.getComputedStyle(t.element,null);return t.currentFontSize=parseFloat(n.getPropertyValue("font-size")),t.display=n.getPropertyValue("display"),t.whiteSpace=n.getPropertyValue("white-space"),!0},y=function(e){var t=!1;return !e.preStyleTestCompleted&&(/inline-/.test(e.display)||(t=!0,e.display="inline-block"),"nowrap"!==e.whiteSpace&&(t=!0,e.whiteSpace="nowrap"),e.preStyleTestCompleted=!0,t)},v=function(e){e.element.style.whiteSpace=e.whiteSpace,e.element.style.display=e.display,e.element.style.fontSize=e.currentFontSize+"px";},S=function(e){e.element.dispatchEvent(new CustomEvent("fit",{detail:{oldValue:e.previousFontSize,newValue:e.currentFontSize,scaleFactor:e.currentFontSize/e.previousFontSize}}));},h=function(e,t){return function(){e.dirty=t,e.active&&u();}},w=function(e){return function(){a=a.filter((function(t){return t.element!==e.element})),e.observeMutations&&e.observer.disconnect(),e.element.style.whiteSpace=e.originalStyle.whiteSpace,e.element.style.display=e.originalStyle.display,e.element.style.fontSize=e.originalStyle.fontSize;}},b=function(e){return function(){e.active||(e.active=!0,u());}},z=function(e){return function(){return e.active=!1}},F=function(e){e.observeMutations&&(e.observer=new MutationObserver(h(e,i)),e.observer.observe(e.element,e.observeMutations));},g={minSize:16,maxSize:512,multiLine:!0,observeMutations:"MutationObserver"in e&&{subtree:!0,childList:!0,characterData:!0}},W=null,E=function(){e.clearTimeout(W),W=e.setTimeout(c(r),x.observeWindowDelay);},M=["resize","orientationchange"];return Object.defineProperty(x,"observeWindow",{set:function(t){var n="".concat(t?"add":"remove","EventListener");M.forEach((function(t){e[n](t,E);}));}}),x.observeWindow=!0,x.observeWindowDelay=100,x.fitAll=c(o),x}function C(e,t){var n=Object.assign({},g,t),i=e.map((function(e){var t=Object.assign({},n,{element:e,active:!0});return function(e){e.originalStyle={whiteSpace:e.element.style.whiteSpace,display:e.element.style.display,fontSize:e.element.style.fontSize},F(e),e.newbie=!0,e.dirty=!0,a.push(e);}(t),{element:e,fit:h(t,o),unfreeze:b(t),freeze:z(t),unsubscribe:w(t)}}));return u(),i}function x(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return "string"==typeof e?C(t(document.querySelectorAll(e)),n):C([e],n)[0]}}("undefined"==typeof window?null:window);
+
+const stzhPagetitleHeroCss = ".sc-stzh-pagetitle-hero-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-hero-h{display:none}.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero,.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero::before,.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>img[slot=image],.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>[slot=image] img{display:block;position:absolute;width:100%;height:100%;top:0;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag][variant=filter]:not([disabled]){--color:var(--stzh-color-white);--border:0.0625rem solid var(--stzh-color-white);--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-white48);--icon-color:var(--stzh-color-white);--hover-color:var(--stzh-color-white);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-white16);--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-white16);--hover-counter-color:var(--stzh-color-white);--hover-icon-color:var(--stzh-color-white)}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag][variant=filter][active]:not([active=false]):not([disabled]){--border:0.0625rem solid transparent;--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag]:not(:last-child){margin-right:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero.sc-stzh-pagetitle-hero{padding-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle-hero__tags.sc-stzh-pagetitle-hero{list-style:none;padding:0;margin:0;display:-ms-flexbox;display:flex}.stzh-pagetitle-hero__tags.sc-stzh-pagetitle-hero:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{position:absolute;left:0;top:0}}@media screen and (max-width: 1023px){.stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero:not(:empty){margin:var(--stzh-space-xlarge) 0}}.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{--stzh-flyingfocus-color:var(--stzh-base-invert-color);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:1;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));padding:var(--stzh-space-xxxlarge) var(--stzh-space-xlarge);margin-top:calc(var(--stzh-space-xxxlarge) * -1)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-xxxxlarge) var(--stzh-space-xxlarge);margin-top:calc(var(--stzh-space-big) * -1)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-big)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{margin:var(--stzh-space-big) 0;width:50%;margin-left:-8.3333333333%}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-xbig)}}.stzh-pagetitle-hero__title.sc-stzh-pagetitle-hero{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-white);margin:0;font-size:1.875rem;line-height:1.107;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:normal;word-break:normal;word-break:break-word}@media screen and (min-width: 600px){.stzh-pagetitle-hero__title.sc-stzh-pagetitle-hero{font-size:3rem}}.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);margin-top:var(--stzh-space-xlarge);color:var(--stzh-color-white)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxxxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}@media screen and (min-width: 600px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:row;flex-direction:row}}.stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{position:relative;-ms-flex-negative:0;flex-shrink:0;background-color:var(--stzh-color-grey5);margin-left:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{width:58.3333333333%;margin-left:0;margin-right:0}}.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{position:relative;width:100%;height:0;padding-bottom:75%}@media screen and (min-width: 600px){.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{padding-bottom:56.25%}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{padding-bottom:75%}}.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin:0 auto;margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-huge);max-width:70%}}.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-back-link.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-back-link.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{margin-right:-8.3333333333%}}.stzh-pagetitle-hero--has-no-lead.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{display:none}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{display:none}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:column;flex-direction:column;margin-top:0}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{width:100%;margin:0}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge);position:static}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxxlarge)}}";
+
+const StzhPagetitleHero$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.init = () => {
+      const backLink = this.element.querySelector('stzh-link[slot="back-link"], [slot="back-link"] stzh-link');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const tags = this.element.querySelectorAll('stzh-chip[slot="tag"], [slot="tag"] stzh-chip');
+      if (backLink) {
+        setPropsIfNull(backLink, {
+          icon: "arrow-left-circle"
+        });
+      }
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      tags.forEach((tag) => {
+        setPropsIfNull(tag, {
+          role: "listitem"
+        });
+      });
+    };
+    this.reinitFitty = () => {
+      this.destroyFitty();
+      const isSmall = media("small").matches;
+      this.fitty = e(this.mainTitleElement, {
+        minSize: isSmall ? 48 : 32,
+        maxSize: isSmall ? 96 : 64
+      });
+    };
+    this.heading = "";
+    this.leadAuthor = "";
+    this.subtitle = "";
+  }
+  destroyFitty() {
+    if (this.fitty) {
+      this.fitty.unsubscribe();
+      this.fitty = null;
+    }
+  }
+  async componentWillUpdate() {
+    this.destroyFitty();
+  }
+  async componentDidRender() {
+    if (this.fitty) {
+      return;
+    }
+    this.reinitFitty();
+  }
+  connectedCallback() {
+    this.init();
+    addMediaChangeListener(this.reinitFitty);
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    removeMediaChangeListener(this.reinitFitty);
+    this.destroyFitty();
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const backLinkSlotUsed = hasSlot(this.element, "back-link");
+    const classes = {
+      "stzh-pagetitle-hero": true,
+      "stzh-pagetitle-hero--has-no-image": !imageSlotUsed,
+      "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
+      "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagetitle-hero__header" }, h("div", { class: "stzh-pagetitle-hero__back-link" }, h("slot", { name: "back-link" })), h("div", { class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { name: "image" })), h("div", { class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { name: "tag" })), h("div", { class: "stzh-pagetitle-hero__title-parent" }, h("h1", { ref: (el) => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title" }, this.heading)), this.subtitle &&
+      h("div", { class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { class: "stzh-pagetitle-hero__lead" }, h("slot", { name: "lead" }), h("div", { class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+  }
+  get element() { return this; }
+  static get style() { return stzhPagetitleHeroCss; }
+}, [6, "stzh-pagetitle-hero", {
+    "heading": [1],
+    "leadAuthor": [1, "lead-author"],
+    "subtitle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-pagetitle-hero"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-pagetitle-hero":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPagetitleHero$1);
+      }
+      break;
+  } });
+}
+
+const StzhPagetitleHero = StzhPagetitleHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhPagetitleHero, defineCustomElement };