@oiz/stzh-components 2.0.0 → 2.1.0-beta

package/dist/components/stzh-actions.js

@@ -7,10 +7,6 @@ const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Variant determining what position the action buttons are */
-    this.variant = "form";
-    /** With border separator */
-    this.withBorder = false;
     this.init = () => {
       const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
       const buttons = this.element.querySelectorAll('stzh-button');
@@ -23,6 +19,8 @@ const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         button.setAttribute("role", "listitem");
       });
     };
+    this.variant = "form";
+    this.withBorder = false;
   }
   connectedCallback() {
     this.init();

package/dist/components/stzh-actionset2.js

@@ -16,22 +16,12 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
-    /** Variant determining what position the action buttons are */
-    this.variant = "stack";
-    /** Popover button variant */
-    this.popoverButtonVariant = "";
-    /** Popover button size */
-    this.popoverButtonSize = "";
-    /** Popover placement */
-    this.popoverPlacement = "bottom-end";
-    /** Card header actions */
-    this.actions = [];
     this._actions = [];
-    this.actionsCollapsed = [];
-    this.actionClick = (action) => {
+    this.actionClick = (action, originalEvent) => {
       this.stzhActionClick.emit({
         component: "stzh-actionset",
-        action
+        action,
+        originalEvent
       });
     };
     this.update = () => {
@@ -84,6 +74,16 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       this.actionsCollapsed = this._actions.slice(newActionsVisible);
     };
+    this.localization = undefined;
+    this.variant = "stack";
+    this.popoverButtonVariant = "";
+    this.popoverButtonSize = "";
+    this.popoverPlacement = "bottom-end";
+    this.actions = [];
+    this.actionsCollapsed = [];
+    this.dynamicActions = undefined;
+    this.isSmall = undefined;
+    this.isMedium = undefined;
   }
   actionsWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -125,7 +125,7 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         ? action.variant
         : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
         ? action.size
-        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }, h("span", { class: {
       // "show-medium": action.onlyCollapseText,
       // "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)));
@@ -147,7 +147,7 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         ? this.localization.furtherActions
         : (!this.isMedium ? this.localization.actions : "") }), h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
       // class="hide-medium show-when-collapsed"
-      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
+      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => { this.actionClick(action, e); }
     }, action.label)))))))));
   }
   get element() { return this; }

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

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

