@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

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

@@ -3,123 +3,123 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const mediaUtils = require('./media-utils-f1720906.js');
+const mediaUtils = require('./media-utils-8cfc8591.js');
 
 const stzhProgressbarCss = ".sc-stzh-progressbar-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-progressbar-h{display:none}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}";
 
-const StzhProgressbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
-    this.setCurrentSteps = () => {
-      if (mediaUtils.media("ultra").matches && this.stepsUltra) {
-        this.currentSteps = this.stepsUltra;
-      }
-      else if (mediaUtils.media("large").matches && this.stepsLarge) {
-        this.currentSteps = this.stepsLarge;
-      }
-      else if (mediaUtils.media("medium").matches && this.stepsMedium) {
-        this.currentSteps = this.stepsMedium;
-      }
-      else if (mediaUtils.media("small").matches && this.stepsSmall) {
-        this.currentSteps = this.stepsSmall;
-      }
-      else {
-        this.currentSteps = this.steps;
-      }
-      this.element.style.setProperty("--steps", this.currentSteps.toString());
-    };
-  }
-  dataWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._data = JSON.parse(newValue);
-    }
-    else {
-      this._data = newValue;
-    }
-    this.lastItemIndex = this._data.length - 1;
-    this.maxStepIndex = this.currentSteps - 1;
-    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;
-  }
-  getItemAttributes(itemIndex) {
-    const item = {};
-    item.step = itemIndex + 1;
-    item.first = itemIndex === 0;
-    item.last = itemIndex === this.lastItemIndex;
-    item.current = itemIndex === this.index;
-    item.passed = itemIndex < this.index;
-    // hide overflowings if more items than max steps in DOM
-    if (this._data.length > this.currentSteps) {
-      // add dots to last item if current index is below the last few items
-      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {
-        item.dotted = true;
-      }
-      if (this.index < 2) {
-        // hide overflowing items on the right
-        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;
-      }
-      else {
-        // add dots to first item if current item is third or above
-        if (itemIndex === 0) {
-          item.dotted = true;
-        }
-        let substract = this.index;
-        // if is within the last elements, calculate how much previous
-        // should be shown to stay on 5 visible elements
-        if (this.withinLastFewSteps) {
-          substract = this._data.length - this.maxStepIndex;
-        }
-        // hide overflowing items on left and right side
-        item.hide = itemIndex > 0 && itemIndex < substract
-          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;
-      }
-    }
-    return item;
-  }
-  componentWillLoad() {
-    this.dataWatcher(this.data);
-  }
-  connectedCallback() {
-    this.setCurrentSteps();
-    mediaUtils.addMediaChangeListener(this.setCurrentSteps);
-  }
-  disconnectedCallback() {
-    mediaUtils.removeMediaChangeListener(this.setCurrentSteps);
-  }
-  render() {
-    const classes = {
-      "stzh-progressbar": true,
-      [`stzh-progressbar--index-${this.index}`]: !!this.index
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index$1) => index.h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index$1), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "data": ["dataWatcher"]
-  }; }
-};
+const StzhProgressbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
+     *
+     * ```
+     * {
+     *   "label": "Step Label"
+     *   "icon": "clock"
+     * }
+     * ```
+     */
+    this.data = [];
+    /** Index of the item that be active */
+    this.index = 0;
+    /** Number of steps to show below small breakpoint */
+    this.steps = 5;
+    /** Number of steps to show above small breakpoint */
+    this.stepsSmall = 6;
+    /** Number of steps to show above medium breakpoint */
+    this.stepsMedium = 0;
+    /** Number of steps to show above large breakpoint */
+    this.stepsLarge = 0;
+    /** Number of steps to show above ultra breakpoint */
+    this.stepsUltra = 0;
+    this.setCurrentSteps = () => {
+      if (mediaUtils.media("ultra").matches && this.stepsUltra) {
+        this.currentSteps = this.stepsUltra;
+      }
+      else if (mediaUtils.media("large").matches && this.stepsLarge) {
+        this.currentSteps = this.stepsLarge;
+      }
+      else if (mediaUtils.media("medium").matches && this.stepsMedium) {
+        this.currentSteps = this.stepsMedium;
+      }
+      else if (mediaUtils.media("small").matches && this.stepsSmall) {
+        this.currentSteps = this.stepsSmall;
+      }
+      else {
+        this.currentSteps = this.steps;
+      }
+      this.element.style.setProperty("--steps", this.currentSteps.toString());
+    };
+  }
+  dataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    this.lastItemIndex = this._data.length - 1;
+    this.maxStepIndex = this.currentSteps - 1;
+    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;
+  }
+  getItemAttributes(itemIndex) {
+    const item = {};
+    item.step = itemIndex + 1;
+    item.first = itemIndex === 0;
+    item.last = itemIndex === this.lastItemIndex;
+    item.current = itemIndex === this.index;
+    item.passed = itemIndex < this.index;
+    // hide overflowings if more items than max steps in DOM
+    if (this._data.length > this.currentSteps) {
+      // add dots to last item if current index is below the last few items
+      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {
+        item.dotted = true;
+      }
+      if (this.index < 2) {
+        // hide overflowing items on the right
+        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;
+      }
+      else {
+        // add dots to first item if current item is third or above
+        if (itemIndex === 0) {
+          item.dotted = true;
+        }
+        let substract = this.index;
+        // if is within the last elements, calculate how much previous
+        // should be shown to stay on 5 visible elements
+        if (this.withinLastFewSteps) {
+          substract = this._data.length - this.maxStepIndex;
+        }
+        // hide overflowing items on left and right side
+        item.hide = itemIndex > 0 && itemIndex < substract
+          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;
+      }
+    }
+    return item;
+  }
+  componentWillLoad() {
+    this.dataWatcher(this.data);
+  }
+  connectedCallback() {
+    this.setCurrentSteps();
+    mediaUtils.addMediaChangeListener(this.setCurrentSteps);
+  }
+  disconnectedCallback() {
+    mediaUtils.removeMediaChangeListener(this.setCurrentSteps);
+  }
+  render() {
+    const classes = {
+      "stzh-progressbar": true,
+      [`stzh-progressbar--index-${this.index}`]: !!this.index
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index$1) => index.h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index$1), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "data": ["dataWatcher"]
+  }; }
+};
 StzhProgressbar.style = stzhProgressbarCss;
 
 exports.stzh_progressbar = StzhProgressbar;

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

