@oiz/stzh-components 0.0.0-pretest

package/dist/esm/stzh-accordion-item.entry.js

@@ -0,0 +1,177 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { w as waitForEvent } from './event-utils-68b64805.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesHeightAuto } from './animation-utils-27dcfc1e.js';
+
+const stzhAccordionItemCss = ".sc-stzh-accordion-item-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-accordion-item-h{display:none}.sc-stzh-accordion-item-h *.sc-stzh-accordion-item,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::before,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-item-h{--trigger-size:1.3125rem;--content-padding:var(--stzh-accordion-content-padding);--content-background:var(--stzh-accordion-content-background)}.stzh-accordion-item__heading.sc-stzh-accordion-item{margin:0}.stzh-accordion-item__button.sc-stzh-accordion-item{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);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:3.75rem;border:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-align:left;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 1024px){.stzh-accordion-item__button.sc-stzh-accordion-item{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-accordion-item__button.sc-stzh-accordion-item:hover,.stzh-accordion-item__button.sc-stzh-accordion-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-accordion-item__button-text.sc-stzh-accordion-item{-ms-flex-positive:1;flex-grow:1}.stzh-accordion-item__button-icon.sc-stzh-accordion-item{position:relative;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.0625rem;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s;-webkit-transform-origin:top left;transform-origin:top left;background-color:currentColor}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before{-webkit-transform:rotate(180deg) translate(-50%, -50%);transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(90deg) translate(-50%, -50%);transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__content.sc-stzh-accordion-item{overflow:hidden;background-color:var(--content-background)}.stzh-accordion-item__content-inner.sc-stzh-accordion-item{padding:var(--content-padding)}.stzh-accordion-item__subtitle.sc-stzh-accordion-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-accordion-item__heading.sc-stzh-accordion-item,.stzh-accordion-item__subtitle.sc-stzh-accordion-item{display:block}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{padding:var(--stzh-space-medium)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-base-color)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-color-white)}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(0) translate(-50%, -50%);transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-disabled.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{cursor:not-allowed;color:var(--stzh-color-grey61);border-color:var(--stzh-color-grey5);background-color:var(--stzh-color-grey5)}";
+
+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 accordionItemCounter = 0;
+const StzhAccordionItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = createEvent(this, "stzhOpened", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.stzhClosed = createEvent(this, "stzhClosed", 7);
+    /** Whether fold is open */
+    this.open = false;
+    /** Whether fold disabled */
+    this.disabled = false;
+    /** Heading title */
+    this.heading = "";
+    /** Subtitle */
+    this.subtitle = "";
+    /** Heading level */
+    this.headingLevel = "3";
+    this.toggledByMethod = false;
+    this.handleHeaderClick = () => {
+      this.toggle();
+    };
+    this.onButtonKeydown = (event) => {
+      let action = null;
+      if (event.key === "ArrowDown") {
+        action = "next";
+      }
+      else if (event.key === "ArrowUp") {
+        action = "prev";
+      }
+      else if (event.key === "Home") {
+        action = "first";
+      }
+      else if (event.key === "End") {
+        action = "last";
+      }
+      else if (event.key === "PageDown" && event.ctrlKey) {
+        action = "next";
+      }
+      else if (event.key === "PageUp" && event.ctrlKey) {
+        action = "prev";
+      }
+      if (action) {
+        event.preventDefault();
+        const accordion = this.element.closest("stzh-accordion");
+        accordion.setItemFocus(this.element, action);
+      }
+    };
+    this.onContentKeydown = (event) => {
+      if (!event.ctrlKey) {
+        return;
+      }
+      let action = null;
+      if (event.key === "PageDown") {
+        action = "next";
+      }
+      else if (event.key === "PageUp") {
+        action = "prev";
+      }
+      if (action) {
+        event.preventDefault();
+        const accordion = this.element.closest("stzh-accordion");
+        accordion.setItemFocus(this.element, action);
+      }
+    };
+  }
+  async openWatcher(newValue) {
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
+      this.bodyElement.style.height = 'auto';
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = 'auto';
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show accordion item content */
+  async show() {
+    if (this.open || this.disabled) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide accordion item content */
+  async hide() {
+    const accordion = this.element.closest("stzh-accordion");
+    if (!this.open || this.disabled || (accordion && !accordion.collapsible)) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  /** Toggle accordion item content */
+  async setFocus() {
+    this.buttonElement.focus();
+  }
+  componentWillLoad() {
+    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.bodyElement.style.height = this.open ? "auto" : "0";
+  }
+  render() {
+    const Heading = `h${this.headingLevel}`;
+    const classes = {
+      "stzh-accordion-item": true,
+      "stzh-accordion-item--has-subtitle": !!this.subtitle,
+      "stzh-accordion-item--is-open": this.open,
+      "stzh-accordion-item--is-disabled": this.disabled,
+    };
+    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading)), h("span", { class: "stzh-accordion-item__button-icon" }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"]
+  }; }
+};
+StzhAccordionItem.style = stzhAccordionItemCss;
+
+export { StzhAccordionItem as stzh_accordion_item };

