@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -6,31 +6,31 @@ const index = require('./index-ac9bdc7f.js');
 
 const stzhStatusCss = ".sc-stzh-status-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-status-h{display:none}.sc-stzh-status-h *.sc-stzh-status,.sc-stzh-status-h *.sc-stzh-status::before,.sc-stzh-status-h *.sc-stzh-status::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-status-h{--color:var(--stzh-base-color)}[type=success].sc-stzh-status-h{--color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-status-h{--color:var(--stzh-color-warning)}[type=error].sc-stzh-status-h{--color:var(--stzh-color-error)}[type=info].sc-stzh-status-h{--color:var(--stzh-color-zueriblue)}.stzh-status.sc-stzh-status{min-width:10rem;color:var(--color)}.stzh-status__dot.sc-stzh-status{border-radius:50%;width:0.75rem;height:0.75rem;background-color:currentColor;margin-right:var(--stzh-space-xxsmall)}.stzh-status__bar.sc-stzh-status{display:block;height:0.25rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xxsmall)}.stzh-status__bar-inner.sc-stzh-status{display:block;height:100%;width:0;border-radius:0.75rem;background:currentColor}.stzh-status__text.sc-stzh-status{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
 
-const StzhStatus = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Percent */
-    this.percent = 0;
-    /** Whether to hide/show loadingbar */
-    this.withLoadingbar = false;
-    /** Label */
-    this.label = "";
-    /** Type */
-    this.type = "default";
-  }
-  render() {
-    const classes = {
-      "stzh-status": true,
-      [`stzh-status--type-${this.type}`]: !!this.type
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-status__text" }, index.h("div", { class: "stzh-status__dot" }), this.label &&
-      index.h("div", { class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
-      index.h("div", { class: "stzh-status__bar" }, index.h("div", { class: "stzh-status__bar-inner", style: {
-          width: `${this.percent}%`
-        } })))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhStatus = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Percent */
+    this.percent = 0;
+    /** Whether to hide/show loadingbar */
+    this.withLoadingbar = false;
+    /** Label */
+    this.label = "";
+    /** Type */
+    this.type = "default";
+  }
+  render() {
+    const classes = {
+      "stzh-status": true,
+      [`stzh-status--type-${this.type}`]: !!this.type
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-status__text" }, index.h("div", { class: "stzh-status__dot" }), this.label &&
+      index.h("div", { class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
+      index.h("div", { class: "stzh-status__bar" }, index.h("div", { class: "stzh-status__bar-inner", style: {
+          width: `${this.percent}%`
+        } })))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhStatus.style = stzhStatusCss;
 
 exports.stzh_status = StzhStatus;

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

@@ -3,141 +3,141 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-8dc66449.js');
 
 const stzhTableCss = ":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-table{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;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-table{}.stzh-table__header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-table__header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-table__heading{margin-bottom:0}}.stzh-table__header .stzh-table__search{width:var(--stzh-table-input-width)}@media screen and (min-width: 1024px){.stzh-table__header .stzh-table__search{margin-left:var(--stzh-space-large)}}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table__sort-icon{opacity:0}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{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);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{opacity:1}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}";
 
-const CLASS_HAS_STICKED = "has-sticked";
-const CLASS_IS_STICKY_LEFT = "is-sticky-left";
-const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
-const StzhTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Columns that should be sticky on the left side (column indexes separated by comma) */
-    this.fixedLeft = null;
-    /** Columns that should be sticky on the right side (column indexes separated by comma) */
-    this.fixedRight = null;
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
-    this.updateCellClasses = () => {
-      if (!this.tableWrapper) {
-        return;
-      }
-      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
-      rows.forEach((row) => {
-        const cells = Array.from(row.children);
-        cells.forEach((cell, index) => {
-          cell.classList.remove(CLASS_IS_STICKY_LEFT);
-          cell.classList.remove(CLASS_IS_STICKY_RIGHT);
-          if (index === this.fixedLeft) {
-            cell.classList.add(CLASS_IS_STICKY_LEFT);
-          }
-          if (index === this.fixedRight) {
-            cell.classList.add(CLASS_IS_STICKY_RIGHT);
-          }
-        });
-      });
-    };
-    this.updateScrollStates = () => {
-      if (!this.tableWrapper) {
-        return;
-      }
-      const wrapperScrollLeft = this.tableWrapper.scrollLeft;
-      const wrapperScrollWidth = this.tableWrapper.scrollWidth;
-      const wrapperClientWidth = this.tableWrapper.clientWidth;
-      this.isScrollable = wrapperScrollWidth > wrapperClientWidth;
-      this.hasScrollLeft = wrapperScrollLeft > 0;
-      this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;
-      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
-      const firstRow = rows[0];
-      if (!firstRow) {
-        return;
-      }
-      this.cellsStickyLeft = [];
-      this.cellsStickyRight = [];
-      const cells = Array.from(firstRow.children);
-      cells.forEach((cell, index) => {
-        const offsetLeft = cell.offsetLeft;
-        const offsetRight = offsetLeft + cell.offsetWidth;
-        if (this.hasScrollLeft
-          && index === this.fixedLeft
-          && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
-          this.cellsStickyLeft.push(index);
-        }
-        if (this.hasScrollRight
-          && index === this.fixedRight
-          && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
-          this.cellsStickyRight.push(index);
-        }
-      });
-      rows.forEach((row) => {
-        const cells = Array.from(row.children);
-        cells.forEach((cell, index) => {
-          if (this.cellsStickyLeft.indexOf(index) > -1
-            || this.cellsStickyRight.indexOf(index) > -1) {
-            cell.classList.add(CLASS_HAS_STICKED);
-          }
-          else {
-            cell.classList.remove(CLASS_HAS_STICKED);
-          }
-        });
-      });
-    };
-    this.init = () => {
-      const searchInput = this.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');
-      if (searchInput) {
-        utils.setPropsIfNull(searchInput, {
-          size: "small"
-        });
-      }
-      this.updateCellClasses();
-      this.updateScrollStates();
-    };
-    this.handleScroll = () => {
-      if (this.debounceScroll) {
-        window.cancelAnimationFrame(this.debounceScroll);
-      }
-      this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
-    };
-  }
-  fixedCellWatcher() {
-    this.updateCellClasses();
-    this.updateScrollStates();
-  }
-  handleResize() {
-    this.updateScrollStates();
-  }
-  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-table": true,
-      "is-scrollable": this.isScrollable,
-      "has-scroll-left": this.hasScrollLeft,
-      "has-scroll-right": this.hasScrollRight,
-      "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
-      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-table__header" }, index.h("div", { class: "stzh-table__heading" }, index.h("slot", { name: "heading" })), index.h("div", { class: "stzh-table__search" }, index.h("slot", { name: "search" }))), index.h("div", { class: "stzh-table__outer-wrapper" }, index.h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", null))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "fixedLeft": ["fixedCellWatcher"],
-    "fixedRight": ["fixedCellWatcher"]
-  }; }
-};
+const CLASS_HAS_STICKED = "has-sticked";
+const CLASS_IS_STICKY_LEFT = "is-sticky-left";
+const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
+const StzhTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Columns that should be sticky on the left side (column indexes separated by comma) */
+    this.fixedLeft = null;
+    /** Columns that should be sticky on the right side (column indexes separated by comma) */
+    this.fixedRight = null;
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
+    this.updateCellClasses = () => {
+      if (!this.tableWrapper) {
+        return;
+      }
+      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
+      rows.forEach((row) => {
+        const cells = Array.from(row.children);
+        cells.forEach((cell, index) => {
+          cell.classList.remove(CLASS_IS_STICKY_LEFT);
+          cell.classList.remove(CLASS_IS_STICKY_RIGHT);
+          if (index === this.fixedLeft) {
+            cell.classList.add(CLASS_IS_STICKY_LEFT);
+          }
+          if (index === this.fixedRight) {
+            cell.classList.add(CLASS_IS_STICKY_RIGHT);
+          }
+        });
+      });
+    };
+    this.updateScrollStates = () => {
+      if (!this.tableWrapper) {
+        return;
+      }
+      const wrapperScrollLeft = this.tableWrapper.scrollLeft;
+      const wrapperScrollWidth = this.tableWrapper.scrollWidth;
+      const wrapperClientWidth = this.tableWrapper.clientWidth;
+      this.isScrollable = wrapperScrollWidth > wrapperClientWidth;
+      this.hasScrollLeft = wrapperScrollLeft > 0;
+      this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;
+      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
+      const firstRow = rows[0];
+      if (!firstRow) {
+        return;
+      }
+      this.cellsStickyLeft = [];
+      this.cellsStickyRight = [];
+      const cells = Array.from(firstRow.children);
+      cells.forEach((cell, index) => {
+        const offsetLeft = cell.offsetLeft;
+        const offsetRight = offsetLeft + cell.offsetWidth;
+        if (this.hasScrollLeft
+          && index === this.fixedLeft
+          && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
+          this.cellsStickyLeft.push(index);
+        }
+        if (this.hasScrollRight
+          && index === this.fixedRight
+          && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
+          this.cellsStickyRight.push(index);
+        }
+      });
+      rows.forEach((row) => {
+        const cells = Array.from(row.children);
+        cells.forEach((cell, index) => {
+          if (this.cellsStickyLeft.indexOf(index) > -1
+            || this.cellsStickyRight.indexOf(index) > -1) {
+            cell.classList.add(CLASS_HAS_STICKED);
+          }
+          else {
+            cell.classList.remove(CLASS_HAS_STICKED);
+          }
+        });
+      });
+    };
+    this.init = () => {
+      const searchInput = this.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');
+      if (searchInput) {
+        utils.setPropsIfNull(searchInput, {
+          size: "small"
+        });
+      }
+      this.updateCellClasses();
+      this.updateScrollStates();
+    };
+    this.handleScroll = () => {
+      if (this.debounceScroll) {
+        window.cancelAnimationFrame(this.debounceScroll);
+      }
+      this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
+    };
+  }
+  fixedCellWatcher() {
+    this.updateCellClasses();
+    this.updateScrollStates();
+  }
+  handleResize() {
+    this.updateScrollStates();
+  }
+  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-table": true,
+      "is-scrollable": this.isScrollable,
+      "has-scroll-left": this.hasScrollLeft,
+      "has-scroll-right": this.hasScrollRight,
+      "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
+      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-table__header" }, index.h("div", { class: "stzh-table__heading" }, index.h("slot", { name: "heading" })), index.h("div", { class: "stzh-table__search" }, index.h("slot", { name: "search" }))), index.h("div", { class: "stzh-table__outer-wrapper" }, index.h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", null))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "fixedLeft": ["fixedCellWatcher"],
+    "fixedRight": ["fixedCellWatcher"]
+  }; }
+};
 StzhTable.style = stzhTableCss;
 
 exports.stzh_table = StzhTable;

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