@@ -3,56 +3,56 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-d327c19d.js');
 
 const stzhReadspeakerCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-readspeaker{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}.stzh-readspeaker[hidden]{display:none}.stzh-readspeaker *,.stzh-readspeaker *::before,.stzh-readspeaker *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-readspeaker .rsbtn_play{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-readspeaker .rsbtn_classic.rsexpanded .rsbtn_exp.rsimg{float:left;padding-bottom:0;-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover)}.rsbtn_classic.rsexpanded{position:absolute;max-width:100%;z-index:var(--stzh-z-index-sticky)}.rsbtn_classic.rsexpanded,.rsbtn_classic.rsexpanded *,.rsbtn_classic.rsexpanded *::after,.rsbtn_classic.rsexpanded *::before{-webkit-box-sizing:initial;box-sizing:initial}.rsbtn_classic.rsexpanded .rsbtn_playerarea{padding:0.625rem;border:none}.rsbtn_classic.rsexpanded .rsbtn_closer.rsimg{right:0.625rem;top:0.625rem}.rsbtn_classic.rsexpanded .rsbtn_settings .rsbtn_btnlabel.rsimg,.rsbtn_classic.rsexpanded .rsbtn_dl .rsbtn_btnlabel,.rsbtn_classic.rsexpanded .rsbtn_powered .rsbtn_btnlabel{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);height:auto}.rsbtn_classic.rsexpanded .rsbtn_bottomlinks{margin-top:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_topbar>*,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_stop,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_pause,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_volume,.rsbtn_classic.rsexpanded .rsbtn_closer,.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.375rem solid var(--stzh-color-grey13);border-radius:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon{border:0.3125rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.4375rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_topbar{margin-right:2.5rem}.rsbtn_classic.rspopup.rscompact{z-index:var(--stzh-z-index-sticky);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border:none;padding:0.625rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:1.25rem;height:1.25rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_left,.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_right{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.rsbtn_classic.rspopup.rscompact .rsbtn_exp .rsbtn_separator{height:0.0625rem}";
 
-const StzhReadspeaker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onLinkClick = () => {
-      this.readspeakerLink.click();
-    };
-    this.init = () => {
-      this.addClickEvents();
-      const links = this.element.querySelectorAll("stzh-link, stzh-button");
-      links.forEach((link) => {
-        link.addEventListener('click', this.onLinkClick);
-        utils.setPropsIfNull(link, {
-          icon: "volume-medium"
-        });
-      });
-    };
-  }
-  // Sometimes the library is loaded later, so we register
-  // the click events also when the page has loaded
-  addClickEvents() {
-    if (window.ReadSpeaker) {
-      window.ReadSpeaker.init();
-    }
-    if (window.rspkr && window.rspkr.ui) {
-      window.rspkr.ui.addClickEvents();
-    }
-  }
-  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-readspeaker": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null), index.h("div", { class: "rs_skip rsbtn_classic rs_preserve right" }, index.h("a", { "aria-hidden": "true", tabindex: "-1", rel: "nofollow", class: "rsbtn_play icon read", href: this.href, "data-rsevent-id": this.eventId, ref: (el) => (this.readspeakerLink = el) }, index.h("span", { class: "rsbtn_text" }, index.h("span", null, "readspeakerlink")))))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhReadspeaker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onLinkClick = () => {
+      this.readspeakerLink.click();
+    };
+    this.init = () => {
+      this.addClickEvents();
+      const links = this.element.querySelectorAll("stzh-link, stzh-button");
+      links.forEach((link) => {
+        link.addEventListener('click', this.onLinkClick);
+        utils.setPropsIfNull(link, {
+          icon: "volume-medium"
+        });
+      });
+    };
+  }
+  // Sometimes the library is loaded later, so we register
+  // the click events also when the page has loaded
+  addClickEvents() {
+    if (window.ReadSpeaker) {
+      window.ReadSpeaker.init();
+    }
+    if (window.rspkr && window.rspkr.ui) {
+      window.rspkr.ui.addClickEvents();
+    }
+  }
+  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-readspeaker": true
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null), index.h("div", { class: "rs_skip rsbtn_classic rs_preserve right" }, index.h("a", { "aria-hidden": "true", tabindex: "-1", rel: "nofollow", class: "rsbtn_play icon read", href: this.href, "data-rsevent-id": this.eventId, ref: (el) => (this.readspeakerLink = el) }, index.h("span", { class: "rsbtn_text" }, index.h("span", null, "readspeakerlink")))))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhReadspeaker.style = stzhReadspeakerCss;
 
 exports.stzh_readspeaker = StzhReadspeaker;

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