package/dist/esm/stzh-accordion.entry.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+
+const stzhAccordionCss = ".sc-stzh-accordion-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-accordion-h{display:none}.sc-stzh-accordion-h *.sc-stzh-accordion,.sc-stzh-accordion-h *.sc-stzh-accordion::before,.sc-stzh-accordion-h *.sc-stzh-accordion::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-h .sc-stzh-accordion-s>stzh-accordion-item:not(:last-child){margin-bottom:var(--stzh-space-small)}";
+
+const StzhAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Whether folds are collapsible */
+    this.collapsible = true;
+    /** Whether multiple folds can be opened at once */
+    this.multiselectable = true;
+  }
+  openListener(event) {
+    const accordionItemOpened = event.target;
+    const accordionOpened = accordionItemOpened.closest("stzh-accordion");
+    if (this.multiselectable || accordionOpened !== this.element) {
+      return;
+    }
+    const items = Array.from(accordionOpened.querySelectorAll("stzh-accordion-item"));
+    items.forEach((item) => {
+      if (item !== accordionItemOpened) {
+        item.hide();
+      }
+    });
+  }
+  /** Set focus to accordion item */
+  async setItemFocus(accordionItem, action) {
+    const accordion = accordionItem.closest("stzh-accordion");
+    if (accordion !== this.element) {
+      return;
+    }
+    const items = Array.from(accordion.querySelectorAll("stzh-accordion-item"))
+      .filter((item) => !item.disabled);
+    const currentIndex = items.indexOf(accordionItem);
+    if ((action === 'prev' || action === 'next') && currentIndex === null) {
+      action = action === 'prev' ? 'last' : 'first';
+    }
+    if (action === 'prev' && currentIndex === 0) {
+      action = 'last';
+    }
+    if (action === 'next' && currentIndex === items.length - 1) {
+      action = 'first';
+    }
+    if (action === 'prev') {
+      items[currentIndex - 1].setFocus();
+    }
+    else if (action === 'next') {
+      items[currentIndex + 1].setFocus();
+    }
+    else if (action === 'last') {
+      items[items.length - 1].setFocus();
+    }
+    else if (action === 'first') {
+      items[0].setFocus();
+    }
+    else {
+      accordionItem.setFocus();
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-accordion": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+StzhAccordion.style = stzhAccordionCss;
+
+export { StzhAccordion as stzh_accordion };

package/dist/esm/stzh-actions.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { s as setPropsIfNull } from './utils-c5d68020.js';
+
+const stzhActionsCss = ".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--with-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";
+
+const StzhActions = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Variant determining what position the action buttons are */
+    this.variant = "form";
+    /** With border separator */
+    this.withBorder = false;
+    this.init = () => {
+      const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
+      const buttons = this.element.querySelectorAll('stzh-button');
+      secondaryButtons.forEach((button) => {
+        setPropsIfNull(button, {
+          variant: "secondary"
+        });
+      });
+      buttons.forEach((button) => {
+        button.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-actions": true,
+      "stzh-actions--with-border": this.withBorder,
+      [`stzh-actions--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "list" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" }))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhActions.style = stzhActionsCss;
+
+export { StzhActions as stzh_actions };

package/dist/esm/stzh-appnav.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { s as setPropsIfNull } from './utils-c5d68020.js';
+
+const stzhAppnavCss = ".sc-stzh-appnav-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-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration:none;--hover-text-decoration:none;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:normal;font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-base-color);text-decoration:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4)}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}";
+
+const StzhAppnav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** App title shown on tablet/desktop */
+    this.appTitle = "";
+    /** Status displayed next to app title (only displayed if `app-title` is defined) */
+    this.appStatus = "";
+    /** Link of app title (only used if `app-title` is defined) */
+    this.appHref = "";
+    this.init = () => {
+      const links = this.element.querySelectorAll("stzh-link");
+      links.forEach((link) => {
+        setPropsIfNull(link, {
+          size: "small",
+          variant: "secondary"
+        });
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "stzh-appnav" }, h("div", { class: "stzh-appnav__items", role: "list" }, h("slot", null)), this.appTitle &&
+      h("a", { class: "stzh-appnav__title", href: this.appHref }, this.appTitle, this.appStatus &&
+        h("span", { class: "stzh-appnav__status" }, this.appStatus)))));
+  }
+  get element() { return getElement(this); }
+};
+StzhAppnav.style = stzhAppnavCss;
+
+export { StzhAppnav as stzh_appnav };

package/dist/esm/stzh-appointments.entry.js

@@ -0,0 +1,267 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { f as fetchTranslations, t as tc } from './translation-utils-f5b09945.js';
+import { p as parseISODate, a as printISODate } from './date-utils-282e96fe.js';
+import { c as createGlobalAdapter } from './date-adapter-c0ee5963.js';
+
+const stzhAppointmentsCss = ".sc-stzh-appointments-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-appointments-h{display:none}.sc-stzh-appointments-h *.sc-stzh-appointments,.sc-stzh-appointments-h *.sc-stzh-appointments::before,.sc-stzh-appointments-h *.sc-stzh-appointments::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-appointments__wrapper.sc-stzh-appointments{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 1024px){.stzh-appointments__wrapper.sc-stzh-appointments{-ms-flex-direction:row;flex-direction:row}}.stzh-appointments__calendar-wrapper.sc-stzh-appointments{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 1024px){.stzh-appointments__calendar-wrapper.sc-stzh-appointments{margin-right:var(--stzh-space-large)}}.stzh-appointments__appointments-wrapper.sc-stzh-appointments{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--stzh-space-medium);height:var(--stzh-space-xxlarge)}}.stzh-appointments__calendar-title.sc-stzh-appointments,.stzh-appointments__appointments-title.sc-stzh-appointments{display:-ms-flexbox;display:flex}.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{margin-right:var(--stzh-space-xsmall);display:none}@media screen and (min-width: 1024px){.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{display:-ms-inline-flexbox;display:inline-flex}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments,.stzh-appointments__appointments-content.sc-stzh-appointments{background-color:var(--stzh-color-white);border:0.0625rem solid var(--stzh-color-grey13);border-radius:0.125rem}@media screen and (min-width: 1024px){.stzh-appointments__calendar-content.sc-stzh-appointments{display:none}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:none;padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:block}}.stzh-appointments__appointments-content.sc-stzh-appointments{padding:var(--stzh-space-xlarge);-ms-flex-positive:1;flex-grow:1}.stzh-appointments__more-link.sc-stzh-appointments{margin-top:var(--stzh-space-medium)}.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:var(--stzh-space-large)}@media screen and (min-width: 1024px){.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:0}}";
+
+const StzhAppointments = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    /** Sort by */
+    this.sortBy = "start";
+    /** Initial selected values */
+    this.appointments = [];
+    /* Selected appointment by value */
+    this.value = "";
+    /* Name of radiogroup form element */
+    this.name = "appointment";
+    /** Nr of items shown */
+    this.showItems = 5;
+    /** Nr of items shown when more link is clicked */
+    this.stepItems = 5;
+    /** Overwrite default calendar title */
+    this.calendarTitle = "";
+    /** Overwrite default appointments title */
+    this.appointmentsTitle = "";
+    this.showMoreLink = false;
+    this.moreItemsLeft = 0;
+    this.showCalendar = false;
+    this.showSort = false;
+    this.showSortStart = false;
+    this.showSortPlace = false;
+    this.showAppointmentsTitle = false;
+    this.allAppointsmentOnSameDay = true;
+    this.sortOptions = [];
+    this.isDateDisabled = (date) => {
+      const dateHasAppointment = !!this._appointments.find(appointment => {
+        return appointment.start.getFullYear() === date.getFullYear()
+          && appointment.start.getMonth() === date.getMonth()
+          && appointment.start.getDate() === date.getDate();
+      });
+      return !dateHasAppointment;
+    };
+    this.onNextActiveDateClick = async () => {
+      if (this.nextDate) {
+        this.currentDate = this.nextDate;
+        const popover = await this.datepickerElement.getPopover();
+        if (popover) {
+          popover.hide();
+        }
+      }
+    };
+    this.onMoreClick = () => {
+      this.showItems = this.stepItems + this.showItems;
+      // return focus to radiogroup
+      const radio = this.inputElement.querySelector('stzh-radio');
+      radio.setFocus();
+    };
+    this.onDropdownChange = async (event) => {
+      const target = event.target;
+      const sortBy = await target.getValue();
+      if (sortBy) {
+        this.sortBy = sortBy;
+      }
+    };
+    this.onDatepickerChange = (event) => {
+      if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {
+        return;
+      }
+      this.currentDate = event.detail.valueAsDate;
+      // reset number of items that should be shown
+      this.showItems = this.stepItems;
+    };
+    this.onRadioChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-appointments",
+        value: this.value
+      });
+    };
+  }
+  currentDateWatcher(newValue) {
+    if (!newValue) {
+      this._currentDate = this.dateByValue || this.earliestDate;
+      if (!this.dateByValue) {
+        this.setValueToFirstAppointmentOfCurrentDate();
+      }
+    }
+    else if (typeof newValue === "string") {
+      this._currentDate = parseISODate(newValue);
+      this.setValueToFirstAppointmentOfCurrentDate();
+    }
+    else {
+      this._currentDate = newValue;
+      this.setValueToFirstAppointmentOfCurrentDate();
+    }
+  }
+  sortByWatcher() {
+    this.setValueToFirstAppointmentOfCurrentDate();
+  }
+  valueWatcher() {
+    this.updateDateByValue();
+    // update current date if user has not choosen one
+    this.currentDateWatcher(this.currentDate);
+  }
+  appointmentsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._appointments = JSON.parse(newValue);
+    }
+    else {
+      this._appointments = newValue;
+    }
+    // convert start and end field to date
+    this._appointments.forEach(appointment => {
+      appointment.start = new Date(appointment.start);
+      appointment.end = new Date(appointment.end);
+    });
+    if (this._appointments.length > 0) {
+      // sort with start field and find earliest and latest date
+      this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);
+      this.earliestDate = this._appointments[0].start;
+      this.latestDate = this._appointments[this._appointments.length - 1].start;
+      this.updateDateByValue();
+    }
+    // determine whether all appointments are from the same day
+    if (this._appointments.length > 1) {
+      const firstDate = this._appointments[0].start;
+      this.allAppointsmentOnSameDay = this._appointments
+        .map(appointment => appointment.start)
+        .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
+        === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);
+    }
+    // update flags
+    this.showCalendar = !this.allAppointsmentOnSameDay;
+    this.showAppointmentsTitle = this._appointments.length > 1;
+    // update current date if user has not choosen one
+    this.currentDateWatcher(this.currentDate);
+  }
+  updateDateByValue() {
+    this.dateByValue = this.value
+      && this._appointments
+        .find(appointment => appointment.value === this.value)
+        .start;
+  }
+  getCurrentDateAppointments() {
+    let indexOfLastCurrentDayDate = 0;
+    // filter to current date appointments that can be shown
+    const appointmentsCurrentDate = this._appointments
+      .filter((appointment, index) => {
+      const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()
+        && appointment.start.getMonth() === this._currentDate.getMonth()
+        && appointment.start.getDate() === this._currentDate.getDate();
+      if (dateIsInCurrentDay) {
+        indexOfLastCurrentDayDate = index;
+      }
+      return dateIsInCurrentDay;
+    });
+    // find next day with dates or set to null
+    if (this._appointments[indexOfLastCurrentDayDate + 1]) {
+      this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;
+    }
+    else {
+      this.nextDate = null;
+    }
+    // sort
+    appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);
+    return appointmentsCurrentDate;
+  }
+  setValueToFirstAppointmentOfCurrentDate() {
+    // choose the first available appointment from current date
+    const appointments = this.getCurrentDateAppointments()
+      .filter(appointment => !appointment.disabled);
+    if (appointments.length > 0) {
+      this.value = appointments[0].value;
+      this.stzhChange.emit({
+        component: "stzh-appointments",
+        value: this.value
+      });
+    }
+  }
+  async componentWillLoad() {
+    this.appointmentsWatcher(this.appointments);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'appointments');
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  componentWillRender() {
+    const appointments = this.getCurrentDateAppointments();
+    // slice to max that should be visible
+    this.appointmentsShown = appointments.slice(0, this.showItems);
+    // set flags
+    this.showMoreLink = this.showItems < appointments.length;
+    this.moreItemsLeft = appointments.length - this.showItems;
+    // don't show time sort when only one time in the current day
+    this.showSortStart = appointments
+      .map(appointment => {
+      return this.dateAdapter.format(appointment.start, "time");
+    }).filter((item, pos, self) => {
+      return self.indexOf(item) == pos;
+    }).length > 1;
+    // don't show place sort when only one place in the current day
+    this.showSortPlace = appointments
+      .map(appointment => {
+      return appointment.place;
+    }).filter((item, pos, self) => {
+      return self.indexOf(item) == pos;
+    }).length > 1;
+    this.sortOptions = [];
+    if (this.showSortStart) {
+      this.sortOptions.push({
+        text: this.localization.sortByTime,
+        value: "start"
+      });
+    }
+    if (this.showSortPlace) {
+      this.sortOptions.push({
+        text: this.localization.sortByPlace,
+        value: "place"
+      });
+    }
+    this.showSort = this.appointmentsShown.length > 1;
+    // determine sort (force alternative sorting if it makes sense)
+    this._sortBy =
+      (this.showSortStart && !this.showSortPlace && "start")
+        || (!this.showSortStart && this.showSortPlace && "place")
+        || this.sortBy;
+  }
+  componentDidRender() {
+    // set datepickers values to current date
+    if (this.datepickerElement) {
+      this.datepickerElement.setDate(this._currentDate);
+    }
+    if (this.datepickerElementMedium) {
+      this.datepickerElementMedium.setDate(this._currentDate);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-appointments": true,
+      "stzh-appointments--has-calendar": this.showCalendar,
+      "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
+      "stzh-appointments--has-sort": this.showSort
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
+      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("stzh-text", { font: "heavy" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
+        h("stzh-link", { slot: "action", onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments))))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
+      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("stzh-text", { font: "heavy" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
+        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "milli" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start), ",\u00A0"), this.dateAdapter.format(appointment.start, "time"), h("span", { innerHTML: this.localization.$formats.timeRange }), this.dateAdapter.format(appointment.end, "time"), h("span", { innerHTML: this.localization.$formats.timePostfix })), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
+      h("stzh-link", { class: "stzh-appointments__more-link", onClick: this.onMoreClick }, h("stzh-text", { size: "milli" }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
+        ? this.stepItems
+        : this.moreItemsLeft)))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "currentDate": ["currentDateWatcher"],
+    "sortBy": ["sortByWatcher"],
+    "value": ["valueWatcher"],
+    "appointments": ["appointmentsWatcher"]
+  }; }
+};
+StzhAppointments.style = stzhAppointmentsCss;
+
+export { StzhAppointments as stzh_appointments };