@oiz/stzh-components 2.0.0 → 2.1.0-beta

package/dist/components/stzh-progressbar-item2.js

@@ -9,14 +9,6 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__registerHost();
     this.stzhClick = createEvent(this, "stzhClick", 7);
     this.stzhDottedClick = createEvent(this, "stzhDottedClick", 7);
-    this.first = false;
-    this.last = false;
-    this.passed = false;
-    this.current = false;
-    this.hide = false;
-    this.dotted = false;
-    this.step = 1;
-    this.icon = "";
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
@@ -29,6 +21,14 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
         originalEvent: event
       });
     };
+    this.first = false;
+    this.last = false;
+    this.passed = false;
+    this.current = false;
+    this.hide = false;
+    this.dotted = false;
+    this.step = 1;
+    this.icon = "";
   }
   render() {
     const classes = {

package/dist/components/stzh-progressbar.js

@@ -9,29 +9,6 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
     this.setCurrentSteps = () => {
       if (media("ultra").matches && this.stepsUltra) {
         this.currentSteps = this.stepsUltra;
@@ -50,6 +27,14 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
       this.element.style.setProperty("--steps", this.currentSteps.toString());
     };
+    this.data = [];
+    this.index = 0;
+    this.steps = 5;
+    this.stepsSmall = 6;
+    this.stepsMedium = 0;
+    this.stepsLarge = 0;
+    this.stepsUltra = 0;
+    this.currentSteps = undefined;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/components/stzh-radio2.js

@@ -15,24 +15,6 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** The name of the input element */
-    this.name = "";
-    /** The 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 = "";
-    /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -66,6 +48,19 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

package/dist/components/stzh-radiogroup2.js

@@ -14,24 +14,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** 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;
-    /** Select a radio by value */
-    this.value = "";
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked radio element (readonly) */
-    this.checkedRadio = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       // update radios
       this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
@@ -43,6 +26,21 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.watchInvalid(this.invalid);
       this.watchRequired(this.required);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedRadio = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateRadiosProperty("name", newValue);
@@ -81,12 +79,20 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     this.value = event.detail.value;
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });
@@ -109,6 +115,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async componentWillLoad() {
     this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'radiogroup');
     }
@@ -167,7 +174,8 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "invalid": ["watchInvalid"],
     "required": ["watchRequired"],
     "value": ["watchValue"],
-    "error": ["errorWatcher"]
+    "error": ["errorWatcher"],
+    "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
   }; }
   static get style() { return stzhRadiogroupCss; }
 }, [6, "stzh-radiogroup", {
@@ -185,7 +193,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "descriptionLong": [1, "description-long"],
     "error": [1],
     "checkedRadio": [8, "checked-radio"],
-    "preventUpdateProperties": [16]
+    "preventUpdateProperties": [1, "prevent-update-properties"]
   }, [[0, "stzhChange", "onChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-readspeaker.js

@@ -20,6 +20,8 @@ const StzhReadspeaker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         });
       });
     };
+    this.href = undefined;
+    this.eventId = undefined;
   }
   // Sometimes the library is loaded later, so we register
   // the click events also when the page has loaded

package/dist/components/stzh-richtext2.js

