diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts index a08e7e0e6b..a1565ff90c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts +++ b/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. */ diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts index 37fa53d7d5..8bbe14fe27 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts +++ b/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(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/manifests.ts index 8fe0fae0b0..dd709645d0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/manifests.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/manifests.ts new file mode 100644 index 0000000000..afd2fe55b9 --- /dev/null +++ b/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 = [ + { + 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]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts new file mode 100644 index 0000000000..63e485de09 --- /dev/null +++ b/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>( + 'Umb.Modal.UserGroupPicker', + { + type: 'sidebar', + size: 'small', + } +); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/picker-user-group/picker-layout-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts similarity index 91% rename from src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/picker-user-group/picker-layout-user-group.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts index 7df0436c16..625c9b1074 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/picker-user-group/picker-layout-user-group.element.ts +++ b/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 { +@customElement('umb-user-group-picker-modal') +export class UmbUserGroupPickerModalElement extends UmbModalLayoutPickerBase { static styles = [ UUITextStyles, css` @@ -100,8 +100,10 @@ export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase