@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/cjs/{stzh-details_2.cjs.entry.js → stzh-message.cjs.entry.js}

@@ -3,159 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
-const eventUtils = require('./event-utils-20e7b8b1.js');
-const animationUtils = require('./animation-utils-925ee0e0.js');
-require('./string-utils-5dd70320.js');
-
-const stzhDetailsCss = ".sc-stzh-details-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-details-h{display:none}.sc-stzh-details-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h .has-focus.sc-stzh-details{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details{outline-style:none !important}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details::-moz-focus-inner{border:0 !important}.sc-stzh-details-h{display:contents;--content-width:var(--stzh-details-content-width, 100%);--content-padding-left:0px;--content-padding-right:var(--stzh-details-content-padding-right, 0px);--content-background:transparent;--content-grid-column:var(--stzh-details-content-grid-column, inherit);--content-border-bottom:none;--content-padding-top:var(--stzh-details-content-padding-top, var(--stzh-space-medium));--content-padding-bottom:0}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{width:var(--content-width);overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}@media print{.stzh-details__content.sc-stzh-details{height:auto !important;overflow:visible !important;display:block !important}}.stzh-details__content-inner.sc-stzh-details{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-left:var(--content-padding-left);padding-right:var(--content-padding-right)}";
-
-const ANIMATION_SHOW = {
-  keyframes: [
-    { height: "0", opacity: "0" },
-    { height: "auto", opacity: "1" }
-  ],
-  options: { duration: 300, easing: "linear" }
-};
-const ANIMATION_HIDE = {
-  keyframes: [
-    { height: "auto", opacity: "1" },
-    { height: "0", opacity: "0" }
-  ],
-  options: { duration: 300, easing: "linear" }
-};
-let detailsCounter = 0;
-const StzhDetails = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
-    this.stzhOpened = index.createEvent(this, "stzhOpened", 7);
-    this.stzhClose = index.createEvent(this, "stzhClose", 7);
-    this.stzhClosed = index.createEvent(this, "stzhClosed", 7);
-    this.toggledByMethod = false;
-    this.onClickTrigger = () => {
-      this.toggle();
-    };
-    this.open = false;
-  }
-  async openWatcher(newValue) {
-    if (!this.triggerElement) {
-      return;
-    }
-    if (this.triggerElement.firstElementChild) {
-      const isStzh = utils.isStzhElement(this.triggerElement.firstElementChild);
-      this.triggerElement.firstElementChild
-        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", newValue ? "true" : "false");
-    }
-    if (newValue) {
-      if (this.toggledByMethod) {
-        this.stzhOpen.emit({
-          component: "stzh-accordion-item"
-        });
-      }
-      await animationUtils.stopAnimations(this.bodyElement);
-      this.bodyElement.hidden = false;
-      await animationUtils.animateTo(this.bodyElement, animationUtils.shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {
-        height: this.bodyElement.scrollHeight
-      }), ANIMATION_SHOW.options);
-      this.bodyElement.style.height = "auto";
-      this.bodyElement.style.overflow = "visible";
-      if (this.toggledByMethod) {
-        this.stzhOpened.emit({
-          component: "stzh-accordion-item"
-        });
-      }
-    }
-    else {
-      if (this.toggledByMethod) {
-        this.stzhClose.emit({
-          component: "stzh-accordion-item"
-        });
-      }
-      await animationUtils.stopAnimations(this.bodyElement);
-      this.bodyElement.style.overflow = "hidden";
-      await animationUtils.animateTo(this.bodyElement, animationUtils.shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {
-        height: this.bodyElement.scrollHeight
-      }), ANIMATION_HIDE.options);
-      this.bodyElement.hidden = true;
-      this.bodyElement.style.height = "0px";
-      if (this.toggledByMethod) {
-        this.stzhClosed.emit({
-          component: "stzh-accordion-item"
-        });
-      }
-    }
-    this.toggledByMethod = false;
-  }
-  /** Show accordion item content */
-  async show() {
-    if (this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = true;
-    return eventUtils.waitForEvent(this.element, "stzhOpened");
-  }
-  /** Hide accordion item content */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = false;
-    return eventUtils.waitForEvent(this.element, "stzhClosed");
-  }
-  async toggle() {
-    if (this.open) {
-      return await this.hide();
-    }
-    else {
-      return await this.show();
-    }
-  }
-  componentWillLoad() {
-    this.detailsId = `stzh-details-${detailsCounter++}`;
-  }
-  componentDidLoad() {
-    this.bodyElement.hidden = !this.open;
-    this.bodyElement.style.height = this.open ? "auto" : "0px";
-    this.bodyElement.style.overflow = this.open ? "visible" : "hidden";
-    if (this.triggerElement.firstElementChild) {
-      const isStzh = utils.isStzhElement(this.triggerElement.firstElementChild);
-      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.detailsId}-content`);
-      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
-    }
-  }
-  connectedCallback() {
-    var _a;
-    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    if (!trigger) {
-      const defaultSlot = Array.from(this.element.children)
-        .find(child => !child.hasAttribute("slot"));
-      trigger = defaultSlot;
-    }
-    if (trigger) {
-      trigger.addEventListener("click", this.onClickTrigger);
-    }
-  }
-  disconnectedCallback() {
-    if (this.triggerElement && this.triggerElement.firstElementChild) {
-      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-details": true,
-      "stzh-details--is-open": this.open
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-details__trigger" }, index.h("slot", null)), index.h("div", { id: `${this.detailsId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-details__content", "aria-labelledby": `${this.detailsId}-header` }, index.h("div", { class: "stzh-details__content-inner" }, index.h("slot", { name: "content" }))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"]
-  }; }
-};
-StzhDetails.style = stzhDetailsCss;
 
 const stzhMessageCss = ".sc-stzh-message-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-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{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);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";
 
