@oiz/stzh-components 4.6.0 → 4.7.0

package/dist/collection/components/stzh-cardlist/stzh-cardlist.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -128,8 +127,8 @@ export default {
   title: 'Components/Cardlist',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhCollapseAll']
+    stzhActions: {
+      events: ['stzhCollapseAll']
     },
     layout: 'padded',
     docs: {
@@ -142,8 +141,7 @@ export default {
       url: getFigmaLink('cardlist'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Services = {

package/dist/collection/components/stzh-carousel/stzh-carousel.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -112,8 +111,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'fullscreen',
-    actions: {
-      handles: ['stzhSlideStart', 'stzhSlidePassed', 'stzhSlideEnd']
+    stzhActions: {
+      events: ['stzhSlideStart', 'stzhSlidePassed', 'stzhSlideEnd']
     },
     docs: {
       description: {
@@ -125,8 +124,7 @@ export default {
       url: getFigmaLink('carousel'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-cell/stzh-cell.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 import { fullwidthCentered } from '../../utils/decorators';
 
@@ -18,8 +17,8 @@ export default {
   title: 'Components/Cell',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
+    stzhActions: {
+      events: []
     },
     docs: {
       description: {
@@ -32,7 +31,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [withActions, fullwidthCentered]
+  decorators: [fullwidthCentered]
 };
 
 export const Default = {

package/dist/collection/components/stzh-chart/stzh-chart.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -26,8 +25,7 @@ export default {
       url: getFigmaLink('chart'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 // https://statistikstadtzuerich.github.io/sszvis/#/pie-charts

package/dist/collection/components/stzh-checkbox/stzh-checkbox.stories.js

@@ -1,15 +1,13 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
-import { fireEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect, fireEvent } from 'storybook/test';
 import {
-  getComponentByTestId,
-  setAttributeAndWait,
+  expectCssVarColor,
   expectIsVisible,
-  expectCssVarColor
+  getComponentByTestId,
+  setAttributeAndWait
 } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-checkbox';
@@ -26,8 +24,8 @@ export default {
   title: 'Components/Checkbox',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhChange', 'stzhFocus', 'stzhBlur', 'stzhClick']
     },
     docs: {
       description: {
@@ -39,8 +37,7 @@ export default {
       url: getFigmaLink('checkbox'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.stories.js

@@ -1,15 +1,12 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
-import { userEvent, fireEvent, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 import {
   expectIsVisible,
   getComponentByTestId,
-  setAttributeAndWait,
-  sleep
+  setAttributeAndWait
 } from '../../../.storybook/utils/component-test-utils';
 
 const COMPONENT_NAME = 'stzh-checkboxgroup';
@@ -30,8 +27,8 @@ export default {
   title: 'Components/Checkboxgroup',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange']
+    stzhActions: {
+      events: ['stzhChange', 'stzhClick', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {
@@ -43,8 +40,7 @@ export default {
       url: getFigmaLink('checkboxgroup'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-chip/stzh-chip.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -15,8 +14,8 @@ export default {
   title: 'Components/Chip',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClick', 'stzhRemove', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhClick', 'stzhRemove', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {
@@ -28,8 +27,7 @@ export default {
       url: getFigmaLink('chip'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Filter = {

package/dist/collection/components/stzh-chipgroup/stzh-chipgroup.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -29,8 +28,7 @@ export default {
       url: getFigmaLink('chipgroup'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-chipselect/stzh-chipselect.js

@@ -68,6 +68,9 @@ export class StzhChipselect {
             }
             else if (event.key === " " || event.key === "Enter") {
                 event.preventDefault();
+                if (activeOptionIndex < 0) {
+                    return;
+                }
                 if (this.multiple) {
                     if (this._data[activeOptionIndex].value === "" &&
                         this._value.length > 0 &&
@@ -81,7 +84,7 @@ export class StzhChipselect {
                     }
                 }
                 else {
-                    this.value = this._data[activeOptionIndex].value; //HERE
+                    this.value = this._data[activeOptionIndex].value;
                 }
                 this.stzhChange.emit({
                     component: "stzh-chipselect",
@@ -109,7 +112,7 @@ export class StzhChipselect {
         this.disabled = false;
         this.hideOptional = false;
         this.a11yDescribedby = "";
-        this.activeFocusOptionIndex = 0;
+        this.activeFocusOptionIndex = -1;
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -201,6 +204,8 @@ export class StzhChipselect {
         const descriptionUsed = !!this.description;
         const descriptionLongUsed = !!this.descriptionLong;
         const errorUsed = !!this.error;
+        const hasActive = this.activeFocusOptionIndex >= 0;
+        const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;
         const classes = {
             "stzh-chipselect": true,
             "stzh-chipselect--has-description": descriptionUsed,
@@ -211,11 +216,11 @@ export class StzhChipselect {
             "stzh-chipselect--is-required": this.required,
             "stzh-chipselect--has-label-hidden": this.labelHidden,
         };
-        return (h(Host, { key: '4161021da18b9b06aaff411c28a8d048a1a0a659', "is-invalid": this.invalid || errorUsed }, h("div", { key: '9c94e4c66a743bc31b4c0f2cf1afce3c0317afc8', class: classes }, this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value })), h("label", { key: 'd2d9140d14e7ce3c8c295146a097ec0e0f4ee6dc', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '3ee1dc931d60159ae494e674f84b961fea04430f', class: "stzh-chipselect__marker" }, h("span", { key: '4e6c35a50910032d6172e71dc75d7a6a05977a88', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '5794c7d0e50201f7689bbc19717a02824f9a497d', "is-invalid": this.invalid || errorUsed }, h("div", { key: '769c9167d5548992b626d31faf43a0c272a0f6df', class: classes }, this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value })), h("label", { key: 'b76e3e7c99f4a5c401d76cfbeab4281480ce48bc', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '2c6ca19b9f7b2dcc8284d0c9e469c4caf6f8e11f', class: "stzh-chipselect__marker" }, h("span", { key: '22f350affc68c12f36caf592e41b74e58d822962', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0739ce248173572f67bea5e06a4702b3b8d42a7e', class: "stzh-chipselect__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '7a1e903e7c27dce25bcee7b43cce6f646f4ee5aa', class: "stzh-chipselect__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: '2723bf07f2d8afbf6e725e387df21927d569368d' }, h("div", { key: 'f77d157c0d61bc3c5d96b48e8daaa8a617949864', id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: '1f64a0b097e78a5c9e99fb891c50383c5e4a5f9e' }, h("div", { key: 'e073e45633cf904a6b02058d56d188b3c01d9d15', id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": activeId, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
                 "stzh-chipselect__chip": true,
                 "is-focused": this.activeFocusOptionIndex === index,
             }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value) ||
@@ -228,7 +233,7 @@ export class StzhChipselect {
                     this.multiple &&
                     (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
                 ? "true"
-                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { key: '0f31db7d4069acef9b153764733c59de85335ca2', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))))));
+                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { key: '4f01198867cfdc306856d1e12dea624080276eea', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))))));
     }
     static get is() { return "stzh-chipselect"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-chipselect/stzh-chipselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value; //HERE\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple ? (\n            <Fragment>\n              {this._value.map(value => (\n                <input type=\"hidden\" name={this.name} value={value} />\n              ))}\n            </Fragment>\n          ) : (\n            <input type=\"hidden\" name={this.name} value={this.value} />\n          )}\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n\n          {this._data.length > 0 && (\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index,\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\"\n                        : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = -1;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      \n      if (activeOptionIndex < 0) {\n        return;\n      }\n\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value;\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const hasActive = this.activeFocusOptionIndex >= 0;\n    const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple ? (\n            <Fragment>\n              {this._value.map(value => (\n                <input type=\"hidden\" name={this.name} value={value} />\n              ))}\n            </Fragment>\n          ) : (\n            <input type=\"hidden\" name={this.name} value={this.value} />\n          )}\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n\n          {this._data.length > 0 && (\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={activeId}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index,\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\"\n                        : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-chipselect/stzh-chipselect.stories.js

@@ -1,10 +1,9 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
 import { expectIsVisible, getComponentByTestId } from '../../../.storybook/utils/component-test-utils';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 
 const COMPONENT_NAME = 'stzh-chipselect';
 const story = createComponentStory(COMPONENT_NAME);
@@ -20,8 +19,8 @@ export default {
   title: 'Components/Chipselect',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhChange']
+    stzhActions: {
+      events: ['stzhChange', 'stzhClick']
     },
     docs: {
       description: {
@@ -33,8 +32,7 @@ export default {
       url: getFigmaLink('chipselect'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 const DATA = [

package/dist/collection/components/stzh-clamp/stzh-clamp.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 import { fullwidthCentered } from '../../utils/decorators';
 
@@ -20,8 +19,8 @@ export default {
   title: 'Components/Clamp',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClamp', 'stzhExpand']
+    stzhActions: {
+      events: ['stzhClamp', 'stzhExpand']
     },
     docs: {
       description: {
@@ -34,7 +33,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [withActions, fullwidthCentered]
+  decorators: [fullwidthCentered]
 };
 
 export const Default = {

package/dist/collection/components/stzh-company-logo/stzh-company-logo.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -18,9 +17,6 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'fullscreen',
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -31,8 +27,7 @@ export default {
       url: getFigmaLink('company-logo'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-container/stzh-container.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -28,8 +27,7 @@ export default {
       url: getFigmaLink('container'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-content/stzh-content.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -25,9 +24,6 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'fullscreen',
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
@@ -38,8 +34,7 @@ export default {
       url: getFigmaLink('content'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-cspace/stzh-cspace.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 const COMPONENT_NAME = 'stzh-cspace';
@@ -22,16 +21,12 @@ export default {
   title: 'Components/Cspace',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: []
-    },
     docs: {
       description: {
         component: readme
       }
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-cta/stzh-cta.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -88,8 +87,8 @@ export default {
   title: 'Components/Cta',
   component: COMPONENT_NAME,
   parameters: {
-    actions: {
-      handles: ['stzhClick', 'click', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhClick', 'click', 'stzhFocus', 'stzhBlur']
     },
     layout: 'fullscreen',
     docs: {
@@ -102,8 +101,7 @@ export default {
       url: getFigmaLink('cta'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-datalist/stzh-datalist.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -84,8 +83,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhDirectionChange', 'stzhVariantChange', 'stzhBigLabelChange']
+    stzhActions: {
+      events: ['stzhDirectionChange', 'stzhVariantChange', 'stzhBigLabelChange']
     },
     docs: {
       description: {
@@ -97,8 +96,7 @@ export default {
       url: getFigmaLink('datalist'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.stories.js

@@ -1,5 +1,4 @@
 import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
@@ -18,8 +17,8 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
-    actions: {
-      handles: ['stzhItemActionClick', 'stzhClick', 'stzhFocus', 'stzhBlur']
+    stzhActions: {
+      events: ['stzhItemActionClick', 'stzhClick', 'stzhFocus', 'stzhBlur']
     },
     docs: {
       description: {
@@ -31,8 +30,7 @@ export default {
       url: getFigmaLink('datalist-item'),
       allowFullscreen: true
     }
-  },
-  decorators: [withActions]
+  }
 };
 
 export const Default = {