From 0debb6a8fb4885c07698d264621587a2872f46ca Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:36:24 +0200
Subject: [PATCH] add a context-provider element to inject selected contexts in
 stories

---
 .../core/context/context-provider.element.ts  | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.ts b/src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.ts
new file mode 100644
index 0000000000..172c8aa476
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.ts
@@ -0,0 +1,36 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmbContextProviderMixin } from './context-provider.mixin';
+
+@customElement('umb-context-provider')
+export class UmbContextProviderElement extends UmbContextProviderMixin(LitElement) {
+	/**
+	 * The value to provide to the context.
+	 * @required
+	 */
+	@property({ type: Object })
+	value!: unknown;
+
+	/**
+	 * The key to provide to the context.
+	 * @required
+	 */
+	@property({ type: String })
+	key!: string;
+
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.key) {
+			throw new Error('The key property is required.');
+		}
+		if (!this.value) {
+			throw new Error('The value property is required.');
+		}
+		this.provideContext(this.key, this.value);
+	}
+
+	render() {
+		return html`<slot></slot>`;
+	}
+}