@@ -139,8 +140,8 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
color: 'danger',
confirmLabel: 'Delete',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) this._removeRedirect(data);
+ modalHandler?.onSubmit().then(() => {
+ this._removeRedirect(data);
});
}
@@ -157,14 +158,14 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
}
private _disableRedirectHandler() {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: 'Disable URL tracker',
content: html`Are you sure you want to disable the URL tracker?`,
color: 'danger',
confirmLabel: 'Disable',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) this._toggleRedirect();
+ modalHandler?.onSubmit().then(() => {
+ this._toggleRedirect();
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
index fd5c9537ea..5e5a660c77 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface';
+import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../shared/modals/icon-picker';
import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context';
import type { DocumentTypeModel } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -86,10 +87,10 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um
}
private async _handleIconClick() {
- const modalHandler = this._modalContext?.iconPicker();
+ const modalHandler = this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN);
- modalHandler?.onClose().then((saved) => {
- if (saved) this._workspaceContext?.setIcon(saved.icon);
+ modalHandler?.onSubmit().then((saved) => {
+ if (saved.icon) this._workspaceContext?.setIcon(saved.icon);
// TODO save color ALIAS as well
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
index 576ba9435f..19eec3849c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts
@@ -1,8 +1,9 @@
import './document-type-workspace.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { treeData } from '../../../../core/mocks/data/document-type.data';
import type { UmbDocumentTypeWorkspaceElement } from './document-type-workspace.element';
-import { treeData } from 'src/core/mocks/data/document-type.data';
export default {
title: 'Workspaces/Document Type',
@@ -11,5 +12,5 @@ export default {
} as Meta;
export const AAAOverview: Story
= () =>
- html` `;
+ html` `;
AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal.element.ts
similarity index 65%
rename from src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal.element.ts
index ff3bf6296b..e438a3e3e4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal.element.ts
@@ -1,29 +1,25 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '@umbraco-cms/modal';
+import { UmbCreateDocumentModalData, UmbCreateDocumentModalResultData } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
-export interface UmbCreateDocumentModalData {
- unique: string | null;
-}
-
-export interface UmbCreateDocumentModalResultData {
- documentType: string;
-}
-
-@customElement('umb-create-document-modal-layout')
-export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement {
+@customElement('umb-create-document-modal')
+export class UmbCreateDocumentModalElement extends UmbModalBaseElement<
+ UmbCreateDocumentModalData,
+ UmbCreateDocumentModalResultData
+> {
static styles = [UUITextStyles];
private _handleCancel() {
- this.modalHandler?.close();
+ this.modalHandler?.reject();
}
#onClick(event: PointerEvent) {
event.stopPropagation();
const target = event.target as HTMLButtonElement;
const documentType = target.value;
- this.modalHandler?.close({ documentType });
+ this.modalHandler?.submit({ documentType });
}
render() {
@@ -43,8 +39,10 @@ export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement {
#modalContext?: UmbModalContext;
@@ -23,13 +24,12 @@ export class UmbCreateDocumentEntityAction extends UmbEntityActionBase('Umb.Modal.CreateDocument', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts
index 636329f2be..3ae95fe8ee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts
@@ -13,7 +13,7 @@ import {
UmbTrashEntityAction,
UmbSortChildrenOfEntityAction,
} from '@umbraco-cms/entity-action';
-import { ManifestEntityAction } from '@umbraco-cms/extensions-registry';
+import { ManifestEntityAction, ManifestModal } from '@umbraco-cms/extensions-registry';
const entityType = 'document';
@@ -171,4 +171,13 @@ const entityActions: Array = [
},
];
-export const manifests = [...entityActions];
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.CreateDocument',
+ name: 'Create Document Modal',
+ loader: () => import('./create/create-document-modal.element'),
+ },
+];
+
+export const manifests = [...entityActions, ...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts
index b36ebb6e5b..db1abd9914 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts
@@ -5,6 +5,7 @@ import { manifests as treeManifests } from './tree/manifests';
import { manifests as workspaceManifests } from './workspace/manifests';
import { manifests as entityActionManifests } from './entity-actions/manifests';
import { manifests as entityBulkActionManifests } from './entity-bulk-actions/manifests';
+import { manifests as modalManifests } from './modals/manifests';
export const manifests = [
...collectionManifests,
@@ -14,4 +15,5 @@ export const manifests = [
...workspaceManifests,
...entityActionManifests,
...entityBulkActionManifests,
+ ...modalManifests,
];
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
similarity index 76%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
index cc00f957aa..811c812a64 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
@@ -1,18 +1,16 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '../modal-layout.element';
-
-export interface UmbModalContentPickerData {
- multiple?: boolean;
- selection?: Array;
-}
-
-import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+import type { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
+import { UmbDocumentPickerModalData, UmbDocumentPickerModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
// TODO: make use of UmbPickerLayoutBase
-@customElement('umb-modal-layout-content-picker')
-export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement {
+@customElement('umb-document-picker-modal')
+export class UmbDocumentPickerModalElement extends UmbModalBaseElement<
+ UmbDocumentPickerModalData,
+ UmbDocumentPickerModalResult
+> {
static styles = [
UUITextStyles,
css`
@@ -68,11 +66,11 @@ export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement = () => html`
+
+
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts
new file mode 100644
index 0000000000..b67bffe04e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts
@@ -0,0 +1,18 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbDocumentPickerModalData {
+ multiple?: boolean;
+ selection?: Array;
+}
+
+export interface UmbDocumentPickerModalResult {
+ selection: Array;
+}
+
+export const UMB_DOCUMENT_PICKER_MODAL_TOKEN = new UmbModalToken<
+ UmbDocumentPickerModalData,
+ UmbDocumentPickerModalResult
+>('Umb.Modal.DocumentPicker', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
new file mode 100644
index 0000000000..dcaf83f082
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.DocumentPicker',
+ name: 'Document Picker Modal',
+ loader: () => import('./document-picker/document-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
index f247557114..6dfc9ca79b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
@@ -2,11 +2,10 @@ import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
-import { IRoute } from 'router-slot';
import { UmbDocumentWorkspaceContext } from '../document-workspace.context';
+import type { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent, IRoute } from '@umbraco-cms/router';
import { UmbLitElement } from '@umbraco-cms/element';
import { PropertyTypeContainerViewModelBaseModel } from '@umbraco-cms/backend-api';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
@customElement('umb-document-workspace-view-edit')
export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
index 30ae1aeac3..42f84f7b43 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
@@ -1,4 +1,5 @@
import type { UmbMediaRepository } from '../../repository/media.repository';
+import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../modals/media-picker';
import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -17,9 +18,14 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.MediaPicker',
+ name: 'Media Picker Modal',
+ loader: () => import('./media-picker/media-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts
new file mode 100644
index 0000000000..7075158e15
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts
@@ -0,0 +1,18 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbMediaPickerModalData {
+ multiple?: boolean;
+ selection: Array;
+}
+
+export interface UmbMediaPickerModalResult {
+ selection: Array;
+}
+
+export const UMB_MEDIA_PICKER_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.MediaPicker',
+ {
+ type: 'sidebar',
+ size: 'small',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
similarity index 77%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
index 15f5d39ada..82fa6411f0 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
@@ -1,17 +1,15 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '../modal-layout.element';
+import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
+import { UmbMediaPickerModalData, UmbMediaPickerModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
-export interface UmbModalMediaPickerData {
- multiple?: boolean;
- selection: Array;
-}
-
-import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
-
-@customElement('umb-modal-layout-media-picker')
-export class UmbModalLayoutMediaPickerElement extends UmbModalLayoutElement {
+@customElement('umb-media-picker-modal')
+export class UmbMediaPickerModalElement extends UmbModalBaseElement<
+ UmbMediaPickerModalData,
+ UmbMediaPickerModalResult
+> {
static styles = [
UUITextStyles,
css`
@@ -67,11 +65,11 @@ export class UmbModalLayoutMediaPickerElement extends UmbModalLayoutElement {
- return confirmed;
- });
-
- if (!deleteConfirmed == true) return;
+ await modalHandler?.onSubmit();
const { error } = await tryExecuteAndNotify(this, PackageResource.deletePackageCreatedByKey({ key: p.key }));
if (error) return;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index 3df5afd999..063afe1b25 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -4,7 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
import { firstValueFrom, map } from 'rxjs';
import { UUIButtonState } from '@umbraco-ui/uui';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import type { ManifestPackageView } from '@umbraco-cms/models';
@@ -81,18 +82,15 @@ export class UmbInstalledPackagesSectionViewItem extends UmbLitElement {
async _onMigration() {
if (!this.name) return;
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
color: 'positive',
headline: `Run migrations for ${this.name}?`,
content: `Do you want to start run migrations for ${this.name}`,
confirmLabel: 'Run migrations',
});
- const migrationConfirmed = await modalHandler?.onClose().then(({ confirmed }: any) => {
- return confirmed;
- });
+ await modalHandler?.onSubmit();
- if (!migrationConfirmed == true) return;
this._migrationButtonState = 'waiting';
const { error } = await tryExecuteAndNotify(
this,
@@ -141,11 +139,15 @@ export class UmbInstalledPackagesSectionViewItem extends UmbLitElement {
return;
}
+ // TODO: add dedicated modal for package views, and register it in a manifest.
+ alert('package view modal temporarily disabled. See comment in code.');
+ /*
this._modalContext?.open(element, {
data: { name: this.name, version: this.version },
size: 'full',
type: 'sidebar',
});
+ */
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
index 08449e0cad..7880202c02 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
@@ -1,4 +1,4 @@
-import { html, css, nothing } from 'lit';
+import { html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { combineLatest } from 'rxjs';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts
new file mode 100644
index 0000000000..7765c306fc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.Search',
+ name: 'Search Modal',
+ loader: () => import('./search/search-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts
new file mode 100644
index 0000000000..9859d03434
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts
@@ -0,0 +1,3 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export const UMB_SEARCH_MODAL_TOKEN = new UmbModalToken('Umb.Modal.Search');
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/search/modal-layout-search.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
similarity index 97%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/search/modal-layout-search.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
index df4ef06d2f..b294c49eda 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/search/modal-layout-search.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
@@ -14,8 +14,8 @@ export type SearchGroupItem = {
name: string;
items: Array;
};
-@customElement('umb-modal-layout-search')
-export class UmbModalLayoutSearchElement extends LitElement {
+@customElement('umb-search-modal')
+export class UmbSearchModalElement extends LitElement {
static styles = [
UUITextStyles,
css`
@@ -308,10 +308,10 @@ export class UmbModalLayoutSearchElement extends LitElement {
];
}
-export default UmbModalLayoutSearchElement;
+export default UmbSearchModalElement;
declare global {
interface HTMLElementTagNameMap {
- 'umb-modal-layout-search': UmbModalLayoutSearchElement;
+ 'umb-search-modal': UmbSearchModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
index 753b15908f..a82f3676bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
@@ -1,12 +1,11 @@
import { html, css, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { IRoute, IRoutingInfo, path } from 'router-slot';
import { UmbDashboardExamineIndexElement } from './views/section-view-examine-indexers';
import { UmbDashboardExamineSearcherElement } from './views/section-view-examine-searchers';
+import type { IRoute, IRoutingInfo, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
import { UmbLitElement } from '@umbraco-cms/element';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
@customElement('umb-dashboard-examine-management')
export class UmbDashboardExamineManagementElement extends UmbLitElement {
@@ -52,7 +51,6 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
@state()
private _activePath = '';
-
render() {
return html` ${this._routerPath && this._activePath !== ''
? html` ← Back to overview `
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
index ce43b2b8cd..8da8cf647e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
@@ -1,15 +1,14 @@
import { html, css } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '../../../../../../core/modal';
+import { UmbCreateDocumentModalResultData, UmbExamineFieldsSettingsModalData } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
-export interface UmbModalFieldsSettingsData {
- name: string;
- exposed: boolean;
-}
-
-@customElement('umb-modal-layout-fields-settings')
-export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement {
+@customElement('umb-examine-fields-settings-modal')
+export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
+ UmbExamineFieldsSettingsModalData,
+ UmbCreateDocumentModalResultData
+> {
static styles = [
UUITextStyles,
css`
@@ -44,10 +43,10 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement {
- return { name: field.name, exposed: field.exposed };
- }))
- : '';
+ this._fields =
+ this.data?.map((field) => {
+ return { name: field.name, exposed: field.exposed };
+ }) || undefined;
}
render() {
@@ -92,6 +90,6 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement {
+@customElement('umb-modal-element-fields-viewer')
+export class UmbModalElementFieldsViewerElement extends UmbModalBaseElement {
static styles = [
UUITextStyles,
css`
@@ -16,7 +16,6 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement;
+
+export interface UmbCreateDocumentModalResultData {
+ fields?: UmbExamineFieldsSettingsModalData;
+}
+
+export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN = new UmbModalToken<
+ UmbExamineFieldsSettingsModalData,
+ UmbCreateDocumentModalResultData
+>('Umb.Modal.ExamineFieldsSettings', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
index 34c20af5d2..99d08ebf41 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
@@ -1,17 +1,15 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-
import { UUIButtonState } from '@umbraco-ui/uui-button';
-
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal';
-
-import './section-view-examine-searchers';
-
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { HealthStatusModel, IndexModel, IndexerResource } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+import './section-view-examine-searchers';
+
@customElement('umb-dashboard-examine-index')
export class UmbDashboardExamineIndexElement extends UmbLitElement {
static styles = [
@@ -120,7 +118,7 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
}
private async _onRebuildHandler() {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: `Rebuild ${this.indexName}`,
content: html`
This will cause the index to be rebuilt.
@@ -131,8 +129,8 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
color: 'danger',
confirmLabel: 'Rebuild',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) this._rebuild();
+ modalHandler?.onSubmit().then(() => {
+ this._rebuild();
});
}
private async _rebuild() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
index 941f79b998..fd7f1b6f14 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -1,15 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state, query, property } from 'lit/decorators.js';
-
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal';
-
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { SearchResultModel, SearcherResource, FieldModel } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
import './modal-views/fields-viewer.element';
import './modal-views/fields-settings.element';
+import { UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN } from './modal-views';
interface ExposedSearchResultField {
name?: string | null;
@@ -175,12 +174,10 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
}
private _onFieldFilterClick() {
- const modalHandler = this._modalContext?.open('umb-modal-layout-fields-settings', {
- type: 'sidebar',
- size: 'small',
- data: { ...this._exposedFields },
+ const modalHandler = this._modalContext?.open(UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN, {
+ ...this._exposedFields,
});
- modalHandler?.onClose().then(({ fields } = {}) => {
+ modalHandler?.onSubmit().then(({ fields } = {}) => {
if (!fields) return;
this._exposedFields = fields;
});
@@ -241,7 +238,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
look="secondary"
label="Open sidebar to see all fields"
@click="${() =>
- this._modalContext?.open('umb-modal-layout-fields-viewer', {
+ this._modalContext?.open('umb-modal-element-fields-viewer', {
type: 'sidebar',
size: 'medium',
data: { ...rowData, name: this.getSearchResultNodeName(rowData) },
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.element.ts
index 6bdb0ee69b..ce95990d04 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.element.ts
@@ -1,12 +1,12 @@
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import type { IRoute, IRoutingInfo } from 'router-slot';
import { UmbDashboardHealthCheckGroupElement } from './views/health-check-group.element';
import {
UmbHealthCheckDashboardContext,
UMB_HEALTHCHECK_DASHBOARD_CONTEXT_TOKEN,
} from './health-check-dashboard.context';
import { UmbHealthCheckContext } from './health-check.context';
+import type { IRoute, IRoutingInfo } from '@umbraco-cms/router';
import { UmbLitElement } from '@umbraco-cms/element';
import { ManifestHealthCheck } from '@umbraco-cms/extensions-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
index fbe4a51666..31fa419b08 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
@@ -1,18 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import { ensureSlash, path } from 'router-slot';
import { UmbHealthCheckContext } from '../health-check.context';
import {
UMB_HEALTHCHECK_DASHBOARD_CONTEXT_TOKEN,
UmbHealthCheckDashboardContext,
} from '../health-check-dashboard.context';
+import { ensureSlash, path } from '@umbraco-cms/router';
import type { ManifestHealthCheck } from '@umbraco-cms/models';
-import {
- HealthCheckGroupWithResultModel,
- HealthCheckWithResultModel,
- StatusResultTypeModel,
-} from '@umbraco-cms/backend-api';
+import { HealthCheckGroupWithResultModel, StatusResultTypeModel } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-health-check-group-box-overview')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/manifests.ts
index 16ca3c3f9b..f3475347ba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/manifests.ts
@@ -1,4 +1,4 @@
-import type { ManifestDashboard } from '@umbraco-cms/models';
+import type { ManifestDashboard, ManifestModal } from '@umbraco-cms/models';
const dashboards: Array = [
{
@@ -94,4 +94,13 @@ const dashboards: Array = [
},
];
-export const manifests = [...dashboards];
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.ExamineFieldsSettings',
+ name: 'Examine Field Settings Modal',
+ loader: () => import('./examine-management/views/modal-views/fields-settings.element'),
+ },
+];
+
+export const manifests = [...dashboards, ...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index 8235fd382f..3d79b89afc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -2,9 +2,8 @@ import { UUIButtonState } from '@umbraco-ui/uui';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
-
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { PublishedCacheResource } from '@umbraco-cms/backend-api';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -82,14 +81,14 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
}
}
private async _onReloadCacheHandler() {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: 'Reload',
content: html` Trigger a in-memory and local file cache reload on all servers. `,
color: 'danger',
confirmLabel: 'Continue',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) this._reloadMemoryCache();
+ modalHandler?.onSubmit().then(() => {
+ this._reloadMemoryCache();
});
}
@@ -105,14 +104,14 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
}
private async _onRebuildCacheHandler() {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: 'Rebuild',
content: html` Rebuild content in cmsContentNu database table. Expensive.`,
color: 'danger',
confirmLabel: 'Continue',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) this._rebuildDatabaseCache();
+ modalHandler?.onSubmit().then(() => {
+ this._rebuildDatabaseCache();
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
index c3495deef6..fd12cca7b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
@@ -1,8 +1,9 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal';
import { UmbDataTypeWorkspaceContext } from '../../data-type-workspace.context';
+import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from '../../../../../shared/property-editors/modals/property-editor-ui-picker';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypeModel } from '@umbraco-cms/backend-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
@@ -100,12 +101,11 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement {
private _openPropertyEditorUIPicker() {
if (!this._dataType) return;
- const modalHandler = this._modalContext?.propertyEditorUIPicker({
+ const modalHandler = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, {
selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
});
- modalHandler?.onClose().then(({ selection } = {}) => {
- if (!selection) return;
+ modalHandler?.onSubmit().then(({ selection }) => {
this._selectPropertyEditorUI(selection[0]);
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
index 3558e546ce..2f5d2ecfcb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -1,5 +1,6 @@
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
import { isManifestElementNameType, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import type { ManifestBase } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -27,19 +28,16 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
});
}
- #removeExtension(extension: ManifestBase) {
- const modalHandler = this._modalContext?.confirm({
+ async #removeExtension(extension: ManifestBase) {
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: 'Unload extension',
confirmLabel: 'Unload',
content: html`Are you sure you want to unload the extension ${extension.alias}?
`,
color: 'danger',
});
- modalHandler?.onClose().then(({ confirmed }: any) => {
- if (confirmed) {
- umbExtensionsRegistry.unregister(extension.alias);
- }
- });
+ await modalHandler?.onSubmit();
+ umbExtensionsRegistry.unregister(extension.alias);
}
render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
index 4d649f5cd8..92434c12ef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
@@ -3,6 +3,7 @@ import { manifests as treeManifests } from './menu-item/manifests';
import { manifests as entityActions } from './entity-actions/manifests';
import { manifests as workspaceManifests } from './workspace/manifests';
import { manifests as appLanguageSelect } from './app-language-select/manifests';
+import { manifests as modalManifests } from './modals/manifests';
export const manifests = [
...repositoryManifests,
@@ -10,4 +11,5 @@ export const manifests = [
...treeManifests,
...workspaceManifests,
...appLanguageSelect,
+ ...modalManifests,
];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts
new file mode 100644
index 0000000000..5f551178ad
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts
@@ -0,0 +1,20 @@
+import { LanguageModel } from '@umbraco-cms/backend-api';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbLanguagePickerModalData {
+ multiple?: boolean;
+ selection?: Array;
+ filter?: (language: LanguageModel) => boolean;
+}
+
+export interface UmbLanguagePickerModalResult {
+ selection: Array;
+}
+
+export const UMB_LANGUAGE_PICKER_MODAL_TOKEN = new UmbModalToken<
+ UmbLanguagePickerModalData,
+ UmbLanguagePickerModalResult
+>('Umb.Modal.LanguagePicker', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
similarity index 79%
rename from src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
index f4f9d72886..98a4407e97 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
@@ -4,17 +4,12 @@ import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit-html/directives/repeat.js';
import { UUIMenuItemElement, UUIMenuItemEvent } from '@umbraco-ui/uui';
import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { UmbLanguageRepository } from '../repository/language.repository';
-import { UmbModalLayoutPickerBase } from '../../../../core/modal/layouts/modal-layout-picker-base';
+import { UmbLanguageRepository } from '../../repository/language.repository';
+import { UmbModalElementPickerBase } from '@umbraco-cms/modal';
import { LanguageModel } from '@umbraco-cms/backend-api';
-export interface UmbLanguagePickerModalData {
- multiple: boolean;
- selection: string[];
-}
-
-@customElement('umb-language-picker-modal-layout')
-export class UmbLanguagePickerModalLayoutElement extends UmbModalLayoutPickerBase {
+@customElement('umb-language-picker-modal')
+export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase {
static styles = [UUITextStyles, css``];
@state()
@@ -70,8 +65,10 @@ export class UmbLanguagePickerModalLayoutElement extends UmbModalLayoutPickerBas
}
}
+export default UmbLanguagePickerModalElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-language-picker-modal-layout': UmbLanguagePickerModalLayoutElement;
+ 'umb-language-picker-modal': UmbLanguagePickerModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/manifests.ts
new file mode 100644
index 0000000000..06cf317a04
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.LanguagePicker',
+ name: 'Language Picker Modal',
+ loader: () => import('./language-picker/language-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
index 9ead5f19f9..cfa465cb79 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
@@ -1,6 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, property, queryAll, state } from 'lit/decorators.js';
+import { query } from 'router-slot';
import {
LogViewerDateRange,
UmbLogViewerWorkspaceContext,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
index cd352e751b..2ef3862bf0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
@@ -4,10 +4,10 @@ import { css, html } from 'lit';
import { state } from 'lit/decorators.js';
import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
+import type { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
import type { ManifestSection } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
import { createExtensionElementOrFallback } from '@umbraco-cms/extensions-api';
-import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
@defineElement('umb-backoffice-main')
export class UmbBackofficeMain extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
index 1ad3d99bf3..dd257e3841 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
-import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
+import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-backoffice-modal-container')
@@ -41,7 +41,7 @@ export class UmbBackofficeModalContainer extends UmbLitElement {
render() {
return html`
- ${this._modals ? repeat(this._modals, (modalHandler) => html`${modalHandler.element}`) : ''}
+ ${this._modals ? repeat(this._modals, (modalHandler) => html`${modalHandler.modalElement}`) : ''}
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 5fd4881b0b..f790057ecf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,6 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing, TemplateResult } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
import { UmbContextDebugRequest } from '@umbraco-cms/context-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
@@ -101,15 +102,9 @@ export class UmbDebug extends UmbLitElement {
this._debugPaneOpen = !this._debugPaneOpen;
}
- private async _openDialog() {
- // Open a modal that uses the HTML component called 'umb-debug-modal-layout'
- await import('./debug.modal.element.js');
- this._modalContext?.open('umb-debug-modal-layout', {
- size: 'small',
- type: 'sidebar',
- data: {
- content: this._renderContextAliases(),
- },
+ private _openDialog() {
+ this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL_TOKEN, {
+ content: html`${this._renderContextAliases()}`,
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/manifests.ts
new file mode 100644
index 0000000000..2b82b6cb72
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.ContextDebugger',
+ name: 'Context Debugger Modal',
+ loader: () => import('./modals/debug/debug-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
similarity index 77%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
index d9d370aaf0..841bc6c32b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
@@ -1,14 +1,11 @@
-import { css, html, TemplateResult } from 'lit';
+import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { UmbModalLayoutElement } from '@umbraco-cms/modal';
+import { UmbContextDebuggerModalData } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
-export interface UmbDebugModalData {
- content: TemplateResult | string;
-}
-
-@customElement('umb-debug-modal-layout')
-export default class UmbDebugModalLayout extends UmbModalLayoutElement {
+@customElement('umb-context-debugger-modal')
+export default class UmbContextDebuggerModalElement extends UmbModalBaseElement {
static styles = [
UUITextStyles,
css`
@@ -58,7 +55,7 @@ export default class UmbDebugModalLayout extends UmbModalLayoutElement(
+ 'Umb.Modal.ContextDebugger',
+ {
+ type: 'sidebar',
+ size: 'small',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action.element.ts
index 1c2fe73009..fb8da88a95 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action.element.ts
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { UUIMenuItemEvent } from '@umbraco-ui/uui';
import { UmbExecutedEvent } from '@umbraco-cms/events';
import { UmbLitElement } from '@umbraco-cms/element';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
+import { ManifestEntityAction } from '@umbraco-cms/extensions-registry';
@customElement('umb-entity-action')
class UmbEntityActionElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index 97fefafceb..04c03284f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -1,6 +1,7 @@
-//TODO: we need to figure out what components should be available for extensions and load them upfront
-// TODO: we need to move these files into their respective folders/silos. We then need a way for a silo to globally register a component
+import { manifests as debugManifests } from './debug/manifests';
+// TODO: we need to figure out what components should be available for extensions and load them upfront
+// TODO: we need to move these files into their respective folders/silos. We then need a way for a silo to globally register a component
import './body-layout/body-layout.element';
import './footer-layout/footer-layout.element';
import './entity-action/entity-action-list.element';
@@ -42,4 +43,7 @@ import './history/history-item.element';
import './workspace/workspace-action/workspace-action.element';
import './workspace/workspace-content/workspace-content.element';
import './workspace/workspace-layout/workspace-layout.element';
+
import './workspace/workspace-footer-layout/workspace-footer-layout.element';
+
+export const manifests = [...debugManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index 177d949e5b..b7a16996bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -3,9 +3,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store';
import type { UmbDocumentTreeStore } from '../../../documents/documents/repository/document.tree.store';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_DOCUMENT_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-picker';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DocumentTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api';
import type { UmbObserverController } from '@umbraco-cms/observable-api';
@@ -121,29 +123,27 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
private _openPicker() {
// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
- const modalHandler = this._modalContext?.contentPicker({
+ const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL_TOKEN, {
multiple: this.max === 1 ? false : true,
selection: [...this._selectedKeys],
});
- modalHandler?.onClose().then(({ selection }: any) => {
+
+ modalHandler?.onSubmit().then(({ selection }: any) => {
this._setSelection(selection);
});
}
- private _removeItem(item: FolderTreeItemModel) {
- const modalHandler = this._modalContext?.confirm({
+ private async _removeItem(item: FolderTreeItemModel) {
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
color: 'danger',
headline: `Remove ${item.name}?`,
content: 'Are you sure you want to remove this item',
confirmLabel: 'Remove',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) {
- const newSelection = this._selectedKeys.filter((value) => value !== item.key);
- this._setSelection(newSelection);
- }
- });
+ await modalHandler?.onSubmit();
+ const newSelection = this._selectedKeys.filter((value) => value !== item.key);
+ this._setSelection(newSelection);
}
private _setSelection(newSelection: Array) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
index f35f3d9e77..c9eb2bd3ca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
@@ -3,8 +3,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_LANGUAGE_PICKER_MODAL_TOKEN } from '../../../settings/languages/modals/language-picker';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbChangeEvent } from '@umbraco-cms/events';
import { UmbLitElement } from '@umbraco-cms/element';
import type { LanguageModel } from '@umbraco-cms/backend-api';
@@ -119,30 +121,28 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
}
private _openPicker() {
- const modalHandler = this._modalContext?.languagePicker({
+ const modalHandler = this._modalContext?.open(UMB_LANGUAGE_PICKER_MODAL_TOKEN, {
multiple: this.max === 1 ? false : true,
selection: [...this._selectedIsoCodes],
filter: this.filter,
});
- modalHandler?.onClose().then(({ selection }: any) => {
+ modalHandler?.onSubmit().then(({ selection }) => {
this._setSelection(selection);
});
}
private _removeItem(item: LanguageModel) {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
color: 'danger',
headline: `Remove ${item.name}?`,
content: 'Are you sure you want to remove this item',
confirmLabel: 'Remove',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) {
- const newSelection = this._selectedIsoCodes.filter((value) => value !== item.isoCode);
- this._setSelection(newSelection);
- }
+ modalHandler?.onSubmit().then(() => {
+ const newSelection = this._selectedIsoCodes.filter((value) => value !== item.isoCode);
+ this._setSelection(newSelection);
});
}
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 0508848787..a1d954be41 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
@@ -1,13 +1,13 @@
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbPickerModalData } from '../../../../core/modal/layouts/modal-layout-picker-base';
-import { UmbModalContext, UmbModalType, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
-
-//TODO: These should probably be imported dynamically.
-import '../../../../core/modal/layouts/picker-section/picker-layout-section.element';
-import '../../../../core/modal/layouts/picker-user-group/picker-layout-user-group.element';
-import '../../../../core/modal/layouts/picker-user/picker-layout-user.element';
+import {
+ UmbModalContext,
+ UmbModalToken,
+ UmbModalType,
+ UMB_MODAL_CONTEXT_TOKEN,
+ UmbPickerModalData,
+} from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
/** TODO: Make use of UUI FORM Mixin, to make it easily take part of a form. */
@@ -24,7 +24,8 @@ export class UmbInputListBase extends UmbLitElement {
@property({ type: String })
public modalSize: UUIModalSidebarSize = 'small';
- protected pickerLayout?: string;
+ // TODO: not great that we use any, any here. Investigate if we can have some interface or base modal token for this type.
+ protected pickerToken?: UmbModalToken;
private _modalContext?: UmbModalContext;
constructor() {
@@ -35,17 +36,14 @@ export class UmbInputListBase extends UmbLitElement {
}
private _openPicker() {
- if (!this.pickerLayout) return;
+ if (!this.pickerToken) return;
- const modalHandler = this._modalContext?.open(this.pickerLayout, {
- type: this.modalType,
- size: this.modalSize,
- data: {
- multiple: this.multiple,
- selection: this.value,
- },
+ const modalHandler = this._modalContext?.open(this.pickerToken, {
+ multiple: this.multiple,
+ selection: this.value,
});
- modalHandler?.onClose().then((data: UmbPickerModalData) => {
+
+ modalHandler?.onSubmit().then((data: UmbPickerModalData) => {
if (data) {
this.value = data.selection;
this.selectionUpdated();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index b2ea70155f..8778092f1c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -3,8 +3,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal';
import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../../media/media/modals/media-picker';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
import type { EntityTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api';
import type { UmbObserverController } from '@umbraco-cms/observable-api';
@@ -135,28 +137,27 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
private _openPicker() {
// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
- const modalHandler = this._modalContext?.mediaPicker({
+ const modalHandler = this._modalContext?.open(UMB_MEDIA_PICKER_MODAL_TOKEN, {
multiple: this.max === 1 ? false : true,
selection: [...this._selectedKeys],
});
- modalHandler?.onClose().then(({ selection }: any) => {
+
+ modalHandler?.onSubmit().then(({ selection }: any) => {
this._setSelection(selection);
});
}
private _removeItem(item: FolderTreeItemModel) {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
color: 'danger',
headline: `Remove ${item.name}?`,
content: 'Are you sure you want to remove this item',
confirmLabel: 'Remove',
});
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) {
- const newSelection = this._selectedKeys.filter((value) => value !== item.key);
- this._setSelection(newSelection);
- }
+ modalHandler?.onSubmit().then(() => {
+ const newSelection = this._selectedKeys.filter((value) => value !== item.key);
+ this._setSelection(newSelection);
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index f627f407e7..be778585ad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,20 +3,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
import { UmbLitElement } from '@umbraco-cms/element';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
-export interface MultiUrlData {
- icon?: string;
- name?: string;
- published?: boolean;
- queryString?: string;
- target?: string;
- trashed?: boolean;
- udi?: string;
- url?: string;
-}
-
/**
* @element umb-input-multi-url-picker
* @fires change - when the value of the input changes
@@ -91,11 +81,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
overlaySize?: UUIModalSidebarSize;
/**
- * @type {Array}
+ * @type {Array}
* @default []
*/
@property({ attribute: false })
- set urls(data: Array) {
+ set urls(data: Array) {
if (!data) return;
this._urls = data;
super.value = this._urls.map((x) => x.url).join(',');
@@ -105,7 +95,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
return this._urls;
}
- private _urls: Array = [];
+ private _urls: Array = [];
private _modalContext?: UmbModalContext;
constructor() {
@@ -131,7 +121,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
this._dispatchChangeEvent();
}
- private _setSelection(selection: MultiUrlData, index?: number) {
+ private _setSelection(selection: UmbLinkPickerLink, index?: number) {
if (index !== undefined && index >= 0) this.urls[index] = selection;
else this.urls.push(selection);
@@ -143,8 +133,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true }));
}
- private _openPicker(data?: MultiUrlData, index?: number) {
- const modalHandler = this._modalContext?.linkPicker({
+ private _openPicker(data?: UmbLinkPickerLink, index?: number) {
+ const modalHandler = this._modalContext?.open(UMB_LINK_PICKER_MODAL_TOKEN, {
link: {
name: data?.name,
published: data?.published,
@@ -160,8 +150,9 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
overlaySize: this.overlaySize || 'small',
},
});
- modalHandler?.onClose().then((newUrl: MultiUrlData) => {
+ modalHandler?.onSubmit().then((newUrl: UmbLinkPickerLink) => {
if (!newUrl) return;
+
this._setSelection(newUrl, index);
});
}
@@ -171,7 +162,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
Add`;
}
- private _renderItem(link: MultiUrlData, index: number) {
+ private _renderItem(link: UmbLinkPickerLink, index: number) {
return html` {
this._userGroupStore = usersContext;
this._observeUserGroups();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
index f0e2318abc..b2e077a60d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
@@ -3,6 +3,7 @@ import { css, html, nothing, PropertyValueMap } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbInputListBase } from '../input-list-base/input-list-base';
import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../users/users/repository/user.store';
+import { UMB_USER_PICKER_MODAL_TOKEN } from '../../../users/users/modals/user-picker';
import type { UserEntity } from '@umbraco-cms/models';
@customElement('umb-input-user')
@@ -38,7 +39,7 @@ export class UmbPickerUserElement extends UmbInputListBase {
connectedCallback(): void {
super.connectedCallback();
- this.pickerLayout = 'umb-picker-layout-user';
+ this.pickerToken = UMB_USER_PICKER_MODAL_TOKEN;
this.consumeContext(UMB_USER_STORE_CONTEXT_TOKEN, (userStore) => {
this._userStore = userStore;
this._observeUser();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
index e38dd43cb5..fdd455c893 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
@@ -1,14 +1,13 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { IRoutingInfo } from 'router-slot';
import { first, map } from 'rxjs';
import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context';
+import type { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent, IRoutingInfo } from '@umbraco-cms/router';
import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
-import type { ManifestDashboard, ManifestDashboardCollection, ManifestWithMeta } from '@umbraco-cms/models';
+import type { ManifestDashboard, ManifestDashboardCollection } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
@customElement('umb-section-dashboards')
export class UmbSectionDashboardsElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
index cb0656d8de..1b211a40b9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
@@ -2,17 +2,16 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'rxjs';
-import { IRoutingInfo } from 'router-slot';
import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface';
import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from './section.context';
+import type { UmbRouterSlotChangeEvent, IRoutingInfo } from '@umbraco-cms/router';
import type { ManifestSectionView, ManifestWorkspace, ManifestMenuSectionSidebarApp } from '@umbraco-cms/models';
import { umbExtensionsRegistry, createExtensionElement } from '@umbraco-cms/extensions-api';
import { UmbLitElement } from '@umbraco-cms/element';
-import './section-sidebar-menu/section-sidebar-menu.element.ts';
-import './section-views/section-views.element.ts';
-import '../../../settings/languages/app-language-select/app-language-select.element.ts';
-import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
+import './section-sidebar-menu/section-sidebar-menu.element';
+import './section-views/section-views.element';
+import '../../../settings/languages/app-language-select/app-language-select.element';
@customElement('umb-section')
export class UmbSectionElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
index c927ef409e..634b4a8d7c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
@@ -12,6 +12,7 @@ import '../../../../backoffice/shared/components/workspace/workspace-property-la
import { UmbObserverController } from '@umbraco-cms/observable-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
/**
* @element umb-workspace-property
@@ -133,9 +134,8 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
@state()
private _variantDifference?: string;
- // TODO: make interface for UMBPropertyEditorElement
@state()
- private _element?: { value?: any; config?: any } & HTMLElement; // TODO: invent interface for propertyEditorUI.
+ private _element?: UmbPropertyEditorElement;
@state()
private _value?: unknown;
@@ -203,7 +203,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
oldValue?.removeEventListener('change', this._onPropertyEditorChange as any as EventListener);
- this._element = el;
+ this._element = el as UmbPropertyEditorElement;
this._valueObserver?.destroy();
this._configObserver?.destroy();
@@ -218,7 +218,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
}
});
this._configObserver = this.observe(this._propertyContext.config, (config) => {
- if (this._element) {
+ if (this._element && config) {
this._element.config = config;
}
});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
index 01fd826ff7..6af6b320fa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-workspace-footer-layout
* @description Uses the alias to insert extensions that targets this workspace-alias.
- * @slot default - Slot for workspace footer items
+ * @slot - Slot for workspace footer items
* @slot actions - Slot for workspace actions
* @export
* @class UmbWorkspaceFooterLayout
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
index ceab788971..b673c8b304 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
@@ -1,4 +1,5 @@
-import './workspace-layout.element';
+import '../workspace-layout/workspace-layout.element';
+import './workspace-footer-layout.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
@@ -12,7 +13,7 @@ export default {
} as Meta;
export const AAAOverview: Story = () => html`
- Footer slot
+ Footer slot
Actions slot
`;
AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
index 19932ef0a7..8abacffa60 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
@@ -1,11 +1,10 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import { IRoutingInfo } from 'router-slot';
import { map } from 'rxjs';
import { repeat } from 'lit/directives/repeat.js';
-import type { UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
+import type { UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent, IRoutingInfo } from '@umbraco-cms/router';
import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import type { ManifestWorkspaceView, ManifestWorkspaceViewCollection } from '@umbraco-cms/models';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts
index 093ecba10c..f308f04e5b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts
@@ -1,18 +1,18 @@
-import './components';
-
+import { manifests as componentManifests } from './components';
import { manifests as propertyActionManifests } from './property-actions/manifests';
-import { manifests as propertyEditorModelManifests } from './property-editors/models/manifests';
-import { manifests as propertyEditorUIManifests } from './property-editors/uis/manifests';
+import { manifests as propertyEditorManifests } from './property-editors/manifests';
import { manifests as collectionViewManifests } from './collection/views/manifests';
+import { manifests as modalManifests } from './modals/manifests';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import { ManifestTypes } from '@umbraco-cms/extensions-registry';
export const manifests = [
+ ...componentManifests,
...propertyActionManifests,
- ...propertyEditorModelManifests,
- ...propertyEditorUIManifests,
+ ...propertyEditorManifests,
...collectionViewManifests,
+ ...modalManifests,
];
const registerExtensions = (manifests: Array) => {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/confirm/modal-layout-confirm.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
similarity index 51%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/confirm/modal-layout-confirm.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
index cdeab181b7..fb8f4cc781 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/confirm/modal-layout-confirm.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
@@ -1,25 +1,26 @@
-import { html, TemplateResult } from 'lit';
+import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '../modal-layout.element';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbConfirmModalData, UmbConfirmModalResult } from '.';
+import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbModalHandler } from '@umbraco-cms/modal';
-export interface UmbModalConfirmData {
- headline: string;
- content: TemplateResult | string;
- color?: 'positive' | 'danger';
- confirmLabel?: string;
-}
-
-@customElement('umb-modal-layout-confirm')
-export class UmbModalLayoutConfirmElement extends UmbModalLayoutElement {
+@customElement('umb-confirm-modal')
+export class UmbConfirmModalElement extends UmbLitElement {
static styles = [UUITextStyles];
+ @property({ attribute: false })
+ modalHandler?: UmbModalHandler;
+
+ @property({ type: Object })
+ data?: UmbConfirmModalData;
+
private _handleConfirm() {
- this.modalHandler?.close({ confirmed: true });
+ this.modalHandler?.submit();
}
private _handleCancel() {
- this.modalHandler?.close({ confirmed: false });
+ this.modalHandler?.reject();
}
render() {
@@ -40,8 +41,10 @@ export class UmbModalLayoutConfirmElement extends UmbModalLayoutElementThis example and all content items underneath and thereby making their content publicly
available.`,
confirmLabel: 'Publish',
};
-export const Positive: Story = () => html`
+export const Positive: Story = () => html`
-
+
`;
-const dangerData: UmbModalConfirmData = {
+const dangerData: UmbConfirmModalData = {
color: 'danger',
headline: 'Delete',
content: html`Delete This example and all items underneath.`,
confirmLabel: 'Delete',
};
-export const Danger: Story = () => html`
+export const Danger: Story = () => html`
-
+
`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts
new file mode 100644
index 0000000000..eb7a773cc3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts
@@ -0,0 +1,18 @@
+import type { TemplateResult } from 'lit';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbConfirmModalData {
+ headline: string;
+ content: TemplateResult | string;
+ color?: 'positive' | 'danger';
+ confirmLabel?: string;
+}
+
+export type UmbConfirmModalResult = undefined;
+
+export const UMB_CONFIRM_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.Confirm',
+ {
+ type: 'dialog',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
similarity index 88%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
index 1fbfcfba62..a7de5856ed 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
@@ -4,18 +4,15 @@ import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
-import { UmbModalLayoutElement } from '../modal-layout.element';
import icons from '../../../../../public-assets/icons/icons.json';
-
-export interface UmbModalIconPickerData {
- multiple: boolean;
- selection: string[];
-}
+import { UmbIconPickerModalData, UmbIconPickerModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
// TODO: Make use of UmbPickerLayoutBase
-@customElement('umb-modal-layout-icon-picker')
-export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement {
+// TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers
+@customElement('umb-icon-picker-modal')
+export class UmbIconPickerModalElement extends UmbModalBaseElement {
static styles = [
UUITextStyles,
css`
@@ -137,11 +134,11 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement = () => html`
+
+
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts
similarity index 54%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts
index 1fedae1a79..6831f4a0c9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts
@@ -1,16 +1,16 @@
import { expect, fixture, html } from '@open-wc/testing';
-import { UmbModalLayoutIconPickerElement } from './modal-layout-icon-picker.element';
+import { UmbIconPickerModalElement } from './icon-picker-modal.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('umb-modal-layout-icon-picker', () => {
- let element: UmbModalLayoutIconPickerElement;
+describe('umb-icon-picker-modal', () => {
+ let element: UmbIconPickerModalElement;
beforeEach(async () => {
- element = await fixture(html` `);
+ element = await fixture(html` `);
});
it('is defined with its own instance', () => {
- expect(element).to.be.instanceOf(UmbModalLayoutIconPickerElement);
+ expect(element).to.be.instanceOf(UmbIconPickerModalElement);
});
// TODO: Reinstate this test when the a11y audit is fixed on uui-color-picker
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts
new file mode 100644
index 0000000000..158a3a6a19
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts
@@ -0,0 +1,19 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbIconPickerModalData {
+ multiple: boolean;
+ selection: string[];
+}
+
+export interface UmbIconPickerModalResult {
+ color: string | undefined;
+ icon: string | undefined;
+}
+
+export const UMB_ICON_PICKER_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.IconPicker',
+ {
+ type: 'sidebar',
+ size: 'small',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
new file mode 100644
index 0000000000..ecbd202e43
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
@@ -0,0 +1,35 @@
+import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbLinkPickerModalData {
+ link: UmbLinkPickerLink;
+ config: UmbLinkPickerConfig;
+}
+
+export type UmbLinkPickerModalResult = UmbLinkPickerLink;
+
+export interface UmbLinkPickerLink {
+ icon?: string | null;
+ name?: string | null;
+ published?: boolean | null;
+ queryString?: string | null;
+ target?: string | null;
+ trashed?: boolean | null;
+ udi?: string | null;
+ url?: string | null;
+}
+
+// TODO: investigate: this looks more like a property editor configuration. Is this used in the correct way?
+export interface UmbLinkPickerConfig {
+ hideAnchor?: boolean;
+ ignoreUserStartNodes?: boolean;
+ overlaySize?: UUIModalSidebarSize;
+}
+
+export const UMB_LINK_PICKER_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.LinkPicker',
+ {
+ type: 'sidebar',
+ size: 'small',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
similarity index 82%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
index a67c8fd4d6..73b31ccc82 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
@@ -2,35 +2,13 @@ import { css, html, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, query, state } from 'lit/decorators.js';
import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-ui/uui';
-import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbModalLayoutElement } from '../modal-layout.element';
-import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+import { UmbTreeElement } from '../../components/tree/tree.element';
+import { UmbLinkPickerConfig, UmbLinkPickerLink, UmbLinkPickerModalData, UmbLinkPickerModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
import { buildUdi, getKeyFromUdi } from '@umbraco-cms/utils';
-export interface UmbModalLinkPickerData {
- link: LinkPickerData;
- config: LinkPickerConfig;
-}
-
-export interface LinkPickerData {
- icon?: string | null;
- name?: string | null;
- published?: boolean | null;
- queryString?: string | null;
- target?: string | null;
- trashed?: boolean | null;
- udi?: string | null;
- url?: string | null;
-}
-
-export interface LinkPickerConfig {
- hideAnchor?: boolean;
- ignoreUserStartNodes?: boolean;
- overlaySize?: UUIModalSidebarSize;
-}
-
-@customElement('umb-modal-layout-link-picker')
-export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement {
+@customElement('umb-link-picker-modal')
+export class UmbLinkPickerModalElement extends UmbModalBaseElement {
static styles = [
UUITextStyles,
css`
@@ -69,7 +47,7 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement = () => html`
+
+
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts
new file mode 100644
index 0000000000..f2f6a9f749
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts
@@ -0,0 +1,36 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.Confirm',
+ name: 'Confirm Modal',
+ loader: () => import('./confirm/confirm-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.IconPicker',
+ name: 'Icon Picker Modal',
+ loader: () => import('./icon-picker/icon-picker-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.LinkPicker',
+ name: 'Link Picker Modal',
+ loader: () => import('./link-picker/link-picker-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.PropertySettings',
+ name: 'Property Settings Modal',
+ loader: () => import('./property-settings/property-settings-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.SectionPicker',
+ name: 'Section Picker Modal',
+ loader: () => import('./section-picker/section-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
new file mode 100644
index 0000000000..c3719e1789
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
@@ -0,0 +1,26 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+// TODO: add interface for data
+// PropertyTypeViewModelBaseModel
+
+export interface UmbPropertySettingsModalResult {
+ label: string;
+ alias: string;
+ description: string;
+ propertyEditorUI?: string;
+ labelOnTop: boolean;
+ validation: {
+ mandatory: boolean;
+ mandatoryMessage: string;
+ pattern: string;
+ patternMessage: string;
+ };
+}
+
+export const UMB_PROPERTY_SETTINGS_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.PropertySettings',
+ {
+ type: 'sidebar',
+ size: 'small',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-settings/modal-layout-property-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-settings/modal-layout-property-settings.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index 0f64b7e34b..9aa4b3f305 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-settings/modal-layout-property-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -2,12 +2,14 @@ import { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-ui
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalContext, UmbModalLayoutElement, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from '../../property-editors/modals/property-editor-ui-picker';
+import { UmbPropertySettingsModalResult } from '.';
+import { UmbModalContext, UmbModalBaseElement, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { ManifestPropertyEditorUI } from '@umbraco-cms/extensions-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
-@customElement('umb-modal-layout-property-settings')
-export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement {
+@customElement('umb-property-settings-modal')
+export class UmbPropertySettingsModalElement extends UmbModalBaseElement {
static styles = [
UUITextStyles,
css`
@@ -182,7 +184,7 @@ export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement
}
#onClose() {
- this.modalHandler?.close();
+ this.modalHandler?.reject();
}
#onSubmit(event: SubmitEvent) {
@@ -196,17 +198,17 @@ export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement
const formData = new FormData(form);
- const label = this._name || null;
- const alias = this._alias || null;
- const description = formData.get('description');
- const propertyEditorUI = this._selectedPropertyEditorUIAlias || null;
+ const label = this._name || '';
+ const alias = this._alias || '';
+ const description = formData.get('description')?.toString() || '';
+ const propertyEditorUI = this._selectedPropertyEditorUIAlias || undefined;
const labelOnTop = this._appearanceIsTop;
const mandatory = this._mandatory;
- const mandatoryMessage = formData.get('mandatory-message');
- const pattern = formData.get('pattern');
- const patternMessage = formData.get('pattern-message');
+ const mandatoryMessage = formData.get('mandatory-message')?.toString() || '';
+ const pattern = formData.get('pattern')?.toString() || '';
+ const patternMessage = formData.get('pattern-message')?.toString() || '';
- this.modalHandler?.close({
+ this.modalHandler?.submit({
label,
alias,
description,
@@ -229,6 +231,7 @@ export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement
}
}
+ // TODO: move this to a helper so we can reuse it across the app
#generateAlias(text: string) {
//replace all spaces characters with a dash and remove all non-alphanumeric characters, except underscore. Allow a maximum of 1 dashes or underscores in a row.
return text
@@ -257,24 +260,24 @@ export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement
}
#onOpenPropertyEditorUIPicker() {
- const modalHandler = this.#modalContext?.propertyEditorUIPicker({
+ const modalHandler = this.#modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, {
selection: [],
});
if (!modalHandler) return;
- modalHandler?.onClose().then(({ selection } = {}) => {
- if (!selection) return;
-
+ modalHandler?.onSubmit().then(({ selection }) => {
+ if (selection.length === 0) return;
+ // TODO: we might should set the alias to null or empty string, if no selection.
this._selectedPropertyEditorUIAlias = selection[0];
this.#observePropertyEditorUI();
});
}
- /* TODO:
+ /* TODO:
From Github comment: We should not re-generate the alias when it gets locked again.
- Generally the auto generation is not determined by the lock, but wether it has been changed or saved.
- The experience in existing backoffice is: we only generate an alias when a property is new, once it has been saved it should never change unless the user actively does so.
+ Generally the auto generation is not determined by the lock, but wether it has been changed or saved.
+ The experience in existing backoffice is: we only generate an alias when a property is new, once it has been saved it should never change unless the user actively does so.
On new properties, the alias auto-generates until the user has made a change to it. */
#onToggleAliasLock() {
this._aliasLocked = !this._aliasLocked;
@@ -423,8 +426,10 @@ export class UmbModalLayoutPropertySettingsElement extends UmbModalLayoutElement
}
}
+export default UmbPropertySettingsModalElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-modal-layout-property-settings': UmbModalLayoutPropertySettingsElement;
+ 'umb-property-settings-modal': UmbPropertySettingsModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts
new file mode 100644
index 0000000000..a7dd0eac98
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts
@@ -0,0 +1,11 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbSectionPickerModalData {
+ multiple: boolean;
+ selection: string[];
+}
+
+export const UMB_SECTION_PICKER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.SectionPicker', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
index ff0470d6c7..6bef6233da 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
@@ -1,12 +1,12 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
+import { UmbModalElementPickerBase } from '@umbraco-cms/modal';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import type { ManifestSection } from '@umbraco-cms/models';
-@customElement('umb-picker-layout-section')
-export class UmbPickerLayoutSectionElement extends UmbModalLayoutPickerBase {
+@customElement('umb-section-picker-modal')
+export class UmbSectionPickerModalElement extends UmbModalElementPickerBase {
static styles = [
UUITextStyles,
css`
@@ -91,8 +91,10 @@ export class UmbPickerLayoutSectionElement extends UmbModalLayoutPickerBase {
- console.log('result', result);
- });
- }
+ modalHandler?.onSubmit().then((result) => {
+ console.log('result', result);
+ });
}
render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts
new file mode 100644
index 0000000000..38777fdc5c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts
@@ -0,0 +1,5 @@
+import { manifests as propertyEditorModelManifests } from './models/manifests';
+import { manifests as propertyEditorUIManifests } from './uis/manifests';
+import { manifests as modalManifests } from './modals/manifests';
+
+export const manifests = [...propertyEditorModelManifests, ...propertyEditorUIManifests, ...modalManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts
new file mode 100644
index 0000000000..34fdaa64db
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.PropertyEditorUIPicker',
+ name: 'Property Editor UI Picker Modal',
+ loader: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts
new file mode 100644
index 0000000000..74d4587f2e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts
@@ -0,0 +1,18 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbPropertyEditorUIPickerModalData {
+ selection?: Array;
+ submitLabel?: string;
+}
+
+export type UmbPropertyEditorUIPickerModalResult = {
+ selection: Array;
+};
+
+export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN = new UmbModalToken<
+ UmbPropertyEditorUIPickerModalData,
+ UmbPropertyEditorUIPickerModalResult
+>('Umb.Modal.PropertyEditorUIPicker', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
similarity index 88%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index c5004b4497..c679bfb670 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -4,23 +4,17 @@ import { customElement, property, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { groupBy } from 'lodash-es';
import type { UUIInputEvent } from '@umbraco-ui/uui';
-import type { UmbModalHandler } from '../../modal-handler';
+import { UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalResult } from '.';
+import type { UmbModalHandler } from '@umbraco-cms/modal';
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import { UmbLitElement } from '@umbraco-cms/element';
-export interface UmbModalPropertyEditorUIPickerData {
- selection?: Array;
- submitLabel?: string;
-}
-
interface GroupedPropertyEditorUIs {
[key: string]: Array;
}
-
-// TODO: make use of UmbPickerLayoutBase
-@customElement('umb-modal-layout-property-editor-ui-picker')
-export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbLitElement {
+@customElement('umb-property-editor-ui-picker-modal')
+export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
@@ -85,11 +79,8 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbLitElement {
`,
];
- @property({ attribute: false })
- modalHandler?: UmbModalHandler;
-
@property({ type: Object })
- data?: UmbModalPropertyEditorUIPickerData;
+ data?: UmbPropertyEditorUIPickerModalData;
@state()
private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {};
@@ -145,11 +136,14 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbLitElement {
}
private _close() {
- this.modalHandler?.close();
+ this.modalHandler?.reject();
}
+ @property({ attribute: false })
+ modalHandler?: UmbModalHandler;
+
private _submit() {
- this.modalHandler?.close({ selection: this._selection });
+ this.modalHandler?.submit({ selection: this._selection });
}
render() {
@@ -198,8 +192,10 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbLitElement {
}
}
+export default UmbPropertyEditorUIPickerModalElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-modal-layout-property-editor-ui-picker': UmbModalLayoutPropertyEditorUIPickerElement;
+ 'umb-property-editor-ui-picker-modal': UmbPropertyEditorUIPickerModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
new file mode 100644
index 0000000000..16d9f48b9d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
+import type { UmbPropertyEditorUIPickerModalData } from './';
+
+import './property-editor-ui-picker-modal.element';
+import '../../../components/body-layout/body-layout.element';
+
+export default {
+ title: 'API/Modals/Layouts/Property Editor UI Picker',
+ component: 'umb-property-editor-ui-picker-modal',
+ id: 'umb-property-editor-ui-picker-modal',
+} as Meta;
+
+const data: UmbPropertyEditorUIPickerModalData = { selection: [] };
+
+export const Overview: Story = () => html`
+
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
index a7821c5f42..88074e0bb5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
@@ -4,14 +4,15 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { IRoute, IRoutingInfo } from 'router-slot';
import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../../shared/components/workspace/workspace-variant/workspace-variant.context';
import { UmbVariantId } from '../../../../shared/variants/variant-id.class';
-import { UmbLitElement } from '@umbraco-cms/element';
import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
+import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-block-grid
*/
@customElement('umb-property-editor-ui-block-grid')
-export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement {
+export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
private _variantContext?: typeof UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN.TYPE;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
index 8af4f0bd49..50d78729d4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-block-list
*/
@customElement('umb-property-editor-ui-block-list')
-export class UmbPropertyEditorUIBlockListElement extends UmbLitElement {
+export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
index 0dda2b82d8..c46d39e441 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbInputCheckboxListElement } from '../../../components/input-checkbox-list/input-checkbox-list.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -9,7 +10,7 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
* @element umb-property-editor-ui-checkbox-list
*/
@customElement('umb-property-editor-ui-checkbox-list')
-export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement {
+export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
#value: Array = [];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
index a6fbfe8c1d..eb68421589 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
import type { SwatchDetails } from '@umbraco-cms/models';
@@ -10,7 +11,7 @@ import type { SwatchDetails } from '@umbraco-cms/models';
* @element umb-property-editor-ui-color-picker
*/
@customElement('umb-property-editor-ui-color-picker')
-export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
index db7efd7f55..07ad88691f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { InputType } from '@umbraco-ui/uui';
import { UmbPropertyValueChangeEvent } from '../..';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registry';
@@ -10,7 +11,7 @@ import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registr
* @element umb-property-editor-ui-date-picker
*/
@customElement('umb-property-editor-ui-date-picker')
-export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
private _value?: Date;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
index f6edebbb17..1247db88b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
@@ -1,12 +1,13 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import type { UmbInputDocumentPickerElement } from '../../../components/input-document-picker/input-document-picker.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import '../../../components/input-document-picker/input-document-picker.element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@customElement('umb-property-editor-ui-document-picker')
-export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
private _value: Array = [];
@property({ type: Array })
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
index 59321bab75..a9eda5c776 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.stories.ts
@@ -2,21 +2,12 @@ import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-document-picker.element';
-import { UmbModalContext } from 'src/core/modal';
import './property-editor-ui-document-picker.element';
-import '../../../components/backoffice-frame/backoffice-modal-container.element';
export default {
title: 'Property Editor UIs/Content Picker',
component: 'umb-property-editor-ui-document-picker',
id: 'umb-property-editor-ui-document-picker',
- decorators: [
- (story) =>
- html`
- ${story()}
-
- `,
- ],
} as Meta;
export const AAAOverview: Story = () =>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
index 7020970027..2c25c467f6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-dropdown
*/
@customElement('umb-property-editor-ui-dropdown')
-export class UmbPropertyEditorUIDropdownElement extends UmbLitElement {
+export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
index fae1c624d7..96bb3ccbd2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -9,7 +10,7 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
* @element umb-property-editor-ui-eye-dropper
*/
@customElement('umb-property-editor-ui-eye-dropper')
-export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement {
+export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
index ef101ab3cb..8e75f956cd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -1,14 +1,16 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal';
+import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../modals/icon-picker';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-icon-picker
*/
@customElement('umb-property-editor-ui-icon-picker')
-export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
@@ -27,7 +29,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
}
private _openModal() {
- this._modalContext?.iconPicker();
+ this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN);
}
render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
index d9a0a21ff6..37beb48855 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts
@@ -1,9 +1,9 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
+import type { UmbIconPickerModalElement } from '../../../../shared/modals/icon-picker/icon-picker-modal.element';
import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
import './property-editor-ui-icon-picker.element';
-import type { UmbModalLayoutIconPickerElement } from 'src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element';
export default {
title: 'Property Editor UIs/Icon Picker',
@@ -11,8 +11,8 @@ export default {
id: 'umb-property-editor-ui-icon-picker',
} as Meta;
-export const AAAOverview: Story = () =>
- html``;
+export const AAAOverview: Story = () =>
+ html``;
AAAOverview.storyName = 'Overview';
AAAOverview.decorators = [
(story) =>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
index 88b08bbf7e..99fd3118d1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-image-cropper
*/
@customElement('umb-property-editor-ui-image-cropper')
-export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement {
+export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
index f9ef77f241..c8c84bb914 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
@@ -1,13 +1,17 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-image-crops-configuration
*/
@customElement('umb-property-editor-ui-image-crops-configuration')
-export class UmbPropertyEditorUIImageCropsConfigurationElement extends UmbLitElement {
+export class UmbPropertyEditorUIImageCropsConfigurationElement
+ extends UmbLitElement
+ implements UmbPropertyEditorElement
+{
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
index 59e2a6f66e..e06e10061f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-label
*/
@customElement('umb-property-editor-ui-label')
-export class UmbPropertyEditorUILabelElement extends UmbLitElement {
+export class UmbPropertyEditorUILabelElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
index d20b64e31c..24c6a83027 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-markdown-editor
*/
@customElement('umb-property-editor-ui-markdown-editor')
-export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement {
+export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
index ee2fcef3ba..a4228b08eb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbInputMediaPickerElement } from '../../../../../backoffice/shared/components/input-media-picker/input-media-picker.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -8,7 +9,7 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
* @element umb-property-editor-ui-media-picker
*/
@customElement('umb-property-editor-ui-media-picker')
-export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
private _value: Array = [];
@property({ type: Array })
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
index 6a851c6516..b26690d1ad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-member-group-picker
*/
@customElement('umb-property-editor-ui-member-group-picker')
-export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
index 88d9b40f47..d1cc234e13 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-member-picker
*/
@customElement('umb-property-editor-ui-member-picker')
-export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index 59d0abd9e4..1d74448439 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -2,10 +2,9 @@ import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import {
- UmbInputMultiUrlPickerElement,
- MultiUrlData,
-} from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
+import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
+import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -14,11 +13,11 @@ import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
*/
@customElement('umb-property-editor-ui-multi-url-picker')
-export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property({ type: Array })
- value: MultiUrlData[] = [];
+ value: UmbLinkPickerLink[] = [];
@property({ type: Array, attribute: false })
public set config(config: DataTypePropertyModel[]) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index 5a9751bce4..2c187b7e19 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -4,7 +4,8 @@ import { customElement, property, query } from 'lit/decorators.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
import { UUIInputEvent } from '@umbraco-ui/uui-input';
import { UUIInputElement } from '@umbraco-ui/uui';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal';
+import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../modals/confirm';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/events';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -65,17 +66,15 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
}
#onDelete() {
- const modalHandler = this._modalContext?.confirm({
+ const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
headline: `Delete ${this.value || 'item'}`,
content: 'Are you sure you want to delete this item?',
color: 'danger',
confirmLabel: 'Delete',
});
- modalHandler?.onClose().then(({ confirmed }: any) => {
- if (confirmed) {
- this.dispatchEvent(new UmbDeleteEvent());
- }
+ modalHandler?.onSubmit().then(() => {
+ this.dispatchEvent(new UmbDeleteEvent());
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 8b57f43a6e..2634afeb01 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -5,6 +5,7 @@ import { UmbPropertyValueChangeEvent } from '../..';
import UmbInputMultipleTextStringElement, {
MultipleTextStringValue,
} from './input-multiple-text-string/input-multiple-text-string.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbChangeEvent } from '@umbraco-cms/events';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -17,7 +18,7 @@ export type MultipleTextStringConfigData = Array<{
* @element umb-property-editor-ui-multiple-text-string
*/
@customElement('umb-property-editor-ui-multiple-text-string')
-export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement {
+export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement implements UmbPropertyEditorElement {
@property({ type: Array })
public value: MultipleTextStringValue = [];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
index 4b998c64e4..4f110af285 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import type { UmbInputNumberRangeElement } from '../../../../shared/components/input-number-range/input-number-range.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import '../../../../shared/components/input-number-range/input-number-range.element';
@@ -14,7 +15,7 @@ type ValueType = {
* @element umb-property-editor-ui-number-range
*/
@customElement('umb-property-editor-ui-number-range')
-export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement {
+export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property({ type: Object })
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
index 84663ac489..f1bab95b1b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
@@ -1,10 +1,11 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-property-editor-ui-number')
-export class UmbPropertyEditorUINumberElement extends UmbLitElement {
+export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [
UUITextStyles,
css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
index 6f99e11e43..90ac01ce2e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-order-direction
*/
@customElement('umb-property-editor-ui-order-direction')
-export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement {
+export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
index 68b6369670..b660d0424c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-overlay-size
*/
@customElement('umb-property-editor-ui-overlay-size')
-export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement {
+export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
index 1730df37a9..da082889df 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import '../../../components/input-radio-button-list/input-radio-button-list.element';
import type { UmbInputRadioButtonListElement } from '../../../components/input-radio-button-list/input-radio-button-list.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -10,7 +11,7 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
* @element umb-property-editor-ui-radio-button-list
*/
@customElement('umb-property-editor-ui-radio-button-list')
-export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement {
+export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
#value = '';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
index 42a7ddb9d9..6e81051161 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
@@ -1,15 +1,16 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
+import UmbInputSliderElement from '../../../../shared/components/input-slider/input-slider.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
-import UmbInputSliderElement from 'src/backoffice/shared/components/input-slider/input-slider.element';
/**
* @element umb-property-editor-ui-slider
*/
@customElement('umb-property-editor-ui-slider')
-export class UmbPropertyEditorUISliderElement extends UmbLitElement {
+export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
index a7d922140f..61aaf420ba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tags
*/
@customElement('umb-property-editor-ui-tags')
-export class UmbPropertyEditorUITagsElement extends UmbLitElement {
+export class UmbPropertyEditorUITagsElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
index 6ae4ce2284..4ed5e651b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
@@ -1,10 +1,11 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-property-editor-ui-text-box')
-export class UmbPropertyEditorUITextBoxElement extends UmbLitElement {
+export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [
UUITextStyles,
css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
index ba7c1245cf..de39bfcbd7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
@@ -2,11 +2,12 @@ import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UUITextareaElement } from '@umbraco-ui/uui';
-import type { UmbWorkspacePropertyContext } from 'src/backoffice/shared/components/workspace-property/workspace-property.context';
+import type { UmbWorkspacePropertyContext } from '../../../../shared/components/workspace-property/workspace-property.context';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-property-editor-ui-textarea')
-export class UmbPropertyEditorUITextareaElement extends UmbLitElement {
+export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [
UUITextStyles,
css`
@@ -38,8 +39,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement {
}
render() {
- return html`
- `;
+ return html` `;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
index 627563c013..dc3e18e17f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce
*/
@customElement('umb-property-editor-ui-tiny-mce')
-export class UmbPropertyEditorUITinyMceElement extends UmbLitElement {
+export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
index 1e411f549a..7c942602c3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbInputToggleElement } from '../../../components/input-toggle/input-toggle.element';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
@@ -9,7 +10,7 @@ import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
* @element umb-property-editor-ui-toggle
*/
@customElement('umb-property-editor-ui-toggle')
-export class UmbPropertyEditorUIToggleElement extends UmbLitElement {
+export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 909cd79323..dc03722e39 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tree-picker
*/
@customElement('umb-property-editor-ui-tree-picker')
-export class UmbPropertyEditorUITreePickerElement extends UmbLitElement {
+export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
index 9687e6838c..aae5553516 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-upload-field
*/
@customElement('umb-property-editor-ui-upload-field')
-export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement {
+export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
index a66647915e..28b123ef1e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-user-picker
*/
@customElement('umb-property-editor-ui-user-picker')
-export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement {
+export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
index 341b8e274c..b9e0a781e1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
@@ -1,13 +1,14 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-value-type
*/
@customElement('umb-property-editor-ui-value-type')
-export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement {
+export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implements UmbPropertyEditorElement {
static styles = [UUITextStyles];
@property()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index cc2ddddd6e..38b5625580 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -4,7 +4,10 @@ import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit-html/directives/when.js';
import { UmbTableConfig, UmbTableColumn, UmbTableItem } from '../../../../backoffice/shared/components/table';
import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository';
-import { UmbCreateDictionaryModalResultData } from '../../dictionary/entity-actions/create/create-dictionary-modal-layout.element';
+import {
+ UmbCreateDictionaryModalResult,
+ UMB_CREATE_DICTIONARY_MODAL_TOKEN,
+} from '../../dictionary/entity-actions/create/';
import { UmbLitElement } from '@umbraco-cms/element';
import { DictionaryOverviewModel, LanguageModel } from '@umbraco-cms/backend-api';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
@@ -156,13 +159,10 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
// TODO: what to do if modal service is not available?
if (!this.#modalContext) return;
- const modalHandler = this.#modalContext?.open('umb-create-dictionary-modal-layout', {
- type: 'sidebar',
- data: { unique: null },
- });
+ const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL_TOKEN, { unique: null });
// TODO: get type from modal result
- const { name }: UmbCreateDictionaryModalResultData = await modalHandler.onClose();
+ const { name } = await modalHandler.onSubmit();
if (!name) return;
const result = await this.#repo?.create({ $type: '', name, parentKey: null, translations: [], key: '' });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index 0ad2d98afd..4b462e515f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -1,38 +1,32 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, query } from 'lit/decorators.js';
-import { Observable } from 'rxjs';
import { when } from 'lit-html/directives/when.js';
-import { UmbModalLayoutElement } from '@umbraco-cms/modal';
+import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
-export interface UmbCreateDictionaryModalData {
- unique: string | null;
- parentName: Observable
-}
-
-export interface UmbCreateDictionaryModalResultData {
- name?: string;
-}
-
-@customElement('umb-create-dictionary-modal-layout')
-export class UmbCreateDictionaryModalLayoutElement extends UmbModalLayoutElement {
+@customElement('umb-create-dictionary-modal')
+export class UmbCreateDictionaryModalLayoutElement extends UmbModalBaseElement<
+ UmbCreateDictionaryModalData,
+ UmbCreateDictionaryModalResult
+> {
static styles = [UUITextStyles];
@query('#form')
private _form!: HTMLFormElement;
- #parentName?: string;
+ #parentName?: string;
- connectedCallback() {
- super.connectedCallback();
+ connectedCallback() {
+ super.connectedCallback();
- if (this.data?.parentName) {
- this.observe(this.data.parentName, (value) => this.#parentName = value);
- }
- }
+ if (this.data?.parentName) {
+ this.observe(this.data.parentName, (value) => (this.#parentName = value));
+ }
+ }
#handleCancel() {
- this.modalHandler?.close({});
+ this.modalHandler?.reject();
}
#submitForm() {
@@ -47,38 +41,40 @@ export class UmbCreateDictionaryModalLayoutElement extends UmbModalLayoutElement
const formData = new FormData(form);
- this.modalHandler?.close({
+ this.modalHandler?.submit({
name: formData.get('name') as string,
- });
+ });
}
render() {
- return html`
- ${when(this.#parentName, () => html`Create a dictionary item under ${this.#parentName}
`)}
-
-
-
-
-
- `;
+ return html`
+ ${when(this.#parentName, () => html`Create a dictionary item under ${this.#parentName}
`)}
+
+
+
+
+
+ `;
}
}
+export default UmbCreateDictionaryModalLayoutElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-create-dictionary-modal-layout': UmbCreateDictionaryModalLayoutElement;
+ 'umb-create-dictionary-modal': UmbCreateDictionaryModalLayoutElement;
}
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
index 2560f5b2ea..2de1ddc2e9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
@@ -4,7 +4,7 @@ import {
UmbSectionSidebarContext,
UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
} from '../../../../../backoffice/shared/components/section/section-sidebar/section-sidebar.context';
-import type { UmbCreateDictionaryModalResultData } from './create-dictionary-modal-layout.element';
+import { UMB_CREATE_DICTIONARY_MODAL_TOKEN } from '.';
import { UmbEntityActionBase } from '@umbraco-cms/entity-action';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -38,13 +38,13 @@ export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase
// TODO: how can we get the current entity detail in the modal? Passing the observable
// feels a bit hacky. Works, but hacky.
- const modalHandler = this.#modalContext?.open('umb-create-dictionary-modal-layout', {
- type: 'sidebar',
- data: { unique: this.unique, parentName: this.#sectionSidebarContext.headline },
+ const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL_TOKEN, {
+ unique: this.unique,
+ parentName: this.#sectionSidebarContext.headline,
});
// TODO: get type from modal result
- const { name }: UmbCreateDictionaryModalResultData = await modalHandler.onClose();
+ const { name } = await modalHandler.onSubmit();
if (!name) return;
const result = await this.repository?.create({
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts
new file mode 100644
index 0000000000..32139c6bd6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts
@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+// TODO: add interface for data
+// PropertyTypeViewModelBaseModel
+export interface UmbCreateDictionaryModalData {
+ unique: string | null;
+ parentName?: Observable;
+}
+
+export interface UmbCreateDictionaryModalResult {
+ name?: string;
+}
+
+export const UMB_CREATE_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+ UmbCreateDictionaryModalData,
+ UmbCreateDictionaryModalResult
+>('Umb.Modal.CreateDictionary', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts
index 690cea3993..bce5dc282a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts
@@ -1,25 +1,21 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, query } from 'lit/decorators.js';
-import { UmbModalLayoutElement } from '@umbraco-cms/modal';
-
-export interface UmbExportDictionaryModalData {
- unique: string | null;
-}
-
-export interface UmbExportDictionaryModalResultData {
- includeChildren?: boolean;
-}
+import { UmbExportDictionaryModalData, UmbExportDictionaryModalResult } from '.';
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
@customElement('umb-export-dictionary-modal-layout')
-export class UmbExportDictionaryModalLayoutElement extends UmbModalLayoutElement {
+export class UmbExportDictionaryModalLayoutElement extends UmbModalBaseElement<
+ UmbExportDictionaryModalData,
+ UmbExportDictionaryModalResult
+> {
static styles = [UUITextStyles];
@query('#form')
private _form!: HTMLFormElement;
#handleClose() {
- this.modalHandler?.close({});
+ this.modalHandler?.reject();
}
#submitForm() {
@@ -34,7 +30,7 @@ export class UmbExportDictionaryModalLayoutElement extends UmbModalLayoutElement
const formData = new FormData(form);
- this.modalHandler?.close({ includeChildren: (formData.get('includeDescendants') as string) === 'on' });
+ this.modalHandler?.submit({ includeChildren: (formData.get('includeDescendants') as string) === 'on' });
}
render() {
@@ -53,6 +49,8 @@ export class UmbExportDictionaryModalLayoutElement extends UmbModalLayoutElement
}
}
+export default UmbExportDictionaryModalLayoutElement;
+
declare global {
interface HTMLElementTagNameMap {
'umb-export-dictionary-modal-layout': UmbExportDictionaryModalLayoutElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
index 8b50b1b2a9..de6d5bcc4c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
@@ -1,6 +1,6 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import type { UmbExportDictionaryModalResultData } from './export-dictionary-modal-layout.element';
+import { UMB_EXPORT_DICTIONARY_MODAL_TOKEN } from '.';
import { UmbEntityActionBase } from '@umbraco-cms/entity-action';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -25,13 +25,10 @@ export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase
// TODO: what to do if modal service is not available?
if (!this.#modalContext) return;
- const modalHandler = this.#modalContext?.open('umb-export-dictionary-modal-layout', {
- type: 'sidebar',
- data: { unique: this.unique },
- });
+ const modalHandler = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL_TOKEN, { unique: this.unique });
// TODO: get type from modal result
- const { includeChildren }: UmbExportDictionaryModalResultData = await modalHandler.onClose();
+ const { includeChildren } = await modalHandler.onSubmit();
if (includeChildren === undefined) return;
const result = await this.repository?.export(this.unique, includeChildren);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts
new file mode 100644
index 0000000000..891165f3c0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts
@@ -0,0 +1,17 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbExportDictionaryModalData {
+ unique: string | null;
+}
+
+export interface UmbExportDictionaryModalResult {
+ includeChildren?: boolean;
+}
+
+export const UMB_EXPORT_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+ UmbExportDictionaryModalData,
+ UmbExportDictionaryModalResult
+>('Umb.Modal.ExportDictionary', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
index a2fe92a240..b178a42ac3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
@@ -5,20 +5,15 @@ import { when } from 'lit-html/directives/when.js';
import { repeat } from 'lit/directives/repeat.js';
import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
+import { UmbImportDictionaryModalData, UmbImportDictionaryModalResult } from '.';
import { DictionaryUploadModel } from '@umbraco-cms/backend-api';
-import { UmbModalLayoutElement } from '@umbraco-cms/modal';
-
-export interface UmbImportDictionaryModalData {
- unique: string | null;
-}
-
-export interface UmbImportDictionaryModalResultData {
- fileName?: string;
- parentKey?: string;
-}
+import { UmbModalBaseElement } from '@umbraco-cms/modal';
@customElement('umb-import-dictionary-modal-layout')
-export class UmbImportDictionaryModalLayoutElement extends UmbModalLayoutElement {
+export class UmbImportDictionaryModalLayoutElement extends UmbModalBaseElement<
+ UmbImportDictionaryModalData,
+ UmbImportDictionaryModalResult
+> {
static styles = [
UUITextStyles,
css`
@@ -51,14 +46,14 @@ export class UmbImportDictionaryModalLayoutElement extends UmbModalLayoutElement
async #importDictionary() {
if (!this._uploadedDictionary?.fileName) return;
- this.modalHandler?.close({
+ this.modalHandler?.submit({
fileName: this._uploadedDictionary.fileName,
parentKey: this._selection[0],
});
}
#handleClose() {
- this.modalHandler?.close({});
+ this.modalHandler?.reject();
}
#submitForm() {
@@ -138,7 +133,12 @@ export class UmbImportDictionaryModalLayoutElement extends UmbModalLayoutElement
selectable>
-
+
`;
}
@@ -156,6 +156,8 @@ export class UmbImportDictionaryModalLayoutElement extends UmbModalLayoutElement
}
}
+export default UmbImportDictionaryModalLayoutElement;
+
declare global {
interface HTMLElementTagNameMap {
'umb-import-dictionary-modal-layout': UmbImportDictionaryModalLayoutElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
index 98a14e6e9e..b8d5d411b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
@@ -1,6 +1,6 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import type { UmbImportDictionaryModalResultData } from './import-dictionary-modal-layout.element';
+import { UMB_IMPORT_DICTIONARY_MODAL_TOKEN } from '.';
import { UmbEntityActionBase } from '@umbraco-cms/entity-action';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -25,13 +25,10 @@ export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase
// TODO: what to do if modal service is not available?
if (!this.#modalContext) return;
- const modalHandler = this.#modalContext?.open('umb-import-dictionary-modal-layout', {
- type: 'sidebar',
- data: { unique: this.unique },
- });
+ const modalHandler = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL_TOKEN, { unique: this.unique });
// TODO: get type from modal result
- const { fileName, parentKey }: UmbImportDictionaryModalResultData = await modalHandler.onClose();
+ const { fileName, parentKey } = await modalHandler.onSubmit();
if (!fileName) return;
const result = await this.repository?.import(fileName, parentKey);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts
new file mode 100644
index 0000000000..41f2b60917
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts
@@ -0,0 +1,20 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+// TODO: add interface for data
+// PropertyTypeViewModelBaseModel
+export interface UmbImportDictionaryModalData {
+ unique: string | null;
+}
+
+export interface UmbImportDictionaryModalResult {
+ fileName?: string;
+ parentKey?: string;
+}
+
+export const UMB_IMPORT_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+ UmbImportDictionaryModalData,
+ UmbImportDictionaryModalResult
+>('Umb.Modal.ImportDictionary', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
index 176e975a92..7e75f56e94 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
@@ -4,7 +4,7 @@ import UmbImportDictionaryEntityAction from './import/import.action';
import UmbExportDictionaryEntityAction from './export/export.action';
import UmbCreateDictionaryEntityAction from './create/create.action';
import { UmbDeleteEntityAction, UmbMoveEntityAction } from '@umbraco-cms/entity-action';
-import type { ManifestEntityAction } from '@umbraco-cms/models';
+import type { ManifestEntityAction, ManifestModal } from '@umbraco-cms/models';
const entityType = 'dictionary-item';
const repositoryAlias = DICTIONARY_REPOSITORY_ALIAS;
@@ -90,4 +90,25 @@ const entityActions: Array = [
},
];
-export const manifests = [...entityActions];
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.CreateDictionary',
+ name: 'Create Dictionary Modal',
+ loader: () => import('./create/create-dictionary-modal-layout.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.ExportDictionary',
+ name: 'Export Dictionary Modal',
+ loader: () => import('./export/export-dictionary-modal-layout.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.ImportDictionary',
+ name: 'Import Dictionary Modal',
+ loader: () => import('./import/import-dictionary-modal-layout.element'),
+ },
+];
+
+export const manifests = [...entityActions, ...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index 1f8451c341..974928025b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
+import { UMB_CURRENT_USER_MODAL_TOKEN } from './modals/current-user';
import type { UserDetails } from '@umbraco-cms/models';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -46,7 +47,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement {
}
private _handleUserClick() {
- this._modalContext?.userSettings();
+ this._modalContext?.open(UMB_CURRENT_USER_MODAL_TOKEN);
}
render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts
index a76d311f4d..f805aad559 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts
@@ -1,3 +1,4 @@
+import { manifests as modalManifests } from './modals/manifests';
import type { ManifestHeaderApp, ManifestUserDashboard } from '@umbraco-cms/models';
export const userDashboards: Array = [
@@ -25,4 +26,4 @@ export const headerApps: Array = [
},
];
-export const manifests = [...userDashboards, ...headerApps];
+export const manifests = [...userDashboards, ...headerApps, ...modalManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
similarity index 88%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index 927af7e900..2440cb743a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -1,15 +1,12 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
-import { UmbModalHandler } from '..';
+import { UmbChangePasswordModalData } from '.';
+import { UmbModalHandler } from '@umbraco-cms/modal';
import { UmbLitElement } from '@umbraco-cms/element';
-export interface UmbModalChangePasswordData {
- requireOldPassword: boolean;
-}
-
-@customElement('umb-modal-layout-change-password')
-export class UmbModalLayoutChangePasswordElement extends UmbLitElement {
+@customElement('umb-change-password-modal')
+export class UmbChangePasswordModalElement extends UmbLitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
@@ -32,10 +29,10 @@ export class UmbModalLayoutChangePasswordElement extends UmbLitElement {
modalHandler?: UmbModalHandler;
@property()
- data?: UmbModalChangePasswordData;
+ data?: UmbChangePasswordModalData;
private _close() {
- this.modalHandler?.close();
+ this.modalHandler?.submit();
}
private _handleSubmit(e: SubmitEvent) {
@@ -105,8 +102,10 @@ export class UmbModalLayoutChangePasswordElement extends UmbLitElement {
}
}
+export default UmbChangePasswordModalElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-modal-layout-change-password': UmbModalLayoutChangePasswordElement;
+ 'umb-change-password-modal': UmbChangePasswordModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts
new file mode 100644
index 0000000000..6a3504c607
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts
@@ -0,0 +1,12 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export interface UmbChangePasswordModalData {
+ requireOldPassword: boolean;
+}
+
+export const UMB_CHANGE_PASSWORD_MODAL_TOKEN = new UmbModalToken(
+ 'Umb.Modal.ChangePassword',
+ {
+ type: 'dialog',
+ }
+);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index e8bafe3cb1..e64252a10d 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -1,21 +1,19 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '..';
import {
UmbCurrentUserHistoryStore,
UmbCurrentUserHistoryItem,
UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
-} from '../../../backoffice/users/current-user/current-user-history.store';
-import {
- UmbCurrentUserStore,
- UMB_CURRENT_USER_STORE_CONTEXT_TOKEN,
-} from '../../../backoffice/users/current-user/current-user.store';
+} from '../../current-user-history.store';
+import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
+import { UMB_CHANGE_PASSWORD_MODAL_TOKEN } from '../change-password';
+import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
import type { UserDetails } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
-@customElement('umb-modal-layout-current-user')
-export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
+@customElement('umb-current-user-modal')
+export class UmbCurrentUserModalElement extends UmbLitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
@@ -128,7 +126,7 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
}
private _close() {
- this.modalHandler?.close();
+ this.modalHandler?.submit();
}
private _edit() {
@@ -141,7 +139,9 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
private _changePassword() {
if (!this._modalContext) return;
- this._modalContext.changePassword({ requireOldPassword: this._currentUserStore?.isAdmin || false });
+ this._modalContext.open(UMB_CHANGE_PASSWORD_MODAL_TOKEN, {
+ requireOldPassword: this._currentUserStore?.isAdmin || false,
+ });
}
private _renderHistoryItem(item: UmbCurrentUserHistoryItem) {
@@ -202,8 +202,10 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
}
}
+export default UmbCurrentUserModalElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-modal-layout-current-user': UmbModalLayoutCurrentUserElement;
+ 'umb-current-user-modal': UmbCurrentUserModalElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts
new file mode 100644
index 0000000000..978eeb535c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts
@@ -0,0 +1,6 @@
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export const UMB_CURRENT_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.CurrentUser', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts
new file mode 100644
index 0000000000..68cc073e78
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts
@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.CurrentUser',
+ name: 'Current User Modal',
+ loader: () => import('./current-user/current-user-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
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..b56c013f03
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts
@@ -0,0 +1,10 @@
+import type { UserDetails } from '@umbraco-cms/models';
+import { UmbModalToken, UmbPickerModalData } from '@umbraco-cms/modal';
+
+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/core/modal/layouts/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 83%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/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 745f811d05..05332be801 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/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
@@ -1,13 +1,12 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
-import { UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from '../../../../backoffice/users/user-groups/repository/user-group.store';
-import type { UmbUserGroupStore } from '../../../../backoffice/users/user-groups/repository/user-group.store';
+import { UmbUserGroupStore, UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from '../../repository/user-group.store';
+import { UmbModalElementPickerBase } from '@umbraco-cms/modal';
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 UmbModalElementPickerBase {
static styles = [
UUITextStyles,
css`
@@ -101,8 +100,10 @@ export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase = [
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.CreateUser',
+ name: 'Create User Modal',
+ loader: () => import('./create-user/create-user-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.InviteUser',
+ name: 'Invite User Modal',
+ loader: () => import('./invite-user/invite-user-modal.element'),
+ },
+ {
+ type: 'modal',
+ alias: 'Umb.Modal.UserPicker',
+ name: 'User Picker Modal',
+ loader: () => import('./user-picker/user-picker-modal.element'),
+ },
+];
+
+export const manifests = [...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts
new file mode 100644
index 0000000000..501ca347b8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts
@@ -0,0 +1,7 @@
+import type { UserDetails } from '@umbraco-cms/models';
+import { UmbModalToken, UmbPickerModalData } from '@umbraco-cms/modal';
+
+export const UMB_USER_PICKER_MODAL_TOKEN = new UmbModalToken>('Umb.Modal.UserPicker', {
+ type: 'sidebar',
+ size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
index 9efaa77bfb..d66a0d2ac8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
@@ -1,12 +1,12 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
-import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../../backoffice/users/users/repository/user.store';
+import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../repository/user.store';
+import { UmbModalElementPickerBase } from '@umbraco-cms/modal';
import type { UserDetails } from '@umbraco-cms/models';
-@customElement('umb-picker-layout-user')
-export class UmbPickerLayoutUserElement extends UmbModalLayoutPickerBase {
+@customElement('umb-user-picker-modal')
+export class UmbUserPickerModalElement extends UmbModalElementPickerBase {
static styles = [
UUITextStyles,
css`
@@ -105,8 +105,10 @@ export class UmbPickerLayoutUserElement extends UmbModalLayoutPickerBase unknown;
+ create?: (host: UmbControllerHostInterface) => unknown;
/**
* The value to provide to the context.
@@ -44,3 +43,9 @@ export class UmbContextProviderElement extends UmbLitElement {
return html``;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-context-provider': UmbContextProviderElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
similarity index 79%
rename from src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
index 85dbc727fa..2b628489ce 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
@@ -1,7 +1,7 @@
-import { html } from 'lit';
+import { html } from 'lit-html';
import { customElement, property } from 'lit/decorators.js';
-import { UmbLitElement } from './lit-element.element';
-import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-controller-host-test')
export class UmbControllerHostTestElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
similarity index 86%
rename from src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts
rename to src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
index 8cc3e58aaf..5409840806 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
@@ -1,9 +1,9 @@
import { expect, fixture, html } from '@open-wc/testing';
import { customElement } from 'lit/decorators.js';
-import { UmbControllerHostTestElement } from './controller-host.element';
-import { UmbLitElement } from './lit-element.element';
+import { UmbControllerHostTestElement } from './controller-host-test.element';
+import { UmbLitElement } from '@umbraco-cms/element';
import { UmbContextProviderController } from '@umbraco-cms/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
@customElement('umb-controller-host-test-consumer')
export class ControllerHostTestConsumerElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/users.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/users.data.ts
index ae17f76390..2ac21363a2 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/users.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/users.data.ts
@@ -53,7 +53,7 @@ export const data: Array = [
contentStartNodes: [],
mediaStartNodes: [],
icon: 'umb:user',
- name: 'Lurleen Rozycki',
+ name: 'Lasse Fredslund',
email: 'lrozycki0@technorati.com',
language: 'Bosnian',
status: 'invited',
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/index.ts b/src/Umbraco.Web.UI.Client/src/core/modal/index.ts
deleted file mode 100644
index 0065759e9e..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './modal.context';
-export * from './modal-handler';
-export * from './layouts/modal-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.stories.ts
deleted file mode 100644
index 632d63f007..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import '../../../../backoffice/shared/components/body-layout/body-layout.element';
-import './modal-layout-content-picker.element';
-
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-
-import type {
- UmbModalLayoutContentPickerElement,
- UmbModalContentPickerData,
-} from './modal-layout-content-picker.element';
-
-export default {
- title: 'API/Modals/Layouts/Content Picker',
- component: 'umb-modal-layout-content-picker',
- id: 'modal-layout-content-picker',
-} as Meta;
-
-const data: UmbModalContentPickerData = {
- multiple: true,
- selection: [],
-};
-
-export const Overview: Story = () => html`
-
-
-`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
deleted file mode 100644
index b36e9f04aa..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import '../../../../backoffice/shared/components/body-layout/body-layout.element';
-import './modal-layout-icon-picker.element';
-
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-
-import type { UmbModalLayoutIconPickerElement, UmbModalIconPickerData } from './modal-layout-icon-picker.element';
-
-export default {
- title: 'API/Modals/Layouts/Icon Picker',
- component: 'umb-modal-layout-icon-picker',
- id: 'modal-layout-icon-picker',
-} as Meta;
-
-const data: UmbModalIconPickerData = {
- multiple: true,
- selection: [],
-};
-
-export const Overview: Story = () => html`
-
-
-`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts
deleted file mode 100644
index 6f9b80f05f..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import '../../../../backoffice/shared/components/body-layout/body-layout.element';
-import './modal-layout-link-picker.element';
-
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-
-import type { UmbModalLayoutLinkPickerElement } from './modal-layout-link-picker.element';
-
-export default {
- title: 'API/Modals/Layouts/Link Picker',
- component: 'umb-modal-layout-link-picker',
- id: 'modal-layout-link-picker',
-} as Meta;
-
-export const Overview: Story = () => html`
-
-
-`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout.element.ts
deleted file mode 100644
index bf28bcae3a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout.element.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { UmbModalHandler } from '..';
-import { UmbLitElement } from '@umbraco-cms/element';
-
-@customElement('umb-modal-layout')
-export class UmbModalLayoutElement extends UmbLitElement {
- @property({ attribute: false })
- modalHandler?: UmbModalHandler;
-
- @property({ type: Object })
- data?: UmbModalData;
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- 'umb-modal-layout': UmbModalLayoutElement;
- }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.stories.ts
deleted file mode 100644
index 917bce04dc..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-import type {
- UmbModalLayoutPropertyEditorUIPickerElement,
- UmbModalPropertyEditorUIPickerData,
-} from './modal-layout-property-editor-ui-picker.element';
-import './modal-layout-property-editor-ui-picker.element';
-
-import '../../../../backoffice/shared/components/body-layout/body-layout.element';
-
-export default {
- title: 'API/Modals/Layouts/Property Editor UI Picker',
- component: 'umb-modal-layout-property-editor-ui-picker',
- id: 'modal-layout-property-editor-ui-picker',
-} as Meta;
-
-const data: UmbModalPropertyEditorUIPickerData = { selection: [] };
-
-export const Overview: Story = () => html`
-
-`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal-handler.ts
deleted file mode 100644
index e99f949cb2..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/modal-handler.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { UUIDialogElement } from '@umbraco-ui/uui';
-import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
-import type { UUIModalSidebarElement, UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { v4 as uuidv4 } from 'uuid';
-
-import { UmbModalOptions } from './modal.context';
-
-//TODO consider splitting this into two separate handlers
-export class UmbModalHandler {
- private _closeResolver: any;
- private _closePromise: any;
-
- public element: UUIModalDialogElement | UUIModalSidebarElement;
- public key: string;
- public type: string;
- public size: UUIModalSidebarSize;
-
- constructor(element: string | HTMLElement, options?: UmbModalOptions) {
- this.key = uuidv4();
-
- this.type = options?.type || 'dialog';
- this.size = options?.size || 'small';
- this.element = this._createElement(element, options);
-
- // TODO: Consider if its right to use Promises, or use another event based system? Would we need to be able to cancel an event, to then prevent the closing..?
- this._closePromise = new Promise((resolve) => {
- this._closeResolver = resolve;
- });
- }
-
- private _createElement(element: string | HTMLElement, options?: UmbModalOptions) {
- const layoutElement = this._createInsideElement(element, options?.data);
- return this.type === 'sidebar'
- ? this._createSidebarElement(layoutElement)
- : this._createDialogElement(layoutElement);
- }
-
- private _createSidebarElement(insideElement: HTMLElement) {
- const sidebarElement = document.createElement('uui-modal-sidebar');
- sidebarElement.appendChild(insideElement);
- sidebarElement.size = this.size;
- return sidebarElement;
- }
-
- private _createDialogElement(insideElement: HTMLElement) {
- const modalDialogElement = document.createElement('uui-modal-dialog');
- const dialogElement: UUIDialogElement = document.createElement('uui-dialog');
- modalDialogElement.appendChild(dialogElement);
- dialogElement.appendChild(insideElement);
- return modalDialogElement;
- }
-
- private _createInsideElement(element: string | HTMLElement, data: unknown) {
- const insideElement: any = element instanceof HTMLElement ? element : document.createElement(element);
- insideElement.data = data;
- insideElement.modalHandler = this;
- return insideElement;
- }
-
- public close(...args: any) {
- this._closeResolver(...args);
- this.element.close();
- }
-
- public onClose(): Promise {
- return this._closePromise;
- }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts
deleted file mode 100644
index 055e7ba532..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-// TODO: lazy load
-import './layouts/confirm/modal-layout-confirm.element';
-import './layouts/content-picker/modal-layout-content-picker.element';
-import './layouts/media-picker/modal-layout-media-picker.element';
-import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
-import './layouts/property-settings/modal-layout-property-settings.element';
-import './layouts/modal-layout-current-user.element';
-import './layouts/icon-picker/modal-layout-icon-picker.element';
-import '../../backoffice/settings/languages/language-picker/language-picker-modal-layout.element';
-import './layouts/link-picker/modal-layout-link-picker.element';
-import './layouts/search/modal-layout-search.element.ts';
-
-import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { BehaviorSubject } from 'rxjs';
-import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
-import { UmbModalChangePasswordData } from './layouts/modal-layout-change-password.element';
-import type { UmbModalIconPickerData } from './layouts/icon-picker/modal-layout-icon-picker.element';
-import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element';
-import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
-import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
-import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element';
-import type { UmbModalLinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element';
-import { UmbModalHandler } from './modal-handler';
-import { UmbPickerModalData } from './layouts/modal-layout-picker-base';
-import { UmbContextToken } from '@umbraco-cms/context-api';
-import { LanguageModel } from '@umbraco-cms/backend-api';
-
-export type UmbModalType = 'dialog' | 'sidebar';
-
-export interface UmbModalOptions {
- type?: UmbModalType;
- size?: UUIModalSidebarSize;
- data?: UmbModalData;
-}
-
-// TODO: we should find a way to easily open a modal without adding custom methods to this context. It would result in a better separation of concerns.
-// TODO: move all layouts into their correct "silo" folders. User picker should live with users etc.
-export class UmbModalContext {
- // TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
- #modals = new BehaviorSubject(>[]);
- public readonly modals = this.#modals.asObservable();
-
- /**
- * Opens a Confirm modal
- * @public
- * @param {UmbModalConfirmData} data
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public confirm(data: UmbModalConfirmData): UmbModalHandler {
- return this.open('umb-modal-layout-confirm', { data, type: 'dialog' });
- }
-
- /**
- * Opens a Content Picker sidebar modal
- * @public
- * @param {UmbModalContentPickerData} [data]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public contentPicker(data?: UmbModalContentPickerData): UmbModalHandler {
- return this.open('umb-modal-layout-content-picker', { data, type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens a Media Picker sidebar modal
- * @public
- * @param {UmbModalMediaPickerData} [data]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public mediaPicker(data?: UmbModalMediaPickerData): UmbModalHandler {
- return this.open('umb-modal-layout-media-picker', { data, type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens a Property Editor UI sidebar modal
- * @public
- * @param {UmbModalPropertyEditorUIPickerData} [data]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public propertyEditorUIPicker(data?: UmbModalPropertyEditorUIPickerData): UmbModalHandler {
- return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens an Icon Picker sidebar modal
- * @public
- * @param {UmbModalIconPickerData} [data]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler {
- return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens an Link Picker sidebar modal
- * @public
- * @param {(LinkPickerData & LinkPickerConfig)} [data]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public linkPicker(data?: UmbModalLinkPickerData): UmbModalHandler {
- return this.open('umb-modal-layout-link-picker', {
- data,
- type: 'sidebar',
- size: data?.config?.overlaySize || 'small',
- });
- }
-
- /**
- * Opens the user settings sidebar modal
- * @public
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public userSettings(): UmbModalHandler {
- return this.open('umb-modal-layout-current-user', { type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens the property settings sidebar modal
- * @public
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalService
- */
- public propertySettings(): UmbModalHandler {
- return this.open('umb-modal-layout-property-settings', { type: 'sidebar', size: 'small' });
- }
-
- /**
- * Opens the user settings sidebar modal
- * @public
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public changePassword(data: UmbModalChangePasswordData): UmbModalHandler {
- return this.open('umb-modal-layout-change-password', { data, type: 'dialog' });
- }
-
- /**
- * Opens a language picker sidebar modal
- * @public
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public languagePicker(data: UmbPickerModalData): UmbModalHandler {
- return this.open('umb-language-picker-modal-layout', { data, type: 'sidebar' });
- }
-
- public search(): UmbModalHandler {
- const modalHandler = new UmbModalHandler('umb-modal-layout-search');
-
- //TODO START: This is a hack to get the search modal layout to look like i want it to.
- //TODO: Remove from here to END when the modal system is more flexible
- const topDistance = '50%';
- const margin = '16px';
- const maxHeight = '600px';
- const maxWidth = '500px';
- const dialog = document.createElement('dialog') as HTMLDialogElement;
- dialog.style.top = `max(${margin}, calc(${topDistance} - ${maxHeight} / 2))`;
- dialog.style.margin = '0 auto';
- dialog.style.transform = `translateY(${-maxHeight})`;
- dialog.style.maxHeight = `min(${maxHeight}, calc(100% - ${margin}px * 2))`;
- dialog.style.width = `min(${maxWidth}, calc(100vw - ${margin}))`;
- dialog.style.boxSizing = 'border-box';
- dialog.style.background = 'none';
- dialog.style.border = 'none';
- dialog.style.padding = '0';
- dialog.style.boxShadow = 'var(--uui-shadow-depth-5)';
- dialog.style.borderRadius = '9px';
- const search = document.createElement('umb-modal-layout-search');
- dialog.appendChild(search);
- requestAnimationFrame(() => {
- dialog.showModal();
- });
- modalHandler.element = dialog as unknown as UUIModalDialogElement;
- //TODO END
-
- modalHandler.element.addEventListener('close-end', () => this._handleCloseEnd(modalHandler));
-
- this.#modals.next([...this.#modals.getValue(), modalHandler]);
- return modalHandler;
- }
-
- /**
- * Opens a modal or sidebar modal
- * @public
- * @param {(string | HTMLElement)} element
- * @param {UmbModalOptions} [options]
- * @return {*} {UmbModalHandler}
- * @memberof UmbModalContext
- */
- public open(element: string | HTMLElement, options?: UmbModalOptions): UmbModalHandler {
- const modalHandler = new UmbModalHandler(element, options);
-
- modalHandler.element.addEventListener('close-end', () => this._handleCloseEnd(modalHandler));
-
- this.#modals.next([...this.#modals.getValue(), modalHandler]);
- return modalHandler;
- }
-
- /**
- * Closes a modal or sidebar modal
- * @private
- * @param {string} key
- * @memberof UmbModalContext
- */
- private _close(key: string) {
- this.#modals.next(this.#modals.getValue().filter((modal) => modal.key !== key));
- }
-
- /**
- * Handles the close-end event
- * @private
- * @param {UmbModalHandler} modalHandler
- * @memberof UmbModalContext
- */
- private _handleCloseEnd(modalHandler: UmbModalHandler) {
- modalHandler.element.removeEventListener('close-end', () => this._handleCloseEnd(modalHandler));
- this._close(modalHandler.key);
- }
-}
-
-export const UMB_MODAL_CONTEXT_TOKEN = new UmbContextToken('UmbModalContext');
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
deleted file mode 100644
index fa40855dc5..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-
-
-# Modals
-
-A modal is a popup that darkens the background and has focus lock. There are two types of modals: "dialog" and "sidebar".
-
-**Dialog modals** appears in the middle of the screen.
-| option | values |
-|:------:|:--------------------------:|
-| No options yet | |
-
-**Sidebar modals** slides in from the right.
-| option | values |
-|:------:|:--------------------------:|
-| size | small, medium, large, full |
-
-## Basic Usage
-
-### Consume UmbModalContext from an element
-
-The UmbModal context can be used to open modals.
-
-```ts
-import { html, LitElement } from 'lit';
-import { UmbLitElement } from '@umbraco-cms/element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_ALIAS } from '@umbraco-cms/modal';
-class MyElement extends UmbLitElement {
- #modalContext?: UmbModalContext;
-
- constructor() {
- super();
- this.consumeContext(UMB_MODAL_CONTEXT_ALIAS, (instance) => {
- this.#modalContext = instance;
- // modalContext is now ready to be used.
- });
- }
-}
-```
-
-### Open a modal
-
-A modal is opened by calling one of the helper methods on the UmbModalContext. The methods will accept an element template and modal options and return an instance of UmbModalHandler.
-
-```ts
-import { html, LitElement } from 'lit';
-import { UmbLitElement } from '@umbraco-cms/element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_ALIAS } from './core/services/modal';
-class MyElement extends UmbLitElement {
- #modalContext?: UmbModalContext;
-
- constructor() {
- super();
- this.consumeContext(UMB_MODAL_CONTEXT_ALIAS, (instance) => {
- this.#modalContext = instance;
- // modalContext is now ready to be used
- });
- }
-
- #onClick() {
- const options = {'options goes here'}
- const modalHandler = this.#modalContext?.openDialog('my-dialog'), options);
- modalHandler.onClose().then((data) => {
- // if any data is supplied on close, it will be available here.
- });
- }
-
- render() {
- return html``;
- }
-}
-```
-
-The dialog template to open:
-
-```ts
-import { html, LitElement } from 'lit';
-import type { UmbModalHandler } from './core/services/modal';
-
-class MyDialog extends LitElement {
- // the modal handler will be injected into the element when the modal is opened.
- @property({ attribute: false })
- modalHandler?: UmbModalHandler;
-
- private _handleClose() {
- /* Optional data of any type can be applied to the close method to pass it
- to the modal parent through the onClose promise. */
- this._modalHandler?.close('optional data');
- }
-
- render() {
- return html`
-
-
My Dialog
-
-
- `;
- }
-}
-```
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/index.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/index.ts
rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
similarity index 73%
rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
index aa54b5be9e..9865415b78 100644
--- a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
@@ -2,12 +2,9 @@ import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { UUITextStyles } from '@umbraco-ui/uui-css';
-import type { UmbNotificationHandler } from '../..';
+import type { UmbNotificationDefaultData, UmbNotificationHandler } from '@umbraco-cms/notification';
-export interface UmbNotificationDefaultData {
- message: string;
- headline?: string;
-}
+export type { UmbNotificationDefaultData };
@customElement('umb-notification-layout-default')
export class UmbNotificationLayoutDefaultElement extends LitElement {
@@ -27,3 +24,9 @@ export class UmbNotificationLayoutDefaultElement extends LitElement {
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-notification-layout-default': UmbNotificationLayoutDefaultElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts
new file mode 100644
index 0000000000..6a10618626
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts
@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import type { UmbNotificationLayoutDefaultElement } from './notification-layout-default.element';
+
+import './notification-layout-default.element';
+
+export default {
+ title: 'API/Notifications/Layouts/Default',
+ component: 'umb-notification-layout-default',
+ id: 'notification-layout-default',
+ args: {
+ data: {
+ headline: 'Headline',
+ message: 'This is a default notification',
+ },
+ },
+} as Meta;
+
+const Template: Story = (props) => html`
+
+
+
+`;
+
+export const Default = Template.bind({});
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts
similarity index 80%
rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts
rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts
index 289bf3a122..740526e1c6 100644
--- a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts
@@ -1,8 +1,7 @@
import { fixture, expect, html } from '@open-wc/testing';
import { UUIToastNotificationLayoutElement } from '@umbraco-ui/uui';
-import { UmbNotificationHandler } from '../..';
-import type { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from '.';
-import '.';
+import { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from './notification-layout-default.element';
+import { UmbNotificationHandler } from '@umbraco-cms/notification';
describe('UmbNotificationLayoutDefault', () => {
let element: UmbNotificationLayoutDefaultElement;
@@ -25,6 +24,14 @@ describe('UmbNotificationLayoutDefault', () => {
);
});
+ it('is defined with its own instance', () => {
+ expect(element).to.be.instanceOf(UmbNotificationLayoutDefaultElement);
+ });
+
+ it('passes the a11y audit', async () => {
+ await expect(element).to.be.accessible();
+ });
+
describe('Public API', () => {
describe('properties', () => {
it('has a notificationHandler property', () => {
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx b/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx
rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts
similarity index 82%
rename from src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts
rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts
index 16872f9f7d..8d019e412e 100644
--- a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts
@@ -1,13 +1,12 @@
-import '../layouts/default';
+import './story-notification-default-example.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
-
-import { UmbNotificationContext } from '..';
+import { UmbNotificationContext } from '@umbraco-cms/notification';
export default {
title: 'API/Notifications/Overview',
- component: 'ucp-notification-layout-default',
+ component: 'umb-notification-layout-default',
decorators: [
(story) =>
html`
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts b/src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts
similarity index 87%
rename from src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts
index 4b965c60f2..b22fefe7ba 100644
--- a/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts
@@ -1,12 +1,11 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { UmbNotificationDefaultData } from '../layouts/default';
import {
UmbNotificationColor,
UmbNotificationOptions,
UmbNotificationContext,
UMB_NOTIFICATION_CONTEXT_TOKEN,
-} from '..';
+} from '@umbraco-cms/notification';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('story-notification-default-example')
@@ -22,7 +21,7 @@ export class StoryNotificationDefaultExampleElement extends UmbLitElement {
}
private _handleNotification = (color: UmbNotificationColor) => {
- const options: UmbNotificationOptions = {
+ const options: UmbNotificationOptions = {
data: {
headline: 'Headline',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
@@ -54,3 +53,9 @@ export class StoryNotificationDefaultExampleElement extends UmbLitElement {
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'story-notification-default-example': StoryNotificationDefaultExampleElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
similarity index 81%
rename from src/Umbraco.Web.UI.Client/libs/router/index.ts
rename to src/Umbraco.Web.UI.Client/src/core/router/index.ts
index 9ba378560a..75fd79f5e4 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,3 +1,4 @@
+export * from 'router-slot';
export * from './router-slot.element';
export * from './router-slot-change.event';
export * from './router-slot-init.event';
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot-change.event.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot-change.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/router/router-slot-change.event.ts
rename to src/Umbraco.Web.UI.Client/src/core/router/router-slot-change.event.ts
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot-init.event.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot-init.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/router/router-slot-init.event.ts
rename to src/Umbraco.Web.UI.Client/src/core/router/router-slot-init.event.ts
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
similarity index 82%
rename from src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index b60172dcee..1269dcd227 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,7 +1,9 @@
-import { IRoute, RouterSlot, ensureSlash } from 'router-slot';
+import type { IRoute } from 'router-slot/model';
+import { RouterSlot } from 'router-slot';
import { LitElement, PropertyValueMap } from 'lit';
import { customElement, property } from 'lit/decorators.js';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
+import { UmbRouterSlotInitEvent } from './router-slot-init.event';
+import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
/**
* @element umb-router-slot-element
@@ -20,30 +22,6 @@ export class UmbRouterSlotElement extends LitElement {
return (this.#router as any).routes;
}
public set routes(value: IRoute[] | undefined) {
- /*
- Concept for extending routes with modal routes.
- const routesWithModals = value?.map((route, i, array) => {
- {
- path: 'bla/:key/'
- component: () => {
- return import('.....');
- }
- setup: () => {
- ...
- }
- }
-
- if (route.path === '') {
- {
- ...route,
- path: route.path + '/modal/:modal-alias',
- setup: () => {
- route.setup?.();
- // Call modal service to open modal.
- }
- }
- });
- */
(this.#router as any).routes = value;
}
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
index bc0852f15f..7b03df75c4 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
@@ -1,6 +1,6 @@
import { html } from 'lit-html';
import { UmbInstallerContext } from '../installer.context';
-import '../../../libs/element/context-provider.element';
+import '../../core/context-provider/context-provider.element';
export const installerContextProvider = (story: any, installerContext = new UmbInstallerContext()) => html`
fs.cpSync(`${distPath}/${file}`, `${destPath}/${file}`, { recursive: true }));
+ console.log(`Copied ${libName}`);
+ } catch (err) {
+ console.error(`Error copying ${libName}`);
+ console.error(err);
}
}
-function wrapLibTypeContent(libName) {
- return `
- declare module "@umbraco-cms/${libName}";
- `;
+/**
+ * This function copies the content of the index.d.ts file from the lib into
+ * the ${typesDistFolder}/global.d.ts file and wrap it with
+ * a declare module statement using the lib name.
+ */
+function findAndCopyTypesForLib(libName) {
+ console.log(`Copying ${libName} types to ${typesDistFolder}`);
+
+ const sourceFile = `${libsDistFolder}/${libName}/index.d.ts`;
+ const destPath = `${typesDistFolder}/${libName}/index.d.ts`;
+
+ try {
+ fs.cpSync(sourceFile, destPath, { recursive: true });
+ const content = fs.readFileSync(destPath, 'utf-8');
+ fs.writeFileSync(destPath, wrapLibTypeContent(libName, content));
+ console.log(`Copied ${libName} types`);
+ } catch (err) {
+ console.error(`Error copying ${libName} types`);
+ console.error(err);
+ }
+}
+
+function wrapLibTypeContent(libName, content) {
+ return `declare module "@umbraco-cms/${libName}" {
+ ${content.replace(/declare/g, '')}
+}
+`;
}
diff --git a/src/Umbraco.Web.UI.Client/utils/rollup.config.js b/src/Umbraco.Web.UI.Client/utils/rollup.config.js
index e096f7cfb6..ce5b924ecc 100644
--- a/src/Umbraco.Web.UI.Client/utils/rollup.config.js
+++ b/src/Umbraco.Web.UI.Client/utils/rollup.config.js
@@ -1,15 +1,27 @@
import esbuild from 'rollup-plugin-esbuild';
import pluginJson from '@rollup/plugin-json';
import { nodeResolve } from '@rollup/plugin-node-resolve';
+import dts from 'rollup-plugin-dts';
-/** @type {import('rollup').RollupOptions} */
-export default {
- input: 'index.ts',
- external: [/^@umbraco-cms\//],
- output: {
- file: 'dist/index.js',
- format: 'es',
- sourcemap: true,
+/** @type {import('rollup').RollupOptions[]} */
+export default [
+ {
+ input: 'index.ts',
+ external: [/^@umbraco-cms\//, /^lit/],
+ output: {
+ file: 'dist/index.js',
+ format: 'es',
+ sourcemap: true
+ },
+ plugins: [nodeResolve(), pluginJson(), esbuild()]
},
- plugins: [nodeResolve(), pluginJson(), esbuild({ sourceMap: true })],
-};
+ {
+ input: 'index.ts',
+ external: [/^@umbraco-cms\//, /^lit/, /^rxjs/],
+ output: {
+ file: './dist/index.d.ts',
+ format: 'es'
+ },
+ plugins: [dts({ respectExternal: true })],
+ }
+];
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index 47d06f7946..cd570c5c4d 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -38,26 +38,27 @@ export default {
importMap: {
imports: {
'src/': './src/',
- '@umbraco-cms/css': './libs/css/custom-properties.css',
- '@umbraco-cms/models': './libs/models/index.ts',
'@umbraco-cms/backend-api': './libs/backend-api/index.ts',
'@umbraco-cms/context-api': './libs/context-api/index.ts',
'@umbraco-cms/controller': './libs/controller/index.ts',
+ '@umbraco-cms/css': './libs/css/custom-properties.css',
'@umbraco-cms/element': './libs/element/index.ts',
+ '@umbraco-cms/entity-action': './libs/entity-action/index.ts',
+ '@umbraco-cms/events': './libs/events/index.ts',
'@umbraco-cms/extensions-api': './libs/extensions-api/index.ts',
'@umbraco-cms/extensions-registry': './libs/extensions-registry/index.ts',
+ '@umbraco-cms/modal': './libs/modal/index.ts',
+ '@umbraco-cms/models': './libs/models/index.ts',
'@umbraco-cms/notification': './libs/notification/index.ts',
'@umbraco-cms/observable-api': './libs/observable-api/index.ts',
- '@umbraco-cms/events': './libs/events/index.ts',
- '@umbraco-cms/entity-action': './libs/entity-action/index.ts',
- '@umbraco-cms/workspace': './libs/workspace/index.ts',
- '@umbraco-cms/store': './libs/store/index.ts',
- '@umbraco-cms/utils': './libs/utils/index.ts',
- '@umbraco-cms/test-utils': './libs/test-utils/index.ts',
+ '@umbraco-cms/property-editor': './libs/property-editor/index.ts',
+ '@umbraco-cms/repository': './libs/repository/index.ts',
'@umbraco-cms/resources': './libs/resources/index.ts',
- '@umbraco-cms/repository': './libs/repository',
- '@umbraco-cms/router': './libs/router/index.ts',
- '@umbraco-cms/modal': './src/core/modal/index.ts',
+ '@umbraco-cms/router': './src/core/router/index.ts',
+ '@umbraco-cms/store': './libs/store/index.ts',
+ '@umbraco-cms/test-utils': './libs/test-utils/index.ts',
+ '@umbraco-cms/utils': './libs/utils/index.ts',
+ '@umbraco-cms/workspace': './libs/workspace/index.ts',
},
},
},
@@ -83,7 +84,6 @@ export default {