diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index 3f6abe942d..9f9a472f4c 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -19,7 +19,7 @@ import { UmbIconStore } from '../libs/store/icon/icon.store'; import { onUnhandledRequest } from '../src/core/mocks/browser'; import { handlers } from '../src/core/mocks/browser-handlers'; import { LitElement } from 'lit'; -import { UMB_MODAL_SERVICE_CONTEXT_TOKEN, UmbModalService } from '../src/core/modal'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '../src/core/modal'; // TODO: Fix storybook manifest registrations. @@ -65,11 +65,11 @@ const documentTypeStoreProvider = (story) => html` new UmbDocumentTypeStore(host)}>${story()} `; -const modalServiceProvider = (story) => html` +const modalContextProvider = (story) => html` + key="${UMB_MODAL_CONTEXT_TOKEN}" + .value=${new UmbModalContext()}> ${story()} @@ -84,7 +84,7 @@ export const decorators = [ storybookProvider, dataTypeStoreProvider, documentTypeStoreProvider, - modalServiceProvider, + modalContextProvider, ]; export const parameters = { diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts index ef218b305a..bba0636c12 100644 --- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts +++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts @@ -1,30 +1,30 @@ import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; export class UmbDeleteEntityAction< T extends { delete(unique: string): Promise; requestItems(uniques: Array): any } > extends UmbEntityActionBase { - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); - new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } async execute() { - if (!this.repository || !this.#modalService) return; + if (!this.repository || !this.#modalContext) return; const { data } = await this.repository.requestItems([this.unique]); if (data) { const item = data[0]; - const modalHandler = this.#modalService.confirm({ + const modalHandler = this.#modalContext.confirm({ headline: `Delete ${item.name}`, content: 'Are you sure you want to delete this item?', color: 'danger', diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts index 822919e123..a72b543ac8 100644 --- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts +++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts @@ -1,18 +1,18 @@ import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; export class UmbTrashEntityAction< T extends { trash(unique: Array): Promise; requestTreeItems(uniques: Array): any } > extends UmbEntityActionBase { - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); - new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } @@ -24,7 +24,7 @@ export class UmbTrashEntityAction< if (data) { const item = data[0]; - const modalHandler = this.#modalService?.confirm({ + const modalHandler = this.#modalContext?.confirm({ headline: `Trash ${item.name}`, content: 'Are you sure you want to move this item to the recycle bin?', color: 'danger', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index 636c5dcb5a..85df618420 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -2,7 +2,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../core/modal'; import { UmbUserStore } from './users/users/user.store'; import { UmbUserGroupStore } from './users/user-groups/user-group.store'; import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './users/current-user/current-user.store'; @@ -83,7 +83,7 @@ export class UmbBackofficeElement extends UmbLitElement { constructor() { super(); - this.provideContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, new UmbModalService()); + this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext()); this.provideContext(UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext()); // TODO: find a way this is possible outside this element. It needs to be possible to register stores in extensions diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts index cb0927b37c..e18076cf58 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state, query, property } from 'lit/decorators.js'; import { UUIButtonState, UUIPaginationElement, UUIPaginationEvent } from '@umbraco-ui/uui'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal'; import { UmbLitElement } from '@umbraco-cms/element'; import { RedirectManagementResource, RedirectStatusModel, RedirectUrlModel } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; @@ -105,12 +105,12 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { @query('uui-pagination') private _pagination?: UUIPaginationElement; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (_instance) => { + this._modalContext = _instance; }); } @@ -126,7 +126,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private _removeRedirectHandler(data: RedirectUrlModel) { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: 'Delete', content: html`
@@ -157,7 +157,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private _disableRedirectHandler() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: 'Disable URL tracker', content: html`Are you sure you want to disable the URL tracker?`, color: 'danger', 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 bc9ff169a6..fd5c9537ea 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 @@ -6,7 +6,7 @@ import type { UmbWorkspaceEntityElement } from '../../../shared/components/works import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context'; import type { DocumentTypeModel } from '@umbraco-cms/backend-api'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; @customElement('umb-document-type-workspace') export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement { @@ -51,13 +51,13 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um @state() private _documentType?: DocumentTypeModel; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); this.observe(this._workspaceContext.data, (data) => { @@ -86,7 +86,7 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um } private async _handleIconClick() { - const modalHandler = this._modalService?.iconPicker(); + const modalHandler = this._modalContext?.iconPicker(); modalHandler?.onClose().then((saved) => { if (saved) this._workspaceContext?.setIcon(saved.icon); 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 03ae8d0722..30ae1aeac3 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 @@ -2,22 +2,22 @@ import type { UmbMediaRepository } from '../../repository/media.repository'; import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase { - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array) { super(host, repositoryAlias, selection); - new UmbContextConsumerController(host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } async execute() { // TODO: the picker should be single picker by default - const modalHandler = this.#modalService?.mediaPicker({ selection: [], multiple: false }); + const modalHandler = this.#modalContext?.mediaPicker({ selection: [], multiple: false }); const selection = await modalHandler?.onClose(); const destination = selection[0]; await this.repository?.move(this.selection, destination); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts index b767646fee..672bcc49b8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts @@ -3,29 +3,29 @@ import type { UmbMediaRepository } from '../../repository/media.repository'; import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; export class UmbMediaTrashEntityBulkAction extends UmbEntityBulkActionBase { - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array) { super(host, repositoryAlias, selection); - new UmbContextConsumerController(host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } async execute() { // TODO: show error - if (!this.#modalService || !this.repository) return; + if (!this.#modalContext || !this.repository) return; // TODO: should we subscribe in cases like this? const { data } = await this.repository.requestTreeItems(this.selection); if (data) { // TODO: use correct markup - const modalHandler = this.#modalService?.confirm({ + const modalHandler = this.#modalContext?.confirm({ headline: `Deleting ${this.selection.length} items`, content: html` This will delete the following files: diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/tree/actions/action-member-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/tree/actions/action-member-delete.element.ts index ff96119d59..e50dfad09b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/tree/actions/action-member-delete.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/tree/actions/action-member-delete.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal'; import UmbTreeItemActionElement from '../../../../shared/components/tree/action/tree-item-action.element'; import { UmbMemberTreeStore, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN } from '../../repository/member.tree.store'; @@ -9,14 +9,14 @@ import { UmbMemberTreeStore, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN } from '../../r export default class UmbTreeActionMemberDeleteElement extends UmbTreeItemActionElement { static styles = [UUITextStyles, css``]; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _memberTreeStore?: UmbMemberTreeStore; connectedCallback(): void { super.connectedCallback(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); this.consumeContext(UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN, (memberTreeStore) => { @@ -25,7 +25,7 @@ export default class UmbTreeActionMemberDeleteElement extends UmbTreeItemActionE } private _handleLabelClick() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: `Delete ${this._activeTreeItem?.name ?? 'item'}`, content: 'Are you sure you want to delete this item?', color: 'danger', 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 23025cb334..1dca4ecea2 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 @@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { firstValueFrom, map } from 'rxjs'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal'; import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; import type { ManifestPackageView, UmbPackage } from '@umbraco-cms/models'; @@ -17,13 +17,13 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement { @state() private _packageView?: ManifestPackageView; - private _umbModalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._umbModalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -81,7 +81,7 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement { return; } - this._umbModalService?.open(element, { data: this.package, size: 'small', type: 'sidebar' }); + this._modalContext?.open(element, { data: this.package, size: 'small', type: 'sidebar' }); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts index 9518fb409f..64a53e5e3b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-search-header-app') @@ -16,18 +16,18 @@ export class UmbSearchHeaderApp extends UmbLitElement { `, ]; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (_instance) => { + this._modalContext = _instance; }); } #onSearchClick() { - this._modalService?.search(); + this._modalContext?.search(); } render() { 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 3c33a9195b..34c20af5d2 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 @@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { UUIButtonState } from '@umbraco-ui/uui-button'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal'; import './section-view-examine-searchers'; @@ -92,13 +92,13 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement { @state() private _loading = true; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (_instance) => { + this._modalContext = _instance; }); this._getIndexData(); @@ -120,7 +120,7 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement { } private async _onRebuildHandler() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: `Rebuild ${this.indexName}`, content: html` This will cause the index to be rebuilt.
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 3b68117159..941f79b998 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 @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state, query, property } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal'; import { SearchResultModel, SearcherResource, FieldModel } from '@umbraco-cms/backend-api'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -101,7 +101,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { `, ]; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; @property() searcherName!: string; @@ -120,8 +120,8 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -175,7 +175,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { } private _onFieldFilterClick() { - const modalHandler = this._modalService?.open('umb-modal-layout-fields-settings', { + const modalHandler = this._modalContext?.open('umb-modal-layout-fields-settings', { type: 'sidebar', size: 'small', data: { ...this._exposedFields }, @@ -241,7 +241,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { look="secondary" label="Open sidebar to see all fields" @click="${() => - this._modalService?.open('umb-modal-layout-fields-viewer', { + this._modalContext?.open('umb-modal-layout-fields-viewer', { type: 'sidebar', size: 'medium', data: { ...rowData, name: this.getSearchResultNodeName(rowData) }, 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 e7693ba27c..8235fd382f 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 @@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal'; import { PublishedCacheResource } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; @@ -38,13 +38,13 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { @state() private _buttonStateCollect: UUIButtonState = undefined; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -82,7 +82,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { } } private async _onReloadCacheHandler() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: 'Reload', content: html` Trigger a in-memory and local file cache reload on all servers. `, color: 'danger', @@ -105,7 +105,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { } private async _onRebuildCacheHandler() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: 'Rebuild', content: html` Rebuild content in cmsContentNu database table. Expensive.`, color: 'danger', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts index cfbf8ffcc5..1554a4d1d7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts @@ -1,26 +1,26 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal'; import UmbTreeItemActionElement from '../../../../../shared/components/tree/action/tree-item-action.element'; @customElement('umb-tree-action-data-type-delete') export default class UmbTreeActionDataTypeDeleteElement extends UmbTreeItemActionElement { static styles = [UUITextStyles, css``]; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; //private _dataTypeStore?: UmbDataTypeStore; connectedCallback(): void { super.connectedCallback(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } private _handleLabelClick() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: `Delete ${this._activeTreeItem?.name ?? 'item'}`, content: 'Are you sure you want to delete this item?', color: 'danger', 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 fd77adf0e6..c3495deef6 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,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal'; import { UmbDataTypeWorkspaceContext } from '../../data-type-workspace.context'; import { UmbLitElement } from '@umbraco-cms/element'; import type { DataTypeModel } from '@umbraco-cms/backend-api'; @@ -41,13 +41,13 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement { private _data: Array = []; private _workspaceContext?: UmbDataTypeWorkspaceContext; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); // TODO: Figure out if this is the best way to consume a context or if it could be strongly typed using UmbContextToken @@ -100,7 +100,7 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement { private _openPropertyEditorUIPicker() { if (!this._dataType) return; - const modalHandler = this._modalService?.propertyEditorUIPicker({ + const modalHandler = this._modalContext?.propertyEditorUIPicker({ selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [], }); 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 563af4962a..3558e546ce 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 @@ -3,21 +3,21 @@ import { customElement, state } from 'lit/decorators.js'; import { isManifestElementNameType, umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; import type { ManifestBase } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; @customElement('umb-extension-root-workspace') export class UmbExtensionRootWorkspaceElement extends UmbLitElement { @state() private _extensions?: Array = undefined; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; connectedCallback(): void { super.connectedCallback(); this._observeExtensions(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -28,7 +28,7 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement { } #removeExtension(extension: ManifestBase) { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: 'Unload extension', confirmLabel: 'Unload', content: html`

Are you sure you want to unload the extension ${extension.alias}?

`, 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 49298c46ed..1ad3d99bf3 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, UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-backoffice-modal-container') @@ -19,21 +19,21 @@ export class UmbBackofficeModalContainer extends UmbLitElement { @state() private _modals?: UmbModalHandler[]; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; this._observeModals(); }); } private _observeModals() { - if (!this._modalService) return; + if (!this._modalContext) return; - this.observe(this._modalService.modals, (modals) => { + this.observe(this._modalContext.modals, (modals) => { this._modals = modals; }); } 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 195e409e60..ae75471fe0 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 @@ -3,7 +3,7 @@ import { css, html, nothing, TemplateResult } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { UmbContextDebugRequest } from '@umbraco-cms/context-api'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; @customElement('umb-debug') export class UmbDebug extends UmbLitElement { @@ -64,12 +64,12 @@ export class UmbDebug extends UmbLitElement { @state() private _debugPaneOpen = false; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -102,10 +102,10 @@ export class UmbDebug extends UmbLitElement { } private _openDialog() { - this._modalService?.openBasic({ + this._modalContext?.openBasic({ header: html` Debug: Contexts`, content: this._htmlContent(), - overlaySize: 'small' + overlaySize: 'small', }); } @@ -125,15 +125,13 @@ export class UmbDebug extends UmbLitElement {
-
- ${this._htmlContent()} -
+
${this._htmlContent()}
`; } private _htmlContent() { - return html ` + return html`
    ${this._renderContextAliases()}
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 bf675f8c81..177d949e5b 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,7 +3,7 @@ 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 { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +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 { UmbLitElement } from '@umbraco-cms/element'; @@ -77,7 +77,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen @state() private _items?: Array; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _documentStore?: UmbDocumentTreeStore; private _pickedItemsObserver?: UmbObserverController; @@ -99,8 +99,8 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen this._documentStore = instance; this._observePickedDocuments(); }); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -121,7 +121,7 @@ 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._modalService?.contentPicker({ + const modalHandler = this._modalContext?.contentPicker({ multiple: this.max === 1 ? false : true, selection: [...this._selectedKeys], }); @@ -131,7 +131,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen } private _removeItem(item: FolderTreeItemModel) { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ color: 'danger', headline: `Remove ${item.name}?`, content: 'Are you sure you want to remove this item', 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 2ef9748513..f35f3d9e77 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,7 +3,7 @@ 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 { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal'; import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository'; import { UmbChangeEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -79,7 +79,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen @state() private _items?: Array; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _repository = new UmbLanguageRepository(this); private _pickedItemsObserver?: UmbObserverController; @@ -98,8 +98,8 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen () => !!this.max && this._selectedIsoCodes.length > this.max ); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -119,7 +119,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen } private _openPicker() { - const modalHandler = this._modalService?.languagePicker({ + const modalHandler = this._modalContext?.languagePicker({ multiple: this.max === 1 ? false : true, selection: [...this._selectedIsoCodes], filter: this.filter, @@ -131,7 +131,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen } private _removeItem(item: LanguageModel) { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ color: 'danger', headline: `Remove ${item.name}?`, content: 'Are you sure you want to remove this item', 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 78f2d3d54a..0508848787 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 @@ -2,7 +2,7 @@ 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 { UmbModalService, UmbModalType, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +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'; @@ -25,19 +25,19 @@ export class UmbInputListBase extends UmbLitElement { public modalSize: UUIModalSidebarSize = 'small'; protected pickerLayout?: string; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } private _openPicker() { if (!this.pickerLayout) return; - const modalHandler = this._modalService?.open(this.pickerLayout, { + const modalHandler = this._modalContext?.open(this.pickerLayout, { type: this.modalType, size: this.modalSize, data: { 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 381726055c..b2ea70155f 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,7 +3,7 @@ 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 { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../core/modal'; import { UmbMediaRepository } from '../../../media/media/repository/media.repository'; import { UmbLitElement } from '@umbraco-cms/element'; import type { EntityTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; @@ -88,7 +88,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) @state() private _items?: Array; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _pickedItemsObserver?: UmbObserverController; private _repository = new UmbMediaRepository(this); @@ -106,8 +106,8 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) () => !!this.max && this._selectedKeys.length > this.max ); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -135,7 +135,7 @@ 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._modalService?.mediaPicker({ + const modalHandler = this._modalContext?.mediaPicker({ multiple: this.max === 1 ? false : true, selection: [...this._selectedKeys], }); @@ -145,7 +145,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) } private _removeItem(item: FolderTreeItemModel) { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ color: 'danger', headline: `Remove ${item.name}?`, content: 'Are you sure you want to remove this item', 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 2514fa42c2..f627f407e7 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 @@ -4,7 +4,7 @@ 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 { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; export interface MultiUrlData { icon?: string; @@ -106,7 +106,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen } private _urls: Array = []; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); @@ -121,8 +121,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen () => !!this.max && this.urls.length > this.max ); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this._modalService = instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -144,7 +144,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen } private _openPicker(data?: MultiUrlData, index?: number) { - const modalHandler = this._modalService?.linkPicker({ + const modalHandler = this._modalContext?.linkPicker({ link: { name: data?.name, published: data?.published, 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 7f22601534..59321bab75 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,7 +2,7 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit-html'; import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-document-picker.element'; -import { UmbModalService } from 'src/core/modal'; +import { UmbModalContext } from 'src/core/modal'; import './property-editor-ui-document-picker.element'; import '../../../components/backoffice-frame/backoffice-modal-container.element'; @@ -12,7 +12,7 @@ export default { id: 'umb-property-editor-ui-document-picker', decorators: [ (story) => - html` + html` ${story()} `, 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 98a77120c0..ef101ab3cb 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,7 +1,7 @@ import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../core/modal'; import { UmbLitElement } from '@umbraco-cms/element'; /** @@ -17,17 +17,17 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement { @property({ type: Array, attribute: false }) public config = []; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } private _openModal() { - this._modalService?.iconPicker(); + this._modalContext?.iconPicker(); } render() { 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 09b8e2b407..5a9751bce4 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,7 @@ 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 { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal'; import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -54,18 +54,18 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL @query('#input') protected _input?: UUIInputElement; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } #onDelete() { - const modalHandler = this._modalService?.confirm({ + const modalHandler = this._modalContext?.confirm({ headline: `Delete ${this.value || 'item'}`, content: 'Are you sure you want to delete this item?', color: 'danger', 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 49c62e7da4..cc2ddddd6e 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 @@ -7,7 +7,7 @@ import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary. import { UmbCreateDictionaryModalResultData } from '../../dictionary/entity-actions/create/create-dictionary-modal-layout.element'; import { UmbLitElement } from '@umbraco-cms/element'; import { DictionaryOverviewModel, LanguageModel } from '@umbraco-cms/backend-api'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; @customElement('umb-dashboard-translation-dictionary') @@ -51,7 +51,7 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement { #repo!: UmbDictionaryRepository; - #modalService!: UmbModalService; + #modalContext!: UmbModalContext; #tableItems: Array = []; @@ -62,8 +62,8 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement { constructor() { super(); - new UmbContextConsumerController(this, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } @@ -154,9 +154,9 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement { async #create() { // TODO: what to do if modal service is not available? - if (!this.#modalService) return; + if (!this.#modalContext) return; - const modalHandler = this.#modalService?.open('umb-create-dictionary-modal-layout', { + const modalHandler = this.#modalContext?.open('umb-create-dictionary-modal-layout', { type: 'sidebar', data: { unique: null }, }); @@ -173,7 +173,9 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement { render() { return html`
- Create dictionary item + Create dictionary item { static styles = [UUITextStyles]; - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; #sectionSidebarContext!: UmbSectionSidebarContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); - new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); new UmbContextConsumerController(this.host, UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (instance) => { @@ -34,11 +34,11 @@ export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase async execute() { // TODO: what to do if modal service is not available? - if (!this.#modalService) return; + if (!this.#modalContext) return; // 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.#modalService?.open('umb-create-dictionary-modal-layout', { + const modalHandler = this.#modalContext?.open('umb-create-dictionary-modal-layout', { type: 'sidebar', data: { unique: this.unique, parentName: this.#sectionSidebarContext.headline }, }); 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 6fe67c257c..8b50b1b2a9 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 @@ -4,28 +4,28 @@ import type { UmbExportDictionaryModalResultData } from './export-dictionary-mod import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import './export-dictionary-modal-layout.element'; export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase { static styles = [UUITextStyles]; - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); - new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } async execute() { // TODO: what to do if modal service is not available? - if (!this.#modalService) return; + if (!this.#modalContext) return; - const modalHandler = this.#modalService?.open('umb-export-dictionary-modal-layout', { + const modalHandler = this.#modalContext?.open('umb-export-dictionary-modal-layout', { type: 'sidebar', data: { unique: this.unique }, }); 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 da5e2a7dfc..98a14e6e9e 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 @@ -4,28 +4,28 @@ import type { UmbImportDictionaryModalResultData } from './import-dictionary-mod import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import './import-dictionary-modal-layout.element'; export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase { static styles = [UUITextStyles]; - #modalService?: UmbModalService; + #modalContext?: UmbModalContext; constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); - new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { - this.#modalService = instance; + new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; }); } async execute() { // TODO: what to do if modal service is not available? - if (!this.#modalService) return; + if (!this.#modalContext) return; - const modalHandler = this.#modalService?.open('umb-import-dictionary-modal-layout', { + const modalHandler = this.#modalContext?.open('umb-import-dictionary-modal-layout', { type: 'sidebar', data: { unique: this.unique }, }); 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 1c2112fbba..1f8451c341 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 @@ -3,7 +3,7 @@ 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 type { UserDetails } from '@umbraco-cms/models'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-current-user-header-app') @@ -22,17 +22,17 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement { private _currentUser?: UserDetails; private _currentUserStore?: UmbCurrentUserStore; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); - this.consumeContext(UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, (_instance) => { - this._currentUserStore = _instance; + this.consumeContext(UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, (instance) => { + this._currentUserStore = instance; this._observeCurrentUser(); }); } @@ -46,7 +46,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement { } private _handleUserClick() { - this._modalService?.userSettings(); + this._modalContext?.userSettings(); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts index 16669f6dad..1b38d55de7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts @@ -6,7 +6,7 @@ import { UUIPopoverElement } from '@umbraco-ui/uui'; import type { UmbSectionViewUsersElement } from './section-view-users.element'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from 'src/core/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from 'src/core/modal'; import './list-view-layouts/table/workspace-view-users-table.element'; import './list-view-layouts/grid/workspace-view-users-grid.element'; @@ -102,7 +102,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement { ]; private _usersContext?: UmbSectionViewUsersElement; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _inputTimer?: NodeJS.Timeout; private _inputTimerAmount = 500; @@ -114,8 +114,8 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement { this._observeSelection(); }); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } @@ -166,7 +166,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement { } else { modal = document.createElement('umb-workspace-view-users-create'); } - this._modalService?.open(modal, { type: 'dialog' }); + this._modalContext?.open(modal, { type: 'dialog' }); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts index c263e4d76c..928c6516a4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts @@ -8,7 +8,7 @@ import { repeat } from 'lit/directives/repeat.js'; import { distinctUntilChanged } from 'rxjs'; import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user/current-user.store'; -import type { UmbModalService } from '../../../../core/modal'; +import type { UmbModalContext } from '../../../../core/modal'; import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface'; import { UmbWorkspaceUserContext } from './user-workspace.context'; import { getLookAndColorFromUserStatus } from '@umbraco-cms/utils'; @@ -84,7 +84,7 @@ export class UmbUserWorkspaceElement extends UmbLitElement implements UmbWorkspa private _currentUser?: UserDetails; private _currentUserStore?: UmbCurrentUserStore; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _languages = []; //TODO Add languages @@ -191,7 +191,7 @@ export class UmbUserWorkspaceElement extends UmbLitElement implements UmbWorkspa } private _changePassword() { - this._modalService?.changePassword({ requireOldPassword: this._currentUserStore?.isAdmin === false }); + this._modalContext?.changePassword({ requireOldPassword: this._currentUserStore?.isAdmin === false }); } private _renderActionButtons() { diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/index.ts b/src/Umbraco.Web.UI.Client/src/core/modal/index.ts index 7595eda631..0065759e9e 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/index.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/index.ts @@ -1,3 +1,3 @@ -export * from './modal.service'; +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/modal-layout-current-user.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts index ff3d8ac970..e8bafe3cb1 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts @@ -1,7 +1,7 @@ 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, UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '..'; +import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '..'; import { UmbCurrentUserHistoryStore, UmbCurrentUserHistoryItem, @@ -88,24 +88,24 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement { @state() private _history: Array = []; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; private _currentUserStore?: UmbCurrentUserStore; private _currentUserHistoryStore?: UmbCurrentUserHistoryStore; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { - this._modalService = _instance; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); - this.consumeContext(UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, (_instance) => { - this._currentUserStore = _instance; + this.consumeContext(UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, (instance) => { + this._currentUserStore = instance; this._observeCurrentUser(); }); - this.consumeContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, (_instance) => { - this._currentUserHistoryStore = _instance; + this.consumeContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, (instance) => { + this._currentUserHistoryStore = instance; this._observeHistory(); }); @@ -139,9 +139,9 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement { } private _changePassword() { - if (!this._modalService) return; + if (!this._modalContext) return; - this._modalService.changePassword({ requireOldPassword: this._currentUserStore?.isAdmin || false }); + this._modalContext.changePassword({ requireOldPassword: this._currentUserStore?.isAdmin || false }); } private _renderHistoryItem(item: UmbCurrentUserHistoryItem) { 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 index 556a92e607..2c07d85451 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal-handler.ts @@ -3,7 +3,7 @@ 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.service'; +import { UmbModalOptions } from './modal.context'; //TODO consider splitting this into two separate handlers export class UmbModalHandler { diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts similarity index 93% rename from src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts rename to src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts index 86b768f440..21fe1aed0b 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal.context.ts @@ -37,7 +37,7 @@ export interface UmbModalOptions { // TODO: rename to UmbModalContext // 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 UmbModalService { +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(); @@ -47,7 +47,7 @@ export class UmbModalService { * @public * @param {UmbModalConfirmData} data * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public confirm(data: UmbModalConfirmData): UmbModalHandler { return this.open('umb-modal-layout-confirm', { data, type: 'dialog' }); @@ -58,7 +58,7 @@ export class UmbModalService { * @public * @param {UmbModalContentPickerData} [data] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public contentPicker(data?: UmbModalContentPickerData): UmbModalHandler { return this.open('umb-modal-layout-content-picker', { data, type: 'sidebar', size: 'small' }); @@ -69,7 +69,7 @@ export class UmbModalService { * @public * @param {UmbModalMediaPickerData} [data] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public mediaPicker(data?: UmbModalMediaPickerData): UmbModalHandler { return this.open('umb-modal-layout-media-picker', { data, type: 'sidebar', size: 'small' }); @@ -80,7 +80,7 @@ export class UmbModalService { * @public * @param {UmbModalPropertyEditorUIPickerData} [data] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public propertyEditorUIPicker(data?: UmbModalPropertyEditorUIPickerData): UmbModalHandler { return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' }); @@ -91,7 +91,7 @@ export class UmbModalService { * @public * @param {UmbModalIconPickerData} [data] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler { return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' }); @@ -102,7 +102,7 @@ export class UmbModalService { * @public * @param {(LinkPickerData & LinkPickerConfig)} [data] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public linkPicker(data?: UmbModalLinkPickerData): UmbModalHandler { return this.open('umb-modal-layout-link-picker', { @@ -116,7 +116,7 @@ export class UmbModalService { * Opens the user settings sidebar modal * @public * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public userSettings(): UmbModalHandler { return this.open('umb-modal-layout-current-user', { type: 'sidebar', size: 'small' }); @@ -126,7 +126,7 @@ export class UmbModalService { * Opens the change password sidebar modal * @public * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public changePassword(data: UmbModalChangePasswordData): UmbModalHandler { return this.open('umb-modal-layout-change-password', { data, type: 'dialog' }); @@ -136,7 +136,7 @@ export class UmbModalService { * Opens a language picker sidebar modal * @public * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public languagePicker(data: UmbPickerModalData): UmbModalHandler { return this.open('umb-language-picker-modal-layout', { data, type: 'sidebar' }); @@ -146,7 +146,7 @@ export class UmbModalService { * Opens a basic sidebar modal to display readonly information * @public * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public openBasic(data: UmbBasicModalData): UmbModalHandler { return this.open('umb-modal-layout-basic', { @@ -197,7 +197,7 @@ export class UmbModalService { * @param {(string | HTMLElement)} element * @param {UmbModalOptions} [options] * @return {*} {UmbModalHandler} - * @memberof UmbModalService + * @memberof UmbModalContext */ public open(element: string | HTMLElement, options?: UmbModalOptions): UmbModalHandler { const modalHandler = new UmbModalHandler(element, options); @@ -212,7 +212,7 @@ export class UmbModalService { * Closes a modal or sidebar modal * @private * @param {string} key - * @memberof UmbModalService + * @memberof UmbModalContext */ private _close(key: string) { this.#modals.next(this.#modals.getValue().filter((modal) => modal.key !== key)); @@ -222,7 +222,7 @@ export class UmbModalService { * Handles the close-end event * @private * @param {UmbModalHandler} modalHandler - * @memberof UmbModalService + * @memberof UmbModalContext */ private _handleCloseEnd(modalHandler: UmbModalHandler) { modalHandler.element.removeEventListener('close-end', () => this._handleCloseEnd(modalHandler)); @@ -230,4 +230,4 @@ export class UmbModalService { } } -export const UMB_MODAL_SERVICE_CONTEXT_TOKEN = new UmbContextToken(UmbModalService.name); +export const UMB_MODAL_CONTEXT_TOKEN = new UmbContextToken(UmbModalContext.name); 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 index 90aa914199..262d7bb65d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx +++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx @@ -18,21 +18,22 @@ A modal is a popup that darkens the background and has focus lock. There are two ## Basic Usage -### Consume UmbModalService from an element +### Consume UmbModalContext from an element -The UmbModal service can be used to open modals. +The UmbModal context can be used to open modals. ```typescript import { html, LitElement } from 'lit'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_ALIAS } from './core/services/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_ALIAS } from '@umbraco-cms/modal'; class MyElement extends UmbLitElement { - private _modalService_?: UmbModalService; + #modalContext?: UmbModalContext; + constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_ALIAS, (modalService) => { - this._modalService = modalService; - // modalService is now ready to be used. + this.consumeContext(UMB_MODAL_CONTEXT_ALIAS, (instance) => { + this.#modalContext = instance; + // modalContext is now ready to be used. }); } } @@ -40,30 +41,33 @@ class MyElement extends UmbLitElement { ### Open a modal -A modal is opened by calling one of the helper methods on the UmbModalService. The methods will accept an element template and modal options and return an instance of UmbModalHandler. +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. ```typescript import { html, LitElement } from 'lit'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_ALIAS } from './core/services/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_ALIAS } from './core/services/modal'; class MyElement extends UmbLitElement { - private _modalService?: UmbModalService; + #modalContext?: UmbModalContext; + constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_ALIAS, (modalService) => { - this._modalService = modalService; - // modalService is now ready to be used + this.consumeContext(UMB_MODAL_CONTEXT_ALIAS, (instance) => { + this.#modalContext = instance; + // modalContext is now ready to be used }); } - private _handleClick() { + + #onClick() { const options = {'options goes here'} - const modalHandler = this._modalService?.openDialog('my-dialog'), options); + 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``; + return html``; } } ``` @@ -73,6 +77,7 @@ The dialog template to open: ```typescript 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 }) diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts index b0ab354948..e03fe93493 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts @@ -1,10 +1,9 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit-html'; - export default { title: 'API/Modals', - id: 'umb-modal-service', + id: 'umb-modal-context', argTypes: { modalLayout: { control: 'select', @@ -14,7 +13,7 @@ export default { } as Meta; const Template: Story = (props) => { - return html` `; + return html` `; }; export const Overview = Template.bind({}); diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts index c2f39bc7d6..bd33181774 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts @@ -1,39 +1,38 @@ import { html } from 'lit-html'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '..'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '..'; import { UmbLitElement } from '@umbraco-cms/element'; - -@customElement('story-modal-service-example') -export class StoryModalServiceExampleElement extends UmbLitElement { +@customElement('story-modal-context-example') +export class StoryModalContextExampleElement extends UmbLitElement { @property() modalLayout = 'confirm'; @state() value = ''; - private _modalService?: UmbModalService; + private _modalContext?: UmbModalContext; constructor() { super(); - this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => { - this._modalService = modalService; + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; }); } private _open() { switch (this.modalLayout) { case 'Content Picker': - this._modalService?.contentPicker(); + this._modalContext?.contentPicker(); break; case 'Property Editor UI Picker': - this._modalService?.propertyEditorUIPicker(); + this._modalContext?.propertyEditorUIPicker(); break; case 'Icon Picker': - this._modalService?.iconPicker(); + this._modalContext?.iconPicker(); break; default: - this._modalService?.confirm({ + this._modalContext?.confirm({ headline: 'Headline', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit', });