@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/vscode-data.json

@@ -272,6 +272,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "label-hidden",
+          "description": "Whether label is hidden."
+        },
         {
           "name": "max-value",
           "description": "The highest allowed amount."
@@ -1531,7 +1535,16 @@
         "kind": "markdown",
         "value": "The STZH cspace component.\n\nApply all the default collapsible spacings for slotted elements. See the [spacings docs page](/docs/tokens-spacings--docs#spacings) for more information.\n\n```html\n<stzh-cspace>\n  <stzh-heading>Heading</stzh-heading>\n  <stzh-text>Lorem ipsum</stzh-text>\n  <stzh-figure>\n    <img src=\"media/images/example.jpg\" loading=\"lazy\" />\n  </stzh-figure>\n  <stzh-heading level=\"2\">Heading<stzh-heading>\n  // note: use \"no-cspace-top\" to disable top margin\n  // or \"no-cspace-bottom\" to disable bottom margin if needed\n  <stzh-button no-cspace-top no-cspace-bottom>Test</stzh-button>\n  ...\n</stzh-cspace>\n```"
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "remove-first-margin",
+          "description": "Whether first top margin of first child component should be set to 0."
+        },
+        {
+          "name": "remove-last-margin",
+          "description": "Whether last bottom margin of last child component should be set to 0."
+        }
+      ]
     },
     {
       "name": "stzh-datalist",
@@ -1736,7 +1749,7 @@
         },
         {
           "name": "value",
-          "description": "Value"
+          "description": "Value (or use value slot instead)"
         }
       ]
     },
@@ -1836,10 +1849,22 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "page",
+          "description": "Current page"
+        },
+        {
+          "name": "page-size",
+          "description": "If pagination should be shown, set a number of items to be shown by each page."
+        },
         {
           "name": "rows",
           "description": "Rows"
         },
+        {
+          "name": "show-list",
+          "description": "Whether to show table data as list on mikro breakpoint"
+        },
         {
           "name": "sort-by",
           "description": "Sort by given column key"
@@ -1919,6 +1944,10 @@
           "name": "label",
           "description": "Label for input field and popover"
         },
+        {
+          "name": "label-hidden",
+          "description": "Whether label is visually hidden."
+        },
         {
           "name": "name",
           "description": "Name of the hidden date picker input."
@@ -2098,6 +2127,10 @@
           "name": "label-field",
           "description": "The name of the property to render as an option / item label (not needed when custom rendering functions are defined)."
         },
+        {
+          "name": "label-hidden",
+          "description": "Whether label should be visually hidden."
+        },
         {
           "name": "load-throttle",
           "description": "The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression."
@@ -2963,6 +2996,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "label-hidden",
+          "description": "Whether label should be visually hidden."
+        },
         {
           "name": "max",
           "description": "If input type is number, this will be the maximum step number"
@@ -3831,6 +3868,83 @@
         }
       ]
     },
+    {
+      "name": "stzh-pagination",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH pagination module."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id of the element which describes the input"
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label for dropdown"
+        },
+        {
+          "name": "label-hidden",
+          "description": "Whether label is hidden."
+        },
+        {
+          "name": "name",
+          "description": "Name of the hidden date picker input."
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the element is readonly or not"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "total",
+          "description": "Total pages available."
+        },
+        {
+          "name": "value",
+          "description": "Current page."
+        }
+      ]
+    },
     {
       "name": "stzh-popover",
       "description": {
@@ -4225,6 +4339,14 @@
         {
           "name": "external-link-selector",
           "description": "Selector to recognize external link and attach an icon"
+        },
+        {
+          "name": "remove-first-margin",
+          "description": "Whether first top margin of first child should be set to 0."
+        },
+        {
+          "name": "remove-last-margin",
+          "description": "Whether last bottom margin of last child should be set to 0."
         }
       ]
     },
