From f2992a1e8ae2463dbbf4c92ff2134ad3ef5786d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Tue, 6 Sep 2022 11:04:10 +0200
Subject: [PATCH] added file for icon picker property editor

---
 .../property-editor-icon-picker.element.ts    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
new file mode 100644
index 0000000000..b4f7d70a05
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
@@ -0,0 +1,41 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbModalService } from '../../core/services/modal';
+
+// TODO: remove these imports when they are part of UUI
+import '@umbraco-ui/uui-modal';
+import '@umbraco-ui/uui-modal-sidebar';
+import '@umbraco-ui/uui-modal-container';
+import '@umbraco-ui/uui-modal-dialog';
+
+@customElement('umb-property-editor-icon-picker')
+class UmbPropertyEditorIconPicker extends UmbContextConsumerMixin(LitElement) {
+	private _modalService?: UmbModalService;
+
+	constructor() {
+		super();
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
+	}
+
+	private _openModal() {
+		this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
+	}
+
+	render() {
+		return html`
+			<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
+				Pick an icon
+			</uui-button>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker;
+	}
+}