Implement common Outside click util

[JoCa96]

We should create a common util that detects outside-click for given elements, instead of every component registering their own listeners.

Acceptance criteria

• There is a global outside click listener and handler
• only a single click listener is used on document level

Definition of Done

• [ ] covered by component tests
• [ ] updated version + documentation is deployed
• [ ] Storybook can show the feature
• [ ] Storybook code snippet of new/changed examples are checked that they are generated correctly
• [ ] Set task to In Approval

Approval

• Storybook
• Deployed Docs
• [ ] approved by designer @jannick-ux
• [ ] approved by dev

Implementation details

We should create a common util that detects outside-click for given elements, instead of every component registering their own listeners.

Reference implementations

An implementation already exists in WaWi: ui/components/src/utils/click.ts:

import { computed, ref, watch } from "vue";

export type UnregisterOutsideClick = () => void;

const registeredListeners = ref(new Map<HTMLElement[], () => void>());
const triggerdOnce = ref<boolean>(false);
const listenerArray = computed(() => Array.from(registeredListeners.value.entries()));

const handleGlobalClick = ({ target }: MouseEvent) => {
    const listenersToTrigger = listenerArray.value.filter(
        ([insideElements]) =>
            !insideElements.some((e) => e === target || (target && e.contains?.(target as HTMLElement))),
    );
    listenersToTrigger.forEach(([insideElements, handler]) => {
        triggerdOnce.value && registeredListeners.value.delete(insideElements);
        handler();
    });
};

watch(
    () => registeredListeners.value.size,
    (hasListeners) => {
        if (hasListeners) {
            document.addEventListener("click", handleGlobalClick);
        } else {
            document.removeEventListener("click", handleGlobalClick);
        }
    },
);

const registerOutsideClick = (
    insideElements: HTMLElement[],
    handler: () => void,
    isTriggerdOnce: boolean = false,
): UnregisterOutsideClick => {
    // We want to register the listener AFTER all current events are processed.
    // Otherwise the outsidelickhandler is immediately triggered by the bubbling event.
    triggerdOnce.value = isTriggerdOnce;
    setTimeout(() => registeredListeners.value.set(insideElements, handler));
    return () => registeredListeners.value.delete(insideElements);
};

export const ClickUtil = {
    registerOutsideClick,
};

[larsrickert]

Might already be implemented in https://github.com/SchwarzIT/onyx/blob/main/packages/headless/src/composables/outsideClick.ts