@@ -4232,7 +4354,7 @@
       "name": "stzh-row",
       "description": {
         "kind": "markdown",
-        "value": "The STZH row component.\n\nUse cells within the 12 column grid and set their span width.\n\n```html\n<stzh-row span-small=\"6\">\n    <stzh-cell>Cell 1</stzh-cell>\n    <stzh-cell>Cell 2</stzh-cell>\n    <stzh-cell>Cell 3</stzh-cell>\n    <stzh-cell>Cell 4</stzh-cell>\n</stzh-row>\n```"
+        "value": "The STZH row component.\n\nUse cells within the 12 column grid and set their span width.\n\n```html\n<stzh-row span-small=\"6\">\n  <stzh-cell>Cell 1</stzh-cell>\n  <stzh-cell>Cell 2</stzh-cell>\n  <stzh-cell>Cell 3</stzh-cell>\n  <stzh-cell>Cell 4</stzh-cell>\n</stzh-row>\n```"
       },
       "attributes": [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oiz/stzh-components",
-  "version": "2.7.0",
+  "version": "2.8.0-beta",
   "description": "STZH Web Components Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/string-utils-a867b99d.js.map

@@ -1 +0,0 @@
-{"file":"string-utils-a867b99d.js","mappings":";;SAAgB,uBAAuB,CAAC,OAAe;EACrD,MAAM,QAAQ,GAAG,OAAO;KACrB,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;EAElD,OAAO,MAAM,QAAQ,MAAM,CAAC;AAC9B,CAAC;SAEe,SAAS,CAAC,UAAkB;EAC1C,OAAO,UAAU;KACd,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;GAC3B,CAAC,CAAC;AACP;;;;;","names":[],"sources":["./src/utils/string-utils.ts"],"sourcesContent":["export function createParagraphsFromBrs(content: string) {\n  const replaced = content\n    .replace(/^\\s*(?:<br\\s*\\/?>\\s*)*/i, \"\")\n    .replace(/\\s*(?:<br\\s*\\/?>\\s*)*$/i, \"\")\n    .replace(/(?:<br\\s*\\/?>\\s*?){2,}/gi, \"</p><p>\");\n\n  return `<p>${replaced}</p>`;\n}\n\nexport function camelCase(dashString: string) {\n  return dashString\n    .replace(/-([a-z])/g, function (g) {\n      return g[1].toUpperCase();\n    });\n}\n"],"version":3}

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

@@ -1,173 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf651831.js');
-const translationUtils = require('./translation-utils-73073e44.js');
-const mediaUtils = require('./media-utils-8cfc8591.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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.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 (min-width: 1024px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@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 (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhActionClick = index.createEvent(this, "stzhActionClick", 7);
-    this._actions = [];
-    this.actionClick = (action, originalEvent) => {
-      this.stzhActionClick.emit({
-        component: "stzh-actionset",
-        action,
-        originalEvent
-      });
-    };
-    this.update = () => {
-      this.isSmall = mediaUtils.media("small").matches;
-      this.isMedium = mediaUtils.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 + 1;
-          }
-        });
-        Object.assign(this.actionsElement.style, {
-          width: `${newActionsWidth}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);
-    };
-    this.handleResize = () => {
-      if (this.debounceResize) {
-        window.cancelAnimationFrame(this.debounceResize);
-      }
-      this.debounceResize = requestAnimationFrame(this.update);
-    };
-    this.mediaChangeHandler = () => {
-      this.actionsCollapsed = [];
-      requestAnimationFrame(this.update);
-    };
-    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") {
-      this._actions = JSON.parse(newValue);
-    }
-    else {
-      this._actions = newValue;
-    }
-  }
-  async componentWillLoad() {
-    this.actionsWatcher(this.actions);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, "actionset");
-    }
-  }
-  connectedCallback() {
-    mediaUtils.addMediaChangeListener(this.mediaChangeHandler);
-    this.resizeObserver = new ResizeObserver(this.handleResize);
-    this.resizeObserver.observe(this.element);
-  }
-  disconnectedCallback() {
-    mediaUtils.removeMediaChangeListener(this.mediaChangeHandler);
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-  }
-  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) => (index.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
-      }, 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: (e) => { this.actionClick(action, e); } }, index.h("span", { class: {
-      // "show-medium": action.onlyCollapseText,
-      // "hide-when-collapsed": action.onlyCollapseText
-      } }, action.label)));
-    return (index.h(index.Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, index.h("div", { class: classes }, index.h("div", { class: "stzh-actionset__actions", role: "group" }, index.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
-          ?
-            index.h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
-          :
-            Action(action))))), index.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" }, index.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 : "") }), index.h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (index.h("stzh-menu-item", {
-      // class="hide-medium show-when-collapsed"
-      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => { this.actionClick(action, e); }
-    }, action.label)))))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "actions": ["actionsWatcher"]
-  }; }
-};
-StzhActionset.style = stzhActionsetCss;
-
-exports.stzh_actionset = StzhActionset;
-
-//# sourceMappingURL=stzh-actionset.cjs.entry.js.map

package/dist/cjs/stzh-actionset.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-actionset.entry.cjs.js","mappings":"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","names":["media","fetchTranslations","addMediaChangeListener","removeMediaChangeListener","h","Host"],"sources":["./src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","./src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__action-popover {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n    opacity: 1;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {    \n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space('xsmall');\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover {\n    @include mq($to: small) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent\n    });\n  }\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null\n    });\n\n    let newActionsVisible = 0;\n\n    if (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = child.offsetWidth + marginLeft + marginRight;\n          const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth + 1;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  }\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant\n    };\n\n    const Action = (action: StzhActionsetItem) => (\n      <stzh-button\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n          // \"show-medium\": !action.onlyCollapseText,\n          // \"hide-when-collapsed\": !action.onlyCollapseText,\n          // \"hide-text-when-collapsed\": action.onlyCollapseText\n        }}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      >\n        <span\n          class={{\n            // \"show-medium\": action.onlyCollapseText,\n            // \"hide-when-collapsed\": action.onlyCollapseText\n          }}\n        >\n          {action.label}\n        </span>\n      </stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action)}\n                    </stzh-tooltip>\n                    :\n                    Action(action))\n              ))}\n            </div>\n\n            <stzh-popover\n              label={this.variant === \"stack\"\n                ? this.localization.furtherActions\n                : (!this.isMedium ? this.localization.actions : \"\")}\n              strategy=\"fixed\"\n              placement={this.popoverPlacement}\n              class=\"stzh-actionset__action-popover\"\n            >\n              <stzh-button\n                fullwidth\n                disabled={this.actionsCollapsed.length === 0}\n                class=\"stzh-actionset__action is-further\"\n                variant={this.popoverButtonVariant !== \"\"\n                  ? this.popoverButtonVariant\n                  : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                size={this.popoverButtonSize !== \"\"\n                ? this.popoverButtonSize\n                : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n                icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                iconOnly={this.variant === \"overflow\" && this.isMedium}\n                iconPosition=\"right\"\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? this.localization.actions : \"\")}\n              ></stzh-button>\n              <stzh-menu slot=\"content\">\n                {this.actionsCollapsed.map(action => (\n                  <stzh-menu-item\n                    // class=\"hide-medium show-when-collapsed\"\n                    icon={action.icon}\n                    badge={action.badge}\n                    badgeEmpty={action.badgeEmpty}\n                    badgeType={action.badgeType}\n                    onClick={(e) => { this.actionClick(action, e) }}\n                  >\n                    {action.label}\n                  </stzh-menu-item>\n                ))}\n              </stzh-menu>\n            </stzh-popover>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}