@@ -207,7 +54,6 @@ const StzhMessage = class {
 };
 StzhMessage.style = stzhMessageCss;
 
-exports.stzh_details = StzhDetails;
 exports.stzh_message = StzhMessage;
 
-//# sourceMappingURL=stzh-details_2.cjs.entry.js.map
+//# sourceMappingURL=stzh-message.cjs.entry.js.map

package/dist/cjs/stzh-message.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-message.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,q3OAAq3O;;MC0B/3O,WAAW;;;;;IA2Cd,uBAAkB,GAAG;MAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAA;iBA3CuB,EAAE;uBAGI,EAAE;gBAG0C,MAAM;qBAGnD,KAAK;;gBAcT,IAAI;;EAG7B,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,gCAAgC,EAAE,IAAI,CAAC,SAAS;MAChD,CAAC,sBAAsB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACjD,CAAC;IAEF,QACEA,QAACC,UAAI,IAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtBD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,uBACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB;WACvC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAyB;WACpD,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,0BAA0B;WACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,gBAAgB,GAEnC,CACT,EACNA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAGA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACjD,EACNA,iBAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAGA,qBAAa,CAChD,EACNA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF,EAEL,CAAC,IAAI,CAAC,SAAS;MACdA,yBACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,WAAW,GACH,CAEb,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-monthyearpicker.cjs.entry.js

@@ -29,6 +29,7 @@ const StzhMonthyearpicker = class {
     this.yearOpen = false;
     this.months = undefined;
     this.years = undefined;
+    this.yearSortDirection = "asc";
     this.min = undefined;
     this.max = undefined;
     this.minYear = undefined;
@@ -137,10 +138,23 @@ const StzhMonthyearpicker = class {
     });
     this.dropdownMonthOptions = options;
   }
