@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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))));
+  }
+};
+StzhRow.style = stzhRowCss;
+
+exports.stzh_row = StzhRow;

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+const translationUtils = require('./translation-utils-2dbbce94.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"]
+  }; }
+};
+StzhSaptcha.style = stzhSaptchaCss;
+
+exports.stzh_saptcha = StzhSaptcha;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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))));
+  }
+};
+StzhSection.style = stzhSectionCss;
+
+exports.stzh_section = StzhSection;

package/dist/cjs/stzh-servicecard-list.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+const translationUtils = require('./translation-utils-2dbbce94.js');
+
+const stzhServicecardListCss = ".sc-stzh-servicecard-list-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-servicecard-list-h{display:none}.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::before,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>stzh-text[slot=description]{--color:inherit}.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{-ms-flex-direction:row;flex-direction:row}}.stzh-servicecard-list__description.sc-stzh-servicecard-list{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(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-servicecard-list__description.sc-stzh-servicecard-list{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-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:0}}.stzh-servicecard-list__switch.sc-stzh-servicecard-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
+
+const StzhServicecardList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Whether sorting should be disabled */
+    this.sortableDisabled = false;
+    /** Whether collapse/expand toggle link */
+    this.showToggleLink = false;
+    /** HTML attribute that is used by the `toArray()` of sortable method */
+    this.sortableDataIdAttribute = "data-id";
+    this.allCollapsed = false;
+    this.collapseClick = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
+      cards.forEach(card => {
+        if (card.collapsible) {
+          card.collapsed = !this.allCollapsed;
+        }
+      });
+      this.allCollapsed = !this.allCollapsed;
+    };
+    this.updateCollapsedState = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
+      this.allCollapsed = !cards.some(card => !card.collapsed);
+    };
+  }
+  collapseListener() {
+    this.updateCollapsedState();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "servicecard-list");
+    }
+  }
+  componentDidLoad() {
+    this.updateCollapsedState();
+  }
+  render() {
+    const classes = {
+      "stzh-servicecard-list": true
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-servicecard-list__header" }, index.h("div", { class: "stzh-servicecard-list__description" }, index.h("slot", { name: "description" })), this.showToggleLink &&
+      index.h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), index.h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute }, index.h("div", { class: "stzh-servicecard-list__cards", role: "list" }, index.h("slot", null))))));
+  }
+  get element() { return index.getElement(this); }
+};
+StzhServicecardList.style = stzhServicecardListCss;
+
+exports.stzh_servicecard_list = StzhServicecardList;

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

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+const utils = require('./utils-e84f4a8d.js');
+const mediaUtils = require('./media-utils-f1720906.js');
+const translationUtils = require('./translation-utils-2dbbce94.js');
+
+const stzhServicecardCss = ".sc-stzh-servicecard-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-servicecard-h{display:none}.sc-stzh-servicecard-h *.sc-stzh-servicecard,.sc-stzh-servicecard-h *.sc-stzh-servicecard::before,.sc-stzh-servicecard-h *.sc-stzh-servicecard::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-h{--box-shadow:var(--stzh-box-shadow-popover);--border:0.0625rem solid var(--stzh-base-border-color);--border-radius:0.1875rem;--dnd-visibility:hidden;--dnd-opacity:0;position:relative;border-radius:var(--border-radius)}.is-ghost.sc-stzh-servicecard-h::after{border-radius:var(--border-radius)}.is-selected.sc-stzh-servicecard-h,.is-chosen.sc-stzh-servicecard-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-servicecard-h{--box-shadow:none;--border:0.0625rem solid transparent;overflow:hidden}.is-drag.sc-stzh-servicecard-h,.is-chosen.sc-stzh-servicecard-h,.is-ghost.sc-stzh-servicecard-h,.is-selected.sc-stzh-servicecard-h{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>*{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)}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table{border:0;border-spacing:0}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table td,.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table th{padding:0}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>*:not(:first-child){margin-top:var(--stzh-space-medium)}.stzh-servicecard.sc-stzh-servicecard{background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border:var(--border);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-servicecard.sc-stzh-servicecard .show-medium.sc-stzh-servicecard{display:none}}@media screen and (min-width: 1024px){.stzh-servicecard.sc-stzh-servicecard .hide-medium.sc-stzh-servicecard{display:none}}.stzh-servicecard__dnd.sc-stzh-servicecard{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-servicecard__dnd.sc-stzh-servicecard{display:block}}@media screen and (min-width: 1260px){.stzh-servicecard__dnd.sc-stzh-servicecard{left:0.25rem;top:1.6875rem}}.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start;border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 600px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-large)}}.stzh-servicecard__header-left.sc-stzh-servicecard,.stzh-servicecard__header-right.sc-stzh-servicecard{display:-ms-flexbox;display:flex}.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-large)}}.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}.stzh-servicecard__left.sc-stzh-servicecard{-ms-flex-item-align:center;align-self:center}.stzh-servicecard__title-area.sc-stzh-servicecard{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-servicecard__title.sc-stzh-servicecard,.stzh-servicecard__subtitle.sc-stzh-servicecard{margin:0}.stzh-servicecard__title.sc-stzh-servicecard{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 600px){.stzh-servicecard__title.sc-stzh-servicecard{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-servicecard__title.sc-stzh-servicecard{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-servicecard__subtitle.sc-stzh-servicecard{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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-decoration:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-servicecard__subtitle.sc-stzh-servicecard{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-servicecard__subtitle-text.sc-stzh-servicecard{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-servicecard__subtitle-text.sc-stzh-servicecard::after{content:\",\";position:absolute;left:0}.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard__columns.sc-stzh-servicecard{display:grid;grid-template-columns:50% 50%;grid-template-rows:auto auto;margin-left:calc(var(--stzh-space-medium) / -1);margin-right:calc(var(--stzh-space-medium) / -1)}}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;margin-left:calc(var(--stzh-space-large) / -1);margin-right:calc(var(--stzh-space-large) / -1)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-left:calc(var(--stzh-space-xlarge) / -1);margin-right:calc(var(--stzh-space-xlarge) / -1)}}@media screen and (min-width: 800px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 2;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-right.sc-stzh-servicecard{align-self:end;grid-column:2/span 1;grid-row:2/span 1}}@media screen and (min-width: 1024px){.stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:3/span 1;grid-row:1/span 1}}.stzh-servicecard__column.sc-stzh-servicecard:not(:empty):not(:first-child):not(.has-no-spacing){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-servicecard__column.sc-stzh-servicecard:not(:empty):not(:first-child):not(.has-no-spacing){margin-top:0}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-middle.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-right.sc-stzh-servicecard{margin-top:0}}.stzh-servicecard__column.is-left.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-middle.sc-stzh-servicecard:not(:empty),.stzh-servicecard__column.is-left.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-middle.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-right.sc-stzh-servicecard:not(:empty){margin-top:0}.stzh-servicecard__card-actions.sc-stzh-servicecard{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-servicecard__card-action.sc-stzh-servicecard{--icon-text-margin:0;--badge-icon-text-margin:0}}.stzh-servicecard__card-action[variant=tertiary].sc-stzh-servicecard{--color:var(--stzh-color-grey70)}.stzh-servicecard__card-action.is-button.sc-stzh-servicecard{--icon-size:var(--stzh-icon-size-small)}.stzh-servicecard__card-action.is-placeholder.sc-stzh-servicecard{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-servicecard__card-action-popover.sc-stzh-servicecard{--width:auto}@media screen and (min-width: 800px){.stzh-servicecard--has-middle.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard--has-middle.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-right.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{margin-top:0}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:3/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:1/span 1;grid-row:2/span 1}}@media screen and (min-width: 1024px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{margin-top:0}}.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard{cursor:pointer;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:hover,.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard{color:var(--stzh-color-error)}.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:hover,.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:focus{color:var(--stzh-color-error)}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .hide-when-collapsed.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard .hide-when-collapsed.sc-stzh-servicecard{display:none}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .show-when-collapsed.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard .show-when-collapsed.sc-stzh-servicecard{display:block}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard{border-bottom:none}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .stzh-servicecard__card-action.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__card-action.sc-stzh-servicecard{--icon-text-margin:0;--badge-icon-text-margin:0}.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard:hover,.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+
+const StzhServicecard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhCollapse = index.createEvent(this, "stzhCollapse", 7);
+    this.stzhSubtitleClick = index.createEvent(this, "stzhSubtitleClick", 7);
+    this.stzhStarClick = index.createEvent(this, "stzhStarClick", 7);
+    this.stzhActionClick = index.createEvent(this, "stzhActionClick", 7);
+    /** Whether card is collapsed or not */
+    this.collapsed = false;
+    /** Whether card was starred */
+    this.starred = false;
+    /** Whether card star is displayed */
+    this.starrable = false;
+    /** Heading */
+    this.heading = "";
+    /** Subtitle */
+    this.subtitle = "";
+    this._subtitles = [];
+    /** Card actions */
+    this.actions = [];
+    /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
+    this.subtitleInteractive = false;
+    /** Type */
+    this.type = "default";
+    /** Middle column position variant (positioning behaviour on tablet) */
+    this.middleVariant = "to-right";
+    /** Set middle column vertical spacing */
+    this.middleVerticalSpacing = "default";
+    /** Set right column vertical spacing */
+    this.rightVerticalSpacing = "default";
+    /** Whether sorting should be disabled */
+    this.sortableDisabled = false;
+    /** Whether card is collapsible */
+    this.collapsible = false;
+    /** Whether movement menu items should be shown */
+    this.hideMovementActions = false;
+    this.nodeChange = (entries) => {
+      let changeInSlot = false;
+      entries.forEach((entry) => {
+        if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {
+          changeInSlot = true;
+        }
+      });
+      if (changeInSlot) {
+        index.forceUpdate(this.element);
+      }
+    };
+    this.update = () => {
+      this.mainElement.classList.remove("stzh-servicecard--has-collapsed-header");
+      if (mediaUtils.media('medium').matches) {
+        const headerWidth = this.headerElement.clientWidth;
+        const leftWidth = this.headerLeftElement.clientWidth;
+        const rightWidth = this.headerRightElement.clientWidth;
+        if (headerWidth - leftWidth <= rightWidth) {
+          this.mainElement.classList.add("stzh-servicecard--has-collapsed-header");
+        }
+      }
+    };
+    this.headerClick = (event) => {
+      if (!this.collapsible) {
+        return;
+      }
+      const filterTags = ["stzh-popover", "stzh-tooltip", "button", "a", "input", "select", "textarea", "iframe", "details", "label", "area"];
+      const composedPathTags = event.composedPath().map(element => { var _a; return (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+      const found = composedPathTags.some(r => filterTags.includes(r));
+      if (!found) {
+        this.collapsed = !this.collapsed;
+        this.stzhCollapse.emit({
+          component: "stzh-servicecard",
+          collapsed: this.collapsed
+        });
+      }
+    };
+    this.subtitleClick = () => {
+      if (this.subtitleInteractive) {
+        this.stzhSubtitleClick.emit({
+          component: "stzh-servicecard"
+        });
+      }
+    };
+    this.starToggleClick = () => {
+      this.stzhStarClick.emit({
+        component: "stzh-servicecard",
+        starred: this.starred
+      });
+    };
+    this.actionClick = (action) => {
+      this.stzhActionClick.emit({
+        component: "stzh-servicecard",
+        action
+      });
+    };
+    this.arrowUpClick = () => {
+      const sortable = this.element.closest("stzh-sortable");
+      if (sortable) {
+        sortable.moveItem(this.element, "up");
+      }
+    };
+    this.arrowDownClick = () => {
+      const sortable = this.element.closest("stzh-sortable");
+      if (sortable) {
+        sortable.moveItem(this.element, "down");
+      }
+    };
+  }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  subtitleWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._subtitles = JSON.parse(newValue);
+      }
+      catch (err) {
+        this._subtitles = [newValue];
+      }
+    }
+    else {
+      this._subtitles = newValue;
+    }
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.subtitleWatcher(this.subtitle);
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "servicecard");
+    }
+  }
+  connectedCallback() {
+    this.observer = new MutationObserver(this.nodeChange);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const leftUsed = utils.hasSlot(this.element, "left");
+    const middleUsed = utils.hasSlot(this.element, "middle");
+    const rightUsed = utils.hasSlot(this.element, "right");
+    const classes = {
+      "stzh-servicecard": true,
+      "stzh-servicecard--has-left": leftUsed,
+      "stzh-servicecard--has-middle": middleUsed,
+      "stzh-servicecard--has-right": rightUsed,
+      "stzh-servicecard--has-subtitle": !!this.subtitle,
+      "stzh-servicecard--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
+      "stzh-servicecard--is-collapsed": this.collapsed,
+      "stzh-servicecard--is-starred": this.starred,
+      [`stzh-servicecard--middle-${this.middleVariant}`]: !!this.middleVariant && middleUsed,
+      [`stzh-servicecard--type-${this.type}`]: !!this.type,
+    };
+    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
+    return (index.h(index.Host, { role: "listitem", "aria-label": this.heading }, index.h("article", { ref: (el) => (this.mainElement = el), class: classes }, index.h("stzh-icon", { class: "stzh-servicecard__dnd", name: "drag" }), index.h("header", { ref: (el) => (this.headerElement = el), class: "stzh-servicecard__header", onClick: this.headerClick }, index.h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-servicecard__header-left" }, index.h("div", { class: "stzh-servicecard__title-area", "data-dashboardmknlist": "title" }, index.h("h3", { class: "stzh-servicecard__title", "data-dashboardmknlist": "dnd" }, this.heading), this._subtitles.length > 0 &&
+      index.h(Subtitle, { class: "stzh-servicecard__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (index.h("span", { class: "stzh-servicecard__subtitle-text" }, subtitle)))))), index.h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-servicecard__header-right" }, index.h("div", { class: "stzh-servicecard__card-actions" }, this._actions.map(action => (index.h("stzh-button", { class: {
+        "stzh-servicecard__card-action": true,
+        "is-button": true,
+        "show-medium": !action.onlyCollapseText,
+        "hide-when-collapsed": !action.onlyCollapseText,
+        "hide-text-when-collapsed": action.onlyCollapseText
+      }, icon: action.icon, badge: action.badge, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, index.h("span", { class: {
+        "show-medium": action.onlyCollapseText,
+        "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)))), this.starrable &&
+      index.h("stzh-tooltip", null, index.h("stzh-button", { class: "stzh-servicecard__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), index.h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), index.h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-servicecard__card-action-popover" }, index.h("stzh-button", { class: "stzh-servicecard__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), index.h("stzh-menu", { slot: "content" }, this.starrable &&
+      index.h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), this._actions.filter(action => !action.onlyCollapseText).map(action => (index.h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); } }, action.label))), (!this.sortableDisabled && !this.hideMovementActions) &&
+      index.h(index.Fragment, null, index.h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), index.h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), index.h("div", { class: "stzh-servicecard__columns hide-when-collapsed" }, index.h("div", { class: {
+        "stzh-servicecard__column": true,
+        "is-left": true
+      } }, index.h("slot", { name: "left" })), index.h("div", { class: {
+        "stzh-servicecard__column": true,
+        "is-middle": true,
+        "has-no-spacing": this.middleVerticalSpacing === "none"
+      } }, index.h("slot", { name: "middle" })), index.h("div", { class: {
+        "stzh-servicecard__column": true,
+        "is-right": true,
+        "has-no-spacing": this.rightVerticalSpacing === "none"
+      } }, index.h("slot", { name: "right" }))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "subtitle": ["subtitleWatcher"],
+    "actions": ["actionsWatcher"]
+  }; }
+};
+StzhServicecard.style = stzhServicecardCss;
+
+exports.stzh_servicecard = StzhServicecard;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+
+const stzhSkiplinkCss = ".sc-stzh-skiplink-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-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);text-decoration:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){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-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+
+const StzhSkiplink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Whether the skiplink is currently focused */
+    this.focused = false;
+  }
+  focusinHandler() {
+    this.focused = true;
+  }
+  focusoutHandler() {
+    this.focused = false;
+  }
+  render() {
+    return (index.h(index.Host, { focused: this.focused }, index.h("a", { class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle }, index.h("slot", null))));
+  }
+};
+StzhSkiplink.style = stzhSkiplinkCss;
+
+exports.stzh_skiplink = StzhSkiplink;