Use Lit-HTML Event-Listener instead of Storybook decorators

[janivo]

Originated from the following discussion: https://github.com/inovex/elements/pull/595#discussion_r869924676

Currently, we use the decorators of a storybook to render wrapping DIV-Elements and also register our event handlers. This results in the wrappers still being displayed in our stories. These can be hidden, but this has the consequence that our event handlers no longer work. lit-HTML also offers functionality to register event handlers directly on an element like this:

const checkedChangeHandler = (e: CustomEvent<boolean>) => {
  const pressedButton = e.target as HTMLInoSegmentButtonElement;
  const segmentGroup = pressedButton.closest('ino-segment-group');
  segmentGroup.value = pressedButton.value;
};

// ...
  (args) => html`
   // ...
      <ino-segment-button value="opt-1" @checkedChange="${checkedChangeHandler}">Option 1</ino-segment-button>
// ...

In the future, this should be the preferred way to register event handlers, since the handlers can be set directly on the elements, thus saving logic and also enabling us to disable our decorators.

[janivo]

Almost done in this branch but the problem is that the event listener is not detached/removed on page switch.