npm - @oiz/stzh-components - Versions diffs - 1.4.0-npmjstest → 2.0.0-beta - Mend

@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (477) hide show

package/dist/collection/pages/meinkonto.stories.js CHANGED Viewed

@@ -10,6 +10,41 @@ export default {
   }
 };
+const actions = `[
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+const actions2 = `[
+  {
+    "id": "add",
+    "icon": "plus",
+    "label": "Add address"
+  },
+  {
+    "id": "edit",
+    "icon": "edit",
+    "label": "Edit"
+  },
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Remove"
+  },
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
 const TemplateServices = (args) => (
   <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
     <stzh-visuallyhidden>
@@ -135,97 +170,67 @@ const TemplateServices = (args) => (
         <stzh-vspace curve="large"></stzh-vspace>
-        <stzh-servicecard-list show-toggle-link>
+        <stzh-card-list show-toggle-link>
           <stzh-text slot="description">
             Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
           </stzh-text>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 1"
-            subtitle="Dolor si 1"
-            actions='[
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 2"
-            subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]'
-            subtitle-interactive
-            actions='[
-              {
-                "id": "add",
-                "icon": "plus",
-                "label": "Add address"
-              },
-              {
-                "id": "edit",
-                "icon": "edit",
-                "label": "Edit"
-              },
-              {
-                "id": "delete",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <table slot="middle">
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-            </table>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-            <div slot="left">Content Left</div>
-            <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-            <stzh-popover slot="right">
-              <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-              <stzh-menu slot="content">
-                <stzh-menu-item label="Test"></stzh-menu-item>
-              </stzh-menu>
-            </stzh-popover>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-            <div slot="left">Content Left</div>
-            <stzh-section slot="middle">
-              Content Middle Section 1
-            </stzh-section>
-            <stzh-section slot="middle">
-              Content Middle Section 2
-            </stzh-section>
-            <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-          </stzh-servicecard>
-        </stzh-servicecard-list>
+          <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+            <stzh-row slot="content" span-small="6">
+              <stzh-cell>
+                <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 1",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Really Long Label",
+                      "value": "Value 2",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 3",
+                      "meta": "Metainfo"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+              <stzh-cell>
+              <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 4",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 5",
+                      "icon": "delete",
+                      "href": "http://example.com"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+            </stzh-row>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 4">
+            <stzh-cspace slot="content">
+              <p>Content with Input:</p>
+              <stzh-input></stzh-input>
+              <stzh-button label="Button Right" fullwidth></stzh-button>
+            </stzh-cspace>
+          </stzh-card>
+        </stzh-card-list>
       </stzh-container>
       <stzh-vspace curve="big"></stzh-vspace>

package/dist/collection/utils/utils.js CHANGED Viewed

@@ -39,3 +39,42 @@ export function setPropsIfNull(element, attributes) {
     }
   });
 }
+export function isStzhElement(element) {
+  if (!element) {
+    return false;
+  }
+  return element.tagName.toLowerCase().indexOf('stzh-') === 0;
+}
+// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom) and potentially wrapped in normal elements (e.g. angular component)
+export function cloneElement(elementToClone) {
+  let clonedElement;
+  let clonedStzhElement;
+  let originalStzhElement;
+  if (isStzhElement(elementToClone)) {
+    clonedElement = elementToClone.cloneNode(true);
+    clonedStzhElement = clonedElement;
+    originalStzhElement = elementToClone;
+  }
+  else {
+    clonedElement = elementToClone.cloneNode();
+    let clonedInnerElementLast = clonedElement;
+    let originalInnerElementLast = elementToClone;
+    // clone inner root elements separately until we find a stzh element
+    while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {
+      originalInnerElementLast = originalInnerElementLast.children[0];
+      const clonedInnerElementCurrent = originalInnerElementLast.cloneNode();
+      clonedInnerElementLast.appendChild(clonedInnerElementCurrent);
+      clonedInnerElementLast = clonedInnerElementCurrent;
+    }
+    if (isStzhElement(originalInnerElementLast.children[0])) {
+      clonedStzhElement = originalInnerElementLast.children[0].cloneNode(true);
+      originalStzhElement = originalInnerElementLast.children[0];
+      clonedInnerElementLast.appendChild(clonedStzhElement);
+    }
+    else {
+      // no root stzh element found, so we give up and just deep clone the root
+      clonedElement = elementToClone.cloneNode(true);
+    }
+  }
+  return [clonedElement, clonedStzhElement, originalStzhElement];
+}

