basic-variant element fire change event

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts

@@ -21,6 +21,7 @@ export class UmbBasicVariantContext
 	name = this.#name.asObservable();
 
 	#values = new UmbArrayState<UmbPropertyValueData>([], (x) => x.alias);
+	public readonly values = this.#values.asObservable();
 	private _entityType!: string;
 	private _unique!: string;
 
@@ -63,10 +64,10 @@ export class UmbBasicVariantContext
 		this.#values.appendOne({ alias, value });
 	}
 
-	getPropertyMap() {
+	getValues() {
 		return this.#values.getValue();
 	}
-	setPropertyMap(map: Array<UmbPropertyValueData>) {
+	setValues(map: Array<UmbPropertyValueData>) {
 		this.#values.next(map);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant.element.ts

@@ -2,17 +2,18 @@ import type { UmbPropertyValueData } from '../types/property-value-data.type.js'
 import { UmbBasicVariantContext } from './basic-variant-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';
 
 @customElement('umb-basic-variant')
 export class UmbBasicVariantElement extends UmbLitElement {
-	public readonly context = new UmbBasicVariantContext(this);
+	public readonly context: UmbBasicVariantContext;
 
 	@property({ attribute: false })
 	public get value(): Array<UmbPropertyValueData> {
-		return this.context.getPropertyMap();
+		return this.context.getValues();
 	}
 	public set value(value: Array<UmbPropertyValueData>) {
-		this.context.setPropertyMap(value);
+		this.context.setValues(value);
 	}
 
 	@property({ attribute: false })
@@ -23,6 +24,14 @@ export class UmbBasicVariantElement extends UmbLitElement {
 		this.context.setName(value);
 	}
 
+	constructor() {
+		super();
+		this.context = new UmbBasicVariantContext(this);
+		this.observe(this.context.values, () => {
+			this.dispatchEvent(new UmbChangeEvent());
+		});
+	}
+
 	render() {
 		return html`<slot></slot>`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant.test.ts

@@ -1,8 +1,9 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, oneEvent } from '@open-wc/testing';
 import type { UmbPropertyValueData } from '../types/property-value-data.type.js';
 import { UMB_VARIANT_CONTEXT } from './variant-context.token.js';
 import { UmbBasicVariantElement } from './basic-variant.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')
@@ -28,6 +29,7 @@ export class UmbTestPropertyEditorElement extends UmbElementMixin(LitElement) {
 	}
 	setValue(value: string) {
 		if (this._alias) {
+			this.dispatchEvent(new UmbChangeEvent());
 			this.#variantContext?.setPropertyValue(this._alias, value);
 		}
 	}
@@ -93,8 +95,20 @@ describe('UmbBasicVariantElement', () => {
 
 		it('property editor sets value on context', () => {
 			propertyEditor.setValue('testValue2');
-			expect(variantElement.context.getPropertyMap()[0].alias).to.equal('testAlias');
-			expect(variantElement.context.getPropertyMap()[0].value).to.equal('testValue2');
+			expect(variantElement.context.getValues()[0].alias).to.equal('testAlias');
+			expect(variantElement.context.getValues()[0].value).to.equal('testValue2');
+		});
+
+		it('variant element fires change event', async () => {
+			const listener = oneEvent(variantElement, UmbChangeEvent.TYPE);
+
+			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(variantElement);
 		});
 	});
 });