use selection manager

src/Umbraco.Web.UI.Client/libs/modal/token/language-picker-modal.token.ts

@@ -3,12 +3,12 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbLanguagePickerModalData {
 	multiple?: boolean;
-	selection?: Array<string>;
+	selection?: Array<string | null>;
 	filter?: (language: LanguageResponseModel) => boolean;
 }
 
 export interface UmbLanguagePickerModalResult {
-	selection: Array<string>;
+	selection: Array<string | null>;
 }
 
 export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalResult>(

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts

@@ -2,34 +2,28 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { UUIMenuItemElement, UUIMenuItemEvent } from '@umbraco-ui/uui';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbLanguageRepository } from '../../repository/language.repository';
-import { UmbModalElementPickerBase } from '@umbraco-cms/internal/modal';
+import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
+import { UmbLanguagePickerModalResult, UmbLanguagePickerModalData } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-language-picker-modal')
-export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<LanguageResponseModel> {
-	
-
+export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
+	UmbLanguagePickerModalData,
+	UmbLanguagePickerModalResult
+> {
 	@state()
 	private _languages: Array<LanguageResponseModel> = [];
 
-	private _languageRepository = new UmbLanguageRepository(this);
+	#languageRepository = new UmbLanguageRepository(this);
+	#selectionManager = new UmbSelectionManagerBase();
 
 	async firstUpdated() {
-		const { data } = await this._languageRepository.requestLanguages();
+		const { data } = await this.#languageRepository.requestLanguages();
 		this._languages = data?.items ?? [];
 	}
 
-	#onSelection(event: UUIMenuItemEvent) {
-		event?.stopPropagation();
-		const language = event?.target as UUIMenuItemElement;
-		const isoCode = language.dataset.isoCode;
-		if (!isoCode) return;
-		this.handleSelection(isoCode);
-	}
-
 	get #filteredLanguages() {
 		if (this.data?.filter) {
 			return this._languages.filter(this.data.filter);
@@ -38,6 +32,14 @@ export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<Lan
 		}
 	}
 
+	#submit() {
+		this.modalHandler?.submit({ selection: this.#selectionManager.getSelection() });
+	}
+
+	#close() {
+		this.modalHandler?.reject();
+	}
+
 	render() {
 		return html`<umb-body-layout headline="Select languages">
 			<uui-box>
@@ -47,23 +49,22 @@ export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<Lan
 					(item) => html`
 						<uui-menu-item
 							label=${item.name ?? ''}
-							selectable="true"
-							@selected=${this.#onSelection}
-							@unselected=${this.#onSelection}
-							?selected=${this.isSelected(item.isoCode!)}
-							data-iso-code="${ifDefined(item.isoCode)}">
+							selectable
+							@selected=${() => this.#selectionManager.select(item.isoCode!)}
+							@unselected=${() => this.#selectionManager.deselect(item.isoCode!)}
+							?selected=${this.#selectionManager.isSelected(item.isoCode!)}>
 							<uui-icon slot="icon" name="umb:globe"></uui-icon>
 						</uui-menu-item>
 					`
 				)}
 			</uui-box>
 			<div slot="actions">
-				<uui-button label="Close" @click=${this.close}></uui-button>
-				<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
+				<uui-button label="Close" @click=${this.#close}></uui-button>
+				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
 			</div>
 		</umb-body-layout> `;
 	}
-	
+
 	static styles = [UUITextStyles, css``];
 }