Introduce Variant Context

src/Umbraco.Web.UI.Client/src/packages/content/content/property-dataset-context/element-property-dataset.context.ts

@@ -12,7 +12,7 @@ import {
 	createObservablePart,
 	mergeObservables,
 } from '@umbraco-cms/backoffice/observable-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantContext, UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
 
@@ -47,6 +47,8 @@ export abstract class UmbElementPropertyDatasetContext<
 	protected _readOnly = new UmbBooleanState(false);
 	public readOnly = this._readOnly.asObservable();
 
+	#variantContext = new UmbVariantContext(this);
+
 	getEntityType(): string {
 		return this._dataOwner.getEntityType();
 	}
@@ -64,6 +66,7 @@ export abstract class UmbElementPropertyDatasetContext<
 		super(host, UMB_PROPERTY_DATASET_CONTEXT);
 		this._dataOwner = dataOwner;
 		this.#variantId = variantId ?? UmbVariantId.CreateInvariant();
+		this.#variantContext.setVariantId(this.#variantId);
 
 		this.#propertyVariantIdPromise = new Promise((resolve) => {
 			this.#propertyVariantIdPromiseResolver = resolve as any;

src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts

@@ -5,7 +5,7 @@ import type { UmbNameablePropertyDatasetContext } from './nameable-property-data
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbArrayState, UmbBooleanState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantContext, UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 /**
  * A base property dataset context implementation.
@@ -32,26 +32,34 @@ export class UmbPropertyDatasetContextBase
 	#readOnly = new UmbBooleanState(false);
 	public readOnly = this.#readOnly.asObservable();
 
+	#variantId: UmbVariantId = UmbVariantId.CreateInvariant();
+	#variantContext = new UmbVariantContext(this);
+
 	getEntityType() {
 		return this._entityType;
 	}
+
 	getUnique() {
 		return this._unique;
 	}
+
 	getName() {
 		return this.#name.getValue();
 	}
+
 	setName(name: string | undefined) {
 		this.#name.setValue(name);
 	}
+
 	getVariantId() {
-		return UmbVariantId.CreateInvariant();
+		return this.#variantId;
 	}
 	// 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);
+		this.#variantContext.setVariantId(this.getVariantId());
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/packages/core/variant/constants.ts

@@ -0,0 +1 @@
+export * from './context/constants.js';

src/Umbraco.Web.UI.Client/src/packages/core/variant/context/constants.ts

@@ -0,0 +1 @@
+export { UMB_VARIANT_CONTEXT } from './variant.context.token.js';

src/Umbraco.Web.UI.Client/src/packages/core/variant/context/index.ts

@@ -0,0 +1 @@
+export { UmbVariantContext } from './variant.context.js';

src/Umbraco.Web.UI.Client/src/packages/core/variant/context/variant.context.token.ts

@@ -0,0 +1,4 @@
+import type { UmbVariantContext } from './variant.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_VARIANT_CONTEXT = new UmbContextToken<UmbVariantContext>('UmbVariantContext');

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

@@ -0,0 +1,110 @@
+import { UmbVariantId } from '../variant-id.class.js';
+import { UMB_VARIANT_CONTEXT } from './variant.context.token.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbClassState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+
+/**
+ * A context for the current variant state.
+ * @class UmbVariantContext
+ * @augments {UmbContextBase}
+ * @implements {UmbVariantContext}
+ */
+export class UmbVariantContext extends UmbContextBase {
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
+	public readonly variantId = this.#variantId.asObservable();
+	public readonly culture = this.#variantId.asObservablePart((x) => x?.culture);
+	public readonly segment = this.#variantId.asObservablePart((x) => x?.segment);
+
+	#fallbackCulture = new UmbStringState<string | null | undefined>(undefined);
+	public fallbackCulture = this.#fallbackCulture.asObservable();
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_VARIANT_CONTEXT);
+
+		this.consumeContext(UMB_VARIANT_CONTEXT, (context) => {
+			this.observe(
+				context?.fallbackCulture,
+				(fallbackCulture) => {
+					if (!fallbackCulture) return;
+					this.setFallbackCulture(fallbackCulture);
+				},
+				'observeFallbackCulture',
+			);
+		}).skipHost();
+	}
+
+	/**
+	 * Sets the variant id state
+	 * @param {UmbVariantId | undefined} variantId - The variant to set
+	 * @memberof UmbVariantContext
+	 */
+	async setVariantId(variantId: UmbVariantId | undefined): Promise<void> {
+		this.#variantId.setValue(variantId);
+	}
+
+	/**
+	 * Gets variant state
+	 * @returns {Promise<UmbVariantId | undefined>} - The variant state
+	 * @memberof UmbVariantContext
+	 */
+	async getVariantId(): Promise<UmbVariantId | undefined> {
+		return this.#variantId.getValue();
+	}
+
+	/**
+	 * Gets the culture state
+	 * @returns {(Promise<string | null | undefined>)} - The culture state
+	 * @memberof UmbVariantContext
+	 */
+	async getCulture(): Promise<string | null | undefined> {
+		return this.#variantId.getValue()?.culture;
+	}
+
+	/**
+	 * Sets the variant culture state
+	 * @param {string | undefined} culture - The culture to set
+	 * @memberof UmbVariantContext
+	 */
+	async setCulture(culture: string | null): Promise<void> {
+		const variantId = new UmbVariantId(culture, this.#variantId.getValue()?.segment);
+		this.#variantId.setValue(variantId);
+	}
+
+	/**
+	 * Gets the variant segment state
+	 * @returns {(Promise<string | null | undefined>)} - The segment state
+	 * @memberof UmbVariantContext
+	 */
+	async getSegment(): Promise<string | null | undefined> {
+		return this.#variantId.getValue()?.segment;
+	}
+
+	/**
+	 * Sets the variant segment state
+	 * @param {string | undefined} segment - The segment to set
+	 * @memberof UmbVariantContext
+	 */
+	async setSegment(segment: string | null): Promise<void> {
+		const variantId = new UmbVariantId(this.#variantId.getValue()?.culture, segment);
+		this.#variantId.setValue(variantId);
+	}
+
+	/**
+	 * Gets the fallback culture state
+	 * @returns {(Promise<string | null | undefined>)} - The fallback culture state
+	 * @memberof UmbVariantContext
+	 */
+	async getFallbackCulture(): Promise<string | null | undefined> {
+		return this.#fallbackCulture.getValue();
+	}
+
+	/**
+	 * Sets the fallback culture state
+	 * @param {string | undefined} culture - The fallback culture to set
+	 * @memberof UmbVariantContext
+	 */
+	async setFallbackCulture(culture: string | null): Promise<void> {
+		this.#fallbackCulture.setValue(culture);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/variant/index.ts

@@ -1,3 +1,5 @@
+export * from './constants.js';
+export * from './context/index.js';
 export * from './variant-id.class.js';
 export * from './variant-object-compare.function.js';
 

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts

@@ -7,7 +7,7 @@ import type {
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantContext, UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UmbBooleanState, type Observable } from '@umbraco-cms/backoffice/observable-api';
 
 /**
@@ -23,6 +23,7 @@ export class UmbInvariantWorkspacePropertyDatasetContext<
 	public readOnly = this.#readOnly.asObservable();
 
 	#workspace: WorkspaceType;
+	#variantContext = new UmbVariantContext(this);
 
 	name;
 
@@ -49,6 +50,7 @@ export class UmbInvariantWorkspacePropertyDatasetContext<
 		this.#workspace = workspace;
 
 		this.name = this.#workspace.name;
+		this.#variantContext.setVariantId(this.getVariantId());
 	}
 
 	get properties(): Observable<Array<UmbPropertyValueData> | undefined> {