package/dist/components/index.d.ts CHANGED Viewed

@@ -2,11 +2,14 @@
 export { StzhAccordion as StzhAccordion } from '../types/components/stzh-accordion/stzh-accordion';
 export { StzhAccordionItem as StzhAccordionItem } from '../types/components/stzh-accordion-item/stzh-accordion-item';
 export { StzhActions as StzhActions } from '../types/components/stzh-actions/stzh-actions';
+export { StzhActionset as StzhActionset } from '../types/components/stzh-actionset/stzh-actionset';
 export { StzhAppnav as StzhAppnav } from '../types/components/stzh-appnav/stzh-appnav';
 export { StzhAppointments as StzhAppointments } from '../types/components/stzh-appointments/stzh-appointments';
 export { StzhBadge as StzhBadge } from '../types/components/stzh-badge/stzh-badge';
 export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-button';
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
+export { StzhCard as StzhCard } from '../types/components/stzh-card/stzh-card';
+export { StzhCardList as StzhCardList } from '../types/components/stzh-card-list/stzh-card-list';
 export { StzhCell as StzhCell } from '../types/components/stzh-cell/stzh-cell';
 export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/stzh-checkbox';
 export { StzhCheckboxgroup as StzhCheckboxgroup } from '../types/components/stzh-checkboxgroup/stzh-checkboxgroup';
@@ -14,6 +17,7 @@ export { StzhChip as StzhChip } from '../types/components/stzh-chip/stzh-chip';
 export { StzhChipSelect as StzhChipSelect } from '../types/components/stzh-chip-select/stzh-chip-select';
 export { StzhContainer as StzhContainer } from '../types/components/stzh-container/stzh-container';
 export { StzhCspace as StzhCspace } from '../types/components/stzh-cspace/stzh-cspace';
+export { StzhDatalist as StzhDatalist } from '../types/components/stzh-datalist/stzh-datalist';
 export { StzhDatamessagelist as StzhDatamessagelist } from '../types/components/stzh-datamessagelist/stzh-datamessagelist';
 export { StzhDatamessagelistItem as StzhDatamessagelistItem } from '../types/components/stzh-datamessagelist-item/stzh-datamessagelist-item';
 export { StzhDatatable as StzhDatatable } from '../types/components/stzh-datatable/stzh-datatable';
@@ -55,8 +59,6 @@ export { StzhRichtext as StzhRichtext } from '../types/components/stzh-richtext/
 export { StzhRow as StzhRow } from '../types/components/stzh-row/stzh-row';
 export { StzhSaptcha as StzhSaptcha } from '../types/components/stzh-saptcha/stzh-saptcha';
 export { StzhSection as StzhSection } from '../types/components/stzh-section/stzh-section';
-export { StzhServicecard as StzhServicecard } from '../types/components/stzh-servicecard/stzh-servicecard';
-export { StzhServicecardList as StzhServicecardList } from '../types/components/stzh-servicecard-list/stzh-servicecard-list';
 export { StzhSkiplink as StzhSkiplink } from '../types/components/stzh-skiplink/stzh-skiplink';
 export { StzhSortable as StzhSortable } from '../types/components/stzh-sortable/stzh-sortable';
 export { StzhStatus as StzhStatus } from '../types/components/stzh-status/stzh-status';

package/dist/components/index.js CHANGED Viewed

@@ -2,11 +2,14 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { StzhAccordion, defineCustomElement as defineCustomElementStzhAccordion } from './stzh-accordion.js';
 export { StzhAccordionItem, defineCustomElement as defineCustomElementStzhAccordionItem } from './stzh-accordion-item.js';
 export { StzhActions, defineCustomElement as defineCustomElementStzhActions } from './stzh-actions.js';
+export { StzhActionset, defineCustomElement as defineCustomElementStzhActionset } from './stzh-actionset.js';
 export { StzhAppnav, defineCustomElement as defineCustomElementStzhAppnav } from './stzh-appnav.js';
 export { StzhAppointments, defineCustomElement as defineCustomElementStzhAppointments } from './stzh-appointments.js';
 export { StzhBadge, defineCustomElement as defineCustomElementStzhBadge } from './stzh-badge.js';
 export { StzhButton, defineCustomElement as defineCustomElementStzhButton } from './stzh-button.js';
 export { StzhCalendar, defineCustomElement as defineCustomElementStzhCalendar } from './stzh-calendar.js';
