From 5528ca2fbe7abeb0ba6d857adba308c417971ef8 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 12 Jan 2023 12:08:27 +0000 Subject: [PATCH 01/23] Adds padding/breathing room to dashboard content like we have today --- .../section/section-dashboards/section-dashboards.element.ts | 1 + 1 file changed, 1 insertion(+) 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 bc1bfa484f..49bacb5ef4 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 @@ -41,6 +41,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { height: 100%; box-sizing: border-box; display: block; + padding:var(--uui-size-5); } `, ]; From 1a5e4cfc935d3b60087b1fd4bdb4a32db7a7e2e8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 14:05:26 +0100 Subject: [PATCH 02/23] add collection view --- .../models/Umbraco.ListView.ts | 12 +++ .../bulk-action-permissions/manifests.ts | 14 +++ ...on-view-bulk-action-permissions.element.ts | 29 ++++++ ...on-view-bulk-action-permissions.stories.ts | 15 ++++ ...ction-view-bulk-action-permissions.test.ts | 21 +++++ .../config/column-configuration/manifests.ts | 14 +++ ...ction-view-column-configuration.element.ts | 29 ++++++ ...ction-view-column-configuration.stories.ts | 15 ++++ ...llection-view-column-configuration.test.ts | 21 +++++ .../config/layout-configuration/manifests.ts | 14 +++ ...ction-view-layout-configuration.element.ts | 29 ++++++ ...ction-view-layout-configuration.stories.ts | 15 ++++ ...llection-view-layout-configuration.test.ts | 21 +++++ .../config/order-by/manifests.ts | 14 +++ ...tor-ui-collection-view-order-by.element.ts | 29 ++++++ ...tor-ui-collection-view-order-by.stories.ts | 15 ++++ ...editor-ui-collection-view-order-by.test.ts | 21 +++++ .../uis/collection-view/manifests.ts | 90 +++++++++++++++++++ ...perty-editor-ui-collection-view.element.ts | 29 ++++++ ...perty-editor-ui-collection-view.stories.ts | 15 ++++ ...property-editor-ui-collection-view.test.ts | 21 +++++ .../shared/property-editors/uis/manifests.ts | 4 + .../uis/order-direction/manifests.ts | 14 +++ ...perty-editor-ui-order-direction.element.ts | 29 ++++++ ...perty-editor-ui-order-direction.stories.ts | 15 ++++ ...property-editor-ui-order-direction.test.ts | 21 +++++ .../src/core/mocks/data/data-type.data.ts | 13 +++ 27 files changed, 579 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts new file mode 100644 index 0000000000..af254ad673 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts @@ -0,0 +1,12 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'List View', + alias: 'Umbraco.ListView', + meta: { + config: { + properties: [], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/manifests.ts new file mode 100644 index 0000000000..fc4ed9741b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.CollectionView.BulkActionPermissions', + name: 'Collection View Bulk Action Permissions Property Editor UI', + loader: () => import('./property-editor-ui-collection-view-bulk-action-permissions.element'), + meta: { + label: 'Collection View Bulk Action Permissions', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'lists', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts new file mode 100644 index 0000000000..9392ad2ca0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-collection-view-bulk-action-permissions + */ +@customElement('umb-property-editor-ui-collection-view-bulk-action-permissions') +export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-collection-view-bulk-action-permissions
`; + } +} + +export default UmbPropertyEditorUICollectionViewBulkActionPermissionsElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-collection-view-bulk-action-permissions': UmbPropertyEditorUICollectionViewBulkActionPermissionsElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts new file mode 100644 index 0000000000..89bdedf1d2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUICollectionViewBulkActionPermissionsElement } from './property-editor-ui-collection-view-bulk-action-permissions.element'; +import './property-editor-ui-collection-view-bulk-action-permissions.element'; + +export default { + title: 'Property Editor UIs/Collection View Bulk Action Permissions', + component: 'umb-property-editor-ui-collection-view-bulk-action-permissions', + id: 'umb-property-editor-ui-collection-view-bulk-action-permissions', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts new file mode 100644 index 0000000000..7b568d9a96 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUICollectionViewBulkActionPermissionsElement } from './property-editor-ui-collection-view-bulk-action-permissions.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUICollectionViewBulkActionPermissionsElement', () => { + let element: UmbPropertyEditorUICollectionViewBulkActionPermissionsElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewBulkActionPermissionsElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/manifests.ts new file mode 100644 index 0000000000..203797145f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.CollectionView.ColumnConfiguration', + name: 'Collection View Column Configuration Property Editor UI', + loader: () => import('./property-editor-ui-collection-view-column-configuration.element'), + meta: { + label: 'Collection View Column Configuration', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'lists', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts new file mode 100644 index 0000000000..3d4b5beeee --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-collection-view-column-configuration + */ +@customElement('umb-property-editor-ui-collection-view-column-configuration') +export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-collection-view-column-configuration
`; + } +} + +export default UmbPropertyEditorUICollectionViewColumnConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-collection-view-column-configuration': UmbPropertyEditorUICollectionViewColumnConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts new file mode 100644 index 0000000000..e570b2d3fb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUICollectionViewColumnConfigurationElement } from './property-editor-ui-collection-view-column-configuration.element'; +import './property-editor-ui-collection-view-column-configuration.element'; + +export default { + title: 'Property Editor UIs/Collection View Column Configuration', + component: 'umb-property-editor-ui-collection-view-column-configuration', + id: 'umb-property-editor-ui-collection-view-column-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts new file mode 100644 index 0000000000..71bd8e3fc7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUICollectionViewColumnConfigurationElement } from './property-editor-ui-collection-view-column-configuration.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUICollectionViewColumnConfigurationElement', () => { + let element: UmbPropertyEditorUICollectionViewColumnConfigurationElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewColumnConfigurationElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/manifests.ts new file mode 100644 index 0000000000..baf233401e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.CollectionView.LayoutConfiguration', + name: 'Collection View Column Configuration Property Editor UI', + loader: () => import('./property-editor-ui-collection-view-layout-configuration.element'), + meta: { + label: 'Collection View Layout Configuration', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'lists', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts new file mode 100644 index 0000000000..ae9be5661b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-collection-view-layout-configuration + */ +@customElement('umb-property-editor-ui-collection-view-layout-configuration') +export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-collection-view-layout-configuration
`; + } +} + +export default UmbPropertyEditorUICollectionViewLayoutConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-collection-view-layout-configuration': UmbPropertyEditorUICollectionViewLayoutConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts new file mode 100644 index 0000000000..e0b72a1299 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUICollectionViewLayoutConfigurationElement } from './property-editor-ui-collection-view-layout-configuration.element'; +import './property-editor-ui-collection-view-layout-configuration.element'; + +export default { + title: 'Property Editor UIs/Collection View Layout Configuration', + component: 'umb-property-editor-ui-collection-view-layout-configuration', + id: 'umb-property-editor-ui-collection-view-layout-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts new file mode 100644 index 0000000000..f6f8ac82fc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUICollectionViewLayoutConfigurationElement } from './property-editor-ui-collection-view-layout-configuration.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUICollectionViewLayoutConfigurationElement', () => { + let element: UmbPropertyEditorUICollectionViewLayoutConfigurationElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewLayoutConfigurationElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/manifests.ts new file mode 100644 index 0000000000..a8d2f0956f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.CollectionView.OrderBy', + name: 'Collection View Column Configuration Property Editor UI', + loader: () => import('./property-editor-ui-collection-view-order-by.element'), + meta: { + label: 'Collection View Order By', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'lists', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts new file mode 100644 index 0000000000..9ceacba7e6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-collection-view-order-by + */ +@customElement('umb-property-editor-ui-collection-view-order-by') +export class UmbPropertyEditorUICollectionViewOrderByElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-collection-view-order-by
`; + } +} + +export default UmbPropertyEditorUICollectionViewOrderByElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-collection-view-order-by': UmbPropertyEditorUICollectionViewOrderByElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts new file mode 100644 index 0000000000..f4117b8581 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUICollectionViewOrderByElement } from './property-editor-ui-collection-view-order-by.element'; +import './property-editor-ui-collection-view-order-by.element'; + +export default { + title: 'Property Editor UIs/Collection View Order By', + component: 'umb-property-editor-ui-collection-view-order-by', + id: 'umb-property-editor-ui-collection-view-order-by', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts new file mode 100644 index 0000000000..d2f7d4e3ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUICollectionViewOrderByElement } from './property-editor-ui-collection-view-order-by.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUICollectionViewOrderByElement', () => { + let element: UmbPropertyEditorUICollectionViewOrderByElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewOrderByElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts new file mode 100644 index 0000000000..1990b1b20e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts @@ -0,0 +1,90 @@ +import { manifest as bulkActionPermissions } from './config/bulk-action-permissions/manifests'; +import { manifest as columnConfiguration } from './config/column-configuration/manifests'; +import { manifest as layoutConfiguration } from './config/layout-configuration/manifests'; +import { manifest as orderBy } from './config/order-by/manifests'; +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.CollectionView', + name: 'Collection View Property Editor UI', + loader: () => import('./property-editor-ui-collection-view.element'), + meta: { + label: 'Collection View', + propertyEditorModel: 'Umbraco.ListView', + icon: 'umb:bulleted-list', + group: 'lists', + config: { + properties: [ + { + alias: 'pageSize', + label: 'Page Size', + description: 'Number of items per page.', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'orderDirection', + label: 'Order Direction', + propertyEditorUI: 'Umb.PropertyEditorUI.OrderDirection', + }, + { + alias: 'includeProperties', + label: 'Columns Displayed', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.ColumnConfiguration', + }, + { + alias: 'orderBy', + label: 'Order By', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.OrderBy', + }, + { + alias: 'layouts', + label: 'Layouts', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.LayoutConfiguration', + }, + { + alias: 'bulkActionPermissions', + label: 'Bulk Action Permissions', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.BulkActionPermissions', + }, + { + alias: 'icon', + label: 'Content app icon', + description: 'The icon of the listview content app', + propertyEditorUI: 'Umb.PropertyEditorUI.IconPicker', + }, + { + alias: 'tabName', + label: 'Content app name', + description: 'The name of the listview content app (default if empty: Child Items)', + propertyEditorUI: 'Umb.PropertyEditorUI.TextBox', + }, + { + alias: 'showContentFirst', + label: 'Show Content App First', + description: 'Enable this to show the content app by default instead of the list view app', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, + { + alias: 'useInfiniteEditor', + label: 'Edit in Infinite Editor', + description: 'Enable this to use infinite editing to edit the content of the list view', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, + ], + }, + }, +}; + +const config: Array = [ + bulkActionPermissions, + columnConfiguration, + layoutConfiguration, + orderBy, +]; + +export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts new file mode 100644 index 0000000000..b8e5240d2e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-collection-view + */ +@customElement('umb-property-editor-ui-collection-view') +export class UmbPropertyEditorUICollectionViewElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-collection-view
`; + } +} + +export default UmbPropertyEditorUICollectionViewElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-collection-view': UmbPropertyEditorUICollectionViewElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts new file mode 100644 index 0000000000..7b052f9d15 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUICollectionViewElement } from './property-editor-ui-collection-view.element'; +import './property-editor-ui-collection-view.element'; + +export default { + title: 'Property Editor UIs/Collection View', + component: 'umb-property-editor-ui-collection-view', + id: 'umb-property-editor-ui-collection-view', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.test.ts new file mode 100644 index 0000000000..f5c64912b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUICollectionViewElement } from './property-editor-ui-collection-view.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUICollectionViewElement', () => { + let element: UmbPropertyEditorUICollectionViewElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index ba0e0873b7..b9fe89789c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -27,6 +27,8 @@ import { manifest as blockGrid } from './block-grid/manifests'; import { manifest as blockGridBlockConfiguration } from './block-grid-block-configuration/manifests'; import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests'; import { manifest as blockGridStylesheetPicker } from './block-grid-stylesheet-picker/manifests'; +import { manifest as orderDirection } from './order-direction/manifests'; +import { manifests as collectionView } from './collection-view/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -59,6 +61,8 @@ export const manifests: Array = [ blockGridBlockConfiguration, blockGridGroupConfiguration, blockGridStylesheetPicker, + orderDirection, + ...collectionView, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/manifests.ts new file mode 100644 index 0000000000..f4cf3a8fcc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.OrderDirection', + name: 'Order Direction Property Editor UI', + loader: () => import('./property-editor-ui-order-direction.element'), + meta: { + label: 'Order Direction', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'common', + }, +}; 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 new file mode 100644 index 0000000000..0e407b64ef --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-order-direction + */ +@customElement('umb-property-editor-ui-order-direction') +export class UmbPropertyEditorUIOrderDirectionElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-order-direction
`; + } +} + +export default UmbPropertyEditorUIOrderDirectionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-order-direction': UmbPropertyEditorUIOrderDirectionElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts new file mode 100644 index 0000000000..ecf903f68d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIOrderDirectionElement } from './property-editor-ui-order-direction.element'; +import './property-editor-ui-order-direction.element'; + +export default { + title: 'Property Editor UIs/Order Direction', + component: 'umb-property-editor-ui-order-direction', + id: 'umb-property-editor-ui-order-direction', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.test.ts new file mode 100644 index 0000000000..174822b370 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIOrderDirectionElement } from './property-editor-ui-order-direction.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIOrderDirectionElement', () => { + let element: UmbPropertyEditorUIOrderDirectionElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIOrderDirectionElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index df562d19fa..7b76e52572 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -356,6 +356,19 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.BlockGrid', data: [], }, + { + name: 'Collection View', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-collectionView', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.ListView', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.CollectionView', + data: [], + }, ]; // Temp mocked database From c41bdb549c0a0b119ecf22a7d88aa61226bd6327 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 14:09:54 +0100 Subject: [PATCH 03/23] combine block grid files in same folder --- .../config/block-configuration}/manifests.ts | 0 ...editor-ui-block-grid-block-configuration.element.ts | 0 ...editor-ui-block-grid-block-configuration.stories.ts | 0 ...ty-editor-ui-block-grid-block-configuration.test.ts | 0 .../config/group-configuration}/manifests.ts | 0 ...editor-ui-block-grid-group-configuration.element.ts | 0 ...editor-ui-block-grid-group-configuration.stories.ts | 0 ...ty-editor-ui-block-grid-group-configuration.test.ts | 0 .../config/stylesheet-picker}/manifests.ts | 0 ...y-editor-ui-block-grid-stylesheet-picker.element.ts | 0 ...y-editor-ui-block-grid-stylesheet-picker.stories.ts | 0 ...erty-editor-ui-block-grid-stylesheet-picker.test.ts | 0 .../property-editors/uis/block-grid/manifests.ts | 7 +++++++ .../shared/property-editors/uis/manifests.ts | 10 ++-------- 14 files changed, 9 insertions(+), 8 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-block-configuration => block-grid/config/block-configuration}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-block-configuration => block-grid/config/block-configuration}/property-editor-ui-block-grid-block-configuration.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-block-configuration => block-grid/config/block-configuration}/property-editor-ui-block-grid-block-configuration.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-block-configuration => block-grid/config/block-configuration}/property-editor-ui-block-grid-block-configuration.test.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-group-configuration => block-grid/config/group-configuration}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-group-configuration => block-grid/config/group-configuration}/property-editor-ui-block-grid-group-configuration.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-group-configuration => block-grid/config/group-configuration}/property-editor-ui-block-grid-group-configuration.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-group-configuration => block-grid/config/group-configuration}/property-editor-ui-block-grid-group-configuration.test.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-stylesheet-picker => block-grid/config/stylesheet-picker}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-stylesheet-picker => block-grid/config/stylesheet-picker}/property-editor-ui-block-grid-stylesheet-picker.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-stylesheet-picker => block-grid/config/stylesheet-picker}/property-editor-ui-block-grid-stylesheet-picker.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-grid-stylesheet-picker => block-grid/config/stylesheet-picker}/property-editor-ui-block-grid-stylesheet-picker.test.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/manifests.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-block-configuration/property-editor-ui-block-grid-block-configuration.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/manifests.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/manifests.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid-stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts index 375f2fc1ff..7f899af2b3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts @@ -1,3 +1,6 @@ +import { manifest as blockConfiguration } from './config/block-configuration/manifests'; +import { manifest as groupConfiguration } from './config/group-configuration/manifests'; +import { manifest as stylesheetPicker } from './config/stylesheet-picker/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifest: ManifestPropertyEditorUI = { @@ -34,3 +37,7 @@ export const manifest: ManifestPropertyEditorUI = { }, }, }; + +const config: Array = [blockConfiguration, groupConfiguration, stylesheetPicker]; + +export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index b9fe89789c..c9bf426988 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -23,10 +23,7 @@ import { manifest as mediaPicker } from './media-picker/manifests'; import { manifest as imageCropsConfiguration } from './image-crops-configuration/manifests'; import { manifest as imageCropper } from './image-cropper/manifests'; import { manifest as uploadField } from './upload-field/manifests'; -import { manifest as blockGrid } from './block-grid/manifests'; -import { manifest as blockGridBlockConfiguration } from './block-grid-block-configuration/manifests'; -import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests'; -import { manifest as blockGridStylesheetPicker } from './block-grid-stylesheet-picker/manifests'; +import { manifests as blockGrid } from './block-grid/manifests'; import { manifest as orderDirection } from './order-direction/manifests'; import { manifests as collectionView } from './collection-view/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; @@ -57,10 +54,7 @@ export const manifests: Array = [ imageCropsConfiguration, imageCropper, uploadField, - blockGrid, - blockGridBlockConfiguration, - blockGridGroupConfiguration, - blockGridStylesheetPicker, + ...blockGrid, orderDirection, ...collectionView, { From 656cc5cf23ca1df8fc0a112b34f2db4b3a346cd3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 14:26:13 +0100 Subject: [PATCH 04/23] combine folders --- .../shared/property-editors/uis/block-grid/manifests.ts | 2 +- .../config/block-configuration}/manifests.ts | 0 ...rty-editor-ui-block-list-block-configuration.element.ts | 0 ...rty-editor-ui-block-list-block-configuration.stories.ts | 0 ...operty-editor-ui-block-list-block-configuration.test.ts | 0 .../shared/property-editors/uis/block-list/manifests.ts | 7 ++++++- .../property-editors/uis/collection-view/manifests.ts | 2 +- .../backoffice/shared/property-editors/uis/manifests.ts | 6 ++---- 8 files changed, 10 insertions(+), 7 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-list-block-configuration => block-list/config/block-configuration}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-list-block-configuration => block-list/config/block-configuration}/property-editor-ui-block-list-block-configuration.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-list-block-configuration => block-list/config/block-configuration}/property-editor-ui-block-list-block-configuration.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{block-list-block-configuration => block-list/config/block-configuration}/property-editor-ui-block-list-block-configuration.test.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts index 7f899af2b3..81f3b6c5b5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/manifests.ts @@ -3,7 +3,7 @@ import { manifest as groupConfiguration } from './config/group-configuration/man import { manifest as stylesheetPicker } from './config/stylesheet-picker/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.BlockGrid', name: 'Block Grid Property Editor UI', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/manifests.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list-block-configuration/property-editor-ui-block-list-block-configuration.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts index 9ed88b6fdb..81094716c3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts @@ -1,6 +1,7 @@ +import { manifest as blockConfiguration } from './config/block-configuration/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.BlockList', name: 'Block List Property Editor UI', @@ -36,3 +37,7 @@ export const manifest: ManifestPropertyEditorUI = { }, }, }; + +const config = [blockConfiguration]; + +export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts index 1990b1b20e..15e32cc656 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts @@ -4,7 +4,7 @@ import { manifest as layoutConfiguration } from './config/layout-configuration/m import { manifest as orderBy } from './config/order-by/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.CollectionView', name: 'Collection View Property Editor UI', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index c9bf426988..cdde70a559 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -16,9 +16,8 @@ import { manifest as tags } from './tags/manifests'; import { manifest as markdownEditor } from './markdown-editor/manifests'; import { manifest as radioButtonList } from './radio-button-list/manifests'; import { manifest as checkboxList } from './checkbox-list/manifests'; -import { manifest as blockList } from './block-list/manifests'; +import { manifests as blockList } from './block-list/manifests'; import { manifest as numberRange } from './number-range/manifests'; -import { manifest as blockListBlockConfiguration } from './block-list-block-configuration/manifests'; import { manifest as mediaPicker } from './media-picker/manifests'; import { manifest as imageCropsConfiguration } from './image-crops-configuration/manifests'; import { manifest as imageCropper } from './image-cropper/manifests'; @@ -47,9 +46,8 @@ export const manifests: Array = [ markdownEditor, radioButtonList, checkboxList, - blockList, + ...blockList, numberRange, - blockListBlockConfiguration, mediaPicker, imageCropsConfiguration, imageCropper, From 112cdb3faca5280d0e22be63060c22b4e34d6306 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 14:56:23 +0100 Subject: [PATCH 05/23] combine tree picker folders --- .../backoffice/shared/property-editors/uis/manifests.ts | 6 ++---- .../config/start-node}/manifests.ts | 0 .../property-editor-ui-tree-picker-start-node.element.ts | 0 .../property-editor-ui-tree-picker-start-node.stories.ts | 0 .../property-editor-ui-tree-picker-start-node.test.ts | 0 .../shared/property-editors/uis/tree-picker/manifests.ts | 7 ++++++- 6 files changed, 8 insertions(+), 5 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{tree-picker-start-node => tree-picker/config/start-node}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{tree-picker-start-node => tree-picker/config/start-node}/property-editor-ui-tree-picker-start-node.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{tree-picker-start-node => tree-picker/config/start-node}/property-editor-ui-tree-picker-start-node.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/{tree-picker-start-node => tree-picker/config/start-node}/property-editor-ui-tree-picker-start-node.test.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index cdde70a559..50319ff12c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -4,8 +4,7 @@ import { manifest as datePicker } from './date-picker/manifests'; import { manifest as eyeDropper } from './eye-dropper/manifests'; import { manifest as multiUrlPicker } from './multi-url-picker/manifests'; import { manifest as overlaySize } from './overlay-size/manifests'; -import { manifest as treePicker } from './tree-picker/manifests'; -import { manifest as treePickerStartNode } from './tree-picker-start-node/manifests'; +import { manifests as treePicker } from './tree-picker/manifests'; import { manifests as textBoxes } from './text-box/manifests'; import { manifest as dropdown } from './dropdown/manifests'; import { manifest as multipleTextString } from './multiple-text-string/manifests'; @@ -35,8 +34,7 @@ export const manifests: Array = [ multiUrlPicker, overlaySize, ...textBoxes, - treePicker, - treePickerStartNode, + ...treePicker, dropdown, multipleTextString, textArea, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts index fcc55d2af6..0743c08937 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts @@ -1,6 +1,7 @@ +import { manifest as startNode } from './config/start-node/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.TreePicker', name: 'Tree Picker Property Editor UI', @@ -34,3 +35,7 @@ export const manifest: ManifestPropertyEditorUI = { }, }, }; + +const config: Array = [startNode]; + +export const manifests = [manifest, ...config]; From acef25f9b8167a33dcde72b93f56f581b30615ce Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 15:05:25 +0100 Subject: [PATCH 06/23] clean up --- .../src/core/mocks/data/data-type.data.ts | 52 +++++++++++++++++++ .../src/core/mocks/data/document.data.ts | 24 +++++++++ 2 files changed, 76 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 7b76e52572..1db506a276 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -369,6 +369,58 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.CollectionView', data: [], }, + { + name: 'Icon Picker', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-iconPicker', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.IconPicker', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.IconPicker', + data: [], + }, + { + name: 'Number Range', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-numberRange', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.JSON', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.NumberRange', + data: [], + }, + { + name: 'Order Direction', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-orderDirection', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.JSON', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.OrderDirection', + data: [], + }, + { + name: 'Overlay Size', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-overlaySize', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.JSON', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.OverlaySize', + data: [], + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index d2e49ff251..20ebb59e04 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -144,6 +144,30 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-blockGrid', }, + { + alias: 'blockGrid', + label: 'Icon Picker', + description: '', + dataTypeKey: 'dt-iconPicker', + }, + { + alias: 'numberRange', + label: 'Number Range', + description: '', + dataTypeKey: 'dt-numberRange', + }, + { + alias: 'orderDirection', + label: 'Order Direction', + description: '', + dataTypeKey: 'dt-orderDirection', + }, + { + alias: 'overlaySize', + label: 'Overlay Size', + description: '', + dataTypeKey: 'dt-overlaySize', + }, ], data: [], variants: [], From aa1ce0f2336ecdfadc59c38228627b2f74a8c862 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 15:30:42 +0100 Subject: [PATCH 07/23] add tiny-mce --- .../models/Umbraco.TinyMCE.ts | 23 +++++++++++ .../property-editors/models/manifests.ts | 16 ++------ .../shared/property-editors/uis/manifests.ts | 10 +++-- .../config/configuration/manifests.ts | 14 +++++++ ...ditor-ui-tiny-mce-configuration.element.ts | 29 ++++++++++++++ ...ditor-ui-tiny-mce-configuration.stories.ts | 15 ++++++++ ...y-editor-ui-tiny-mce-configuration.test.ts | 21 ++++++++++ .../uis/tiny-mce/manifests.ts | 38 +++++++++++++++++++ .../property-editor-ui-tiny-mce.element.ts | 29 ++++++++++++++ .../property-editor-ui-tiny-mce.stories.ts | 15 ++++++++ .../property-editor-ui-tiny-mce.test.ts | 21 ++++++++++ .../src/core/mocks/data/data-type.data.ts | 13 +++++++ 12 files changed, 228 insertions(+), 16 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts new file mode 100644 index 0000000000..d1778f6b4e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts @@ -0,0 +1,23 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Tiny MCE', + alias: 'Umbraco.TinyMCE', + meta: { + config: { + properties: [ + { + alias: 'mediaParentId', + label: 'Image Upload Folder', + propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker', + }, + { + alias: 'ignoreUserStartNodes', + label: 'Ignore User Start Nodes', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts index be93556d3b..e375aa7fba 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts @@ -21,6 +21,8 @@ import { manifest as mediaPicker } from './Umbraco.MediaPicker3'; import { manifest as imageCropper } from './Umbraco.ImageCropper'; import { manifest as uploadField } from './Umbraco.UploadField'; import { manifest as blockGrid } from './Umbraco.BlockGrid'; +import { manifest as tinyMCE } from './Umbraco.TinyMCE'; +import { manifest as listView } from './Umbraco.ListView'; import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; @@ -48,6 +50,8 @@ export const manifests: Array = [ imageCropper, uploadField, blockGrid, + tinyMCE, + listView, { type: 'propertyEditorModel', name: 'Decimal', @@ -66,12 +70,6 @@ export const manifests: Array = [ alias: 'Umbraco.Integer', meta: {}, }, - { - type: 'propertyEditorModel', - name: 'Rich Text Editor', - alias: 'Umbraco.TinyMCE', - meta: {}, - }, { type: 'propertyEditorModel', name: 'Member Group Picker', @@ -90,12 +88,6 @@ export const manifests: Array = [ alias: 'Umbraco.UserPicker', meta: {}, }, - { - type: 'propertyEditorModel', - name: 'List view', - alias: 'Umbraco.ListView', - meta: {}, - }, { type: 'propertyEditorModel', name: 'Icon Picker', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index 50319ff12c..5431690134 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -24,6 +24,7 @@ import { manifest as uploadField } from './upload-field/manifests'; import { manifests as blockGrid } from './block-grid/manifests'; import { manifest as orderDirection } from './order-direction/manifests'; import { manifests as collectionView } from './collection-view/manifests'; +import { manifests as tinyMCE } from './tiny-mce/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -33,8 +34,6 @@ export const manifests: Array = [ eyeDropper, multiUrlPicker, overlaySize, - ...textBoxes, - ...treePicker, dropdown, multipleTextString, textArea, @@ -44,15 +43,18 @@ export const manifests: Array = [ markdownEditor, radioButtonList, checkboxList, - ...blockList, numberRange, mediaPicker, imageCropsConfiguration, imageCropper, uploadField, - ...blockGrid, orderDirection, + ...textBoxes, + ...treePicker, + ...blockList, + ...blockGrid, ...collectionView, + ...tinyMCE, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts new file mode 100644 index 0000000000..853af4e856 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE', + name: 'TinyMCE Property Editor UI', + loader: () => import('./property-editor-ui-tiny-mce-configuration.element'), + meta: { + label: 'Rich Text Editor Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts new file mode 100644 index 0000000000..0d5e9338d9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-tiny-mce-configuration + */ +@customElement('umb-property-editor-ui-tiny-mce-configuration') +export class UmbPropertyEditorUITinyMceConfigurationElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-tiny-mce-configuration
`; + } +} + +export default UmbPropertyEditorUITinyMceConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tiny-mce-configuration': UmbPropertyEditorUITinyMceConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts new file mode 100644 index 0000000000..447be2a933 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element'; +import './property-editor-ui-tiny-mce-configuration.element'; + +export default { + title: 'Property Editor UIs/Tiny Mce Configuration', + component: 'umb-property-editor-ui-tiny-mce-configuration', + id: 'umb-property-editor-ui-tiny-mce-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts new file mode 100644 index 0000000000..142ce9b535 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITinyMceConfigurationElement', () => { + let element: UmbPropertyEditorUITinyMceConfigurationElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceConfigurationElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts new file mode 100644 index 0000000000..1c570b0cb8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts @@ -0,0 +1,38 @@ +import { manifest as configuration } from './config/configuration/manifests'; +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE', + name: 'Rich Text Editor Property Editor UI', + loader: () => import('./property-editor-ui-tiny-mce.element'), + meta: { + label: 'Rich Text Editor', + propertyEditorModel: 'Umbraco.TinyMCE', + icon: 'umb:browser-window', + group: 'richText', + config: { + properties: [ + { + alias: 'editor', + label: 'Editor', + propertyEditorUI: 'Umb.PropertyEditorUI.TinyMCE.Configuration', + }, + { + alias: 'overlaySize', + label: 'Overlay Size', + propertyEditorUI: 'Umb.PropertyEditorUI.OverlaySize', + }, + { + alias: 'hideLabel', + label: 'Hide Label', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, + ], + }, + }, +}; + +const config = [configuration]; + +export const manifests = [manifest, ...config]; 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 new file mode 100644 index 0000000000..aea7ba9ec1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-tiny-mce + */ +@customElement('umb-property-editor-ui-tiny-mce') +export class UmbPropertyEditorUITinyMceElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-tiny-mce
`; + } +} + +export default UmbPropertyEditorUITinyMceElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tiny-mce': UmbPropertyEditorUITinyMceElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts new file mode 100644 index 0000000000..3dc06cef73 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element'; +import './property-editor-ui-tiny-mce.element'; + +export default { + title: 'Property Editor UIs/Tiny Mce', + component: 'umb-property-editor-ui-tiny-mce', + id: 'umb-property-editor-ui-tiny-mce', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts new file mode 100644 index 0000000000..966c0db902 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITinyMceElement', () => { + let element: UmbPropertyEditorUITinyMceElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 1db506a276..965871aaca 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -421,6 +421,19 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.OverlaySize', data: [], }, + { + name: 'Rich Text Editor', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-richTextEditor', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.TinyMCE', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.TinyMCE', + data: [], + }, ]; // Temp mocked database From 6c07cccaa917b9120bc1606b106abec38f0a1467 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Jan 2023 15:34:10 +0100 Subject: [PATCH 08/23] move icon picker manifest --- .../property-editors/uis/icon-picker/manifests.ts | 14 ++++++++++++++ .../shared/property-editors/uis/manifests.ts | 14 ++------------ 2 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/manifests.ts new file mode 100644 index 0000000000..4458bc6653 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.IconPicker', + name: 'Icon Picker Property Editor UI', + loader: () => import('./property-editor-ui-icon-picker.element'), + meta: { + label: 'Icon Picker', + propertyEditorModel: 'Umbraco.JSON', + icon: 'umb:autofill', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index 5431690134..491a60f176 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -25,6 +25,7 @@ import { manifests as blockGrid } from './block-grid/manifests'; import { manifest as orderDirection } from './order-direction/manifests'; import { manifests as collectionView } from './collection-view/manifests'; import { manifests as tinyMCE } from './tiny-mce/manifests'; +import { manifest as iconPicker } from './icon-picker/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -49,6 +50,7 @@ export const manifests: Array = [ imageCropper, uploadField, orderDirection, + iconPicker, ...textBoxes, ...treePicker, ...blockList, @@ -67,16 +69,4 @@ export const manifests: Array = [ propertyEditorModel: 'Umbraco.Integer', }, }, - { - type: 'propertyEditorUI', - alias: 'Umb.PropertyEditorUI.IconPicker', - name: 'Icon Picker Property Editor UI', - loader: () => import('./icon-picker/property-editor-ui-icon-picker.element'), - meta: { - label: 'Icon Picker', - propertyEditorModel: 'Umbraco.IconPicker', - icon: 'umb:document', - group: 'common', - }, - }, ]; From f2355f6135f14cdda461e6391c6105c6ab59d9e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 13 Jan 2023 08:37:57 +0100 Subject: [PATCH 09/23] tests --- .../unique-array-behavior-subject.ts | 54 +++++++++++++++++ .../unique-behavior-subject.test.ts | 60 +++++++++++++++++++ .../observable-api/unique-behavior-subject.ts | 4 +- .../unique-object-behavior-subject.test.ts | 52 ++++++++++++++++ .../unique-object-behavior-subject.ts | 26 ++++++++ 5 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.ts new file mode 100644 index 0000000000..2ab466b647 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.ts @@ -0,0 +1,54 @@ +import { appendToFrozenArray, UniqueBehaviorSubject } from "./unique-behavior-subject"; + +/** + * @export + * @class UniqueObjectBehaviorSubject + * @extends {UniqueBehaviorSubject} + * @description - A RxJS UniqueObjectBehaviorSubject which deepFreezes the object-data to ensure its not manipulated from any implementations. + * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content. + * + * The UniqueObjectBehaviorSubject provides methods to append data when the data is an Object. + */ + +export class UniqueArrayBehaviorSubject extends UniqueBehaviorSubject { + + + constructor(initialData: T[], private _uniqueCompare?: (existingEntry: T, newEntry: T) => boolean) { + super(initialData); + } + + /** + * @method append + * @param {Partial} partialData - A object containing some of the data for this Subject. + * @description - Append some new data to this Object. + * @example Example append some data. + * const data = [ + * { key: 1, value: 'foo'}, + * { key: 2, value: 'bar'} + * ]; + * const mySubject = new UniqueArrayBehaviorSubject(data); + * mySubject.append({ key: 1, value: 'replaced-foo'}); + */ + appendOne(entry: T) { + this.next(appendToFrozenArray(this.getValue(), entry, this._uniqueCompare)) + } + + /** + * @method append + * @param {T[]} entries - A array of new data to be added in this Subject. + * @description - Append some new data to this Object, if it compares to existing data it will replace it. + * @example Example append some data. + * const data = [ + * { key: 1, value: 'foo'}, + * { key: 2, value: 'bar'} + * ]; + * const mySubject = new UniqueArrayBehaviorSubject(data); + * mySubject.append([ + * { key: 1, value: 'replaced-foo'}, + * { key: 3, value: 'another-bla'} + * ]); + */ + append(entries: T[]) { + entries.forEach(x => this.appendOne(x)) + } +} diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts new file mode 100644 index 0000000000..1b0f2ca131 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts @@ -0,0 +1,60 @@ +import { expect } from '@open-wc/testing'; +import { createObservablePart, UniqueBehaviorSubject } from './unique-behavior-subject'; + +describe('UniqueBehaviorSubject', () => { + + type ObjectType = {key: string, another: string}; + + let subject: UniqueBehaviorSubject; + let initialData: ObjectType; + + beforeEach(() => { + initialData = {key: 'some', another: 'myValue'}; + subject = new UniqueBehaviorSubject(initialData); + }); + + + it('getValue gives the initial data', () => { + expect(subject.value.another).to.be.equal(initialData.another); + }); + + it('update via next', () => { + subject.next({key: 'some', another: 'myNewValue'}); + expect(subject.value.another).to.be.equal('myNewValue'); + }); + + it('replays latests, no matter the amount of subscriptions.', (done) => { + + const observer = subject.asObservable(); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + }); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + done(); + }); + + }); + + it('use createObservablePart, updates on its specific change.', (done) => { + + let amountOfCallbacks = 0; + + const subObserver = createObservablePart(subject, data => data.another); + subObserver.subscribe((value) => { + amountOfCallbacks++; + if(amountOfCallbacks === 1) { + expect(value).to.be.equal('myValue'); + } + if(amountOfCallbacks === 2) { + expect(value).to.be.equal('myNewValue'); + done(); + } + }); + + subject.next({key: 'change_this_first_should_not_trigger_update', another: 'myValue'}); + subject.next({key: 'some', another: 'myNewValue'}); + + }); + +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts index 2d6fd318ba..5ea00ee126 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts @@ -40,10 +40,10 @@ export function naiveObjectComparison(objOne: any, objTwo: any): boolean { * const newDataSet = appendToFrozenArray(mySubject.getValue(), entry, x => x.key === key); * mySubject.next(newDataSet); */ -export function appendToFrozenArray(data: T[], entry: T, uniqueMethod?: (entry: T) => boolean): T[] { +export function appendToFrozenArray(data: T[], entry: T, uniqueMethod?: (existingEntry: T, newEntry: T) => boolean): T[] { const unFrozenDataSet = [...data]; if(uniqueMethod) { - const indexToReplace = unFrozenDataSet.findIndex(uniqueMethod); + const indexToReplace = unFrozenDataSet.findIndex((x) => uniqueMethod(x, entry)); if(indexToReplace !== -1) { unFrozenDataSet[indexToReplace] = entry; } else { diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts new file mode 100644 index 0000000000..a046b8f9ca --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts @@ -0,0 +1,52 @@ +import { expect } from '@open-wc/testing'; +import { createObservablePart } from './unique-behavior-subject'; +import { UniqueObjectBehaviorSubject } from './unique-object-behavior-subject'; + +describe('UniqueObjectBehaviorSubject', () => { + + type ObjectType = {key: string, another: string}; + + let subject: UniqueObjectBehaviorSubject; + let initialData: ObjectType; + + beforeEach(() => { + initialData = {key: 'some', another: 'myValue'}; + subject = new UniqueObjectBehaviorSubject(initialData); + }); + + + it('replays latests, no matter the amount of subscriptions.', (done) => { + + const observer = subject.asObservable(); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + }); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + done(); + }); + + }); + + it('use createObservablePart, updates on its specific change.', (done) => { + + let amountOfCallbacks = 0; + + const subObserver = createObservablePart(subject, data => data.another); + subObserver.subscribe((value) => { + amountOfCallbacks++; + if(amountOfCallbacks === 1) { + expect(value).to.be.equal('myValue'); + } + if(amountOfCallbacks === 2) { + expect(value).to.be.equal('myNewValue'); + done(); + } + }); + + subject.append({key: 'change_this_first_should_not_trigger_update'}); + subject.append({another: 'myNewValue'}); + + }); + +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts new file mode 100644 index 0000000000..9d3f1cd965 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts @@ -0,0 +1,26 @@ +import { UniqueBehaviorSubject } from "./unique-behavior-subject"; + +/** + * @export + * @class UniqueObjectBehaviorSubject + * @extends {UniqueBehaviorSubject} + * @description - A RxJS UniqueObjectBehaviorSubject which deepFreezes the object-data to ensure its not manipulated from any implementations. + * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content. + * + * The UniqueObjectBehaviorSubject provides methods to append data when the data is an Object. + */ +export class UniqueObjectBehaviorSubject extends UniqueBehaviorSubject { + + /** + * @method append + * @param {Partial} partialData - A object containing some of the data for this Subject. + * @description - Append some new data to this Object. + * @example Example append some data. + * const data = {key: 'myKey', value: 'myInitialValue'}; + * const mySubject = new UniqueObjectBehaviorSubject(data) + * mySubject.append({value: 'myNewValue'}) + */ + append(partialData: Partial) { + this.next({ ...this.getValue(), ...partialData }); + } +} From bcd01f2132b8375f73093222af35e42348588940 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 13 Jan 2023 12:36:37 +0100 Subject: [PATCH 10/23] add label --- .../property-editors/models/Umbraco.Label.ts | 19 ++++++++++++ .../property-editors/models/manifests.ts | 2 ++ .../property-editors/uis/label/manifests.ts | 14 +++++++++ .../label/property-editor-ui-label.element.ts | 29 +++++++++++++++++++ .../label/property-editor-ui-label.stories.ts | 15 ++++++++++ .../label/property-editor-ui-label.test.ts | 21 ++++++++++++++ .../shared/property-editors/uis/manifests.ts | 4 +++ .../uis/value-type/manifests.ts | 14 +++++++++ .../property-editor-ui-value-type.element.ts | 29 +++++++++++++++++++ .../property-editor-ui-value-type.stories.ts | 15 ++++++++++ .../property-editor-ui-value-type.test.ts | 21 ++++++++++++++ .../src/core/mocks/data/data-type.data.ts | 13 +++++++++ .../src/core/mocks/data/document.data.ts | 6 ++++ 13 files changed, 202 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Label.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Label.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Label.ts new file mode 100644 index 0000000000..33b212bd28 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Label.ts @@ -0,0 +1,19 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Label', + alias: 'Umbraco.Label', + meta: { + config: { + properties: [ + { + alias: 'umbracoDataValueType', + label: 'Value type', + description: 'The type of value to store', + propertyEditorUI: 'Umb.PropertyEditorUI.ValueType', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts index e375aa7fba..ead4f94d1e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts @@ -23,6 +23,7 @@ import { manifest as uploadField } from './Umbraco.UploadField'; import { manifest as blockGrid } from './Umbraco.BlockGrid'; import { manifest as tinyMCE } from './Umbraco.TinyMCE'; import { manifest as listView } from './Umbraco.ListView'; +import { manifest as label } from './Umbraco.Label'; import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; @@ -52,6 +53,7 @@ export const manifests: Array = [ blockGrid, tinyMCE, listView, + label, { type: 'propertyEditorModel', name: 'Decimal', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/manifests.ts new file mode 100644 index 0000000000..7c3f1ca069 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.Label', + name: 'Label Property Editor UI', + loader: () => import('./property-editor-ui-label.element'), + meta: { + label: 'Label', + icon: 'umb:readonly', + group: 'pickers', + propertyEditorModel: 'Umbraco.Label', + }, +}; 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 new file mode 100644 index 0000000000..3dc55e8796 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-label + */ +@customElement('umb-property-editor-ui-label') +export class UmbPropertyEditorUILabelElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-label
`; + } +} + +export default UmbPropertyEditorUILabelElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-label': UmbPropertyEditorUILabelElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts new file mode 100644 index 0000000000..862aa36bd2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUILabelElement } from './property-editor-ui-label.element'; +import './property-editor-ui-label.element'; + +export default { + title: 'Property Editor UIs/Label', + component: 'umb-property-editor-ui-label', + id: 'umb-property-editor-ui-label', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.test.ts new file mode 100644 index 0000000000..9687836ee9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUILabelElement } from './property-editor-ui-label.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUILabelElement', () => { + let element: UmbPropertyEditorUILabelElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUILabelElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index 491a60f176..f3a0e89206 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -26,6 +26,8 @@ import { manifest as orderDirection } from './order-direction/manifests'; import { manifests as collectionView } from './collection-view/manifests'; import { manifests as tinyMCE } from './tiny-mce/manifests'; import { manifest as iconPicker } from './icon-picker/manifests'; +import { manifest as label } from './label/manifests'; +import { manifest as valueType } from './value-type/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -51,6 +53,8 @@ export const manifests: Array = [ uploadField, orderDirection, iconPicker, + label, + valueType, ...textBoxes, ...treePicker, ...blockList, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/manifests.ts new file mode 100644 index 0000000000..d39e979da2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.ValueType', + name: 'Value Type Property Editor UI', + loader: () => import('./property-editor-ui-value-type.element'), + meta: { + label: 'Value Type', + icon: 'umb:autofill', + group: 'common', + propertyEditorModel: 'Umbraco.JSON', + }, +}; 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 new file mode 100644 index 0000000000..5c52b9d2b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-value-type + */ +@customElement('umb-property-editor-ui-value-type') +export class UmbPropertyEditorUIValueTypeElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-value-type
`; + } +} + +export default UmbPropertyEditorUIValueTypeElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-value-type': UmbPropertyEditorUIValueTypeElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts new file mode 100644 index 0000000000..e2883ab499 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIValueTypeElement } from './property-editor-ui-value-type.element'; +import './property-editor-ui-value-type.element'; + +export default { + title: 'Property Editor UIs/Value Type', + component: 'umb-property-editor-ui-value-type', + id: 'umb-property-editor-ui-value-type', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.test.ts new file mode 100644 index 0000000000..3e5d5bc3ae --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIValueTypeElement } from './property-editor-ui-value-type.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIValueTypeElement', () => { + let element: UmbPropertyEditorUIValueTypeElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIValueTypeElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 965871aaca..ee2e1d56bc 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -434,6 +434,19 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.TinyMCE', data: [], }, + { + name: 'Label', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-label', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.Label', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.Label', + data: [], + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 20ebb59e04..0420f48bf6 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -168,6 +168,12 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-overlaySize', }, + { + alias: 'label', + label: 'Label', + description: '', + dataTypeKey: 'dt-label', + }, ], data: [], variants: [], From f474a7b1e0412d2e0163c2c998acaa383a6e455d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 13 Jan 2023 12:51:52 +0100 Subject: [PATCH 11/23] add tags --- .../property-editors/models/Umbraco.Tags.ts | 2 +- .../shared/property-editors/uis/manifests.ts | 4 +-- .../uis/tags/config/storage-type/manifests.ts | 14 +++++++++ ...rty-editor-ui-tags-storage-type.element.ts | 29 +++++++++++++++++++ ...rty-editor-ui-tags-storage-type.stories.ts | 15 ++++++++++ ...operty-editor-ui-tags-storage-type.test.ts | 21 ++++++++++++++ .../property-editors/uis/tags/manifests.ts | 7 ++++- 7 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts index 715cd3971f..2c2ebe7ae8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts @@ -17,7 +17,7 @@ export const manifest: ManifestPropertyEditorModel = { alias: 'storageType', label: 'Storage Type', description: '', - propertyEditorUI: 'Umb.PropertyEditorUI.Dropdown', + propertyEditorUI: 'Umb.PropertyEditorUI.Tags.StorageType', }, ], defaultData: [ diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index f3a0e89206..cc410cf4d8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -11,7 +11,7 @@ import { manifest as multipleTextString } from './multiple-text-string/manifests import { manifest as textArea } from './textarea/manifests'; import { manifest as slider } from './slider/manifests'; import { manifest as toggle } from './toggle/manifests'; -import { manifest as tags } from './tags/manifests'; +import { manifests as tags } from './tags/manifests'; import { manifest as markdownEditor } from './markdown-editor/manifests'; import { manifest as radioButtonList } from './radio-button-list/manifests'; import { manifest as checkboxList } from './checkbox-list/manifests'; @@ -42,7 +42,6 @@ export const manifests: Array = [ textArea, slider, toggle, - tags, markdownEditor, radioButtonList, checkboxList, @@ -61,6 +60,7 @@ export const manifests: Array = [ ...blockGrid, ...collectionView, ...tinyMCE, + ...tags, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts new file mode 100644 index 0000000000..dbcc66558b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.Tags.StorageType', + name: 'Tags Storage Type Property Editor UI', + loader: () => import('./property-editor-ui-tags-storage-type.element'), + meta: { + label: 'Tags Storage Type', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts new file mode 100644 index 0000000000..83dd8314cc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-property-editor-ui-tags-storage-type + */ +@customElement('umb-property-editor-ui-tags-storage-type') +export class UmbPropertyEditorUITagsStorageTypeElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-tags-storage-type
`; + } +} + +export default UmbPropertyEditorUITagsStorageTypeElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tags-storage-type': UmbPropertyEditorUITagsStorageTypeElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts new file mode 100644 index 0000000000..77f2d144f8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element'; +import './property-editor-ui-tags-storage-type.element'; + +export default { + title: 'Property Editor UIs/Tags Storage Type', + component: 'umb-property-editor-ui-tags-storage-type', + id: 'umb-property-editor-ui-tags-storage-type', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts new file mode 100644 index 0000000000..1de85497c5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITagsStorageTypeElement', () => { + let element: UmbPropertyEditorUITagsStorageTypeElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITagsStorageTypeElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts index 936e81dea3..d826098369 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts @@ -1,6 +1,7 @@ +import { manifest as storageType } from './config/storage-type/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Tags', name: 'Tags Property Editor UI', @@ -12,3 +13,7 @@ export const manifest: ManifestPropertyEditorUI = { group: 'common', }, }; + +const config: Array = [storageType]; + +export const manifests = [manifest, ...config]; From 4c0144453c91c1b72670c972c122639b2114bf83 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 13 Jan 2023 15:09:36 +0100 Subject: [PATCH 12/23] add integer and decimal --- .../models/Umbraco.Decimal.ts | 31 +++++++++++ .../models/Umbraco.Integer.ts | 31 +++++++++++ .../property-editors/models/manifests.ts | 22 ++------ .../shared/property-editors/uis/manifests.ts | 2 + .../property-editors/uis/number/manifests.ts | 53 +++++++++++++++++++ .../src/core/mocks/data/data-type.data.ts | 26 +++++++++ .../src/core/mocks/data/document.data.ts | 12 +++++ 7 files changed, 159 insertions(+), 18 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts new file mode 100644 index 0000000000..8f81d9931c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts @@ -0,0 +1,31 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Decimal', + alias: 'Umbraco.Decimal', + meta: { + config: { + properties: [ + { + alias: 'min', + label: 'Minimum', + description: 'Enter the minimum amount of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'max', + label: 'Maximum', + description: 'Enter the minimum amount of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'stepSize', + label: 'Step size', + description: 'Enter the intervals amount between each step of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts new file mode 100644 index 0000000000..63ff9bb023 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts @@ -0,0 +1,31 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Decimal', + alias: 'Umbraco.Integer', + meta: { + config: { + properties: [ + { + alias: 'min', + label: 'Minimum', + description: 'Enter the minimum amount of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'max', + label: 'Maximum', + description: 'Enter the minimum amount of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'stepSize', + label: 'Step size', + description: 'Enter the intervals amount between each step of number to be entered', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts index ead4f94d1e..6f34e2d47e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts @@ -24,6 +24,8 @@ import { manifest as blockGrid } from './Umbraco.BlockGrid'; import { manifest as tinyMCE } from './Umbraco.TinyMCE'; import { manifest as listView } from './Umbraco.ListView'; import { manifest as label } from './Umbraco.Label'; +import { manifest as integer } from './Umbraco.Integer'; +import { manifest as decimal } from './Umbraco.Decimal'; import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; @@ -54,24 +56,8 @@ export const manifests: Array = [ tinyMCE, listView, label, - { - type: 'propertyEditorModel', - name: 'Decimal', - alias: 'Umbraco.Decimal', - meta: {}, - }, - { - type: 'propertyEditorModel', - name: 'Label', - alias: 'Umbraco.Label', - meta: {}, - }, - { - type: 'propertyEditorModel', - name: 'Numeric', - alias: 'Umbraco.Integer', - meta: {}, - }, + integer, + decimal, { type: 'propertyEditorModel', name: 'Member Group Picker', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index cc410cf4d8..d3bfa0a907 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -28,6 +28,7 @@ import { manifests as tinyMCE } from './tiny-mce/manifests'; import { manifest as iconPicker } from './icon-picker/manifests'; import { manifest as label } from './label/manifests'; import { manifest as valueType } from './value-type/manifests'; +import { manifests as numbers } from './number/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -54,6 +55,7 @@ export const manifests: Array = [ iconPicker, label, valueType, + ...numbers, ...textBoxes, ...treePicker, ...blockList, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/manifests.ts new file mode 100644 index 0000000000..131f7368fb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/manifests.ts @@ -0,0 +1,53 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +// TODO: we don't really want this config value to be changed from the UI. We need a way to handle hidden config properties. +const allowDecimalsConfig = { + alias: 'allowDecimals', + label: 'Allow decimals', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', +}; + +export const manifests: Array = [ + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.Integer', + name: 'Integer Property Editor UI', + loader: () => import('./property-editor-ui-number.element'), + meta: { + label: 'Integer', + propertyEditorModel: 'Umbraco.Integer', + icon: 'umb:autofill', + group: 'common', + config: { + properties: [allowDecimalsConfig], + defaultData: [ + { + alias: 'allowDecimals', + value: false, + }, + ], + }, + }, + }, + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.Decimal', + name: 'Decimal Property Editor UI', + loader: () => import('./property-editor-ui-number.element'), + meta: { + label: 'Decimal', + propertyEditorModel: 'Umbraco.Decimal', + icon: 'umb:autofill', + group: 'common', + config: { + properties: [allowDecimalsConfig], + defaultData: [ + { + alias: 'allowDecimals', + value: true, + }, + ], + }, + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index ee2e1d56bc..0ac10a936a 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -447,6 +447,32 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.Label', data: [], }, + { + name: 'Integer', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-integer', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.Integer', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.Integer', + data: [], + }, + { + name: 'Decimal', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-decimal', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.Decimal', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.Decimal', + data: [], + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 0420f48bf6..4b11bd3cb4 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -174,6 +174,18 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-label', }, + { + alias: 'integer', + label: 'Integer', + description: '', + dataTypeKey: 'dt-integer', + }, + { + alias: 'decimal', + label: 'Decimal', + description: '', + dataTypeKey: 'dt-decimal', + }, ], data: [], variants: [], From 6759d6a7ef0f269a1eb70d2295222654690beb01 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 13 Jan 2023 16:52:46 +0100 Subject: [PATCH 13/23] use UmbLitElement in plop template --- .../plop/templates/property-editor-ui/element.ts.hbs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs index d33b4a38fa..304216e13f 100644 --- a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs +++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element {{ extensionTagName extensionType name }} */ @customElement('{{ extensionTagName extensionType name }}') -export class {{className extensionType name }} extends LitElement { +export class {{className extensionType name }} extends UmbLitElement { static styles = [UUITextStyles]; @property() From 870dd0dc08f3f1bc2dae8ad5bd5da38828706414 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 13 Jan 2023 20:15:07 +0100 Subject: [PATCH 14/23] Do not use Context Alias for Unique for Consumers --- .../src/core/context-api/consume/context-consumer.controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/context-api/consume/context-consumer.controller.ts b/src/Umbraco.Web.UI.Client/src/core/context-api/consume/context-consumer.controller.ts index ecf921af17..07c478f7d0 100644 --- a/src/Umbraco.Web.UI.Client/src/core/context-api/consume/context-consumer.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/core/context-api/consume/context-consumer.controller.ts @@ -7,7 +7,7 @@ import { UmbControllerHostInterface } from 'src/core/controller/controller-host. export class UmbContextConsumerController extends UmbContextConsumer implements UmbControllerInterface { public get unique() { - return this._contextAlias; + return undefined; } constructor(host:UmbControllerHostInterface, contextAlias: string, callback: UmbContextCallback) { From 4461df40ef541bb4ba304ea36e2abf5edde7caac Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 16 Jan 2023 10:51:07 +0100 Subject: [PATCH 15/23] use UmbLitElement in property editor uis --- ...rty-editor-ui-block-grid-block-configuration.element.ts | 7 ++++--- ...rty-editor-ui-block-grid-group-configuration.element.ts | 7 ++++--- ...perty-editor-ui-block-grid-stylesheet-picker.element.ts | 7 ++++--- .../block-grid/property-editor-ui-block-grid.element.ts | 7 ++++--- ...rty-editor-ui-block-list-block-configuration.element.ts | 7 ++++--- .../block-list/property-editor-ui-block-list.element.ts | 7 ++++--- .../property-editor-ui-checkbox-list.element.ts | 7 ++++--- ...r-ui-collection-view-bulk-action-permissions.element.ts | 7 ++++--- ...itor-ui-collection-view-column-configuration.element.ts | 7 ++++--- ...itor-ui-collection-view-layout-configuration.element.ts | 7 ++++--- .../property-editor-ui-collection-view-order-by.element.ts | 7 ++++--- .../property-editor-ui-collection-view.element.ts | 7 ++++--- .../property-editor-ui-color-picker.element.ts | 7 ++++--- .../date-picker/property-editor-ui-date-picker.element.ts | 7 ++++--- .../uis/dropdown/property-editor-ui-dropdown.element.ts | 7 ++++--- .../eye-dropper/property-editor-ui-eye-dropper.element.ts | 7 ++++--- .../property-editor-ui-image-cropper.element.ts | 7 ++++--- ...property-editor-ui-image-crops-configuration.element.ts | 7 ++++--- .../uis/label/property-editor-ui-label.element.ts | 7 ++++--- .../property-editor-ui-markdown-editor.element.ts | 7 ++++--- .../property-editor-ui-media-picker.element.ts | 7 ++++--- .../property-editor-ui-multi-url-picker.element.ts | 5 +++-- .../property-editor-ui-multiple-text-string.element.ts | 5 +++-- .../property-editor-ui-number-range.element.ts | 5 +++-- .../uis/number/property-editor-ui-number.element.ts | 5 +++-- .../property-editor-ui-order-direction.element.ts | 5 +++-- .../property-editor-ui-overlay-size.element.ts | 5 +++-- .../property-editor-ui-radio-button-list.element.ts | 5 +++-- .../uis/slider/property-editor-ui-slider.element.ts | 5 +++-- .../property-editor-ui-tags-storage-type.element.ts | 5 +++-- .../uis/tags/property-editor-ui-tags.element.ts | 5 +++-- .../uis/text-box/property-editor-ui-text-box.element.ts | 5 +++-- .../property-editor-ui-tiny-mce-configuration.element.ts | 5 +++-- .../uis/tiny-mce/property-editor-ui-tiny-mce.element.ts | 5 +++-- .../uis/toggle/property-editor-ui-toggle.element.ts | 5 +++-- .../property-editor-ui-tree-picker-start-node.element.ts | 5 +++-- .../tree-picker/property-editor-ui-tree-picker.element.ts | 5 +++-- .../property-editor-ui-upload-field.element.ts | 5 +++-- .../value-type/property-editor-ui-value-type.element.ts | 5 +++-- 39 files changed, 138 insertions(+), 99 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts index 2e17bce894..b1a5a2de20 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-grid-block-configuration */ @customElement('umb-property-editor-ui-block-grid-block-configuration') -export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends LitElement { +export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index cc0d663596..4c3af973a9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-grid-group-configuration */ @customElement('umb-property-editor-ui-block-grid-group-configuration') -export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends LitElement { +export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts index a924c91673..d9e73c661b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-grid-stylesheet-picker */ @customElement('umb-property-editor-ui-block-grid-stylesheet-picker') -export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends LitElement { +export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 64b1e5d444..7325189bc8 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-grid */ @customElement('umb-property-editor-ui-block-grid') -export class UmbPropertyEditorUIBlockGridElement extends LitElement { +export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts index 63268f1dce..f08fd1694d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-list-block-configuration */ @customElement('umb-property-editor-ui-block-list-block-configuration') -export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends LitElement { +export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 992d8a081a..8af4f0bd49 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-block-list */ @customElement('umb-property-editor-ui-block-list') -export class UmbPropertyEditorUIBlockListElement extends LitElement { +export class UmbPropertyEditorUIBlockListElement extends UmbLitElement { 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 55999e60dc..0c501fc88b 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-checkbox-list */ @customElement('umb-property-editor-ui-checkbox-list') -export class UmbPropertyEditorUICheckboxListElement extends LitElement { +export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts index 9392ad2ca0..f1ea228ed3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-collection-view-bulk-action-permissions */ @customElement('umb-property-editor-ui-collection-view-bulk-action-permissions') -export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends LitElement { +export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts index 3d4b5beeee..e5483e4fe0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-collection-view-column-configuration */ @customElement('umb-property-editor-ui-collection-view-column-configuration') -export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends LitElement { +export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts index ae9be5661b..90febd1e3f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-collection-view-layout-configuration */ @customElement('umb-property-editor-ui-collection-view-layout-configuration') -export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends LitElement { +export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts index 9ceacba7e6..6ea8a17e1c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-collection-view-order-by */ @customElement('umb-property-editor-ui-collection-view-order-by') -export class UmbPropertyEditorUICollectionViewOrderByElement extends LitElement { +export class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts index b8e5240d2e..02d402ff81 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-collection-view */ @customElement('umb-property-editor-ui-collection-view') -export class UmbPropertyEditorUICollectionViewElement extends LitElement { +export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 23332d0019..c50a458514 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-color-picker */ @customElement('umb-property-editor-ui-color-picker') -export class UmbPropertyEditorUIColorPickerElement extends LitElement { +export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement { 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 dffd75b850..3ebaf9d8a0 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-date-picker */ @customElement('umb-property-editor-ui-date-picker') -export class UmbPropertyEditorUIDatePickerElement extends LitElement { +export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 eaf3f5b229..7020970027 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-dropdown */ @customElement('umb-property-editor-ui-dropdown') -export class UmbPropertyEditorUIDropdownElement extends LitElement { +export class UmbPropertyEditorUIDropdownElement extends UmbLitElement { 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 d9aa30980f..42a01d4448 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-eye-dropper */ @customElement('umb-property-editor-ui-eye-dropper') -export class UmbPropertyEditorUIEyeDropperElement extends LitElement { +export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 8dfd118412..88b08bbf7e 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-image-cropper */ @customElement('umb-property-editor-ui-image-cropper') -export class UmbPropertyEditorUIImageCropperElement extends LitElement { +export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement { 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 895db89ff8..f9ef77f241 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +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 LitElement { +export class UmbPropertyEditorUIImageCropsConfigurationElement extends UmbLitElement { 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 3dc55e8796..59e2a6f66e 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-label */ @customElement('umb-property-editor-ui-label') -export class UmbPropertyEditorUILabelElement extends LitElement { +export class UmbPropertyEditorUILabelElement extends UmbLitElement { 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 0ac40ef5d3..d20b64e31c 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-markdown-editor */ @customElement('umb-property-editor-ui-markdown-editor') -export class UmbPropertyEditorUIMarkdownEditorElement extends LitElement { +export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement { 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 de9581e073..b7c18cd63b 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-media-picker */ @customElement('umb-property-editor-ui-media-picker') -export class UmbPropertyEditorUIMediaPickerElement extends LitElement { +export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement { 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 5e33094719..dd21df3e24 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-multi-url-picker */ @customElement('umb-property-editor-ui-multi-url-picker') -export class UmbPropertyEditorUIMultiUrlPickerElement extends LitElement { +export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 53c035aa3a..b5e310d520 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-multiple-text-string */ @customElement('umb-property-editor-ui-multiple-text-string') -export class UmbPropertyEditorUIMultipleTextStringElement extends LitElement { +export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 c209d2a4a6..517f99eab1 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-number-range */ @customElement('umb-property-editor-ui-number-range') -export class UmbPropertyEditorUINumberRangeElement extends LitElement { +export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 7c704fbc8c..84663ac489 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,9 +1,10 @@ -import { css, html, LitElement } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-property-editor-ui-number') -export class UmbPropertyEditorUINumberElement extends LitElement { +export class UmbPropertyEditorUINumberElement extends UmbLitElement { 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 0e407b64ef..6f99e11e43 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-order-direction */ @customElement('umb-property-editor-ui-order-direction') -export class UmbPropertyEditorUIOrderDirectionElement extends LitElement { +export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement { 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 8d4444dfd8..68b6369670 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-overlay-size */ @customElement('umb-property-editor-ui-overlay-size') -export class UmbPropertyEditorUIOverlaySizeElement extends LitElement { +export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement { 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 bf409c9386..2718c7cc9a 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-radio-button-list */ @customElement('umb-property-editor-ui-radio-button-list') -export class UmbPropertyEditorUIRadioButtonListElement extends LitElement { +export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 f8a5a957c9..22e0bd368f 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-slider */ @customElement('umb-property-editor-ui-slider') -export class UmbPropertyEditorUISliderElement extends LitElement { +export class UmbPropertyEditorUISliderElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts index 83dd8314cc..16804c091c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tags-storage-type */ @customElement('umb-property-editor-ui-tags-storage-type') -export class UmbPropertyEditorUITagsStorageTypeElement extends LitElement { +export class UmbPropertyEditorUITagsStorageTypeElement extends UmbLitElement { 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 1480b09193..a7d922140f 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tags */ @customElement('umb-property-editor-ui-tags') -export class UmbPropertyEditorUITagsElement extends LitElement { +export class UmbPropertyEditorUITagsElement extends UmbLitElement { 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 302a353da3..6ae4ce2284 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,9 +1,10 @@ -import { css, html, LitElement } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-property-editor-ui-text-box') -export class UmbPropertyEditorUITextBoxElement extends LitElement { +export class UmbPropertyEditorUITextBoxElement extends UmbLitElement { static styles = [ UUITextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts index 0d5e9338d9..82fa2edbd1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tiny-mce-configuration */ @customElement('umb-property-editor-ui-tiny-mce-configuration') -export class UmbPropertyEditorUITinyMceConfigurationElement extends LitElement { +export class UmbPropertyEditorUITinyMceConfigurationElement extends UmbLitElement { static styles = [UUITextStyles]; @property() 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 aea7ba9ec1..627563c013 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tiny-mce */ @customElement('umb-property-editor-ui-tiny-mce') -export class UmbPropertyEditorUITinyMceElement extends LitElement { +export class UmbPropertyEditorUITinyMceElement extends UmbLitElement { 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 5488b9b2ee..4243ab52ef 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 @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-toggle */ @customElement('umb-property-editor-ui-toggle') -export class UmbPropertyEditorUIToggleElement extends LitElement { +export class UmbPropertyEditorUIToggleElement extends UmbLitElement { static styles = [UUITextStyles]; @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts index 9553a07799..5975246ffe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts @@ -1,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tree-picker-start-node */ @customElement('umb-property-editor-ui-tree-picker-start-node') -export class UmbPropertyEditorUITreePickerStartNodeElement extends LitElement { +export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement { 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 6a53de7fef..909cd79323 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-tree-picker */ @customElement('umb-property-editor-ui-tree-picker') -export class UmbPropertyEditorUITreePickerElement extends LitElement { +export class UmbPropertyEditorUITreePickerElement extends UmbLitElement { 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 017b62d316..9687e6838c 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-upload-field */ @customElement('umb-property-editor-ui-upload-field') -export class UmbPropertyEditorUIUploadFieldElement extends LitElement { +export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement { 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 5c52b9d2b1..341b8e274c 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,12 +1,13 @@ -import { html, LitElement } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; /** * @element umb-property-editor-ui-value-type */ @customElement('umb-property-editor-ui-value-type') -export class UmbPropertyEditorUIValueTypeElement extends LitElement { +export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement { static styles = [UUITextStyles]; @property() From 860f00a79d94683f2058ed094d4abbf5e9c8308e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 16 Jan 2023 11:58:04 +0100 Subject: [PATCH 16/23] add member picker, user picker, and member group picker --- .../models/Umbraco.MemberGroupPicker.ts | 8 ++++ .../models/Umbraco.MemberPicker.ts | 8 ++++ .../models/Umbraco.UserPicker.ts | 8 ++++ .../property-editors/models/manifests.ts | 24 +++--------- .../shared/property-editors/uis/manifests.ts | 6 +++ .../uis/member-group-picker/manifests.ts | 14 +++++++ ...y-editor-ui-member-group-picker.element.ts | 30 ++++++++++++++ ...y-editor-ui-member-group-picker.stories.ts | 15 +++++++ ...erty-editor-ui-member-group-picker.test.ts | 21 ++++++++++ .../uis/member-picker/manifests.ts | 14 +++++++ ...roperty-editor-ui-member-picker.element.ts | 30 ++++++++++++++ ...roperty-editor-ui-member-picker.stories.ts | 15 +++++++ .../property-editor-ui-member-picker.test.ts | 21 ++++++++++ .../uis/user-picker/manifests.ts | 14 +++++++ .../property-editor-ui-user-picker.element.ts | 30 ++++++++++++++ .../property-editor-ui-user-picker.stories.ts | 15 +++++++ .../property-editor-ui-user-picker.test.ts | 21 ++++++++++ .../src/core/mocks/data/data-type.data.ts | 39 +++++++++++++++++++ .../src/core/mocks/data/document.data.ts | 18 +++++++++ 19 files changed, 333 insertions(+), 18 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberGroupPicker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberPicker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.UserPicker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberGroupPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberGroupPicker.ts new file mode 100644 index 0000000000..1b01e05396 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberGroupPicker.ts @@ -0,0 +1,8 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Member Group Picker', + alias: 'Umbraco.MemberGroupPicker', + meta: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberPicker.ts new file mode 100644 index 0000000000..eafed1924d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberPicker.ts @@ -0,0 +1,8 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Member Picker', + alias: 'Umbraco.MemberPicker', + meta: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.UserPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.UserPicker.ts new file mode 100644 index 0000000000..617e86f9fa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.UserPicker.ts @@ -0,0 +1,8 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'User Picker', + alias: 'Umbraco.UserPicker', + meta: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts index 6f34e2d47e..f311d6ad0a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts @@ -26,6 +26,9 @@ import { manifest as listView } from './Umbraco.ListView'; import { manifest as label } from './Umbraco.Label'; import { manifest as integer } from './Umbraco.Integer'; import { manifest as decimal } from './Umbraco.Decimal'; +import { manifest as userPicker } from './Umbraco.UserPicker'; +import { manifest as memberPicker } from './Umbraco.MemberPicker'; +import { manifest as memberGroupPicker } from './Umbraco.MemberGroupPicker'; import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; @@ -58,24 +61,9 @@ export const manifests: Array = [ label, integer, decimal, - { - type: 'propertyEditorModel', - name: 'Member Group Picker', - alias: 'Umbraco.MemberGroupPicker', - meta: {}, - }, - { - type: 'propertyEditorModel', - name: 'Member Picker', - alias: 'Umbraco.MemberPicker', - meta: {}, - }, - { - type: 'propertyEditorModel', - name: 'User Picker', - alias: 'Umbraco.UserPicker', - meta: {}, - }, + userPicker, + memberPicker, + memberGroupPicker, { type: 'propertyEditorModel', name: 'Icon Picker', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts index d3bfa0a907..d9347720f6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts @@ -29,6 +29,9 @@ import { manifest as iconPicker } from './icon-picker/manifests'; import { manifest as label } from './label/manifests'; import { manifest as valueType } from './value-type/manifests'; import { manifests as numbers } from './number/manifests'; +import { manifest as userPicker } from './user-picker/manifests'; +import { manifest as memberPicker } from './member-picker/manifests'; +import { manifest as memberGroupPicker } from './member-group-picker/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; export const manifests: Array = [ @@ -55,6 +58,9 @@ export const manifests: Array = [ iconPicker, label, valueType, + userPicker, + memberPicker, + memberGroupPicker, ...numbers, ...textBoxes, ...treePicker, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/manifests.ts new file mode 100644 index 0000000000..2d3d7d41ae --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.MemberGroupPicker', + name: 'Member Group Picker Property Editor UI', + loader: () => import('./property-editor-ui-member-group-picker.element'), + meta: { + label: 'Member Group Picker', + propertyEditorModel: 'Umbraco.MemberGroupPicker', + icon: 'umb:users-alt', + group: 'people', + }, +}; 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 new file mode 100644 index 0000000000..6a851c6516 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -0,0 +1,30 @@ +import { html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +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 { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-member-group-picker
`; + } +} + +export default UmbPropertyEditorUIMemberGroupPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-member-group-picker': UmbPropertyEditorUIMemberGroupPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts new file mode 100644 index 0000000000..8d437fdf32 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIMemberGroupPickerElement } from './property-editor-ui-member-group-picker.element'; +import './property-editor-ui-member-group-picker.element'; + +export default { + title: 'Property Editor UIs/Member Group Picker', + component: 'umb-property-editor-ui-member-group-picker', + id: 'umb-property-editor-ui-member-group-picker', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts new file mode 100644 index 0000000000..c4b6d508f8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIMemberGroupPickerElement } from './property-editor-ui-member-group-picker.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIMemberGroupPickerElement', () => { + let element: UmbPropertyEditorUIMemberGroupPickerElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberGroupPickerElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/manifests.ts new file mode 100644 index 0000000000..644fef49fb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.MemberPicker', + name: 'Member Picker Property Editor UI', + loader: () => import('./property-editor-ui-member-picker.element'), + meta: { + label: 'Member Picker', + propertyEditorModel: 'Umbraco.MemberPicker', + icon: 'umb:user', + group: 'people', + }, +}; 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 new file mode 100644 index 0000000000..88d9b40f47 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts @@ -0,0 +1,30 @@ +import { html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +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 { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-member-picker
`; + } +} + +export default UmbPropertyEditorUIMemberPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-member-picker': UmbPropertyEditorUIMemberPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts new file mode 100644 index 0000000000..be840c23ed --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIMemberPickerElement } from './property-editor-ui-member-picker.element'; +import './property-editor-ui-member-picker.element'; + +export default { + title: 'Property Editor UIs/Member Picker', + component: 'umb-property-editor-ui-member-picker', + id: 'umb-property-editor-ui-member-picker', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.test.ts new file mode 100644 index 0000000000..40843b34df --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIMemberPickerElement } from './property-editor-ui-member-picker.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIMemberPickerElement', () => { + let element: UmbPropertyEditorUIMemberPickerElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberPickerElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/manifests.ts new file mode 100644 index 0000000000..5ea5535cfa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.UserPicker', + name: 'User Picker Property Editor UI', + loader: () => import('./property-editor-ui-user-picker.element'), + meta: { + label: 'User Picker', + propertyEditorModel: 'Umbraco.UserPicker', + icon: 'umb:user', + group: 'people', + }, +}; 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 new file mode 100644 index 0000000000..a66647915e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts @@ -0,0 +1,30 @@ +import { html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +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 { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-user-picker
`; + } +} + +export default UmbPropertyEditorUIUserPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-user-picker': UmbPropertyEditorUIUserPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts new file mode 100644 index 0000000000..503373fd41 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIUserPickerElement } from './property-editor-ui-user-picker.element'; +import './property-editor-ui-user-picker.element'; + +export default { + title: 'Property Editor UIs/User Picker', + component: 'umb-property-editor-ui-user-picker', + id: 'umb-property-editor-ui-user-picker', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.test.ts new file mode 100644 index 0000000000..26abdd82aa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIUserPickerElement } from './property-editor-ui-user-picker.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIUserPickerElement', () => { + let element: UmbPropertyEditorUIUserPickerElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIUserPickerElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 0ac10a936a..f13a3e9d38 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -473,6 +473,45 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.Decimal', data: [], }, + { + name: 'User Picker', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-userPicker', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.UserPicker', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.UserPicker', + data: [], + }, + { + name: 'Member Picker', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-memberPicker', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.MemberPicker', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.MemberPicker', + data: [], + }, + { + name: 'Member Group Picker', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-memberGroupPicker', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.MemberGroupPicker', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.MemberGroupPicker', + data: [], + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 4b11bd3cb4..b2ab2d95aa 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -186,6 +186,24 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-decimal', }, + { + alias: 'memberPicker', + label: 'Member Picker', + description: '', + dataTypeKey: 'dt-memberPicker', + }, + { + alias: 'memberGroupPicker', + label: 'Member Group Picker', + description: '', + dataTypeKey: 'dt-memberGroupPicker', + }, + { + alias: 'userPicker', + label: 'User Picker', + description: '', + dataTypeKey: 'dt-userPicker', + }, ], data: [], variants: [], From f9433253e97ccb903e9a5bf88a9ec58e5d83d27a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 20 Jan 2023 12:35:17 +0100 Subject: [PATCH 17/23] clean up --- .../models/Umbraco.ColorPicker.ts | 2 +- .../models/Umbraco.Decimal.ts | 2 +- .../models/Umbraco.Integer.ts | 2 +- .../models/Umbraco.ListView.ts | 32 ++++++++++++++++++- .../models/Umbraco.MultipleTextString.ts | 8 ++--- .../uis/block-list/manifests.ts | 6 ++++ .../uis/checkbox-list/manifests.ts | 2 +- .../uis/collection-view/manifests.ts | 29 ----------------- .../uis/document-picker/manifests.ts | 6 ++++ .../uis/dropdown/manifests.ts | 2 +- .../uis/radio-button-list/manifests.ts | 2 +- .../uis/text-box/manifests.ts | 2 +- 12 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts index 61f0e1dfd6..0dff209166 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts @@ -15,7 +15,7 @@ export const manifest: ManifestPropertyEditorModel = { propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', }, { - alias: 'colors', + alias: 'items', label: 'Colors', description: 'Add, remove or sort colors', propertyEditorUI: 'Umb.PropertyEditorUI.ColorPicker', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts index 8f81d9931c..15e46b6af4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Decimal.ts @@ -20,7 +20,7 @@ export const manifest: ManifestPropertyEditorModel = { propertyEditorUI: 'Umb.PropertyEditorUI.Number', }, { - alias: 'stepSize', + alias: 'step', label: 'Step size', description: 'Enter the intervals amount between each step of number to be entered', propertyEditorUI: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts index 63ff9bb023..48df3a939b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Integer.ts @@ -20,7 +20,7 @@ export const manifest: ManifestPropertyEditorModel = { propertyEditorUI: 'Umb.PropertyEditorUI.Number', }, { - alias: 'stepSize', + alias: 'step', label: 'Step size', description: 'Enter the intervals amount between each step of number to be entered', propertyEditorUI: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts index af254ad673..5ba53b7d7f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ListView.ts @@ -6,7 +6,37 @@ export const manifest: ManifestPropertyEditorModel = { alias: 'Umbraco.ListView', meta: { config: { - properties: [], + properties: [ + { + alias: 'pageSize', + label: 'Page Size', + description: 'Number of items per page.', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'orderDirection', + label: 'Order Direction', + propertyEditorUI: 'Umb.PropertyEditorUI.OrderDirection', + }, + { + alias: 'includeProperties', + label: 'Columns Displayed', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.ColumnConfiguration', + }, + { + alias: 'orderBy', + label: 'Order By', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.OrderBy', + }, + { + alias: 'bulkActionPermissions', + label: 'Bulk Action Permissions', + description: 'The properties that will be displayed for each column', + propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.BulkActionPermissions', + }, + ], }, }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts index ebe32f190e..0795164b0a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts @@ -8,13 +8,13 @@ export const manifest: ManifestPropertyEditorModel = { config: { properties: [ { - alias: 'minNumber', + alias: 'min', label: 'Minimum', description: 'Enter the minimum amount of text boxes to be displayed', propertyEditorUI: 'Umb.PropertyEditorUI.Number', }, { - alias: 'maxNumber', + alias: 'max', label: 'Maximum', description: 'Enter the maximum amount of text boxes to be displayed, enter 0 for unlimited', propertyEditorUI: 'Umb.PropertyEditorUI.Number', @@ -22,11 +22,11 @@ export const manifest: ManifestPropertyEditorModel = { ], defaultData: [ { - alias: 'minNumber', + alias: 'min', value: 0, }, { - alias: 'maxNumber', + alias: 'max', value: 0, }, ], diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts index 81094716c3..49401f720f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/manifests.ts @@ -27,6 +27,12 @@ const manifest: ManifestPropertyEditorUI = { 'Live editing in editor overlays for live updated custom views or labels using custom expression.', propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', }, + { + alias: 'useInlineEditingAsDefault', + label: 'Inline editing mode', + description: 'Use the inline editor as the default block view.', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, { alias: 'maxPropertyWidth', label: 'Property editor width', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/manifests.ts index 26fea14b52..a54858705e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/manifests.ts @@ -13,7 +13,7 @@ export const manifest: ManifestPropertyEditorUI = { config: { properties: [ { - alias: 'options', + alias: 'items', label: 'Add option', description: 'Add, remove or sort options for the list.', propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts index 15e32cc656..e99665523e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/manifests.ts @@ -16,41 +16,12 @@ const manifest: ManifestPropertyEditorUI = { group: 'lists', config: { properties: [ - { - alias: 'pageSize', - label: 'Page Size', - description: 'Number of items per page.', - propertyEditorUI: 'Umb.PropertyEditorUI.Number', - }, - { - alias: 'orderDirection', - label: 'Order Direction', - propertyEditorUI: 'Umb.PropertyEditorUI.OrderDirection', - }, - { - alias: 'includeProperties', - label: 'Columns Displayed', - description: 'The properties that will be displayed for each column', - propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.ColumnConfiguration', - }, - { - alias: 'orderBy', - label: 'Order By', - description: 'The properties that will be displayed for each column', - propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.OrderBy', - }, { alias: 'layouts', label: 'Layouts', description: 'The properties that will be displayed for each column', propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.LayoutConfiguration', }, - { - alias: 'bulkActionPermissions', - label: 'Bulk Action Permissions', - description: 'The properties that will be displayed for each column', - propertyEditorUI: 'Umb.PropertyEditorUI.CollectionView.BulkActionPermissions', - }, { alias: 'icon', label: 'Content app icon', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/manifests.ts index ffa823c8f4..ac9902c752 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/manifests.ts @@ -24,6 +24,12 @@ export const manifest: ManifestPropertyEditorUI = { description: 'Require a certain amount of documents', propertyEditorUI: 'Umb.PropertyEditorUI.NumberRange', }, + { + alias: 'ignoreUserStartNodes', + label: 'Ignore User Start Nodes', + description: 'Selecting this option allows a user to choose nodes that they normally dont have access to', + propertyEditorUI: 'Umb.PropertyEditorUI.Boolean', + }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts index 3ac72d4dae..2e433170f7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts @@ -18,7 +18,7 @@ export const manifest: ManifestPropertyEditorUI = { propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', }, { - alias: 'options', + alias: 'items', label: 'Add options', propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString', }, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts index 2f118350d6..6570654940 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts @@ -13,7 +13,7 @@ export const manifest: ManifestPropertyEditorUI = { config: { properties: [ { - alias: 'options', + alias: 'items', label: 'Add option', description: 'Add, remove or sort options for the list.', propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts index d600fe5b8d..44fcc4e718 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts @@ -45,7 +45,7 @@ export const manifests: Array = [ defaultData: [ { alias: 'inputType', - value: 'text', + value: 'email', }, ], }, From 77f65f9b73c18bc586bdc3075c167a9a760942c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 20 Jan 2023 14:54:01 +0100 Subject: [PATCH 18/23] remove update method as it is specific to object --- .../src/core/observable-api/unique-behavior-subject.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts index 5ea00ee126..7140935bd1 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts @@ -110,13 +110,4 @@ export class UniqueBehaviorSubject extends BehaviorSubject { super.next(frozenData); } } - - /** - * Partial update data set, only works for Objects. - * TODO: consider moving this into a specific class for Objects? - * Consider doing similar for Array? - */ - update(data: Partial) { - this.next({ ...this.getValue(), ...data }); - } } From 7efb7c57b4cc9f478f3c4bd4927c43b2673bcc73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 20 Jan 2023 14:54:06 +0100 Subject: [PATCH 19/23] array test --- .../unique-array-behavior-subject.test.ts | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts new file mode 100644 index 0000000000..542c410a85 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts @@ -0,0 +1,124 @@ +import { expect } from '@open-wc/testing'; +import { createObservablePart } from './unique-behavior-subject'; +import { UniqueArrayBehaviorSubject } from './unique-array-behavior-subject'; + +describe('UniqueArrayBehaviorSubject', () => { + + type ObjectType = {key: string, another: string}; + type ArrayType = ObjectType[]; + + let subject: UniqueArrayBehaviorSubject; + let initialData: ArrayType; + + beforeEach(() => { + initialData = [ + {key: '1', another: 'myValue1'}, + {key: '2', another: 'myValue2'}, + {key: '3', another: 'myValue3'} + ]; + subject = new UniqueArrayBehaviorSubject(initialData, (a, b) => a.key === b.key); + }); + + + it('replays latests, no matter the amount of subscriptions.', (done) => { + + const observer = subject.asObservable(); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + }); + observer.subscribe((value) => { + expect(value).to.be.equal(initialData); + done(); + }); + + }); + + it('add new item via appendOne method.', (done) => { + + const newItem = {key: '4', another: 'myValue4'}; + subject.appendOne(newItem); + + const expectedData = [...initialData, newItem] + + const observer = subject.asObservable(); + observer.subscribe((value) => { + expect(value.length).to.be.equal(expectedData.length); + expect(value[3].another).to.be.equal(expectedData[3].another); + done(); + }); + + }); + + + it('createObservablePart for a specific entry of array', (done) => { + + const subObserver = createObservablePart(subject, data => data.find(x => x.key === '2')); + subObserver.subscribe((entry) => { + if(entry) { + expect(entry.another).to.be.equal(initialData[1].another); + done(); + } + }); + + }); + + + it('createObservablePart returns undefined if item does not exist', (done) => { + + let amountOfCallbacks = 0; + const newItem = {key: '4', another: 'myValue4'}; + + const subObserver = createObservablePart(subject, data => data.find(x => x.key === newItem.key)); + subObserver.subscribe((entry) => { + amountOfCallbacks++; + if(amountOfCallbacks === 1) { + expect(entry).to.be.equal(undefined);// First callback should give null, cause we didn't have this entry when the subscription was made. + } + if(amountOfCallbacks === 2) { + expect(entry).to.be.equal(newItem);// Second callback should give us the right data: + if(entry) { + expect(entry.another).to.be.equal(newItem.another); + done(); + } + } + }); + + subject.appendOne(newItem); + + }); + + + it('asObservable returns the replaced item', (done) => { + + const newItem = {key: '2', another: 'myValue4'}; + subject.appendOne(newItem); + + const expectedData = [initialData[0], newItem, initialData[2]]; + + const observer = subject.asObservable(); + observer.subscribe((value) => { + expect(value.length).to.be.equal(expectedData.length); + expect(value[1].another).to.be.equal(newItem.another); + done(); + }); + + }); + + it('createObservablePart returns the replaced item', (done) => { + + const newItem = {key: '2', another: 'myValue4'}; + subject.appendOne(newItem); + + const subObserver = createObservablePart(subject, data => data.find(x => x.key === newItem.key)); + subObserver.subscribe((entry) => { + expect(entry).to.be.equal(newItem);// Second callback should give us the right data: + if(entry) { + expect(entry.another).to.be.equal(newItem.another); + done(); + } + }); + + }); + + +}); From 445f0aab5db329533a7d33d24c45df38931a1ca9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 20 Jan 2023 14:56:57 +0100 Subject: [PATCH 20/23] move createObservablePart into its own file --- .../workspace-property.context.ts | 5 +-- .../create-observable-part.method.ts | 25 +++++++++++++++ .../unique-array-behavior-subject.test.ts | 2 +- .../unique-behavior-subject.test.ts | 3 +- .../observable-api/unique-behavior-subject.ts | 31 +++---------------- .../unique-object-behavior-subject.test.ts | 2 +- 6 files changed, 36 insertions(+), 32 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/core/observable-api/create-observable-part.method.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts index 4bf94b6d3c..6db513f47b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts @@ -1,9 +1,10 @@ import { UmbWorkspaceContentContext } from '../workspace/workspace-content/workspace-content.context'; import type { DataTypeDetails } from '@umbraco-cms/models'; import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin'; -import { createObservablePart, UniqueBehaviorSubject } from 'src/core/observable-api/unique-behavior-subject'; +import { createObservablePart } from "src/core/observable-api/create-observable-part.method"; import { UmbContextProviderController } from 'src/core/context-api/provide/context-provider.controller'; import { UmbContextConsumerController } from 'src/core/context-api/consume/context-consumer.controller'; +import { UniqueObjectBehaviorSubject } from 'src/core/observable-api/unique-object-behavior-subject'; // If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API. export type WorkspacePropertyData = { @@ -17,7 +18,7 @@ export type WorkspacePropertyData = { export class UmbWorkspacePropertyContext { private _providerController: UmbContextProviderController; - private _data = new UniqueBehaviorSubject>({}); + private _data = new UniqueObjectBehaviorSubject>({}); public readonly alias = createObservablePart(this._data, (data) => data.alias); public readonly label = createObservablePart(this._data, (data) => data.label); diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/create-observable-part.method.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/create-observable-part.method.ts new file mode 100644 index 0000000000..4d10b39e78 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/create-observable-part.method.ts @@ -0,0 +1,25 @@ +import { distinctUntilChanged, map, Observable, shareReplay } from "rxjs"; +import { MappingFunction, MemoizationFunction, defaultMemoization } from "./unique-behavior-subject"; + +/** + * @export + * @method createObservablePart + * @param {Observable} source - RxJS Subject to use for this Observable. + * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return. + * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different. + * @description - Creates a RxJS Observable from RxJS Subject. + * @example Example create a Observable for part of the data Subject. + * public readonly myPart = CreateObservablePart(this._data, (data) => data.myPart); + */ + +export function createObservablePart( + source$: Observable, + mappingFunction: MappingFunction, + memoizationFunction?: MemoizationFunction +): Observable { + return source$.pipe( + map(mappingFunction), + distinctUntilChanged(memoizationFunction || defaultMemoization), + shareReplay(1) + ); +} diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts index 542c410a85..490bc948b4 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts @@ -1,5 +1,5 @@ import { expect } from '@open-wc/testing'; -import { createObservablePart } from './unique-behavior-subject'; +import { createObservablePart } from "./create-observable-part.method"; import { UniqueArrayBehaviorSubject } from './unique-array-behavior-subject'; describe('UniqueArrayBehaviorSubject', () => { diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts index 1b0f2ca131..c7b6ab6df9 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts @@ -1,5 +1,6 @@ import { expect } from '@open-wc/testing'; -import { createObservablePart, UniqueBehaviorSubject } from './unique-behavior-subject'; +import { UniqueBehaviorSubject } from './unique-behavior-subject'; +import { createObservablePart } from "./create-observable-part.method"; describe('UniqueBehaviorSubject', () => { diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts index 7140935bd1..69b43f3db0 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts @@ -1,4 +1,4 @@ -import { BehaviorSubject, distinctUntilChanged, map, Observable, shareReplay } from "rxjs"; +import { BehaviorSubject } from "rxjs"; // TODO: Should this handle array as well? @@ -58,39 +58,16 @@ export function appendToFrozenArray(data: T[], entry: T, uniqueMethod?: (exis -type MappingFunction = (mappable: T) => R; -type MemoizationFunction = (previousResult: R, currentResult: R) => boolean; +export type MappingFunction = (mappable: T) => R; +export type MemoizationFunction = (previousResult: R, currentResult: R) => boolean; -function defaultMemoization(previousValue: any, currentValue: any): boolean { +export function defaultMemoization(previousValue: any, currentValue: any): boolean { if (typeof previousValue === 'object' && typeof currentValue === 'object') { return naiveObjectComparison(previousValue, currentValue); } return previousValue === currentValue; } -/** - * @export - * @method createObservablePart - * @param {Observable} source - RxJS Subject to use for this Observable. - * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return. - * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different. - * @description - Creates a RxJS Observable from RxJS Subject. - * @example Example create a Observable for part of the data Subject. - * public readonly myPart = CreateObservablePart(this._data, (data) => data.myPart); - */ -export function createObservablePart ( - source$: Observable, - mappingFunction: MappingFunction, - memoizationFunction?: MemoizationFunction - ): Observable { - return source$.pipe( - map(mappingFunction), - distinctUntilChanged(memoizationFunction || defaultMemoization), - shareReplay(1) - ) -} - - /** * @export * @class UniqueBehaviorSubject diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts index a046b8f9ca..8ad4d4b360 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts @@ -1,5 +1,5 @@ import { expect } from '@open-wc/testing'; -import { createObservablePart } from './unique-behavior-subject'; +import { createObservablePart } from "./create-observable-part.method"; import { UniqueObjectBehaviorSubject } from './unique-object-behavior-subject'; describe('UniqueObjectBehaviorSubject', () => { From f27bdee03cc34eca5707008da66077e40f7d3153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 20 Jan 2023 14:58:06 +0100 Subject: [PATCH 21/23] rename append for objects to update --- .../observable-api/unique-object-behavior-subject.test.ts | 4 ++-- .../src/core/observable-api/unique-object-behavior-subject.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts index 8ad4d4b360..9945579b93 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts @@ -44,8 +44,8 @@ describe('UniqueObjectBehaviorSubject', () => { } }); - subject.append({key: 'change_this_first_should_not_trigger_update'}); - subject.append({another: 'myNewValue'}); + subject.update({key: 'change_this_first_should_not_trigger_update'}); + subject.update({another: 'myNewValue'}); }); diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts index 9d3f1cd965..0c2deed7d8 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.ts @@ -20,7 +20,7 @@ export class UniqueObjectBehaviorSubject extends UniqueBehaviorSubject { * const mySubject = new UniqueObjectBehaviorSubject(data) * mySubject.append({value: 'myNewValue'}) */ - append(partialData: Partial) { + update(partialData: Partial) { this.next({ ...this.getValue(), ...partialData }); } } From 61c42ec861e7835faa3f5084c95f10b78781b144 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 20 Jan 2023 15:04:12 +0100 Subject: [PATCH 22/23] correct imports --- .../workspace/workspace-content/workspace-content.context.ts | 3 ++- .../users/current-user/current-user-history.store.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts index 0cbcdd4ba4..7c61c21341 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts @@ -5,7 +5,8 @@ import { UmbNodeStoreBase } from '@umbraco-cms/stores/store'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController, UmbContextProviderController } from '@umbraco-cms/context-api'; import { EntityTreeItem } from '@umbraco-cms/backend-api'; -import { createObservablePart, UniqueBehaviorSubject, UmbObserverController } from '@umbraco-cms/observable-api'; +import { UniqueBehaviorSubject, UmbObserverController } from '@umbraco-cms/observable-api'; +import { createObservablePart } from 'src/core/observable-api/create-observable-part.method'; // TODO: Consider if its right to have this many class-inheritance of WorkspaceContext // TODO: Could we extract this code into a 'Manager' of its own, which will be instantiated by the concrete Workspace Context. This will be more transparent and 'reuseable' diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts index 6044e059f1..bac7f84ebe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts @@ -1,5 +1,6 @@ import { UmbContextToken } from '@umbraco-cms/context-api'; -import { createObservablePart, UniqueBehaviorSubject } from '@umbraco-cms/observable-api'; +import { UniqueBehaviorSubject } from '@umbraco-cms/observable-api'; +import { createObservablePart } from 'src/core/observable-api/create-observable-part.method'; export type UmbModelType = 'dialog' | 'sidebar'; From e88d9c515ceaacf7f71a3dd25da0f8c0311cc295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sat, 21 Jan 2023 20:07:56 +0100 Subject: [PATCH 23/23] correct imports --- .../src/backoffice/documents/documents/document.store.ts | 9 ++++++++- .../workspace-property/workspace-property.context.ts | 2 +- .../workspace-content/workspace-content.context.ts | 2 +- .../users/current-user/current-user-history.store.ts | 2 +- .../src/core/observable-api/index.ts | 3 +++ .../observable-api/unique-array-behavior-subject.test.ts | 2 +- .../core/observable-api/unique-behavior-subject.test.ts | 2 +- .../src/core/observable-api/unique-behavior-subject.ts | 2 +- .../unique-object-behavior-subject.test.ts | 2 +- 9 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/document.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/document.store.ts index 223f49df54..57fdab43b5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/document.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/document.store.ts @@ -4,6 +4,7 @@ import type { DocumentDetails } from '@umbraco-cms/models'; import { DocumentResource, DocumentTreeItem, FolderTreeItem } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; import { UmbContextToken } from '@umbraco-cms/context-api'; +import { createObservablePart } from '@umbraco-cms/observable-api'; export const isDocumentDetails = (document: DocumentDetails | DocumentTreeItem): document is DocumentDetails => { return (document as DocumentDetails).data !== undefined; @@ -23,7 +24,7 @@ export const STORE_ALIAS = 'UmbDocumentStore'; export class UmbDocumentStore extends UmbNodeStoreBase { public readonly storeAlias = STORE_ALIAS; - getByKey(key: string): Observable { + getByKey(key: string): Observable { // TODO: use backend cli when available. fetch(`/umbraco/management/api/v1/document/details/${key}`) .then((res) => res.json()) @@ -31,12 +32,18 @@ export class UmbDocumentStore extends UmbNodeStoreBase this.updateItems(data); }); + /* return this.items.pipe( map( (documents) => (documents.find((document) => document.key === key && isDocumentDetails(document)) as DocumentDetails) || null ) ); + */ + + return createObservablePart(this.items, (documents) => + (documents.find((document) => document.key === key && isDocumentDetails(document)) as DocumentDetails) + ); } // TODO: make sure UI somehow can follow the status of this action. diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts index 6db513f47b..845041a25f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts @@ -1,7 +1,7 @@ import { UmbWorkspaceContentContext } from '../workspace/workspace-content/workspace-content.context'; import type { DataTypeDetails } from '@umbraco-cms/models'; import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin'; -import { createObservablePart } from "src/core/observable-api/create-observable-part.method"; +import { createObservablePart } from '@umbraco-cms/observable-api'; import { UmbContextProviderController } from 'src/core/context-api/provide/context-provider.controller'; import { UmbContextConsumerController } from 'src/core/context-api/consume/context-consumer.controller'; import { UniqueObjectBehaviorSubject } from 'src/core/observable-api/unique-object-behavior-subject'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts index 7c61c21341..f700645f0a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/workspace-content.context.ts @@ -6,7 +6,7 @@ import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbContextConsumerController, UmbContextProviderController } from '@umbraco-cms/context-api'; import { EntityTreeItem } from '@umbraco-cms/backend-api'; import { UniqueBehaviorSubject, UmbObserverController } from '@umbraco-cms/observable-api'; -import { createObservablePart } from 'src/core/observable-api/create-observable-part.method'; +import { createObservablePart } from '@umbraco-cms/observable-api'; // TODO: Consider if its right to have this many class-inheritance of WorkspaceContext // TODO: Could we extract this code into a 'Manager' of its own, which will be instantiated by the concrete Workspace Context. This will be more transparent and 'reuseable' diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts index bac7f84ebe..1a512f18c6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-history.store.ts @@ -1,6 +1,6 @@ import { UmbContextToken } from '@umbraco-cms/context-api'; import { UniqueBehaviorSubject } from '@umbraco-cms/observable-api'; -import { createObservablePart } from 'src/core/observable-api/create-observable-part.method'; +import { createObservablePart } from '@umbraco-cms/observable-api'; export type UmbModelType = 'dialog' | 'sidebar'; diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/index.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/index.ts index b9faa31834..8b9c23fdbd 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/index.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/index.ts @@ -1,3 +1,6 @@ export * from './observer.controller'; export * from './observer'; export * from './unique-behavior-subject'; +export * from './unique-array-behavior-subject'; +export * from './unique-object-behavior-subject'; +export * from './create-observable-part.method' diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts index 490bc948b4..ab98b2ac50 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-array-behavior-subject.test.ts @@ -1,5 +1,5 @@ import { expect } from '@open-wc/testing'; -import { createObservablePart } from "./create-observable-part.method"; +import { createObservablePart } from '@umbraco-cms/observable-api'; import { UniqueArrayBehaviorSubject } from './unique-array-behavior-subject'; describe('UniqueArrayBehaviorSubject', () => { diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts index c7b6ab6df9..672e990190 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.test.ts @@ -1,6 +1,6 @@ import { expect } from '@open-wc/testing'; import { UniqueBehaviorSubject } from './unique-behavior-subject'; -import { createObservablePart } from "./create-observable-part.method"; +import { createObservablePart } from '@umbraco-cms/observable-api'; describe('UniqueBehaviorSubject', () => { diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts index 69b43f3db0..032ac040e8 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-behavior-subject.ts @@ -63,7 +63,7 @@ export type MemoizationFunction = (previousResult: R, currentResult: R) => bo export function defaultMemoization(previousValue: any, currentValue: any): boolean { if (typeof previousValue === 'object' && typeof currentValue === 'object') { - return naiveObjectComparison(previousValue, currentValue); + return naiveObjectComparison(previousValue, currentValue); } return previousValue === currentValue; } diff --git a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts index 9945579b93..86ca20394d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/observable-api/unique-object-behavior-subject.test.ts @@ -1,6 +1,6 @@ import { expect } from '@open-wc/testing'; -import { createObservablePart } from "./create-observable-part.method"; import { UniqueObjectBehaviorSubject } from './unique-object-behavior-subject'; +import { createObservablePart } from '@umbraco-cms/observable-api'; describe('UniqueObjectBehaviorSubject', () => {