@@ -6,35 +6,35 @@ const index = require('./index-ac9bdc7f.js');
 
 const stzhRowCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{width:100%}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 1024px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}.stzh-row--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-row--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-row--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-row--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-row--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-row--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-row--items-center{-ms-flex-align:center;align-items:center}.stzh-row--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-row--items-stretch{-ms-flex-align:stretch;align-items:stretch}.stzh-row--content-end{-ms-flex-line-pack:end;align-content:flex-end}.stzh-row--content-center{-ms-flex-line-pack:center;align-content:center}.stzh-row--content-between{-ms-flex-line-pack:justify;align-content:space-between}.stzh-row--content-around{-ms-flex-line-pack:distribute;align-content:space-around}.stzh-row--content-evenly{-ms-flex-line-pack:space-evenly;align-content:space-evenly}";
 
-const StzhRow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Default span of each cell */
-    this.span = 12;
-    /** Default span of each cell above small breakpoint */
-    this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
-    this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
-    this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
-    this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
-    this.justify = "start";
-    /** Control how cells items are positioned along a container's cross axis */
-    this.items = "start";
-    /** Utilities for controlling how rows are positioned in multi-row flex containers. */
-    this.content = "start";
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: {
-        "stzh-row": true,
-        [`stzh-row--justify-${this.justify}`]: !!this.justify,
-        [`stzh-row--items-${this.items}`]: !!this.items,
-        [`stzh-row--content-${this.content}`]: !!this.content
-      } }, index.h("slot", null))));
-  }
-};
+const StzhRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Default span of each cell */
+    this.span = 12;
+    /** Default span of each cell above small breakpoint */
+    this.spanSmall = 0;
+    /** Default span of each cell above medium breakpoint */
+    this.spanMedium = 0;
+    /** Default span of each cell above large breakpoint */
+    this.spanLarge = 0;
+    /** Default span of each cell above ultra breakpoint */
+    this.spanUltra = 0;
+    /** Controlling how cells are positioned along a container's main axis */
+    this.justify = "start";
+    /** Control how cells items are positioned along a container's cross axis */
+    this.items = "start";
+    /** Utilities for controlling how rows are positioned in multi-row flex containers. */
+    this.content = "start";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "stzh-row": true,
+        [`stzh-row--justify-${this.justify}`]: !!this.justify,
+        [`stzh-row--items-${this.items}`]: !!this.items,
+        [`stzh-row--content-${this.content}`]: !!this.content
+      } }, index.h("slot", null))));
+  }
+};
 StzhRow.style = stzhRowCss;
 
 exports.stzh_row = StzhRow;

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

