From 2f88bfda4d777e2e17940d1f6f1d86b79a0b45b6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 22 Sep 2022 12:50:28 +0200
Subject: [PATCH] register number property editor ui

---
 .../number/property-editor-number.element.ts  | 35 +++++++++++++++++++
 .../number/property-editor-number.stories.ts  | 15 ++++++++
 .../src/temp-internal-manifests.ts            | 11 ++++++
 3 files changed, 61 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts
new file mode 100644
index 0000000000..2bff931e5c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts
@@ -0,0 +1,35 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('umb-property-editor-number')
+export class UmbPropertyEditorNumberElement extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
+
+	@property()
+	value = '';
+
+	private onInput(e: InputEvent) {
+		this.value = (e.target as HTMLInputElement).value;
+		this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true }));
+	}
+
+	render() {
+		return html`<uui-input .value=${this.value} type="number" @input=${this.onInput}></uui-input>`;
+	}
+}
+
+export default UmbPropertyEditorNumberElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-number': UmbPropertyEditorNumberElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts
new file mode 100644
index 0000000000..d9d2915599
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorNumberElement } from './property-editor-number.element';
+import './property-editor-number.element';
+
+export default {
+	title: 'Property Editors/Number',
+	component: 'umb-property-editor-number',
+	id: 'umb-property-editor-number',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorNumberElement> = () =>
+	html` <umb-property-editor-number></umb-property-editor-number>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index 70d4f03098..dc891b2c32 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -164,6 +164,17 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 			propertyEditors: ['Umbraco.Custom'],
 		},
 	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Number',
+		name: 'Property Editor Number',
+		loader: () => import('./backoffice/property-editors/number/property-editor-number.element'),
+		meta: {
+			icon: 'umb:autofill',
+			group: 'Common',
+			propertyEditors: ['Umbraco.Integer'],
+		},
+	},
 	{
 		type: 'editorView',
 		alias: 'Umb.EditorView.Content.Edit',