register user group picker

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts

@@ -3,11 +3,6 @@ import { property } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbPickerModalData } from '../../../../../libs/modal/layouts/modal-layout-picker-base';
 import { UmbModalContext, UmbModalToken, UmbModalType, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../libs/modal';
-
-//TODO: These should probably be imported dynamically.
-import '../../modals/section-picker/section-picker-modal.element';
-import '../../../users/user-groups/modals/picker-user-group/picker-layout-user-group.element';
-import '../../../users/users/modals/user-picker/user-picker-modal.element';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 /** TODO: Make use of UUI FORM Mixin, to make it easily take part of a form. */

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../users/user-groups/repository/user-group.store';
 
 import type { UserGroupEntity } from '@umbraco-cms/models';
+import { UMB_USER_GROUP_PICKER_MODAL_TOKEN } from 'src/backoffice/users/user-groups/modals/user-group-picker';
 
 @customElement('umb-input-user-group')
 export class UmbInputPickerUserGroupElement extends UmbInputListBase {
@@ -47,7 +48,7 @@ export class UmbInputPickerUserGroupElement extends UmbInputListBase {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.pickerLayout = 'umb-picker-layout-user-group';
+		this.pickerToken = UMB_USER_GROUP_PICKER_MODAL_TOKEN;
 		this.consumeContext(UMB_USER_GROUP_STORE_CONTEXT_TOKEN, (usersContext) => {
 			this._userGroupStore = usersContext;
 			this._observeUserGroups();

src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/manifests.ts

@@ -1,4 +1,5 @@
 import { manifests as repositoryManifests } from './repository/manifests';
 import { manifests as workspaceManifests } from './workspace/manifests';
+import { manifests as modalManifests } from './modals/manifests';
 
-export const manifests = [...repositoryManifests, ...workspaceManifests];
+export const manifests = [...repositoryManifests, ...workspaceManifests, ...modalManifests];

src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.UserGroupPicker',
+		name: 'User Group Picker Modal',
+		loader: () => import('./user-group-picker/user-group-picker-modal.element'),
+	},
+];
+
+export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts

@@ -0,0 +1,11 @@
+import type { UserDetails } from '@umbraco-cms/models';
+import { UmbModalToken } from 'libs/modal';
+import type { UmbPickerModalData } from 'libs/modal/layouts/modal-layout-picker-base';
+
+export const UMB_USER_GROUP_PICKER_MODAL_TOKEN = new UmbModalToken<UmbPickerModalData<UserDetails>>(
+	'Umb.Modal.UserGroupPicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	}
+);

src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts

@@ -5,8 +5,8 @@ import { UmbModalLayoutPickerBase } from '@umbraco-cms/modal';
 import { UmbUserGroupStore, UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from '../../repository/user-group.store';
 import type { UserGroupDetails } from '@umbraco-cms/models';
 
-@customElement('umb-picker-layout-user-group')
-export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase<UserGroupDetails> {
+@customElement('umb-user-group-picker-modal')
+export class UmbUserGroupPickerModalElement extends UmbModalLayoutPickerBase<UserGroupDetails> {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -100,8 +100,10 @@ export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase<Us
 	}
 }
 
+export default UmbUserGroupPickerModalElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-picker-layout-user-group': UmbPickerLayoutUserGroupElement;
+		'umb-user-group-picker-modal': UmbUserGroupPickerModalElement;
 	}
 }