@@ -3,79 +3,79 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
+const translationUtils = require('./translation-utils-73073e44.js');
 
 const stzhSaptchaCss = ".sc-stzh-saptcha-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-saptcha-h{display:none}.sc-stzh-saptcha-h *.sc-stzh-saptcha,.sc-stzh-saptcha-h *.sc-stzh-saptcha::before,.sc-stzh-saptcha-h *.sc-stzh-saptcha::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);background-color:var(--stzh-section-highlight-background-color)}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-right:var(--stzh-space-xlarge)}}.stzh-saptcha__info.sc-stzh-saptcha,.stzh-saptcha__question.sc-stzh-saptcha{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)}.stzh-saptcha__answer.sc-stzh-saptcha{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-medium)}}";
 
-let saptchaCounter = 0;
-const StzhSaptcha = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Numbers shown to user for selection */
-    this.numbers = [];
-    this._numbers = [];
-    /** The value of the input element */
-    this.value = "";
-    /** Name of input */
-    this.name = "saptcha";
-    /** Invalid status */
-    this.invalid = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-  }
-  numbersWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._numbers = JSON.parse(newValue);
-    }
-    else {
-      this._numbers = newValue;
-    }
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  async componentWillLoad() {
-    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;
-    this.numbersWatcher(this.numbers);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'saptcha');
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-saptcha": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-saptcha__box" }, index.h("div", { class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info), index.h("div", { id: `${this.saptchaId}-question` }, index.h("div", { class: "stzh-saptcha__question" }, this.localization.question), index.h("div", { class: "stzh-saptcha__answer" }, this._numbers.map((number, index$1) => index.h("span", { class: "stzh-saptcha__number" }, number, index$1 < this._numbers.length - 1 &&
-      (index$1 === this._numbers.length - 2
-        ? this.localization.answerOr
-        : ", "))))), index.h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, required: true, "show-marker": true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-question` })))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "numbers": ["numbersWatcher"],
-    "error": ["errorWatcher"]
-  }; }
-};
+let saptchaCounter = 0;
+const StzhSaptcha = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Numbers shown to user for selection */
+    this.numbers = [];
+    this._numbers = [];
+    /** The value of the input element */
+    this.value = "";
+    /** Name of input */
+    this.name = "saptcha";
+    /** Invalid status */
+    this.invalid = false;
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+  }
+  numbersWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._numbers = JSON.parse(newValue);
+    }
+    else {
+      this._numbers = newValue;
+    }
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async componentWillLoad() {
+    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;
+    this.numbersWatcher(this.numbers);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'saptcha');
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-saptcha": true
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-saptcha__box" }, index.h("div", { class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info), index.h("div", { id: `${this.saptchaId}-question` }, index.h("div", { class: "stzh-saptcha__question" }, this.localization.question), index.h("div", { class: "stzh-saptcha__answer" }, this._numbers.map((number, index$1) => index.h("span", { class: "stzh-saptcha__number" }, number, index$1 < this._numbers.length - 1 &&
+      (index$1 === this._numbers.length - 2
+        ? this.localization.answerOr
+        : ", "))))), index.h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, required: true, "show-marker": true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-question` })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "numbers": ["numbersWatcher"],
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhSaptcha.style = stzhSaptchaCss;
 
 exports.stzh_saptcha = StzhSaptcha;

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

@@ -6,19 +6,19 @@ const index = require('./index-ac9bdc7f.js');
 
 const stzhSectionCss = ".sc-stzh-section-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-section-h{display:none}.sc-stzh-section-h *.sc-stzh-section,.sc-stzh-section-h *.sc-stzh-section::before,.sc-stzh-section-h *.sc-stzh-section::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-section-h{--background-color:var(--stzh-section-background-color)}[variant=highlight].sc-stzh-section-h{--stzh-base-color:var(--stzh-color-grey61);--background-color:var(--stzh-section-highlight-background-color);--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding);--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding)}@media screen and (min-width: 600px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding) var(--stzh-space-large)}}@media screen and (min-width: 1024px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-large) var(--highlight-horizontal-padding) var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-xlarge) var(--highlight-horizontal-padding) var(--stzh-space-xxlarge)}}.stzh-section--highlight.sc-stzh-section{background-color:var(--background-color);padding:var(--highlight-padding)}";
 
-const StzhSection = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Variant */
-    this.variant = "default";
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("section", { class: {
-        'stzh-section': true,
-        [`stzh-section--${this.variant}`]: true
-      } }, index.h("slot", null))));
-  }
-};
+const StzhSection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Variant */
+    this.variant = "default";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("section", { class: {
+        'stzh-section': true,
+        [`stzh-section--${this.variant}`]: true
+      } }, index.h("slot", null))));
+  }
+};
 StzhSection.style = stzhSectionCss;
 
 exports.stzh_section = StzhSection;