refactor(ui5-tokenizer): refactor token-delete event

[ivoplashkov]

token-delete event now returns an array of deleted tokens.

BREAKING CHANGE: Thetoken-delete event now includes a tokens parameter, which is an array of ui5-tokens, replacing the previous single token parameter.

Before:

<ui5-multi-input id="multi-input">
     <ui5-token slot="tokens" text="Argentina"></ui5-token>
     <ui5-token slot="tokens" text="Mexico"></ui5-token>
     <ui5-token slot="tokens" text="Philippines"></ui5-token>
     <ui5-token slot="tokens" text="Sweden"></ui5-token>
     <ui5-token slot="tokens" text="USA"></ui5-token>
</ui5-multi-input>

document.getElementById("multi-input").addEventListener("token-delete", function (event) {
    const token = event.detail?.token;
    token && token.remove();
});

Now:

<ui5-multi-input id="multi-input">
    <ui5-token slot="tokens" text="Argentina"></ui5-token>
    <ui5-token slot="tokens" text="Mexico"></ui5-token>
    <ui5-token slot="tokens" text="Philippines"></ui5-token>
    <ui5-token slot="tokens" text="Sweden"></ui5-token>
    <ui5-token slot="tokens" text="USA"></ui5-token>
</ui5-multi-input>

document.getElementById("multi-input").addEventListener("token-delete", function (event) {
	const tokens = event.detail?.tokens;

	if (tokens) {
	    tokens.forEach(token => token.remove());
 	}
});

The selection-change event now has tokens param instead of selectedTokens.

[simonarangelova]

token-delete event now returns an array of deleted tokens.

BREAKING CHANGE: Thetoken-delete event now includes a tokens parameter, which is an array of ui5-tokens, replacing the previous single token parameter.

Before:

<ui5-multi-input id="multi-input">
    <ui5-token slot="tokens" text="Argentina"></ui5-token>
    <ui5-token slot="tokens" text="Mexico"></ui5-token>
    <ui5-token slot="tokens" text="Philippines"></ui5-token>
    <ui5-token slot="tokens" text="Sweden"></ui5-token>
    <ui5-token slot="tokens" text="USA"></ui5-token>
</ui5-multi-input>

document.getElementById("multi-input").addEventListener("token-delete", function (event) {
    const token = event.detail?.token;
    token && token.remove();
});

Now:

<ui5-multi-input id="multi-input">
    <ui5-token slot="tokens" text="Argentina"></ui5-token>
    <ui5-token slot="tokens" text="Mexico"></ui5-token>
    <ui5-token slot="tokens" text="Philippines"></ui5-token>
    <ui5-token slot="tokens" text="Sweden"></ui5-token>
    <ui5-token slot="tokens" text="USA"></ui5-token>
</ui5-multi-input>

document.getElementById("multi-input").addEventListener("token-delete", function (event) {
	const tokens = event.detail?.tokens;

	if (tokens) {
	    tokens.forEach(token => token.remove());
	}
});

The selection-change event now has tokens param instead of selectedTokens.