From ec7059ee263e681c0880085dc76e2baa534ff14f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 16 Feb 2023 13:17:54 +0100
Subject: [PATCH] add dropdown element to supply styles to the uui popover
 element

---
 .../components/dropdown/dropdown.element.ts   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
new file mode 100644
index 0000000000..8f6ce7868a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
@@ -0,0 +1,55 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-dropdown')
+export class UmbDropdownElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			#container {
+				display: inline-block;
+			}
+
+			#dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				width: 500px;
+			}
+		`,
+	];
+
+	@property({ type: Boolean, reflect: true })
+	open = false;
+
+	render() {
+		return html`
+			<uui-popover id="container" .open=${this.open}>
+				<slot name="trigger" slot="trigger"></slot>
+				${this.open ? this.#renderDropdown() : nothing}
+			</uui-popover>
+		`;
+	}
+
+	#renderDropdown() {
+		return html`
+			<div id="dropdown" slot="popover">
+				<slot name="dropdown"></slot>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-dropdown': UmbDropdownElement;
+	}
+}