+  initializeYears() {
+    if (Array.isArray(this.years)) {
+      this._years = this.years.map(Number);
+    }
+    else if (typeof this.years === "string") {
+      // If "years" is a string, split in numbers
+      this._years = this.years
+        .split(",")
+        .map((year) => parseInt(year.trim(), 10))
+        .filter((year) => !isNaN(year));
+      // Delete non valid values
+    }
+  }
   updateYearOptions() {
     const options = [];
     let years = [];
-    if (this._years) {
+    if (this._years && this._years.length > 0) {
       years = this._years;
     }
     else {
@@ -170,8 +184,9 @@ const StzhMonthyearpicker = class {
         years.push(i);
       }
     }
+    years.sort((a, b) => (this.yearSortDirection === "asc" ? a - b : b - a));
     years.forEach((year) => {
-      options.push({ text: year, value: year });
+      options.push({ text: `${year}`, value: `${year}` });
     });
     this.dropdownYearOptions = options;
   }
@@ -179,6 +194,7 @@ const StzhMonthyearpicker = class {
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "monthyearpicker");
     }
+    this.initializeYears();
     this.monthsWatcher(this.months);
     this.yearsWatcher(this.years);
   }

package/dist/cjs/stzh-monthyearpicker.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-monthyearpicker.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n    align-self: flex-end;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent,\n} from \"../../index\";\n\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Initial open state of month dropdown */\n  @Prop() monthOpen: boolean = false;\n\n  /** Initial open state of year dropdown */\n  @Prop() yearOpen: boolean = false;\n\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true, reflect: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  @Listen(\"stzhChange\", {capture: true})\n  onDropdownChange(event: CustomEvent<StzhDropdownChangeEvent>) {\n    if (event.detail.component === \"stzh-dropdown\") {\n      if ((event.target as HTMLStzhDropdownElement).name === `${this.name}-year`) {\n        this.onYearsDropdownChange(event);\n      } else {\n        this.onMonthsDropdownChange(event);\n      }\n      // stop propagating dropdown change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n    }\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.focus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private updateYearOptions(): void {\n    const options = [];\n    let years = [];\n\n    if (this._years) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.forEach((year) => {\n      options.push({ text: year, value: year });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              open={this.monthOpen}\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              open={this.yearOpen}\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-monthyearpicker.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n    align-self: flex-end;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent,\n} from \"../../index\";\n\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Initial open state of month dropdown */\n  @Prop() monthOpen: boolean = false;\n\n  /** Initial open state of year dropdown */\n  @Prop() yearOpen: boolean = false;\n\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /** Sort direction */\n  @Prop({ mutable: true }) yearSortDirection: \"asc\" | \"desc\" = \"asc\";\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true, reflect: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  @Listen(\"stzhChange\", { capture: true })\n  onDropdownChange(event: CustomEvent<StzhDropdownChangeEvent>) {\n    if (event.detail.component === \"stzh-dropdown\") {\n      if ((event.target as HTMLStzhDropdownElement).name === `${this.name}-year`) {\n        this.onYearsDropdownChange(event);\n      } else {\n        this.onMonthsDropdownChange(event);\n      }\n      // stop propagating dropdown change event otherwise angular control value accessor won't work\n      event.stopPropagation();\n    }\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.focus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private initializeYears(): void {\n    if (Array.isArray(this.years)) {\n      this._years = this.years.map(Number); \n    } else if (typeof this.years === \"string\") {\n      // If \"years\" is a string, split in numbers\n      this._years = this.years\n        .split(\",\")\n        .map((year) => parseInt(year.trim(), 10))\n        .filter((year) => !isNaN(year)); \n        // Delete non valid values\n    }\n  }\n\n  private updateYearOptions(): void {\n    const options: StzhDropdownOption[] = [];\n    let years: number[] = [];\n\n    if (this._years && this._years.length > 0) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.sort((a, b) => (this.yearSortDirection === \"asc\" ? a - b : b - a));\n\n    years.forEach((year) => {\n      options.push({ text: `${year}`, value: `${year}` });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.initializeYears();\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input type=\"hidden\" name={this.name} value={this.value} />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              open={this.monthOpen}\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              open={this.yearOpen}\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              hideOptional={this.hideOptional}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-pagebottom.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pagebottom.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;MCqB3vH,cAAc;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACbA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,4BACEA,yBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClBA,iBAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACdA,iBAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnEA,wBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAENA,iBAAK,KAAK,EAAC,iCAAiC,IAC1CA,kBAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n  @media print {\n    display: none;\n  }\n\n  // ::slotted([slot=\"logo\"]) {\n  //   height: 38px;\n  // }\n}\n\n.stzh-pagebottom {\n  &__wrapper {\n    display: grid;\n  }\n\n  &__left {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    row-gap: space('xsmall');\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__share-title {\n    @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n  }\n\n  &__sticky-actions {\n    margin-left: auto;\n    margin-top: space('medium');\n\n    --stzh-button-white-space: nowrap;\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__print,\n  &__share-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__share-wrapper {\n    margin-left: -10px;\n\n    @include mq($from: medium) {\n      margin-left: 0;\n    }\n  }\n\n  &__print {\n    @include mq($from: small) {\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      @include spaceCurve('margin-right', 'big');\n    }\n  }\n\n  // &__logo {\n  //   @include mq($from: small) {\n  //     margin-left: auto;\n  //   }\n  // }\n\n  // &__logo-link {\n  //   &:not(:empty) {\n  //     display: block;\n  //     margin-top: space('xlarge');\n\n  //     @include mq($from: small) {\n  //       margin-top: 0;\n  //       margin-left: space('xlarge');\n  //     }\n  //   }\n  // }\n\n  &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n    grid-template-columns: auto;\n\n    @include mq($from: small) {\n      grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/**\n * @slot logo - Slot for a logo image\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /**  Translation strings. */\n  @Prop() localization: StzhPagebottomLocalizedText;\n\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop({ reflect: true }) shareDisabled: boolean;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to show print button */\n  @Prop({ reflect: true }) withPrint: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute of the print button element.\n   */\n  @Prop() printAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  // @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n    }\n  }\n\n  render() {\n    // const printUsed: boolean = hasSlot(this.element, \"print\");\n    // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagebottom__wrapper\">\n            <div class=\"stzh-pagebottom__left\">\n              {this.withPrint &&\n                <div class=\"stzh-pagebottom__print\">\n                  <stzh-print>\n                    <stzh-button\n                      label={this.localization.printLabel}\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      noPaddingRight={true}\n                      analyticsId={this.printAnalyticsId}\n                    ></stzh-button>\n                  </stzh-print>\n                </div>\n              }\n\n              {!this.shareDisabled &&\n                <div class=\"stzh-pagebottom__share-wrapper\">\n                  {this.shareTitle &&\n                    <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n                  }\n                  <stzh-share\n                    url={this.shareUrl}\n                    services={this.shareServices}\n                    mailSubject={this.shareMailSubject}\n                    mailBody={this.shareMailBody}\n                  ></stzh-share>\n                </div>\n              }\n            </div>\n\n            <div class=\"stzh-pagebottom__sticky-actions\">\n              <slot name=\"sticky-actions\"></slot>\n            </div>\n          </div>\n\n          {/* {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          } */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pagebottom.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;MCoB3vH,cAAc;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACbA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,4BACEA,yBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClBA,iBAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACdA,iBAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnEA,wBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAENA,iBAAK,KAAK,EAAC,iCAAiC,IAC1CA,kBAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n  @media print {\n    display: none;\n  }\n\n  // ::slotted([slot=\"logo\"]) {\n  //   height: 38px;\n  // }\n}\n\n.stzh-pagebottom {\n  &__wrapper {\n    display: grid;\n  }\n\n  &__left {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    row-gap: space('xsmall');\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__share-title {\n    @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n  }\n\n  &__sticky-actions {\n    margin-left: auto;\n    margin-top: space('medium');\n\n    --stzh-button-white-space: nowrap;\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__print,\n  &__share-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__share-wrapper {\n    margin-left: -10px;\n\n    @include mq($from: medium) {\n      margin-left: 0;\n    }\n  }\n\n  &__print {\n    @include mq($from: small) {\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      @include spaceCurve('margin-right', 'big');\n    }\n  }\n\n  // &__logo {\n  //   @include mq($from: small) {\n  //     margin-left: auto;\n  //   }\n  // }\n\n  // &__logo-link {\n  //   &:not(:empty) {\n  //     display: block;\n  //     margin-top: space('xlarge');\n\n  //     @include mq($from: small) {\n  //       margin-top: 0;\n  //       margin-left: space('xlarge');\n  //     }\n  //   }\n  // }\n\n  &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n    grid-template-columns: auto;\n\n    @include mq($from: small) {\n      grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /**  Translation strings. */\n  @Prop() localization: StzhPagebottomLocalizedText;\n\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop({ reflect: true }) shareDisabled: boolean;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to show print button */\n  @Prop({ reflect: true }) withPrint: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute of the print button element.\n   */\n  @Prop() printAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  // @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n    }\n  }\n\n  render() {\n    // const printUsed: boolean = hasSlot(this.element, \"print\");\n    // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagebottom__wrapper\">\n            <div class=\"stzh-pagebottom__left\">\n              {this.withPrint &&\n                <div class=\"stzh-pagebottom__print\">\n                  <stzh-print>\n                    <stzh-button\n                      label={this.localization.printLabel}\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      noPaddingRight={true}\n                      analyticsId={this.printAnalyticsId}\n                    ></stzh-button>\n                  </stzh-print>\n                </div>\n              }\n\n              {!this.shareDisabled &&\n                <div class=\"stzh-pagebottom__share-wrapper\">\n                  {this.shareTitle &&\n                    <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n                  }\n                  <stzh-share\n                    url={this.shareUrl}\n                    services={this.shareServices}\n                    mailSubject={this.shareMailSubject}\n                    mailBody={this.shareMailBody}\n                  ></stzh-share>\n                </div>\n              }\n            </div>\n\n            <div class=\"stzh-pagebottom__sticky-actions\">\n              <slot name=\"sticky-actions\"></slot>\n            </div>\n          </div>\n\n          {/* {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          } */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-pagetitle.cjs.entry.js