@@ -10,9 +10,7 @@ const StzhRichtext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Selector to recognize external link and attach an icon */
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
-    /** Icon used for marking external links */
     this.externalLinkIcon = 'external-link';
   }
   addExternalLinkIcons() {

package/dist/components/stzh-row.js

@@ -7,21 +7,13 @@ const StzhRow$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /** 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() {

package/dist/components/stzh-saptcha.js

@@ -13,16 +13,13 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Numbers shown to user for selection */
-    this.numbers = [];
     this._numbers = [];
-    /** The value of the input element */
+    this.localization = undefined;
+    this.numbers = [];
     this.value = "";
-    /** Name of input */
     this.name = "saptcha";
-    /** Invalid status */
+    this.error = undefined;
     this.invalid = false;
-    /** Whether the element is disabled or not */
     this.disabled = false;
   }
   numbersWatcher(newValue) {

package/dist/components/stzh-section.js

@@ -6,7 +6,6 @@ const StzhSection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Variant */
     this.variant = "default";
   }
   render() {

package/dist/components/stzh-share.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhShare extends Components.StzhShare, HTMLElement {}
+export const StzhShare: {
+  prototype: StzhShare;
+  new (): StzhShare;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-share.js

@@ -0,0 +1,6 @@
+import { S as StzhShare$1, d as defineCustomElement$1 } from './stzh-share2.js';
+
+const StzhShare = StzhShare$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhShare, defineCustomElement };

package/dist/components/stzh-share2.js

@@ -0,0 +1,139 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as fetchTranslations } from './translation-utils.js';
+import { d as defineCustomElement$2 } from './stzh-icon2.js';
+import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
+
+const stzhShareCss = ".sc-stzh-share-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-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:-ms-flexbox;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-small)}.stzh-share__icon.sc-stzh-share{--size:var(--stzh-icon-size-xsmall)}.stzh-share__button.sc-stzh-share{color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius);display:grid;place-items:center;width:2.875rem;height:1.625rem}.stzh-share__button.is-facebook.sc-stzh-share{background-color:#3b5998}.stzh-share__button.is-facebook.sc-stzh-share:hover{background-color:#23355B}.stzh-share__button.is-twitter.sc-stzh-share{background-color:#1da1f2}.stzh-share__button.is-twitter.sc-stzh-share:hover{background-color:#116091}.stzh-share__button.is-linkedin.sc-stzh-share{background-color:#1485BD}.stzh-share__button.is-linkedin.sc-stzh-share:hover{background-color:#0C4F71}.stzh-share__button.is-xing.sc-stzh-share{background-color:#0E7574}.stzh-share__button.is-xing.sc-stzh-share:hover{background-color:#084645}.stzh-share__button.is-mail.sc-stzh-share{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-share__button.is-mail.sc-stzh-share:hover{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+
+const abbreviateText = function (text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+};
+// returns content of <meta name="" content=""> tags or '' if empty/non existant
+const getMeta = function (name) {
+  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
+  return meta ? meta.getAttribute("content") : "";
+};
+const StzhShare = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._services = [];
+    this.openPopup = (url, event) => {
+      event.preventDefault();
+      window.open(url, "_blank", "width=600,height=460");
+    };
+    this.localization = undefined;
+    this.url = window.location.href;
+    this.services = [
+      "facebook", "twitter", "linkedin", "xing", "mail"
+    ];
+  }
+  servicesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._services = JSON.parse(newValue);
+    }
+    else {
+      this._services = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.servicesWatcher(this.services);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "share");
+    }
+  }
+  render() {
+    var _a;
+    const classes = {
+      "stzh-share": true
+    };
+    const shareUrl = encodeURIComponent(this.url);
+    const mailSubject = encodeURIComponent(this.localization.mailSubject);
+    const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
+    const title = encodeURIComponent(document.title);
+    const description = encodeURIComponent(getMeta("description"));
+    // 280 - URL (always 24) = 256
+    const maxTweetLength = 256;
+    const serviceData = {
+      "facebook": {
+        popup: true,
+        blank: true,
+        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
+        text: this.localization.shareFacebook,
+        icon: "facebook"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter"
+      },
+      "linkedin": {
+        popup: true,
+        blank: true,
+        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
+        text: this.localization.shareLinkedin,
+        icon: "linkedin"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail"
+      }
+    };
+    return (h(Host, null, h("div", { class: classes }, h("ul", { class: "stzh-share__list" }, this._services.map((service) => h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text }, h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "services": ["servicesWatcher"]
+  }; }
+  static get style() { return stzhShareCss; }
+}, [2, "stzh-share", {
+    "localization": [16],
+    "url": [1],
+    "services": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-share", "stzh-icon", "stzh-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-share":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhShare);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhShare as S, defineCustomElement as d };

package/dist/components/stzh-skiplink.js

@@ -6,7 +6,9 @@ const StzhSkiplink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /** Whether the skiplink is currently focused */
+    this.href = undefined;
+    this.linkAccesskey = undefined;
+    this.linkTitle = undefined;
     this.focused = false;
   }
   focusinHandler() {

package/dist/components/stzh-sortable2.js

@@ -3867,35 +3867,6 @@ const StzhSortable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.stzhUpdate = createEvent(this, "stzhUpdate", 7);
     this.stzhDisable = createEvent(this, "stzhDisable", 7);
-    /** Wether sorting is disabled or not */
-    this.disabled = false;
-    /** HTML attribute that is used by the `toArray()` method */
-    this.dataIdAttribute = "data-id";
-    /** Container  */
-    this.container = () => {
-      var _a;
-      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    };
-    /** Algorithm how the ghost element will be cloned */
-    this.ghostClone = (dragElement) => {
-      const [clonedElement] = cloneElement(dragElement);
-      return clonedElement;
-    };
-    /** Filtered elements that should prevent dragging inside the drag item elements */
-    this.filterElements = [
-      "[data-stzh-sortable-filtered]",
-      "[sortable-disabled]",
-      "button",
-      "a[href]",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      "iframe",
-      "details",
-      "area",
-      "stzh-sortable"
-    ];
     this.selectedItem = null;
     this.resetItemOnBlur = false;
     this.init = () => {
@@ -3991,6 +3962,31 @@ const StzhSortable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.resetActiveItem();
       }
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.dataIdAttribute = "data-id";
+    this.container = () => {
+      var _a;
+      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    };
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
+    this.filterElements = [
+      "[data-stzh-sortable-filtered]",
+      "[sortable-disabled]",
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "label",
+      "iframe",
+      "details",
+      "area",
+      "stzh-sortable"
+    ];
   }
   /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
   async toArray() {

package/dist/components/stzh-status2.js

@@ -6,13 +6,9 @@ const StzhStatus = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show loadingbar */
     this.withLoadingbar = false;
-    /** Label */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

package/dist/components/stzh-sticky.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhSticky extends Components.StzhSticky, HTMLElement {}
+export const StzhSticky: {
+  prototype: StzhSticky;
+  new (): StzhSticky;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-sticky.js

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const stzhStickyCss = ".sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem}[disable-sticky-top].sc-stzh-sticky-h:not([disable-sticky-top=false]){top:auto}[disable-sticky-bottom].sc-stzh-sticky-h:not([disable-sticky-bottom=false]){bottom:auto}.stzh-sticky.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky.sc-stzh-sticky::before,.stzh-sticky.sc-stzh-sticky::after{content:\"\";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky--is-stuck.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky::after{opacity:1}";
+
+const StzhSticky$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhStuckTop = createEvent(this, "stzhStuckTop", 7);
+    this.stzhStuckBottom = createEvent(this, "stzhStuckBottom", 7);
+    this.observe = ([entry]) => {
+      this.updateStuck(entry.target);
+    };
+    this.disableStickyTop = false;
+    this.disableStickyBottom = false;
+    this.isStuckTop = false;
+    this.isStuckBottom = false;
+  }
+  disableStickyWatcher() {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.updateStuck(this.element);
+      });
+    });
+  }
+  isStuckTopWatcher(newValue) {
+    this.stzhStuckTop.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  isStuckBottomWatcher(newValue) {
+    this.stzhStuckBottom.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  updateStuck(element) {
+    const topCss = parseInt(getComputedStyle(element).top, 10);
+    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
+    const rect = element.getBoundingClientRect();
+    if (topCss) {
+      this.isStuckTop = rect.top < 0;
+    }
+    else {
+      this.isStuckTop = false;
+    }
+    if (bottomCss) {
+      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;
+    }
+    else {
+      this.isStuckBottom = false;
+    }
+  }
+  connectedCallback() {
+    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+    this.observer.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-sticky": true,
+      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck-top": this.isStuckTop,
+      "stzh-sticky--is-stuck-bottom": this.isStuckBottom
+    };
+    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disableStickyTop": ["disableStickyWatcher"],
+    "disableStickyBottom": ["disableStickyWatcher"],
+    "isStuckTop": ["isStuckTopWatcher"],
+    "isStuckBottom": ["isStuckBottomWatcher"]
+  }; }
+  static get style() { return stzhStickyCss; }
+}, [6, "stzh-sticky", {
+    "disableStickyTop": [516, "disable-sticky-top"],
+    "disableStickyBottom": [516, "disable-sticky-bottom"],
+    "isStuckTop": [32],
+    "isStuckBottom": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-sticky"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-sticky":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhSticky$1);
+      }
+      break;
+  } });
+}
+
+const StzhSticky = StzhSticky$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhSticky, defineCustomElement };