diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts index 72e7e2ec32..3780c0e63d 100644 --- a/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts +++ b/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts @@ -13,7 +13,9 @@ describe('UmbLogin', () => { expect(element).to.be.instanceOf(UmbLoginElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md new file mode 100644 index 0000000000..4a1b15255a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md @@ -0,0 +1,5 @@ +# Property Dataset Dashboard Example + +This example demonstrates the essence of the Property Dataset. + +This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard. diff --git a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/dataset-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/dataset-dashboard.ts new file mode 100644 index 0000000000..4d4c0a0cb7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/dataset-dashboard.ts @@ -0,0 +1,75 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbPropertyValueData, type UmbPropertyDatasetElement } from '@umbraco-cms/backoffice/property'; + +@customElement('example-dataset-dashboard') +export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) { + data: UmbPropertyValueData[] = [ + { + alias: 'textProperty', + value: 'Hello', + }, + ]; + + #onDataChange(e: Event) { + const oldValue = this.data; + this.data = (e.target as UmbPropertyDatasetElement).value; + this.requestUpdate('data', oldValue); + } + + render() { + return html` + +

Dataset Example

+ + + + + +
Output of dashboard data:
+ ${JSON.stringify(this.data, null, 2)} + + `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + } + `, + ]; +} + +export default ExampleDatasetDashboard; + +declare global { + interface HTMLElementTagNameMap { + 'example-dataset-dashboard': ExampleDatasetDashboard; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts new file mode 100644 index 0000000000..bf689650a7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts @@ -0,0 +1,15 @@ +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'dashboard', + name: 'Example Dataset Workspace View', + alias: 'example.dashboard.dataset', + element: () => import('./dataset-dashboard.js'), + weight: 900, + meta: { + label: 'Dataset example', + pathname: 'dataset-example', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index dd01ad7ce9..b3bc051844 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -36,6 +36,7 @@ "./modal": "./dist-cms/packages/core/modal/index.js", "./notification": "./dist-cms/packages/core/notification/index.js", "./picker-input": "./dist-cms/packages/core/picker-input/index.js", + "./property": "./dist-cms/packages/core/property/index.js", "./property-action": "./dist-cms/packages/core/property-action/index.js", "./property-editor": "./dist-cms/packages/core/property-editor/index.js", "./section": "./dist-cms/packages/core/section/index.js", @@ -121,6 +122,8 @@ "storybook:build": "npm run wc-analyze && storybook build", "storybook": "npm run wc-analyze && storybook dev -p 6006", "test:e2e": "npm run auth:test:e2e && npm run backoffice:test:e2e", + "test:dev": "web-test-runner --config ./web-test-runner.dev.config.mjs", + "test:dev-watch": "web-test-runner --watch --config ./web-test-runner.dev.config.mjs", "test:watch": "web-test-runner --watch", "test": "web-test-runner --coverage", "wc-analyze:vscode": "wca **/*.element.ts --format vscode --outFile dist-cms/vscode-html-custom-data.json", diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts index fda9153bb5..d89f99bf25 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts @@ -23,4 +23,4 @@ export class UmbAppContext extends UmbBaseController { } } -export const UMB_APP_CONTEXT = new UmbContextToken('UMB_APP'); +export const UMB_APP_CONTEXT = new UmbContextToken('UmbAppContext'); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-content.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-content.test.ts index 49b15a2982..7f124d1a09 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-content.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-content.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerConsentElement', () => { expect(element).to.be.instanceOf(UmbInstallerConsentElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.test.ts index 8b3ac910e3..3131ff7a9a 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerDatabaseElement', () => { expect(element).to.be.instanceOf(UmbInstallerDatabaseElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/error/installer-error.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/error/installer-error.test.ts index 869c5994e6..0cb181e7a8 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/error/installer-error.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/error/installer-error.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerErrorElement', () => { expect(element).to.be.instanceOf(UmbInstallerErrorElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/installer.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/installer.test.ts index f9d4ec231c..d7c72bf535 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/installer.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/installer.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerElement', () => { expect(element).to.be.instanceOf(UmbInstallerElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/installing/installer-installing.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/installing/installer-installing.test.ts index 52ef025868..8de7c59b69 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/installing/installer-installing.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/installing/installer-installing.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerInstallingElement', () => { expect(element).to.be.instanceOf(UmbInstallerInstallingElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.test.ts index 620b5d3228..e07bccd65f 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerLayoutElement', () => { expect(element).to.be.instanceOf(UmbInstallerLayoutElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.test.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.test.ts index 5cfd6f54c4..74868a726c 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.test.ts @@ -15,7 +15,9 @@ describe('UmbInstallerUserElement', () => { expect(element).to.be.instanceOf(UmbInstallerUserElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader-view.test.ts b/src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader-view.test.ts index 923b777107..926830a320 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader-view.test.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/upgrader/upgrader-view.test.ts @@ -14,7 +14,9 @@ describe('UmbUpgraderView', () => { expect(element).to.be.instanceOf(UmbUpgraderViewElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-provider.test.ts b/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-provider.test.ts index 91c4ce6cf9..a901b0291c 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-provider.test.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller-host-provider.test.ts @@ -38,8 +38,11 @@ describe('UmbControllerHostTestElement', () => { expect(element).to.be.instanceOf(UmbControllerHostProviderElement); }); - it('provides the context', () => { + it('provides the context', async () => { + await Promise.resolve(); // Potentially we need to wait a bit here, cause the value might not be set already? as of the context consumption... + expect(consumer).to.be.instanceOf(UmbTestControllerHostInitializerConsumerElement); + expect(consumer.value).to.not.be.null; expect(consumer.value).to.equal(contextValue); }); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts index c933e21a94..5ddeacecc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts @@ -27,9 +27,11 @@ describe('UmbExtensionSlotElement', () => { /* // This test fails offen on FireFox, there is no real need for this test. So i have chosen to skip it. - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } */ describe('properties', () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.test.ts index c9b3a55d70..14fc9b8f74 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.test.ts @@ -12,7 +12,9 @@ describe('UmbInputColorElement', () => { expect(element).to.be.instanceOf(UmbInputColorElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts index af3fa7afa4..c44689676a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts @@ -12,7 +12,9 @@ describe('UmbInputDateElement', () => { expect(element).to.be.instanceOf(UmbInputDateElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts index 32c6709b79..6ad52a04f4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts @@ -12,7 +12,9 @@ describe('UmbInputDateElement', () => { expect(element).to.be.instanceOf(UmbInputDropdownListElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.test.ts index ac434f3f71..58ed37c969 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.test.ts @@ -12,7 +12,9 @@ describe('UmbInputEyeDropperElement', () => { expect(element).to.be.instanceOf(UmbInputEyeDropperElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.test.ts index 4d479c521d..463d6b671f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.test.ts @@ -12,7 +12,9 @@ describe('UmbPropertyEditorUINumberRangeElement', () => { expect(element).to.be.instanceOf(UmbInputNumberRangeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-section/input-section.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-section/input-section.test.ts index 888dfb8f0f..8cf664b4ce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-section/input-section.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-section/input-section.test.ts @@ -13,7 +13,9 @@ import { expect, fixture, html } from '@open-wc/testing'; // expect(element).to.be.instanceOf(UmbPickerSectionElement); // }); +// if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { // it('passes the a11y audit', async () => { // await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); // }); +// } // }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts index 1131038379..7d8a2e2b3d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts @@ -60,12 +60,12 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement { } render() { - return html``; + .config=${this._dataTypeData}>`; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts index 8d85128826..5761e30546 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts @@ -1,3 +1,4 @@ +import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UmbVariantId } from '../../variant/variant-id.class.js'; import { UUIInputElement, UUIInputEvent, UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui'; import { @@ -13,9 +14,7 @@ import { import { UmbWorkspaceSplitViewContext, UMB_WORKSPACE_SPLIT_VIEW_CONTEXT, - UMB_VARIANT_CONTEXT, ActiveVariant, - isNameablePropertySetContext, } from '@umbraco-cms/backoffice/workspace'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { DocumentVariantResponseModel, ContentStateModel } from '@umbraco-cms/backoffice/backend-api'; @@ -38,7 +37,7 @@ export class UmbVariantSelectorElement extends UmbLitElement { } #splitViewContext?: UmbWorkspaceSplitViewContext; - #variantContext?: typeof UMB_VARIANT_CONTEXT.TYPE; + #variantContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE; @state() private _name?: string; @@ -66,7 +65,7 @@ export class UmbVariantSelectorElement extends UmbLitElement { this._observeVariants(); this._observeActiveVariants(); }); - this.consumeContext(UMB_VARIANT_CONTEXT, (instance) => { + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (instance) => { this.#variantContext = instance; this._observeVariantContext(); }); @@ -140,7 +139,7 @@ export class UmbVariantSelectorElement extends UmbLitElement { if ( typeof target?.value === 'string' && this.#variantContext && - isNameablePropertySetContext(this.#variantContext) + isNameablePropertyDatasetContext(this.#variantContext) ) { this.#variantContext.setName(target.value); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/property-editor-config/property-editor-config.element.ts index dd8595846e..5a650364d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/property-editor-config/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/property-editor-config/property-editor-config.element.ts @@ -1,9 +1,9 @@ -import { html, customElement, state, ifDefined, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../workspace/data-type-workspace.context.js'; +import { html, customElement, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { PropertyEditorConfigProperty } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/data-type'; /** * @element umb-property-editor-config @@ -13,7 +13,7 @@ import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/data-type @customElement('umb-property-editor-config') export class UmbPropertyEditorConfigElement extends UmbLitElement { // TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. - #variantContext?: typeof UMB_DATA_TYPE_VARIANT_CONTEXT.TYPE; + #workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; @state() private _properties: Array = []; @@ -21,16 +21,17 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement { constructor() { super(); - this.consumeContext(UMB_DATA_TYPE_VARIANT_CONTEXT, (instance) => { - this.#variantContext = instance; + // This now connects to the workspace, as the variant does not know about the layout details. + this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => { + this.#workspaceContext = instance; this.#observeProperties(); }); } #observeProperties() { - if (!this.#variantContext) return; + if (!this.#workspaceContext) return; this.observe( - this.#variantContext.properties, + this.#workspaceContext.properties, (properties) => { this._properties = properties as Array; }, @@ -44,12 +45,12 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement { this._properties, (property) => property.alias, (property) => - html``, + .config=${property.config}>`, ) : html`
No configuration
`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/index.ts index fef96f6679..8290049415 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/index.ts @@ -2,6 +2,5 @@ import './components/index.js'; export * from './entity.js'; export * from './repository/index.js'; -export * from './variant-context/index.js'; export type { UmbDataTypeDetailModel } from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.token.ts deleted file mode 100644 index 465fdb7ec6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.token.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { UmbDataTypeVariantContext } from './data-type-variant-context.js'; -import { UmbVariantContext } from '@umbraco-cms/backoffice/workspace'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -export const isDataTypeVariantContext = (context: UmbVariantContext): context is UmbDataTypeVariantContext => - 'properties' in context && context.getType() === 'data-type'; - -export const UMB_DATA_TYPE_VARIANT_CONTEXT = new UmbContextToken( - 'UmbVariantContext', - undefined, - isDataTypeVariantContext, -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.ts deleted file mode 100644 index 7148973a04..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/data-type-variant-context.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { UmbDataTypeWorkspaceContext } from '../workspace/data-type-workspace.context.js'; -import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbInvariantWorkspaceVariantContext } from '@umbraco-cms/backoffice/workspace'; - -export class UmbDataTypeVariantContext extends UmbInvariantWorkspaceVariantContext { - properties = this._workspace.properties; - - constructor(host: UmbControllerHost, workspace: UmbDataTypeWorkspaceContext) { - super(host, workspace); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/index.ts deleted file mode 100644 index 95cb72dcdc..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/variant-context/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './data-type-variant-context.token.js'; -export * from './data-type-variant-context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace-editor.element.ts index a3d55e76f1..2aa2ed3023 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace-editor.element.ts @@ -22,7 +22,7 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => { this.#workspaceContext = workspaceContext; - this.#workspaceContext?.createVariantContext(this); + this.#workspaceContext?.createPropertyDatasetContext(this); this.#observeIsNew(); this.#observeName(); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts index efa21b2d29..b3548f52f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts @@ -1,10 +1,11 @@ +import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UmbDataTypeDetailRepository } from '../repository/detail/data-type-detail.repository.js'; -import { UmbDataTypeVariantContext } from '../variant-context/data-type-variant-context.js'; import type { UmbDataTypeDetailModel } from '../types.js'; import { UmbInvariantableWorkspaceContextInterface, UmbEditableWorkspaceContextBase, UmbWorkspaceContextInterface, + UmbInvariantWorkspacePropertyDatasetContext, } from '@umbraco-cms/backoffice/workspace'; import { appendToFrozenArray, @@ -26,7 +27,6 @@ export class UmbDataTypeWorkspaceContext extends UmbEditableWorkspaceContextBase implements UmbInvariantableWorkspaceContextInterface { - // TODO: revisit. temp solution because the create and response models are different. #data = new UmbObjectState(undefined); readonly data = this.#data.asObservable(); #getDataPromise?: Promise; @@ -146,8 +146,49 @@ export class UmbDataTypeWorkspaceContext return this._configDefaultData?.find((x) => x.alias === alias)?.value; } - createVariantContext(host: UmbControllerHost): UmbDataTypeVariantContext { - return new UmbDataTypeVariantContext(host, this); + createPropertyDatasetContext(host: UmbControllerHost): UmbPropertyDatasetContext { + return new UmbInvariantWorkspacePropertyDatasetContext(host, this); + /* + // Example of how this could have been done with the PropertyDatasetBaseContext: + const context = new UmbPropertyDatasetBaseContext(host); + + // Observe workspace name: + this.observe(this.name, (name) => { + context.setName(name ?? ''); + }); + // Observe the variant name: + this.observe(context.name, (name) => { + this.setName(name); + }); + + this.observe( + this.properties, + (properties) => { + if (properties) { + properties.forEach(async (property) => { + // Observe value of workspace: + this.observe( + await this.propertyValueByAlias(property.alias), + (value) => { + context.setPropertyValue(property.alias, value); + }, + 'observeWorkspacePropertyOf_' + property.alias, + ); + // Observe value of variant: + this.observe( + await context.propertyValueByAlias(property.alias), + (value) => { + this.setPropertyValue(property.alias, value); + }, + 'observeVariantPropertyOf_' + property.alias, + ); + }); + } + }, + 'observePropertyValues', + ); + return context; + */ } async load(unique: string) { @@ -187,7 +228,7 @@ export class UmbDataTypeWorkspaceContext getName() { return this.#data.getValue()?.name; } - setName(name: string) { + setName(name: string | undefined) { this.#data.update({ name }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts index 32a3413883..3d1734038f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts @@ -91,7 +91,7 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im #renderPropertyEditorReference() { return html` - + ${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias ? html` @@ -117,7 +117,7 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im color="default" @click=${this._openPropertyEditorUIPicker}> `} - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/info/workspace-view-data-type-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/info/workspace-view-data-type-info.element.ts index 1b5e23dd26..b6fb55e744 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/info/workspace-view-data-type-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/info/workspace-view-data-type-info.element.ts @@ -37,16 +37,16 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement implement private _renderGeneralInfo() { return html` - +
${this._dataType?.unique}
- - + +
${this._dataType?.propertyEditorAlias}
- + - +
${this._dataType?.propertyEditorUiAlias}
- + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts index a51a7288bc..53591fe73a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts @@ -164,7 +164,7 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement< return html` - +
- + ${when( this.#embedResult?.oEmbedStatus === OEmbedStatus.Success || this._model.a11yInfo, () => - html` + html`
${when(this.#loading, () => html``)} ${when(this.#embedResult?.markup, () => html`${unsafeHTML(this.#embedResult.markup)}`)} @@ -191,34 +191,34 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement< () => html` `, )}
- `, + `, )} - + - + - + - + - + - + Cancel @@ -257,11 +257,11 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement< width: 1px; } - umb-workspace-property-layout:first-child { + umb-property-layout:first-child { padding-top: 0; } - umb-workspace-property-layout:last-child { + umb-property-layout:last-child { padding-bottom: 0; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.test.ts index 70fab3a612..534b84c10e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.test.ts @@ -13,8 +13,10 @@ // expect(element).to.be.instanceOf(UmbIconPickerModalElement); // }); +// if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { // // TODO: Reinstate this test when the a11y audit is fixed on uui-color-picker // // it('passes the a11y audit', async () => { // // await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); // // }); +// } // }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.test.ts index 980010eb9b..6d4daff90a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.test.ts @@ -31,9 +31,11 @@ describe('UmbNotificationLayoutDefault', () => { expect(element).to.be.instanceOf(UmbNotificationLayoutDefaultElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(); + }); + } describe('Public API', () => { describe('properties', () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts index 3dde846b72..9024b440a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts @@ -1,6 +1,6 @@ +import { UmbPropertyContext, UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbPropertyAction } from '../../shared/property-action/property-action.interface.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import { UmbWorkspacePropertyContext, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-property-action-clear') @@ -10,7 +10,7 @@ export class UmbPropertyActionClearElement extends UmbLitElement implements UmbP // THESE OUT COMMENTED CODE IS USED FOR THE EXAMPLE BELOW, TODO: Should be transferred to some documentation. //private _propertyActionMenuContext?: UmbPropertyActionMenuContext; - private _propertyContext?: UmbWorkspacePropertyContext; + private _propertyContext?: UmbPropertyContext; constructor() { super(); @@ -20,7 +20,7 @@ export class UmbPropertyActionClearElement extends UmbLitElement implements UmbP this._propertyActionMenuContext = propertyActionsContext; }); */ - this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (propertyContext: UmbWorkspacePropertyContext) => { + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext: UmbPropertyContext) => { this._propertyContext = propertyContext; }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts index 99a8589c9f..f93d47e335 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIBlockGridBlockConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockGridBlockConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts index 9f32c3112f..3c06bdf0d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIBlockGridGroupConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockGridGroupConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts index df5d7fcb40..6ea2a773bd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIBlockGridStylesheetPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockGridStylesheetPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.element.ts index 5301be738f..220c67a819 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.element.ts @@ -1,4 +1,4 @@ -import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../workspace/workspace-property/workspace-property.context.js'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; @@ -33,7 +33,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement constructor() { super(); - this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => { + this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { this.observe(context?.variantId, (propertyVariantId) => { this._variantId = propertyVariantId; this.setupRoutes(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.test.ts index f614a6fded..467d68182e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIBlockGridElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockGridElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts index 5e8712144e..06844415c1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts @@ -19,7 +19,7 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement public config?: UmbPropertyEditorConfigCollection; render() { - return html`
umb-property-editor-ui-block-list-block-configuration
`; + return html`
umb-property-editor-ui-block-list-block-configuration
`; } static styles = [UmbTextStyles]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts index 4d53ce093e..ef715201fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIBlockListBlockConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockListBlockConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/property-editor-ui-block-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/property-editor-ui-block-list.test.ts index 76fa78f468..198c1f427e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/property-editor-ui-block-list.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/property-editor-ui-block-list.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIBlockListElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockListElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.test.ts index a97844171f..f1428dca59 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUICheckboxListElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUICheckboxListElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts index d46384afee..7c0e64a11f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUICollectionViewBulkActionPermissionsElement', () => expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewBulkActionPermissionsElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts index 71288c6933..203416aead 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUICollectionViewColumnConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewColumnConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts index 5f8af52f82..f91606cf5e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUICollectionViewLayoutConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewLayoutConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts index 07094aafa8..e2638728cf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUICollectionViewOrderByElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewOrderByElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.test.ts index 1f580e0218..7c9518b8f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUICollectionViewElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUICollectionViewElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.test.ts index c5d2fba1b1..ac2841f36d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIColorPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIColorPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.test.ts index bc7b520289..11845e05e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.test.ts @@ -37,7 +37,9 @@ describe('UmbPropertyEditorUIDatePickerElement', () => { expect(inputElement.type).to.equal('time'); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.test.ts index e14717c8bf..64eedd3d8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIDropdownElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIDropdownElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.test.ts index f5056dc648..3ac40ef46b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIEyeDropperElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIEyeDropperElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/icon-picker/property-editor-ui-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/icon-picker/property-editor-ui-icon-picker.test.ts index c199944f4c..f946507ae1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/icon-picker/property-editor-ui-icon-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/icon-picker/property-editor-ui-icon-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIIconPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-cropper/property-editor-ui-image-cropper.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-cropper/property-editor-ui-image-cropper.test.ts index bd91e22814..f40bcfab04 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-cropper/property-editor-ui-image-cropper.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-cropper/property-editor-ui-image-cropper.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIImageCropperElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIImageCropperElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.test.ts index a3c26746ec..8669456057 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.test.ts @@ -1,6 +1,6 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbPropertyEditorUIImageCropsConfigurationElement } from './property-editor-ui-image-crops-configuration.element.js'; -import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; +//import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; describe('UmbPropertyEditorUIImageCropsConfigurationElement', () => { let element: UmbPropertyEditorUIImageCropsConfigurationElement; @@ -15,8 +15,10 @@ describe('UmbPropertyEditorUIImageCropsConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIImageCropsConfigurationElement); }); - it('passes the a11y audit', async () => { - //TODO: This test is broken. It fails at forms because of missing labels even if you have them. - // await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + //TODO: This test is broken. It fails at forms because of missing labels even if you have them. + // await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/label/property-editor-ui-label.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/label/property-editor-ui-label.test.ts index 38a24dc5d1..9813b3230a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/label/property-editor-ui-label.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/label/property-editor-ui-label.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUILabelElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUILabelElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts index 8b45de2a09..5626c6e1ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIMarkdownEditorElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMarkdownEditorElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/media-picker/property-editor-ui-media-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/media-picker/property-editor-ui-media-picker.test.ts index 3b68f220af..3775dc4a47 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/media-picker/property-editor-ui-media-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/media-picker/property-editor-ui-media-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIMediaPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMediaPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts index 3f697d6202..eadd74f29f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIMemberGroupPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberGroupPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.test.ts index 3f64843b26..bab51e8959 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIMemberPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 0419084673..b152322308 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -1,8 +1,8 @@ +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; import { UmbInputMultiUrlElement } from '@umbraco-cms/backoffice/components'; -import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; import { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -49,7 +49,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl constructor() { super(); - this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => { + this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { this.observe(context.alias, (alias) => { this._alias = alias; }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts index 6476463b0a..598909dd4d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIMultiUrlPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMultiUrlPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts index 3fd0d943d8..c650bfce4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIMultipleTextStringElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIMultipleTextStringElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.test.ts index 864e3037d6..28d362a592 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUINumberRangeElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUINumberRangeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.test.ts index d3b56862b2..75f2e7cc33 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.test.ts @@ -1,6 +1,6 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbPropertyEditorUIOrderDirectionElement } from './property-editor-ui-order-direction.element.js'; -//import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; +import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; describe('UmbPropertyEditorUIOrderDirectionElement', () => { let element: UmbPropertyEditorUIOrderDirectionElement; @@ -12,9 +12,10 @@ describe('UmbPropertyEditorUIOrderDirectionElement', () => { 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); - }); - */ + + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.test.ts index e60d71050a..2f21434de2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIOverlaySizeElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIOverlaySizeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts index 415f84aa7b..f6dd7ea791 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUIRadioButtonListElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIRadioButtonListElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/property-editor-ui-slider.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/property-editor-ui-slider.test.ts index f28122f841..6d76461baa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/property-editor-ui-slider.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/property-editor-ui-slider.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUISliderElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUISliderElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts index 2d053b43d8..b94f1b2c47 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts @@ -31,7 +31,9 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements } private onChange(e: Event) { - this.value = (e.target as HTMLInputElement).value; + const newValue = (e.target as HTMLInputElement).value; + if (newValue === this.value) return; + this.value = newValue; this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -41,7 +43,7 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements .type=${this._type} inputMode=${ifDefined(this._inputMode)} maxlength=${ifDefined(this._maxChars)} - @change=${this.onChange}>`; + @input=${this.onChange}>`; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts index a1cd98015d..a8c9eff402 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITinyMceDimensionsConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceDimensionsConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts index 924f3e8657..1c7e51cc7c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITinyMceMaxImSizeConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts index 73bc259cc4..3199a0c760 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITinyMceStylesheetsConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceStylesheetsConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts index d4110d2ff1..c9620b9601 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITinyMceToolbarConfigurationElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceToolbarConfigurationElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts index 07970418cc..0aa87752a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUITinyMceElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/property-editor-ui-toggle.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/property-editor-ui-toggle.test.ts index 368d9ff4ba..5ea2056371 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/property-editor-ui-toggle.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/property-editor-ui-toggle.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIToggleElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIToggleElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts index 120c203891..7349b7e78b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITreePickerStartNodeElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerStartNodeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.test.ts index 378b119078..8badef8d1e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUITreePickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.test.ts index 20ec7d860a..a8f16c1a03 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIUploadFieldElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIUploadFieldElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.test.ts index 16474612a0..a118ae22f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIUserPickerElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIUserPickerElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.test.ts index 88a4ae7279..0f74f050fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUIValueTypeElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUIValueTypeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/index.ts new file mode 100644 index 0000000000..336c1e11ef --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/index.ts @@ -0,0 +1,4 @@ +export * from './property/index.js'; +export * from './property-dataset/index.js'; +export * from './property-layout/index.js'; +export * from './types/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/index.ts new file mode 100644 index 0000000000..ea833bd374 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/index.ts @@ -0,0 +1,6 @@ +export * from './nameable-property-dataset-context.interface.js'; +export * from './nameable-property-dataset-context.token.js'; +export * from './property-dataset-base-context.js'; +export * from './property-dataset-context.interface.js'; +export * from './property-dataset-context.token.js'; +export * from './property-dataset.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.interface.ts new file mode 100644 index 0000000000..fa1f37fe5e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.interface.ts @@ -0,0 +1,8 @@ +import { UmbPropertyDatasetContext } from './property-dataset-context.interface.js'; + +/** + * A variant context with ability to set the name of it. + */ +export interface UmbNameablePropertyDatasetContext extends UmbPropertyDatasetContext { + setName(name: string): void; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.token.ts new file mode 100644 index 0000000000..4f74142bb3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/nameable-property-dataset-context.token.ts @@ -0,0 +1,13 @@ +import { type UmbPropertyDatasetContext } from './property-dataset-context.interface.js'; +import { UmbNameablePropertyDatasetContext } from './nameable-property-dataset-context.interface.js'; +import { UMB_PROPERTY_DATASET_CONTEXT } from './property-dataset-context.token.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const isNameablePropertyDatasetContext = ( + context: UmbPropertyDatasetContext, +): context is UmbNameablePropertyDatasetContext => 'setName' in context; + +export const UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT = new UmbContextToken< + UmbPropertyDatasetContext, + UmbNameablePropertyDatasetContext +>(UMB_PROPERTY_DATASET_CONTEXT.toString(), undefined, isNameablePropertyDatasetContext); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts new file mode 100644 index 0000000000..9f6a32fb01 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts @@ -0,0 +1,74 @@ +import { + UMB_PROPERTY_DATASET_CONTEXT, + type UmbNameablePropertyDatasetContext, + type UmbPropertyDatasetContext, +} from '@umbraco-cms/backoffice/property'; +import type { UmbPropertyValueData } from '../types/property-value-data.type.js'; +import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import { UmbArrayState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; + +/** + * A base property dataset context implementation. + * @class UmbPropertyDatasetBaseContext + * @extends {UmbContextBase} + */ +export class UmbPropertyDatasetBaseContext + extends UmbContextBase + implements UmbPropertyDatasetContext, UmbNameablePropertyDatasetContext +{ + #name = new UmbStringState(undefined); + name = this.#name.asObservable(); + + #values = new UmbArrayState([], (x) => x.alias); + public readonly values = this.#values.asObservable(); + private _entityType!: string; + private _unique!: string; + + getEntityType() { + return this._entityType; + } + getUnique() { + return this._unique; + } + getName() { + return this.#name.getValue(); + } + setName(name: string | undefined) { + this.#name.next(name); + } + getVariantId() { + return UmbVariantId.CreateInvariant(); + } + // variant id for a specific property? + + constructor(host: UmbControllerHost) { + // The controller alias, is a very generic name cause we want only one of these for this controller host. + super(host, UMB_PROPERTY_DATASET_CONTEXT); + } + + /** + * TODO: Write proper JSDocs here. + */ + async propertyValueByAlias(propertyAlias: string) { + return this.#values.asObservablePart((values) => { + const valueObj = values.find((x) => x.alias === propertyAlias); + return valueObj ? (valueObj.value as ReturnType) : undefined; + }); + } + + /** + * TODO: Write proper JSDocs here. + */ + setPropertyValue(alias: string, value: unknown) { + this.#values.appendOne({ alias, value }); + } + + getValues() { + return this.#values.getValue(); + } + setValues(map: Array) { + this.#values.next(map); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts similarity index 65% rename from src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.interface.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts index a1021dd7a1..a27696958e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts @@ -2,31 +2,34 @@ import type { UmbVariantId } from '../../variant/variant-id.class.js'; import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; /** - * A variant context, represents a set of properties. + * A property dataset context, represents the data of a set of properties. * This can take form as many, so to list a few: - * - A specific variant of content - * - Content that does not vary + * - A specific variant of content. + * - Content that does not vary. * - A block. * - A DataType configuration. + * - A property editor that hosts a set of properties. * * The base type of this holds a Name and some Properties. * Some might be enriches with Variant Info, like culture and segment. * Others might have saved publishing status. * Also setting the name is an additional feature. */ -export interface UmbVariantContext { - getType(): string; +export interface UmbPropertyDatasetContext { + getEntityType(): string; getUnique(): string | undefined; - //getUniqueName(): string; getVariantId: () => UmbVariantId; getName(): string | undefined; readonly name: Observable; + // Should it be possible to get the properties as a list of property aliases? + //readonly properties: Observable>; + destroy(): void; // Property methods: propertyVariantId?: (propertyAlias: string) => Promise>; propertyValueByAlias(propertyAlias: string): Promise>; - setPropertyValue(propertyAlias: string, value: unknown): Promise; + setPropertyValue(propertyAlias: string, value: unknown): void; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.token.ts new file mode 100644 index 0000000000..572728a603 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.token.ts @@ -0,0 +1,4 @@ +import { type UmbPropertyDatasetContext } from './property-dataset-context.interface.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_PROPERTY_DATASET_CONTEXT = new UmbContextToken('UmbPropertyDatasetContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.test.ts new file mode 100644 index 0000000000..70401d924f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.test.ts @@ -0,0 +1,171 @@ +import { expect, fixture, oneEvent } from '@open-wc/testing'; +import type { UmbPropertyValueData } from '../types/property-value-data.type.js'; +import { UMB_PROPERTY_DATASET_CONTEXT } from './property-dataset-context.token.js'; +import { UmbPropertyDatasetElement } from './property-dataset.element.js'; +import { customElement, html, property, state, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; + +@customElement('test-property-editor') +export class UmbTestPropertyEditorElement extends UmbElementMixin(LitElement) { + // + _datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE; + + @property() + public get alias() { + return this._alias; + } + public set alias(value) { + this._alias = value; + this._observeProperty(); + } + _alias?: string; + + @state() + _value?: string; + + getValue() { + return this._value; + } + setValue(value: string) { + if (this._alias) { + this._datasetContext?.setPropertyValue(this._alias, value); + this.dispatchEvent(new UmbChangeEvent()); + } + } + + protected async _observeProperty() { + if (!this._datasetContext || !this._alias) return; + this.observe( + await this._datasetContext.propertyValueByAlias(this._alias), + (value) => { + this._value = value as string; + }, + 'observeValue', + ); + } + + constructor() { + super(); + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (variantContext) => { + this._datasetContext = variantContext; + this._observeProperty(); + }); + } +} + +// Adapter property editor, which tests what happens if a editor sets values of other editors. +@customElement('test-adapter-property-editor') +export class UmbTestAdapterPropertyEditorElement extends UmbTestPropertyEditorElement { + protected async _observeProperty() { + super._observeProperty(); + if (!this._datasetContext || !this._alias) return; + this.observe( + await this._datasetContext.propertyValueByAlias(this._alias), + (value) => { + this._datasetContext?.setPropertyValue('testAlias', 'setByAdapter_' + value); + }, + 'observeValue', + ); + } +} + +const dataSet: Array = [ + { + alias: 'testAlias', + value: 'testValue', + }, +]; + +describe('UmbBasicVariantElement', () => { + describe('Public API', () => { + let datasetElement: UmbPropertyDatasetElement; + + beforeEach(async () => { + datasetElement = await fixture( + html` `, + ); + }); + + describe('properties', () => { + it('has a value property', () => { + expect(datasetElement).to.have.property('value').to.be.an.a('array'); + }); + + it('has a name property', () => { + expect(datasetElement).to.have.property('name').to.be.an.a('string'); + }); + }); + }); + + describe('Data bindings', () => { + let datasetElement: UmbPropertyDatasetElement; + let propertyEditor: UmbTestPropertyEditorElement; + + beforeEach(async () => { + datasetElement = await fixture( + html` + + `, + ); + + propertyEditor = datasetElement.querySelector('test-property-editor') as UmbTestPropertyEditorElement; + }); + + it('defines with its own instance', () => { + expect(datasetElement).to.be.instanceOf(UmbPropertyDatasetElement); + }); + + it('provides the value for the property editor to get', () => { + expect(propertyEditor.alias).to.equal('testAlias'); + expect(propertyEditor.getValue()).to.equal('testValue'); + }); + + it('property editor sets value on it self', () => { + propertyEditor.setValue('testValue2'); + expect(propertyEditor.getValue()).to.equal('testValue2'); + }); + + it('retrieves value set by child', () => { + propertyEditor.setValue('testValue2'); + expect(datasetElement.context.getValues()[0].alias).to.equal('testAlias'); + expect(datasetElement.context.getValues()[0].value).to.equal('testValue2'); + }); + + it('fires change event', async () => { + const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE); + + expect(propertyEditor.alias).to.eq('testAlias'); + propertyEditor.setValue('testValue3'); + + const event = (await listener) as unknown as UmbChangeEvent; + expect(event).to.exist; + expect(event.type).to.eq(UmbChangeEvent.TYPE); + expect(event.target).to.equal(datasetElement); + }); + + it('does respond to changes triggered internally', async () => { + const adapterPropertyEditor = document.createElement( + 'test-adapter-property-editor', + ) as UmbTestAdapterPropertyEditorElement; + + // We actually do not use the alias of the adapter property editor, but we need to set this to start observing the property value: + adapterPropertyEditor.alias = 'testAdapterAlias'; + datasetElement.appendChild(adapterPropertyEditor); + + const listener = oneEvent(datasetElement, UmbChangeEvent.TYPE); + + // The alias of the original property editor must be 'testAlias' for the adapter to set the value of it. + expect(propertyEditor.alias).to.eq('testAlias'); + expect(adapterPropertyEditor.alias).to.eq('testAdapterAlias'); + adapterPropertyEditor.setValue('testValue4'); + + const event = (await listener) as unknown as UmbChangeEvent; + expect(event).to.exist; + expect(event.type).to.eq(UmbChangeEvent.TYPE); + expect(event.target).to.equal(datasetElement); + expect(adapterPropertyEditor.getValue()).to.equal('testValue4'); + expect(propertyEditor.getValue()).to.equal('setByAdapter_testValue4'); + }); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts new file mode 100644 index 0000000000..b501549a4c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts @@ -0,0 +1,123 @@ +import type { UmbPropertyValueData } from '../types/property-value-data.type.js'; +import { UmbPropertyDatasetBaseContext } from './property-dataset-base-context.js'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; + +/** + * @element umb-property-dataset + * @description - Element for hosting a property dataset. This is needed for umb-property to work. + * @slot default - Slot for rendering content within. + */ +@customElement('umb-property-dataset') +export class UmbPropertyDatasetElement extends UmbLitElement { + // Determine wether state change should fire an event when the value is changed. + #allowChangeEvent = false; + + public readonly context: UmbPropertyDatasetBaseContext; + + /** + * The value of the dataset. + * @returns {Array} + * @memberof UmbBasicVariantElement + * @example + * ```ts + * const dataSet = [ + * { + * alias: 'testAlias', + * value: 'value as a string', + * }, + * { + * alias: 'anotherAlias', + * value: 123, + * } + * ] + * + * html` + * + * + * + * + * ` + * ``` + */ + @property({ attribute: false }) + public get value(): Array { + return this.context.getValues(); + } + public set value(value: Array) { + this.#allowChangeEvent = false; + this.context.setValues(value); + // Above might not trigger a observer callback (if no change), so set the allow change event to true: + this.#allowChangeEvent = true; + } + + /** + * The name of the dataset, this name varies depending on the use-case. But this is either + * @type {string} + * @returns {string} + * @memberof UmbBasicVariantElement + * @example + * ```ts + * html` + * + * ... + * + * ` + */ + @property({ attribute: false }) + public get name(): string | undefined { + return this.context.getName(); + } + public set name(value: string | undefined) { + this.#allowChangeEvent = false; + this.context.setName(value); + // Above might not trigger a observer callback (if no change), so set the allow change event to true: + this.#allowChangeEvent = true; + } + + constructor() { + super(); + + // Prevent any child events escaping this element. + this.addEventListener('change', (e) => { + if (e.target !== this) { + e.stopImmediatePropagation(); + } + }); + + this.context = new UmbPropertyDatasetBaseContext(this); + // prevent the first change event from firing: + this.#allowChangeEvent = false; + this.observe(this.context.name, this.#observerCallback); + // prevent the first change event from firing: + this.#allowChangeEvent = false; + this.observe(this.context.values, this.#observerCallback); + } + + #observerCallback = () => { + if (this.#allowChangeEvent) { + this.dispatchEvent(new UmbChangeEvent()); + } else { + // Set allow change event to true. + this.#allowChangeEvent = true; + } + }; + + render() { + return html``; + } +} + +export default UmbPropertyDatasetElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-dataset': UmbPropertyDatasetElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/index.ts new file mode 100644 index 0000000000..ea2ed3d568 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/index.ts @@ -0,0 +1 @@ +export * from './property-layout.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts similarity index 87% rename from src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts index 1d244f479d..d5971aea5a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts @@ -2,14 +2,14 @@ import { css, html, LitElement, customElement, property } from '@umbraco-cms/bac import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; /** - * @element umb-workspace-property-layout + * @element umb-property-layout * @description - Element for displaying a property in an workspace. * @slot editor - Slot for rendering the Property Editor * @slot description - Slot for rendering things below the label. - * @slot property-action-menu - Slot for rendering the Property Action Menu + * @slot action-menu - Slot for rendering the Property Action Menu */ -@customElement('umb-workspace-property-layout') -export class UmbWorkspacePropertyLayoutElement extends LitElement { +@customElement('umb-property-layout') +export class UmbPropertyLayoutElement extends LitElement { /** * Alias. The technical name of the property. * @type {string} @@ -52,7 +52,7 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { return html`
${this.label} - +
${this.description}
@@ -117,6 +117,6 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { declare global { interface HTMLElementTagNameMap { - 'umb-workspace-property-layout': UmbWorkspacePropertyLayoutElement; + 'umb-property-layout': UmbPropertyLayoutElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts new file mode 100644 index 0000000000..114eaa732c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts @@ -0,0 +1,19 @@ +import { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyLayoutElement } from './property-layout.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property-layout.element.js'; + +export default { + title: 'Workspaces/Property Layout', + component: 'umb-property-layout', + id: 'umb-property-layout', +} as Meta; + +export const AAAOverview: Story = () => + html` +
Action Menu
+ +
Editor
+ `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/index.ts new file mode 100644 index 0000000000..bc6211a02c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/index.ts @@ -0,0 +1,2 @@ +export * from './property.context.js'; +export * from './property.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts similarity index 83% rename from src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts index 2e6c4055a0..21bb1b1517 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts @@ -1,20 +1,20 @@ +import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; import { UmbPropertyEditorUiElement } from '../../extension-registry/interfaces/property-editor-ui-element.interface.js'; -import { type WorkspacePropertyData } from '../types/workspace-property-data.type.js'; -import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import { type WorkspacePropertyData } from '../../workspace/types/workspace-property-data.type.js'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; import { type UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; import { + UmbBasicState, UmbClassState, UmbObjectState, - UmbStringState, UmbObserverController, - UmbBasicState, + UmbStringState, } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextProviderController, UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -export class UmbWorkspacePropertyContext extends UmbBaseController { +export class UmbPropertyContext extends UmbBaseController { private _providerController: UmbContextProviderController; #data = new UmbObjectState>({}); @@ -44,13 +44,13 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl private _variantDifference = new UmbStringState(undefined); public readonly variantDifference = this._variantDifference.asObservable(); - #variantContext?: typeof UMB_VARIANT_CONTEXT.TYPE; + #datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE; constructor(host: UmbControllerHostElement) { super(host); - this.consumeContext(UMB_VARIANT_CONTEXT, (variantContext) => { - this.#variantContext = variantContext; + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (variantContext) => { + this.#datasetContext = variantContext; this._generateVariantDifferenceString(); this._observeProperty(); }); @@ -59,7 +59,7 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl this._observeProperty(); }); - this._providerController = new UmbContextProviderController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, this); + this._providerController = new UmbContextProviderController(host, UMB_PROPERTY_CONTEXT, this); this.observe(this.configValues, (configValues) => { this.#configCollection.next(configValues ? new UmbPropertyEditorConfigCollection(configValues) : undefined); @@ -74,9 +74,9 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl private _observePropertyValue?: UmbObserverController; private async _observeProperty() { const alias = this.#data.getValue().alias; - if (!this.#variantContext || !alias) return; + if (!this.#datasetContext || !alias) return; - const variantIdSubject = (await this.#variantContext.propertyVariantId?.(alias)) ?? undefined; + const variantIdSubject = (await this.#datasetContext.propertyVariantId?.(alias)) ?? undefined; this._observePropertyVariant?.destroy(); if (variantIdSubject) { this._observePropertyVariant = this.observe(variantIdSubject, (variantId) => { @@ -85,7 +85,7 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl } // TODO: Verify if we need to optimize runtime by parsing the propertyVariantID, cause this method retrieves it again: - const subject = await this.#variantContext.propertyValueByAlias(alias); + const subject = await this.#datasetContext.propertyValueByAlias(alias); this._observePropertyValue?.destroy(); if (subject) { @@ -97,8 +97,8 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl } private _generateVariantDifferenceString() { - if (!this.#variantContext) return; - const contextVariantId = this.#variantContext.getVariantId?.() ?? undefined; + if (!this.#datasetContext) return; + const contextVariantId = this.#datasetContext.getVariantId?.() ?? undefined; this._variantDifference.next( contextVariantId ? this.#variantId.getValue()?.toDifferencesString(contextVariantId) : '', ); @@ -115,9 +115,8 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl } public setValue(value: WorkspacePropertyData['value']) { const alias = this.#data.getValue().alias; - if (!this.#variantContext || !alias) return; - - this.#variantContext?.setPropertyValue(alias, value); + if (!this.#datasetContext || !alias) return; + this.#datasetContext?.setPropertyValue(alias, value); } public setConfig(config: WorkspacePropertyData['config'] | undefined) { this.#data.update({ config }); @@ -139,6 +138,4 @@ export class UmbWorkspacePropertyContext extends UmbBaseControl } } -export const UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN = new UmbContextToken( - 'UmbWorkspacePropertyContext', -); +export const UMB_PROPERTY_CONTEXT = new UmbContextToken('UmbPropertyContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts similarity index 62% rename from src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts index aff9be9507..7003c6fd15 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts @@ -1,21 +1,24 @@ -import { type UmbPropertyEditorConfig } from '../../property-editor/index.js'; -import { UmbWorkspacePropertyContext } from './workspace-property.context.js'; +import { UmbPropertyContext } from './property.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'; import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UmbPropertyEditorConfigCollection, + type UmbPropertyEditorConfig, +} from '@umbraco-cms/backoffice/property-editor'; /** - * @element umb-workspace-property - * @description - Component for displaying a entity property. The Element will render a Property Editor based on the Property Editor UI alias passed to the element. - * The element will also render all Property Actions related to the Property Editor. + * @element umb-property + * @description Component for displaying a property with editor from extension registry. + * The Element will render a Property Editor based on the Property Editor UI alias passed to the element. + * This will also render all Property Actions related to the Property Editor UI Alias. */ -@customElement('umb-workspace-property') -export class UmbWorkspacePropertyElement extends UmbLitElement { +@customElement('umb-property') +export class UmbPropertyElement extends UmbLitElement { /** * Label. Name of the property * @type {string} @@ -24,7 +27,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { */ @property({ type: String }) public set label(label: string) { - this._propertyContext.setLabel(label); + this.#propertyContext.setLabel(label); } /** @@ -35,7 +38,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { */ @property({ type: String }) public set description(description: string) { - this._propertyContext.setDescription(description); + this.#propertyContext.setDescription(description); } /** @@ -47,7 +50,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { */ @property({ type: String }) public set alias(alias: string) { - this._propertyContext.setAlias(alias); + this.#propertyContext.setAlias(alias); } /** @@ -57,13 +60,13 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { * @attr * @default '' */ - private _propertyEditorUiAlias = ''; @property({ type: String, attribute: 'property-editor-ui-alias' }) public set propertyEditorUiAlias(value: string) { if (this._propertyEditorUiAlias === value) return; this._propertyEditorUiAlias = value; this._observePropertyEditorUI(); } + private _propertyEditorUiAlias = ''; /** * Config. Configuration to pass to the Property Editor UI. This is also the configuration data stored on the Data Type. @@ -74,7 +77,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { */ @property({ type: Array, attribute: false }) public set config(value: UmbPropertyEditorConfig | undefined) { - this._propertyContext.setConfig(value); + this.#propertyContext.setConfig(value); } @state() @@ -95,24 +98,24 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { @state() private _description?: string; - private _propertyContext = new UmbWorkspacePropertyContext(this); + #propertyContext = new UmbPropertyContext(this); - private _valueObserver?: UmbObserverController; - private _configObserver?: UmbObserverController; + #valueObserver?: UmbObserverController; + #configObserver?: UmbObserverController; constructor() { super(); - this.observe(this._propertyContext.alias, (alias) => { + this.observe(this.#propertyContext.alias, (alias) => { this._alias = alias; }); - this.observe(this._propertyContext.label, (label) => { + this.observe(this.#propertyContext.label, (label) => { this._label = label; }); - this.observe(this._propertyContext.description, (description) => { + this.observe(this.#propertyContext.description, (description) => { this._description = description; }); - this.observe(this._propertyContext.variantDifference, (variantDifference) => { + this.observe(this.#propertyContext.variantDifference, (variantDifference) => { this._variantDifference = variantDifference; }); } @@ -121,7 +124,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { const target = e.composedPath()[0] as any; //this.value = target.value; // Sets value in context. - this._propertyContext.setValue(target.value); + this.#propertyContext.setValue(target.value); e.stopPropagation(); }; @@ -136,7 +139,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { } private async _gotEditorUI(manifest?: ManifestPropertyEditorUi | null) { - this._propertyContext.setEditor(undefined); + this.#propertyContext.setEditor(undefined); if (!manifest) { // TODO: if propertyEditorUiAlias didn't exist in store, we should do some nice fail UI. @@ -144,49 +147,44 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { } const el = await createExtensionElement(manifest); - if (el) { - const oldValue = this._element; - oldValue?.removeEventListener('change', this._onPropertyEditorChange as any as EventListener); + if (el) { + const oldElement = this._element; + + // cleanup: + this.#valueObserver?.destroy(); + this.#configObserver?.destroy(); + oldElement?.removeEventListener('property-value-change', this._onPropertyEditorChange as any as EventListener); this._element = el as ManifestPropertyEditorUi['ELEMENT_TYPE']; - this._propertyContext.setEditor(this._element); - - this._valueObserver?.destroy(); - this._configObserver?.destroy(); + this.#propertyContext.setEditor(this._element); if (this._element) { + // TODO: Could this be changed to change event? (or additionally support change?) this._element.addEventListener('property-value-change', this._onPropertyEditorChange as any as EventListener); - this._valueObserver = this.observe( - this._propertyContext.value, - (value) => { - this._value = value; - if (this._element) { - this._element.value = value; - } - }, - '_observePropertyValue', - ); - this._configObserver = this.observe( - this._propertyContext.config, - (config) => { - if (this._element && config) { - this._element.config = config; - } - }, - '_observePropertyConfig', - ); + // No need for a controller alias, as the clean is handled via the observer prop: + this.#valueObserver = this.observe(this.#propertyContext.value, (value) => { + this._value = value; + if (this._element) { + this._element.value = value; + } + }); + this.#configObserver = this.observe(this.#propertyContext.config, (config) => { + if (this._element && config) { + this._element.config = config; + } + }); } - this.requestUpdate('element', oldValue); + this.requestUpdate('element', oldElement); } } render() { return html` - ${this._variantDifference}` : ''}
${this._element}
- + `; } private _renderPropertyActionMenu() { return html`${this._propertyEditorUiAlias ? html`` : ''}`; @@ -221,13 +219,13 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { color: var(--uui-color-text-alt); } - #property-action-menu { + #action-menu { opacity: 0; } - #layout:focus-within #property-action-menu, - #layout:hover #property-action-menu, - #property-action-menu[open] { + #layout:focus-within #action-menu, + #layout:hover #action-menu, + #action-menu[open] { opacity: 1; } @@ -240,6 +238,6 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - 'umb-workspace-property': UmbWorkspacePropertyElement; + 'umb-property': UmbPropertyElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.stories.ts new file mode 100644 index 0000000000..646b2ca522 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.stories.ts @@ -0,0 +1,20 @@ +import { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyElement } from './property.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property.element.js'; + +export default { + title: 'Components/Property', + component: 'umb-property', + id: 'umb-property', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/types/index.ts new file mode 100644 index 0000000000..47487e191d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/types/index.ts @@ -0,0 +1 @@ +export * from './property-value-data.type.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/types/property-value-data.type.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/types/property-value-data.type.ts new file mode 100644 index 0000000000..68be94c74a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/types/property-value-data.type.ts @@ -0,0 +1,4 @@ +export type UmbPropertyValueData = { + alias: string; + value?: ValueType; +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts index a037ab8754..fee075d228 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts @@ -12,7 +12,9 @@ describe('UmbInputTreeElement', () => { expect(element).to.be.instanceOf(UmbInputTreeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts index 2bca6d682d..ad518c4496 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts @@ -1,4 +1,4 @@ -export * from './variant-context/index.js'; +export * from './workspace-property-dataset/index.js'; export * from './workspace-action-menu/index.js'; export * from './workspace-action/index.js'; export type { WorkspaceAliasConditionConfig } from './workspace-alias.condition.js'; @@ -8,7 +8,5 @@ export * from './workspace-editor/index.js'; export * from './workspace-footer/index.js'; export * from './workspace-is-new-redirect-controller/index.js'; export * from './workspace-modal/index.js'; -export * from './workspace-property-layout/workspace-property-layout.element.js'; -export * from './workspace-property/index.js'; export * from './workspace-split-view-manager.class.js'; export * from './workspace-split-view/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/index.ts deleted file mode 100644 index 8c2af922ab..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './variant-context.interface.js'; -export * from './variant-context.token.js'; -export * from './nameable-variant-context.interface.js'; -export * from './nameable-variant-context.token.js'; -export * from './invariant-workspace-variant-context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/invariant-workspace-variant-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/invariant-workspace-variant-context.ts deleted file mode 100644 index 4831680795..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/invariant-workspace-variant-context.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { DocumentVariantResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; -import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; -import { - UMB_VARIANT_CONTEXT, - UmbVariantContext, - UmbInvariantableWorkspaceContextInterface, -} from '@umbraco-cms/backoffice/workspace'; - -export class UmbInvariantWorkspaceVariantContext< - WorkspaceType extends UmbInvariantableWorkspaceContextInterface = UmbInvariantableWorkspaceContextInterface, - > - extends UmbBaseController - implements UmbVariantContext -{ - protected _workspace: WorkspaceType; - - #currentVariant = new UmbObjectState(undefined); - currentVariant = this.#currentVariant.asObservable(); - - name = this.#currentVariant.asObservablePart((x) => x?.name); - culture = this.#currentVariant.asObservablePart((x) => x?.culture); - segment = this.#currentVariant.asObservablePart((x) => x?.segment); - - // default data: - - getVariantId() { - return UmbVariantId.CreateInvariant(); - } - getType() { - return this._workspace.getEntityType(); - } - getUnique() { - return this._workspace.getEntityId(); - } - getName() { - return this._workspace.getName(); - } - setName(name: string) { - this._workspace.setName(name); - } - - constructor(host: UmbControllerHost, workspace: WorkspaceType) { - // The controller alias, is a very generic name cause we want only one of these for this controller host. - super(host, 'variantContext'); - this._workspace = workspace; - - this.provideContext(UMB_VARIANT_CONTEXT, this); - } - - /** - * TODO: Write proper JSDocs here. - * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property. - */ - async propertyValueByAlias(propertyAlias: string) { - return this._workspace.propertyValueByAlias(propertyAlias); - } - - /** - * TODO: Write proper JSDocs here. - * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property. - */ - async setPropertyValue(propertyAlias: string, value: unknown) { - return this._workspace.setPropertyValue(propertyAlias, value); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.interface.ts deleted file mode 100644 index a293194900..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { UmbVariantContext } from './variant-context.interface.js'; - -/** - * A variant context with ability to set the name of it. - */ -export interface UmbNameableVariantContext extends UmbVariantContext { - setName(name: string): void; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.token.ts deleted file mode 100644 index c4386e9bfe..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/nameable-variant-context.token.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { type UmbVariantContext } from './variant-context.interface.js'; -import { UmbNameableVariantContext } from './nameable-variant-context.interface.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -export const isNameablePropertySetContext = (context: UmbVariantContext): context is UmbNameableVariantContext => - 'setName' in context; - -export const UMB_NAMEABLE_VARIANT_CONTEXT = new UmbContextToken( - 'UmbVariantContext', - undefined, - isNameablePropertySetContext, -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.token.ts deleted file mode 100644 index bb33a6442a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/variant-context.token.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { type UmbVariantContext } from './variant-context.interface.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -export const UMB_VARIANT_CONTEXT = new UmbContextToken('UmbVariantContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-invariantable-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-invariantable-context.interface.ts index dc539d296a..e5ccfbb4fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-invariantable-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-invariantable-context.interface.ts @@ -1,5 +1,5 @@ import { UmbVariantId } from '../../variant/variant-id.class.js'; -import { UmbVariantContext } from '../variant-context/variant-context.interface.js'; +import { UmbPropertyDatasetContext } from '../../property/property-dataset/property-dataset-context.interface.js'; import type { UmbSaveableWorkspaceContextInterface } from './saveable-workspace-context.interface.js'; import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; @@ -7,6 +7,7 @@ import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; export interface UmbInvariantableWorkspaceContextInterface extends UmbSaveableWorkspaceContextInterface { // Name: + name: Observable; getName(): string | undefined; setName(name: string): void; @@ -15,5 +16,5 @@ export interface UmbInvariantableWorkspaceContextInterface getPropertyValue(alias: string): ReturnType; setPropertyValue(alias: string, value: unknown): Promise; - createVariantContext(host: UmbControllerHost, variantId?: UmbVariantId): UmbVariantContext; + createPropertyDatasetContext(host: UmbControllerHost, variantId?: UmbVariantId): UmbPropertyDatasetContext; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-variantable-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-variantable-context.interface.ts index 95c7897306..a8948d944d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-variantable-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-variantable-context.interface.ts @@ -1,5 +1,5 @@ import type { UmbWorkspaceSplitViewManager } from '../workspace-split-view-manager.class.js'; -import { UmbVariantContext } from '../variant-context/variant-context.interface.js'; +import { UmbPropertyDatasetContext } from '../../property/property-dataset/property-dataset-context.interface.js'; import type { UmbSaveableWorkspaceContextInterface } from './saveable-workspace-context.interface.js'; import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; @@ -27,5 +27,5 @@ export interface UmbVariantableWorkspaceContextInterface setPropertyValue(alias: string, value: unknown, variantId?: UmbVariantId): Promise; //propertyDataByAlias(alias: string, variantId?: UmbVariantId): Observable; - createVariantContext(host: UmbControllerHost, variantId?: UmbVariantId): UmbVariantContext; + createPropertyDatasetContext(host: UmbControllerHost, variantId?: UmbVariantId): UmbPropertyDatasetContext; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-modal/workspace-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-modal/workspace-modal.element.ts index f599ce2a9f..b37e725ac3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-modal/workspace-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-modal/workspace-modal.element.ts @@ -5,7 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-workspace-modal') export class UmbWorkspaceModalElement extends UmbLitElement { - @property() + @property({ attribute: false }) data?: UmbWorkspaceData; /** @@ -13,7 +13,7 @@ export class UmbWorkspaceModalElement extends UmbLitElement { * */ render() { - return html``; + return this.data ? html`` : ''; } static styles: CSSResultGroup = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/index.ts new file mode 100644 index 0000000000..fd988518eb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/index.ts @@ -0,0 +1 @@ +export * from './invariant-workspace-property-dataset-context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts new file mode 100644 index 0000000000..7a4bd4d0e2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts @@ -0,0 +1,65 @@ +import { + UMB_PROPERTY_DATASET_CONTEXT, + UmbPropertyDatasetContext, + UmbNameablePropertyDatasetContext, +} from '@umbraco-cms/backoffice/property'; +import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; +import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; +import { UmbInvariantableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; + +/** + * A property dataset context that hooks directly into the workspace context. + */ +export class UmbInvariantWorkspacePropertyDatasetContext< + WorkspaceType extends UmbInvariantableWorkspaceContextInterface = UmbInvariantableWorkspaceContextInterface, + > + extends UmbBaseController + implements UmbPropertyDatasetContext, UmbNameablePropertyDatasetContext +{ + #workspace: WorkspaceType; + + name; + + // default data: + + getVariantId() { + return UmbVariantId.CreateInvariant(); + } + getEntityType() { + return this.#workspace.getEntityType(); + } + getUnique() { + return this.#workspace.getEntityId(); + } + getName() { + return this.#workspace.getName(); + } + setName(name: string) { + this.#workspace.setName(name); + } + + constructor(host: UmbControllerHost, workspace: WorkspaceType) { + // The controller alias, is a very generic name cause we want only one of these for this controller host. + super(host, 'variantContext'); + this.#workspace = workspace; + + this.name = this.#workspace.name; + + this.provideContext(UMB_PROPERTY_DATASET_CONTEXT, this); + } + + /** + * TODO: Write proper JSDocs here. + */ + async propertyValueByAlias(propertyAlias: string) { + return await this.#workspace.propertyValueByAlias(propertyAlias); + } + + /** + * TODO: Write proper JSDocs here. + */ + async setPropertyValue(propertyAlias: string, value: unknown) { + return this.#workspace.setPropertyValue(propertyAlias, value); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.stories.ts deleted file mode 100644 index 9dce8c495a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta, Story } from '@storybook/web-components'; -import type { UmbWorkspacePropertyLayoutElement } from './workspace-property-layout.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -import './workspace-property-layout.element.js'; - -export default { - title: 'Workspaces/Shared/Editor Property Layout', - component: 'umb-workspace-property-layout', - id: 'umb-workspace-property-layout', -} as Meta; - -export const AAAOverview: Story = () => - html` -
Menu
- -
Editor
- `; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/index.ts deleted file mode 100644 index e2f4580fb6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './workspace-property.context.js'; -export * from './workspace-property.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.stories.ts deleted file mode 100644 index 1f57c64cad..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property/workspace-property.stories.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Meta, Story } from '@storybook/web-components'; -import type { UmbWorkspacePropertyElement } from './workspace-property.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -import './workspace-property.element.js'; - -export default { - title: 'Components/Entity Property', - component: 'umb-workspace-property', - id: 'umb-workspace-property', -} as Meta; - -export const AAAOverview: Story = () => - html` `; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-split-view/workspace-split-view.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-split-view/workspace-split-view.context.ts index 394a420342..6932dc3a39 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-split-view/workspace-split-view.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-split-view/workspace-split-view.context.ts @@ -1,4 +1,4 @@ -import { UmbVariantContext } from '../variant-context/index.js'; +import { UmbPropertyDatasetContext } from '../../property/property-dataset/index.js'; import { UMB_VARIANT_WORKSPACE_CONTEXT_TOKEN } from '../index.js'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; @@ -12,7 +12,7 @@ export class UmbWorkspaceSplitViewContext extends UmbBaseController { return this.#workspaceContext; } - #variantContext?: UmbVariantContext; + #variantContext?: UmbPropertyDatasetContext; #index = new UmbNumberState(undefined); index = this.#index.asObservable(); @@ -51,7 +51,7 @@ export class UmbWorkspaceSplitViewContext extends UmbBaseController { this.#variantContext?.destroy(); const variantId = UmbVariantId.Create(activeVariantInfo); - this.#variantContext = this.#workspaceContext?.createVariantContext(this, variantId); + this.#variantContext = this.#workspaceContext?.createPropertyDatasetContext(this, variantId); }, '_observeActiveVariant', ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/views/editor/workspace-view-dictionary-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/views/editor/workspace-view-dictionary-editor.element.ts index 2d1007e331..1be03b42d7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/views/editor/workspace-view-dictionary-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/views/editor/workspace-view-dictionary-editor.element.ts @@ -39,14 +39,14 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement { const translation = this._dictionary?.translations?.find((x) => x.isoCode === language.isoCode); - return html` + return html` - `; + `; } #onTextareaChange(e: Event) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts index b1f1d27719..d9f09aac2f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts @@ -14,7 +14,9 @@ describe('UmbDashboardRedirectManagement', () => { expect(element).to.be.instanceOf(UmbDashboardRedirectManagementElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 21b2026c1e..f4d1b837b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -214,7 +214,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { .value=${this.property.name} @input=${this.#onNameChange}> ${this.renderPropertyAlias()} - +

- +

Allow editors to create content of different languages.
- - + +
Allow editors to segment their content.
- - + +
An Element Type is used for content instances in Property Editors, like the Block Editors.
@@ -77,10 +77,10 @@ export class UmbDocumentTypeWorkspaceViewSettingsElement extends UmbLitElement i }} label="Element type"> - + - +
Allow overriding the global history cleanup settings. (TODO: this ui is not working.. )
@@ -92,7 +92,7 @@ export class UmbDocumentTypeWorkspaceViewSettingsElement extends UmbLitElement i Keep latest version per day for X days - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts index dddbdcda73..bcda0f288e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts @@ -42,7 +42,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement render() { return html` - +
${this.localize.term('contentTypeEditor_allowAsRootDescription')}
- - + +
Allow content of the specified types to be created underneath content of this type.
@@ -72,13 +72,13 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement }}"> - + - +
Provides an overview of child content and hides it in the tree.
- + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts index 2989d66a16..915bfa7f80 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts @@ -57,7 +57,7 @@ export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement render() { return html` - +
Choose which templates editors are allowed to use on content of this type
- + `; } @@ -87,10 +87,10 @@ export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement align-items: stretch; } - umb-workspace-property-layout { + umb-property-layout { border-top: 1px solid var(--uui-color-border); } - umb-workspace-property-layout:first-child { + umb-property-layout:first-child { padding-top: 0; border: none; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts index de1bd824d5..c7fa097fac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts @@ -12,7 +12,9 @@ describe('UmbInputDocumentElement', () => { expect(element).to.be.instanceOf(UmbInputDocumentElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts new file mode 100644 index 0000000000..882da08611 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts @@ -0,0 +1,13 @@ +import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; +import type { UmbDocumentPropertyDataContext } from './document-property-dataset-context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const IsDocumentVariantContext = ( + context: UmbPropertyDatasetContext, +): context is UmbDocumentPropertyDataContext => context.getEntityType() === UMB_DOCUMENT_ENTITY_TYPE; + +export const UMB_DOCUMENT_VARIANT_CONTEXT = new UmbContextToken< + UmbPropertyDatasetContext, + UmbDocumentPropertyDataContext +>('UmbVariantContext', undefined, IsDocumentVariantContext); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts similarity index 89% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.ts rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts index 97946d2fab..24e8b55ac2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts @@ -1,14 +1,21 @@ +import { + UMB_PROPERTY_DATASET_CONTEXT, + UmbNameablePropertyDatasetContext, + UmbPropertyDatasetContext, +} from '@umbraco-cms/backoffice/property'; import type { UmbDocumentWorkspaceContext } from '../workspace/index.js'; import { DocumentVariantResponseModel, PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { map } from '@umbraco-cms/backoffice/external/rxjs'; import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; -import { UMB_VARIANT_CONTEXT, UmbVariantContext } from '@umbraco-cms/backoffice/workspace'; -// TODO: This code can be split into a UmbContentTypeVariantContext, leaving just the publishing state and methods to this class. -export class UmbDocumentVariantContext extends UmbBaseController implements UmbVariantContext { +// TODO: This code can be split into a UmbContentTypePropertyDatasetContext, leaving just the publishing state and methods to this class. +export class UmbDocumentPropertyDataContext + extends UmbContextBase + implements UmbPropertyDatasetContext, UmbNameablePropertyDatasetContext +{ #workspace: UmbDocumentWorkspaceContext; #variantId: UmbVariantId; public getVariantId() { @@ -27,7 +34,7 @@ export class UmbDocumentVariantContext extends UmbBaseController implements UmbV // This will actually make it simpler if multiple are watching the same property. // But it will also mean that we wil watch all properties and their structure, for variantID, all the time for all of the properties. - getType(): string { + getEntityType(): string { return this.#workspace.getEntityType(); } getUnique(): string | undefined { @@ -45,7 +52,7 @@ export class UmbDocumentVariantContext extends UmbBaseController implements UmbV constructor(host: UmbControllerHost, workspace: UmbDocumentWorkspaceContext, variantId?: UmbVariantId) { // The controller alias, is a very generic name cause we want only one of these for this controller host. - super(host, 'variantContext'); + super(host, UMB_PROPERTY_DATASET_CONTEXT); this.#workspace = workspace; this.#variantId = variantId ?? UmbVariantId.CreateInvariant(); @@ -57,9 +64,6 @@ export class UmbDocumentVariantContext extends UmbBaseController implements UmbV }, '_observeActiveVariant', ); - - // TODO: Refactor: use the document dataset context token. - this.provideContext(UMB_VARIANT_CONTEXT, this); } #createPropertyVariantId(property: PropertyTypeModelBaseModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.token.ts deleted file mode 100644 index e5ecd6f911..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/variant-context/document-variant-context.token.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; -import type { UmbDocumentVariantContext } from './document-variant-context.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import { UmbVariantContext } from '@umbraco-cms/backoffice/workspace'; - -export const IsDocumentVariantContext = (context: UmbVariantContext): context is UmbDocumentVariantContext => - context.getType() === UMB_DOCUMENT_ENTITY_TYPE; - -export const UMB_DOCUMENT_VARIANT_CONTEXT = new UmbContextToken( - 'UmbVariantContext', - undefined, - IsDocumentVariantContext, -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index 06868e9fd6..ea8d0b4e41 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -1,6 +1,6 @@ import { UmbDocumentRepository } from '../repository/document.repository.js'; import { UmbDocumentTypeDetailRepository } from '../../document-types/repository/detail/document-type-detail.repository.js'; -import { UmbDocumentVariantContext } from '../variant-context/document-variant-context.js'; +import { UmbDocumentPropertyDataContext } from '../property-dataset-context/document-property-dataset-context.js'; import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; import { UmbContentTypePropertyStructureManager } from '@umbraco-cms/backoffice/content-type'; @@ -260,8 +260,8 @@ export class UmbDocumentWorkspaceContext } */ - public createVariantContext(host: UmbControllerHost, variantId: UmbVariantId) { - return new UmbDocumentVariantContext(host, this, variantId); + public createPropertyDatasetContext(host: UmbControllerHost, variantId: UmbVariantId) { + return new UmbDocumentPropertyDataContext(host, this, variantId); } public destroy(): void { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.test.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.test.ts index e2d9219676..e4beabdb58 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.test.ts @@ -13,8 +13,10 @@ describe('UmbDocumentWorkspaceElement', () => { expect(element).to.be.instanceOf(UmbDocumentWorkspaceElement); }); - it('passes the a11y audit', async () => { - // TODO: should we use shadowDom here? - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + // TODO: should we use shadowDom here? + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts index c9ce513c8f..925fdce958 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts @@ -214,7 +214,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement { .value=${this.property.name} @input=${this.#onNameChange}> ${this.renderPropertyAlias()} - +

- +

${this.localize.term('contentTypeEditor_allowAsRootDescription')}
- - + +
Allow content of the specified types to be created underneath content of this type.
@@ -70,13 +70,13 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp }}"> - + - +
Provides an overview of child content and hides it in the tree.
- + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.test.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.test.ts index 9d0e4f8ea9..5f155fbc8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.test.ts @@ -12,7 +12,9 @@ describe('UmbInputMediaElement', () => { expect(element).to.be.instanceOf(UmbInputMediaElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts index 053c223450..acfbdc8235 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts @@ -136,49 +136,35 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement { } #renderEditors() { - return html` + return html` ${this.#renderContentSection()} - + - ${this.#renderMediaSection()} - + ${this.#renderMediaSection()} - + ${this.#renderDocumentTypeSection()} - + - - ${this.#renderMediaTypeSection()} - + ${this.#renderMediaTypeSection()} - - ${this.#renderLanguageSection()} - + ${this.#renderLanguageSection()} - - ${this.#renderDictionarySection()} - + ${this.#renderDictionarySection()} - - ${this.#renderDataTypeSection()} - + ${this.#renderDataTypeSection()} - - ${this.#renderTemplateSection()} - + ${this.#renderTemplateSection()} - + ${this.#renderStylesheetsSection()} - + - - ${this.#renderScriptsSection()} - + ${this.#renderScriptsSection()} - + ${this.#renderPartialViewSection()} - `; + `; } #renderContentSection() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.test.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.test.ts index f0b8176f23..ecb05f39ca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.test.ts @@ -1,3 +1,4 @@ +/* import { expect, fixture, html } from '@open-wc/testing'; import { UmbDashboardPublishedStatusElement } from './dashboard-published-status.element.js'; @@ -14,7 +15,10 @@ describe('UmbDashboardPublishedStatus', () => { expect(element).to.be.instanceOf(UmbDashboardPublishedStatusElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); +*/ diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/settings-welcome/dashboard-settings-welcome.test.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/settings-welcome/dashboard-settings-welcome.test.ts index bed903dd30..0a6ad31866 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/settings-welcome/dashboard-settings-welcome.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/settings-welcome/dashboard-settings-welcome.test.ts @@ -1,3 +1,4 @@ +/* import { expect, fixture, html } from '@open-wc/testing'; import { UmbDashboardSettingsWelcomeElement } from './dashboard-settings-welcome.element.js'; @@ -14,7 +15,10 @@ describe('UmbDashboardSettingsWelcomeElement', () => { expect(element).to.be.instanceOf(UmbDashboardSettingsWelcomeElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); +*/ diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/telemetry/dashboard-telemetry.test.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/telemetry/dashboard-telemetry.test.ts index 14dddb1b8a..fbcef53a98 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/telemetry/dashboard-telemetry.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/telemetry/dashboard-telemetry.test.ts @@ -1,3 +1,4 @@ +/* import { expect, fixture, html } from '@open-wc/testing'; import { UmbDashboardTelemetryElement } from './dashboard-telemetry.element.js'; import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; @@ -13,7 +14,10 @@ describe('UmbDashboardTelemetryElement', () => { expect(element).to.be.instanceOf(UmbDashboardTelemetryElement); }); - it('passes the a11y audit', async () => { - await expect(element).to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); + } }); +*/ diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts index 5cf2a5c060..87bf80b3df 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts @@ -116,7 +116,7 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem render() { return html` - +
html`
${isoCodeError}
`, )}
- + - +
${this._language?.isoCode}
- + - +
- + - language.isoCode !== this._language?.isoCode}> - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts index 323756f826..b39450a01c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts @@ -53,7 +53,7 @@ export class UmbRelationTypeWorkspaceViewRelationTypeElement extends UmbLitEleme render() { return html` - + - - ${this.#renderParentProperty()} - ${this.#renderChildProperty()} - + + ${this.#renderParentProperty()} + ${this.#renderChildProperty()} + - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts index 63b675c1c6..33050a9295 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts @@ -15,7 +15,9 @@ describe('UmbPropertyEditorUITagsStorageTypeElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITagsStorageTypeElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts index 5d47f69c9c..455a1dab21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts @@ -1,7 +1,7 @@ +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import { UmbTagsInputElement } from '../../components/tags-input/tags-input.element.js'; import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -36,7 +36,7 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb constructor() { super(); - this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => { + this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { this.observe(context.variantId, (id) => { if (id && id.culture !== undefined) { this._culture = id.culture; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.test.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.test.ts index 50b0cdc14c..2b36c4b203 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.test.ts @@ -13,7 +13,9 @@ describe('UmbPropertyEditorUITagsElement', () => { expect(element).to.be.instanceOf(UmbPropertyEditorUITagsElement); }); - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); + if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) { + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); + } }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts index a7cdcb9f13..86fc9f3e77 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts @@ -103,15 +103,15 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { return html`
- - - + - - + - + diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts index f85ad54e7f..d63b9ad69c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts @@ -43,30 +43,30 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement { return html`
Assign Access
- - - + - - + - +
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts index b885012635..ae4f4d3af1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts @@ -39,20 +39,20 @@ export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement { #renderEmailProperty() { return html` - + - + `; } #renderUILanguageProperty() { return html` - - + `; } diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/context.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/context.mdx index cb9e6a0b86..b2da374899 100644 --- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/context.mdx +++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/context.mdx @@ -13,9 +13,9 @@ TODO: Extend the description of a workspace (rough notes) - A workspace context knows about its entity type (e.g. content, media, member, etc.) and holds its unique string (e.g.: key). -- Most workspaces contexts hold a draft state of its entity data. It is a copy of the entity data that can be modified at runtime and sent to the server to be saved. +- Most workspace contexts hold a draft state of its entity data. It is a copy of the entity data that can be modified at runtime and sent to the server to be saved. -If a workspace wants to utilize Property Editor UIs, then it must provide a variant context for the property editors. The variant-context is the generic interface between workspace and property editors. See variant contexts for more info. +If a workspace wants to utilize Property Editor UIs, then it must provide a variant context for the property editors. The property-dataset context is the generic interface between workspace and property editors. See variant contexts for more info. TODO: More points and examples: diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 920c1ffb7e..3747bafb49 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -70,6 +70,7 @@ "@umbraco-cms/backoffice/modal": ["src/packages/core/modal"], "@umbraco-cms/backoffice/notification": ["src/packages/core/notification"], "@umbraco-cms/backoffice/picker-input": ["src/packages/core/picker-input"], + "@umbraco-cms/backoffice/property": ["src/packages/core/property"], "@umbraco-cms/backoffice/property-action": ["src/packages/core/property-action"], "@umbraco-cms/backoffice/property-editor": ["src/packages/core/property-editor"], "@umbraco-cms/backoffice/section": ["src/packages/core/section"], diff --git a/src/Umbraco.Web.UI.Client/utils/json-schema/test-package.json b/src/Umbraco.Web.UI.Client/utils/json-schema/test-package.json index 59034cd817..26812fa8b7 100644 --- a/src/Umbraco.Web.UI.Client/utils/json-schema/test-package.json +++ b/src/Umbraco.Web.UI.Client/utils/json-schema/test-package.json @@ -1,9 +1,10 @@ { - "$schema": "../../types/umbraco-package-schema.json", + "$schema": "../../dist-cms/umbraco-package-schema.json", "name": "My Package", "version": "1.0.0", "extensions": [ { + "type": "dashboard", "name": "My Dashboard", "alias": "myDashboard", @@ -11,7 +12,6 @@ "elementName": "my-dashboard", "js": "js/my-dashboard.js", - "type": "dashboard", "meta": { "label": "My Dashboard", "pathname": "my-dashboard" diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs index 7d92da3ec0..91b9dc9e89 100644 --- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs +++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs @@ -16,6 +16,10 @@ export default { rootDir: '.', files: ['./src/**/*.test.ts'], nodeResolve: { exportConditions: mode === 'dev' ? ['development'] : [], preferBuiltins: false, browser: true }, + browsers: [playwrightLauncher({ product: 'chromium' }), playwrightLauncher({ product: 'webkit' })], + coverageConfig: { + reporters: ['lcovonly', 'text-summary'], + }, plugins: [ esbuildPlugin({ ts: true, tsconfig: './tsconfig.json', target: 'auto', json: true }), importMapsPlugin({ @@ -72,6 +76,7 @@ export default { '@umbraco-cms/backoffice/modal': './src/packages/core/modal/index.ts', '@umbraco-cms/backoffice/notification': './src/packages/core/notification/index.ts', '@umbraco-cms/backoffice/picker-input': './src/packages/core/picker-input/index.ts', + '@umbraco-cms/backoffice/property': './src/packages/core/property/index.ts', '@umbraco-cms/backoffice/property-action': './src/packages/core/property-action/index.ts', '@umbraco-cms/backoffice/property-editor': './src/packages/core/property-editor/index.ts', '@umbraco-cms/backoffice/section': './src/packages/core/section/index.ts', @@ -124,11 +129,7 @@ export default { include: ['node_modules/**', 'src/external/**'], }), ], - browsers: [playwrightLauncher({ product: 'chromium' }), playwrightLauncher({ product: 'webkit' })], - coverageConfig: { - reporters: ['lcovonly', 'text-summary'], - }, - testRunnerHtml: (testFramework) => + testRunnerHtml: (testFramework, devMode) => ` @@ -136,6 +137,9 @@ export default { Umbraco + diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.dev.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.dev.config.mjs new file mode 100644 index 0000000000..a486fd1e7c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/web-test-runner.dev.config.mjs @@ -0,0 +1,11 @@ +import defaultConfig from './web-test-runner.config.mjs'; + +/** @type {import('@web/dev-server').DevServerConfig} */ +export default { + ...defaultConfig, + // Only test with the first browser option ( to keep test times fast ) + browsers: [defaultConfig.browsers[0]], + testRunnerHtml: (testFramework) => { + return defaultConfig.testRunnerHtml(testFramework, true); + }, +};