From 6eaca3b95a5e08ce8ca1d5dd703021fda1fd5149 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 13 Apr 2023 14:59:42 +0200
Subject: [PATCH] textbox

---
 .../property-editor-ui-text-box.element.ts    | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
index 6b90143ecd..9b82d32bbf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
@@ -1,18 +1,29 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-property-editor-ui-text-box')
 export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
-
-
 	@property()
 	value = '';
 
+	@state()
+	private _type = 'text';
+
+	@state()
+	private _maxChars?: number;
+
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: Array<DataTypePropertyPresentationModel>) {
+		const inputType = config.find((x) => x.alias === 'inputType');
+		if (inputType) this._type = inputType.value;
+
+		const maxChars = config.find((x) => x.alias === 'maxChars');
+		if (maxChars) this._maxChars = maxChars.value;
+	}
 
 	private onInput(e: InputEvent) {
 		this.value = (e.target as HTMLInputElement).value;
@@ -20,7 +31,11 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
 	}
 
 	render() {
-		return html`<uui-input .value=${this.value} type="text" @input=${this.onInput}></uui-input>`;
+		return html`<uui-input
+			.value=${this.value}
+			type="${this._type}"
+			maxlength="${ifDefined(this._maxChars)}"
+			@input=${this.onInput}></uui-input>`;
 	}
 
 	static styles = [