package/dist/components/stzh-anchornav.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './stzh-badge2.js';
+import { d as defineCustomElement$4 } from './stzh-clamp2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-link2.js';
+
+const stzhAnchornavCss = ".sc-stzh-anchornav-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-anchornav-h{display:none}.sc-stzh-anchornav-h *.sc-stzh-anchornav,.sc-stzh-anchornav-h *.sc-stzh-anchornav::before,.sc-stzh-anchornav-h *.sc-stzh-anchornav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-anchornav-h{--columns:1;width:100%}[columns=\"1\"].sc-stzh-anchornav-h{--columns:1}[columns=\"2\"].sc-stzh-anchornav-h{--columns:2}[columns=\"3\"].sc-stzh-anchornav-h{--columns:3}[columns=\"4\"].sc-stzh-anchornav-h{--columns:4}[columns=\"5\"].sc-stzh-anchornav-h{--columns:5}@media screen and (min-width: 600px){[columns-small=\"1\"].sc-stzh-anchornav-h{--columns:1}}@media screen and (min-width: 600px){[columns-small=\"2\"].sc-stzh-anchornav-h{--columns:2}}@media screen and (min-width: 600px){[columns-small=\"3\"].sc-stzh-anchornav-h{--columns:3}}@media screen and (min-width: 600px){[columns-small=\"4\"].sc-stzh-anchornav-h{--columns:4}}@media screen and (min-width: 600px){[columns-small=\"5\"].sc-stzh-anchornav-h{--columns:5}}@media screen and (min-width: 800px){[columns-smallheader=\"1\"].sc-stzh-anchornav-h{--columns:1}}@media screen and (min-width: 800px){[columns-smallheader=\"2\"].sc-stzh-anchornav-h{--columns:2}}@media screen and (min-width: 800px){[columns-smallheader=\"3\"].sc-stzh-anchornav-h{--columns:3}}@media screen and (min-width: 800px){[columns-smallheader=\"4\"].sc-stzh-anchornav-h{--columns:4}}@media screen and (min-width: 800px){[columns-smallheader=\"5\"].sc-stzh-anchornav-h{--columns:5}}@media screen and (min-width: 1024px){[columns-medium=\"1\"].sc-stzh-anchornav-h{--columns:1}}@media screen and (min-width: 1024px){[columns-medium=\"2\"].sc-stzh-anchornav-h{--columns:2}}@media screen and (min-width: 1024px){[columns-medium=\"3\"].sc-stzh-anchornav-h{--columns:3}}@media screen and (min-width: 1024px){[columns-medium=\"4\"].sc-stzh-anchornav-h{--columns:4}}@media screen and (min-width: 1024px){[columns-medium=\"5\"].sc-stzh-anchornav-h{--columns:5}}@media screen and (min-width: 1260px){[columns-large=\"1\"].sc-stzh-anchornav-h{--columns:1}}@media screen and (min-width: 1260px){[columns-large=\"2\"].sc-stzh-anchornav-h{--columns:2}}@media screen and (min-width: 1260px){[columns-large=\"3\"].sc-stzh-anchornav-h{--columns:3}}@media screen and (min-width: 1260px){[columns-large=\"4\"].sc-stzh-anchornav-h{--columns:4}}@media screen and (min-width: 1260px){[columns-large=\"5\"].sc-stzh-anchornav-h{--columns:5}}@media screen and (min-width: 1440px){[columns-ultra=\"1\"].sc-stzh-anchornav-h{--columns:1}}@media screen and (min-width: 1440px){[columns-ultra=\"2\"].sc-stzh-anchornav-h{--columns:2}}@media screen and (min-width: 1440px){[columns-ultra=\"3\"].sc-stzh-anchornav-h{--columns:3}}@media screen and (min-width: 1440px){[columns-ultra=\"4\"].sc-stzh-anchornav-h{--columns:4}}@media screen and (min-width: 1440px){[columns-ultra=\"5\"].sc-stzh-anchornav-h{--columns:5}}.stzh-anchornav.sc-stzh-anchornav{-moz-column-count:var(--columns);-webkit-column-count:var(--columns);column-count:var(--columns)}.stzh-anchornav__list.sc-stzh-anchornav{margin:calc(var(--stzh-space-xxsmall) / -2)}.stzh-anchornav__item.sc-stzh-anchornav{padding:calc(var(--stzh-space-xxsmall))}.stzh-anchornav--has-border.sc-stzh-anchornav{padding:calc(var(--stzh-space-small)) 0;border-top:0.0625rem solid var(--stzh-base-border-color);border-bottom:0.0625rem solid var(--stzh-base-border-color)}";
+
+const StzhAnchornav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhItemClick = createEvent(this, "stzhItemClick", 7);
+    this.columns = 1;
+    this.columnsSmall = 0;
+    this.columnsMedium = 0;
+    this.columnsLarge = 0;
+    this.columnsUltra = 0;
+    this.items = [];
+    this.withBorder = false;
+  }
+  appointmentsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  handleClick(item, originalEvent) {
+    this.stzhItemClick.emit({
+      component: "stzh-anchornav",
+      item,
+      originalEvent
+    });
+  }
+  async componentWillLoad() {
+    this.appointmentsWatcher(this.items);
+  }
+  render() {
+    const classes = {
+      "stzh-anchornav": true,
+      "stzh-anchornav--has-border": this.withBorder
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "angle-right", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
+  }
+  static get watchers() { return {
+    "items": ["appointmentsWatcher"]
+  }; }
+  static get style() { return stzhAnchornavCss; }
+}, [2, "stzh-anchornav", {
+    "columns": [514],
+    "columnsSmall": [514, "columns-small"],
+    "columnsMedium": [514, "columns-medium"],
+    "columnsLarge": [514, "columns-large"],
+    "columnsUltra": [514, "columns-ultra"],
+    "items": [1],
+    "withBorder": [516, "with-border"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-anchornav", "stzh-badge", "stzh-clamp", "stzh-icon", "stzh-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-anchornav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhAnchornav$1);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhAnchornav = StzhAnchornav$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhAnchornav, defineCustomElement };

package/dist/components/stzh-appnav.js

@@ -7,12 +7,6 @@ const StzhAppnav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** App title shown on tablet/desktop */
-    this.appTitle = "";
-    /** Status displayed next to app title (only displayed if `app-title` is defined) */
-    this.appStatus = "";
-    /** Link of app title (only used if `app-title` is defined) */
-    this.appHref = "";
     this.init = () => {
       const links = this.element.querySelectorAll("stzh-link");
       links.forEach((link) => {
@@ -23,6 +17,9 @@ const StzhAppnav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         link.setAttribute("role", "listitem");
       });
     };
+    this.appTitle = "";
+    this.appStatus = "";
+    this.appHref = "";
   }
   connectedCallback() {
     this.init();

package/dist/components/stzh-appointments.js

@@ -21,22 +21,6 @@ const StzhAppointments$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     super();
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /** Sort by */
-    this.sortBy = "start";
-    /** Initial selected values */
-    this.appointments = [];
-    /* Selected appointment by value */
-    this.value = "";
-    /* Name of radiogroup form element */
-    this.name = "appointment";
-    /** Nr of items shown */
-    this.showItems = 5;
-    /** Nr of items shown when more link is clicked */
-    this.stepItems = 5;
-    /** Overwrite default calendar title */
-    this.calendarTitle = "";
-    /** Overwrite default appointments title */
-    this.appointmentsTitle = "";
     this.showMoreLink = false;
     this.moreItemsLeft = 0;
     this.showCalendar = false;
@@ -91,6 +75,17 @@ const StzhAppointments$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
         value: this.value
       });
     };
+    this.localization = undefined;
+    this.sortBy = "start";
+    this.appointments = [];
+    this.currentDate = undefined;
+    this.value = "";
+    this.name = "appointment";
+    this.showItems = 5;
+    this.stepItems = 5;
+    this.calendarTitle = "";
+    this.appointmentsTitle = "";
+    this.dateAdapter = undefined;
   }
   currentDateWatcher(newValue) {
     if (!newValue) {

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

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