+export { StzhCard, defineCustomElement as defineCustomElementStzhCard } from './stzh-card.js';
+export { StzhCardList, defineCustomElement as defineCustomElementStzhCardList } from './stzh-card-list.js';
 export { StzhCell, defineCustomElement as defineCustomElementStzhCell } from './stzh-cell.js';
 export { StzhCheckbox, defineCustomElement as defineCustomElementStzhCheckbox } from './stzh-checkbox.js';
 export { StzhCheckboxgroup, defineCustomElement as defineCustomElementStzhCheckboxgroup } from './stzh-checkboxgroup.js';
@@ -14,6 +17,7 @@ export { StzhChip, defineCustomElement as defineCustomElementStzhChip } from './
 export { StzhChipSelect, defineCustomElement as defineCustomElementStzhChipSelect } from './stzh-chip-select.js';
 export { StzhContainer, defineCustomElement as defineCustomElementStzhContainer } from './stzh-container.js';
 export { StzhCspace, defineCustomElement as defineCustomElementStzhCspace } from './stzh-cspace.js';
+export { StzhDatalist, defineCustomElement as defineCustomElementStzhDatalist } from './stzh-datalist.js';
 export { StzhDatamessagelist, defineCustomElement as defineCustomElementStzhDatamessagelist } from './stzh-datamessagelist.js';
 export { StzhDatamessagelistItem, defineCustomElement as defineCustomElementStzhDatamessagelistItem } from './stzh-datamessagelist-item.js';
 export { StzhDatatable, defineCustomElement as defineCustomElementStzhDatatable } from './stzh-datatable.js';
@@ -55,8 +59,6 @@ export { StzhRichtext, defineCustomElement as defineCustomElementStzhRichtext }
 export { StzhRow, defineCustomElement as defineCustomElementStzhRow } from './stzh-row.js';
 export { StzhSaptcha, defineCustomElement as defineCustomElementStzhSaptcha } from './stzh-saptcha.js';
 export { StzhSection, defineCustomElement as defineCustomElementStzhSection } from './stzh-section.js';
-export { StzhServicecard, defineCustomElement as defineCustomElementStzhServicecard } from './stzh-servicecard.js';
-export { StzhServicecardList, defineCustomElement as defineCustomElementStzhServicecardList } from './stzh-servicecard-list.js';
 export { StzhSkiplink, defineCustomElement as defineCustomElementStzhSkiplink } from './stzh-skiplink.js';
 export { StzhSortable, defineCustomElement as defineCustomElementStzhSortable } from './stzh-sortable.js';
 export { StzhStatus, defineCustomElement as defineCustomElementStzhStatus } from './stzh-status.js';