@@ -37,7 +37,8 @@ const StzhPagetitle = class {
       const tag = this.element.querySelector('stzh-tag[slot="tag"], [slot="tag"] stzh-tag');
       if (heading) {
         utils.setPropsIfNull(heading, {
-          curve: "hero"
+          curve: "hero",
+          level: "1"
         });
       }
       if (disturber) {

package/dist/cjs/stzh-pagetitle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberCloseEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-height\", hasDisturber ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-stuck-height\", isStuck ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  }\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\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    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const tagSlotUsed = hasSlot(this.element, 'tag');\n    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline &&\n                  <div class=\"stzh-pagetitle__dateline\">\n                    {this.dateline}\n                  </div>\n                }\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div\n                class=\"stzh-pagetitle__disturber\"\n                ref={(el) => (this.disturberElement = el as HTMLDivElement)}\n              >\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberCloseEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-height\", hasDisturber ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-stuck-height\", isStuck ? `${disturberHeight}px` : \"0px\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  }\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\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    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const tagSlotUsed = hasSlot(this.element, 'tag');\n    const readspeakerSlotUsed = hasSlot(this.element, 'readspeaker');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline &&\n                  <div class=\"stzh-pagetitle__dateline\">\n                    {this.dateline}\n                  </div>\n                }\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div\n                class=\"stzh-pagetitle__disturber\"\n                ref={(el) => (this.disturberElement = el as HTMLDivElement)}\n              >\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}