@@ -3,132 +3,132 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const stzhInputDescription = require('./stzh-input-description-9ed61d1d.js');
+const utils = require('./utils-8dc66449.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const stzhInputDescription = require('./stzh-input-description-9802abc2.js');
 
 const stzhToggleCss = ".sc-stzh-toggle-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-toggle-h{display:none}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-toggle-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-toggle-h .sc-stzh-toggle-s>stzh-text{--color:inherit}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-toggle__marker-text.sc-stzh-toggle{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-toggle__description-wrapper.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-toggle__description-long.sc-stzh-toggle{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-popover[open].sc-stzh-toggle:not([open=false]) .stzh-toggle__description-long-button.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle__description-long-button.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-toggle__description-long-button.sc-stzh-toggle:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{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);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-toggle__input.sc-stzh-toggle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black8);width:2.75rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;border-radius:0.75rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:1.5rem;height:1.5rem;border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, transform;transition-property:border-color, background-color, transform, -webkit-transform;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);line-height:1.5rem}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-primary48)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey61)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-grey25)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-grey25)}";
 
-let toggleCounter = 0;
-const StzhToggle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhChange = index.createEvent(this, "stzhChange", 7);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    /** Whether the toggle is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Position of label */
-    this.labelPosition = "right";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
-    this.onInput = (event) => {
-      this.checked = this.input.checked;
-      this.stzhChange.emit({
-        component: "stzh-toggle",
-        originalEvent: event,
-        value: this.value,
-        checked: this.checked
-      });
-    };
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent('focus', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-toggle",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent('blur', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-toggle",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus input field */
-  async setFocus() {
-    this.input.focus();
-  }
-  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.inputId = `stzh-toggle-${toggleCounter++}`;
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'toggle');
-    }
-  }
-  render() {
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-toggle": true,
-      "stzh-toggle--has-error": errorUsed,
-      "stzh-toggle--is-required": this.required,
-      "stzh-toggle--is-invalid": this.invalid,
-      "stzh-toggle--is-disabled": this.disabled,
-      "stzh-toggle--has-description": descriptionUsed,
-      "stzh-toggle--has-description-long": descriptionLongUsed,
-      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition
-    };
-    return (index.h("div", { class: classes }, index.h("label", { class: "stzh-toggle__field-wrapper" }, index.h("input", { class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-toggle__mark" }, index.h("div", { class: "stzh-toggle__check" })), index.h("div", { class: "stzh-toggle__label" }, this.label ? this.label : index.h("slot", null), this.showMarker &&
-      index.h("span", { class: "stzh-toggle__marker" }, index.h("span", { class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-toggle__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "error": ["errorWatcher"]
-  }; }
-};
+let toggleCounter = 0;
+const StzhToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
+    /** Whether the toggle is disabled */
+    this.disabled = false;
+    /** Name of the input element */
+    this.name = "";
+    /** Value of the input element */
+    this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** Checked status */
+    this.checked = false;
+    /** Label */
+    this.label = "";
+    /** Position of label */
+    this.labelPosition = "right";
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
+    this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-toggle",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-toggle",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-toggle",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus input field */
+  async setFocus() {
+    this.input.focus();
+  }
+  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.inputId = `stzh-toggle-${toggleCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'toggle');
+    }
+  }
+  render() {
+    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-toggle": true,
+      "stzh-toggle--has-error": errorUsed,
+      "stzh-toggle--is-required": this.required,
+      "stzh-toggle--is-invalid": this.invalid,
+      "stzh-toggle--is-disabled": this.disabled,
+      "stzh-toggle--has-description": descriptionUsed,
+      "stzh-toggle--has-description-long": descriptionLongUsed,
+      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition
+    };
+    return (index.h("div", { class: classes }, index.h("label", { class: "stzh-toggle__field-wrapper" }, index.h("input", { class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-toggle__mark" }, index.h("div", { class: "stzh-toggle__check" })), index.h("div", { class: "stzh-toggle__label" }, this.label ? this.label : index.h("slot", null), this.showMarker &&
+      index.h("span", { class: "stzh-toggle__marker" }, index.h("span", { class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-toggle__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhToggle.style = stzhToggleCss;
 
 exports.stzh_toggle = StzhToggle;