@@ -72,7 +74,9 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 const name = "@oiz/stzh-components";
-const version = "1.4.0-npmjstest";
+const version = "2.0.0-beta";
+const packageName = name.substring(name.indexOf('/')+1);
 /**
  * Execute setFocus method if it exists
@@ -84,7 +88,7 @@ function applyAutofocus() {
     const autofocus = document.querySelector('[autofocus]');
     if (autofocus
-        && event.detail.namespace === name
+        && event.detail.namespace === packageName
         && autofocus.tagName.toLowerCase().indexOf('stzh-') === 0
         && 'setFocus' in autofocus
     ) {
@@ -115,7 +119,7 @@ function observeScrollbarWidth() {
 }
 function appGlobalScript () {
-  window.stzhComponents = Object.assign({ version, labels: 'flyout', cacheTranslations: true, pathTranslations: '/', formats: {} }, window.stzhComponents || {});
+  window.stzhComponents = Object.assign({ version, labels: 'fixed', cacheTranslations: true, pathTranslations: '/', formats: {} }, window.stzhComponents || {});
   applyAutofocus();
   observeScrollbarWidth();
 }

package/dist/components/{stzh-servicecard.d.ts → stzh-actionset.d.ts} RENAMED Viewed

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
-interface StzhServicecard extends Components.StzhServicecard, HTMLElement {}
-export const StzhServicecard: {
-  prototype: StzhServicecard;
-  new (): StzhServicecard;
+interface StzhActionset extends Components.StzhActionset, HTMLElement {}
+export const StzhActionset: {
+  prototype: StzhActionset;
+  new (): StzhActionset;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/stzh-actionset.js ADDED Viewed

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

package/dist/components/stzh-actionset2.js ADDED Viewed

@@ -0,0 +1,227 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as fetchTranslations } from './translation-utils.js';
+import { m as media } from './media-utils.js';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-button2.js';
+import { d as defineCustomElement$5 } from './stzh-icon2.js';
+import { d as defineCustomElement$4 } from './stzh-menu2.js';
+import { d as defineCustomElement$3 } from './stzh-menu-item2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
+const stzhActionsetCss = ".sc-stzh-actionset-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-actionset-h{display:none}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-actionset__actions.sc-stzh-actionset{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto;opacity:1}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover.sc-stzh-actionset{display:none}}";
+const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    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.stzhActionClick.emit({
+        component: "stzh-actionset",
+        action
+      });
+    };
+    this.update = () => {
+      this.isSmall = media("small").matches;
+      this.isMedium = media("medium").matches;
+      if (!this.actionsElement) {
+        return;
+      }
+      Object.assign(this.actionsElement.style, {
+        width: null,
+        height: null
+      });
+      let newActionsVisible = 0;
+      if (this.variant === "overflow" && this.isMedium
+        || this.variant === "stack" && this.isSmall) {
+        this.dynamicActions = true;
+        let newActionsHeight = 0;
+        let newActionsWidth = 0;
+        // update height and width
+        Array.from(this.actionsElement.children).forEach((child) => {
+          // check which item is visible and
+          if (child.offsetTop === 0) {
+            newActionsVisible++;
+            const style = getComputedStyle(child);
+            const marginLeft = parseInt(style.marginLeft);
+            const marginRight = parseInt(style.marginRight);
+            const marginTop = parseInt(style.marginTop);
+            const marginBottom = parseInt(style.marginBottom);
+            const childWidth = child.offsetWidth + marginLeft + marginRight;
+            const childHeight = child.offsetHeight + marginTop + marginBottom;
+            if (newActionsHeight < childHeight) {
+              newActionsHeight = childHeight;
+            }
+            newActionsWidth = newActionsWidth + childWidth;
+          }
+        });
+        Object.assign(this.actionsElement.style, {
+          width: `${newActionsWidth + 1}px`,
+          height: `${newActionsHeight}px`
+        });
+      }
+      else {
+        this.dynamicActions = false;
+        if (this.variant === "overflow") {
+          newActionsVisible = 0;
+        }
+        else if (this.variant === "stack") {
+          newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
+        }
+      }
+      this.actionsCollapsed = this._actions.slice(newActionsVisible);
+    };
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  // handleLoad(e) {
+  //   console.log(e);
+  //   requestAnimationFrame(() => {
+  //   requestAnimationFrame(() => {
+  //     this.update();
+  //   });
+  //   });
+  // }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  async componentWillLoad() {
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "actionset");
+    }
+  }
+  componentDidLoad() {
+    this.update();
+  }
+  render() {
+    const classes = {
+      "stzh-actionset": true,
+      // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
+      "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
+      [`stzh-actionset--${this.variant}`]: !!this.variant
+    };
+    const Action = (action) => (h("stzh-button", { class: {
+        "stzh-actionset__action": true,
+        "is-button": true,
+        // "show-medium": !action.onlyCollapseText,
+        // "hide-when-collapsed": !action.onlyCollapseText,
+        // "hide-text-when-collapsed": action.onlyCollapseText
+      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+        ? 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: {
+      // "show-medium": action.onlyCollapseText,
+      // "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)));
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+      || (!this.dynamicActions &&
+        this.actionsCollapsed.indexOf(action) === -1))
+      &&
+        (action.tooltipContent
+          ?
+            h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
+          :
+            Action(action))))), h("stzh-popover", { label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+        ? this.popoverButtonVariant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
+        ? this.popoverButtonSize
+        : (this.variant === "stack" ? "default" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
+        ? 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, onClick: () => { this.actionClick(action); }
+    }, action.label)))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "actions": ["actionsWatcher"]
+  }; }
+  static get style() { return stzhActionsetCss; }
+}, [2, "stzh-actionset", {
+    "localization": [16],
+    "variant": [513],
+    "popoverButtonVariant": [513, "popover-button-variant"],
+    "popoverButtonSize": [513, "popover-button-size"],
+    "popoverPlacement": [513, "popover-placement"],
+    "actions": [1],
+    "actionsCollapsed": [32],
+    "dynamicActions": [32],
+    "isSmall": [32],
+    "isMedium": [32]
+  }, [[8, "appload", "handleResize"], [9, "resize", "handleResize"], [8, "DOMContentLoaded", "handleResize"], [8, "load", "handleResize"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-actionset", "stzh-badge", "stzh-button", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-actionset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhActionset);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+export { StzhActionset as S, defineCustomElement as d };