added node properties

src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts

@@ -2,6 +2,10 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 
+import '../properties/node-property.element.ts';
+import '../properties/property-editor-text.element.ts';
+import '../properties/property-editor-textarea.element.ts';
+
 @customElement('umb-node-editor')
 class UmbNodeEditor extends LitElement {
   static styles = [
@@ -68,10 +72,32 @@ class UmbNodeEditor extends LitElement {
         background-color: var(--uui-color-surface);
         box-sizing: border-box;
       }
+
+      .property {
+        display: grid;
+        grid-template-columns: 200px 600px;
+        gap: 32px;
+      }
+      .property > .property-label > p {
+        color: var(--uui-color-text-alt);
+      }
+      .property uui-input,
+      .property uui-textarea {
+        width: 100%;
+      }
+
+      uui-box hr {
+        margin-bottom: var(--uui-size-6);
+      }
+
+      hr {
+        border: 0;
+        border-top: 1px solid var(--uui-color-border-alt);
+      }
     `,
   ];
-  
-  render () {
+
+  render() {
     return html`
       <div id="node-editor">
         <div id="node-editor-top">
@@ -82,14 +108,24 @@ class UmbNodeEditor extends LitElement {
             <uui-tab disabled>Actions</uui-tab>
           </uui-tab-group>
         </div>
-        <uui-scroll-container id="node-editor-content"></uui-scroll-container>
+        <uui-scroll-container id="node-editor-content">
+          <uui-box>
+            <umb-node-property label="Text string label" description="This is the a text string property">
+              <umb-property-editor-text></umb-property-editor-text>
+            </umb-node-property>
+            <hr />
+            <umb-node-property label="Textarea label" description="this is a textarea property">
+              <umb-property-editor-textarea></umb-property-editor-textarea>
+            </umb-node-property>
+          </uui-box>
+        </uui-scroll-container>
         <div id="node-editor-bottom">
           <uui-button>Save and preview</uui-button>
           <uui-button look="secondary">Save</uui-button>
           <uui-button look="primary" color="positive">Save and publish</uui-button>
         </div>
       </div>
-    `
+    `;
   }
 }
 
@@ -97,4 +133,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'umb-node-editor': UmbNodeEditor;
   }
-}
+}

src/Umbraco.Web.UI.Client/src/properties/node-property.element.ts

@@ -0,0 +1,62 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('umb-node-property')
+class UmbNodeProperty extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .property {
+        display: grid;
+        grid-template-columns: 200px 600px;
+        gap: 32px;
+      }
+      .property > .property-label > p {
+        color: var(--uui-color-text-alt);
+      }
+      .property uui-input,
+      .property uui-textarea {
+        width: 100%;
+      }
+
+      uui-box hr {
+        margin-bottom: var(--uui-size-6);
+      }
+
+      hr {
+        border: 0;
+        border-top: 1px solid var(--uui-color-border-alt);
+      }
+    `,
+  ];
+
+  @property()
+  label = '';
+
+  @property()
+  description = '';
+
+  render() {
+    return html`
+      <div class="property">
+        <div class="header">
+          <uui-label>${this.label}</uui-label>
+          <p>${this.description}</p>
+        </div>
+        <div class="editor">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-node-property': UmbNodeProperty;
+  }
+}

src/Umbraco.Web.UI.Client/src/properties/property-editor-text.element.ts

@@ -0,0 +1,28 @@
+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-text')
+class UmbPropertyEditorText extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      uui-input {
+        width: 100%;
+      }
+    `,
+  ];
+
+  @property()
+  value = '';
+
+  render() {
+    return html`<uui-input .value=${this.value} type="text"></uui-input>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-property-editor-text': UmbPropertyEditorText;
+  }
+}

src/Umbraco.Web.UI.Client/src/properties/property-editor-textarea.element.ts

@@ -0,0 +1,28 @@
+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-textarea')
+class UmbPropertyEditorTextarea extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      uui-textarea {
+        width: 100%;
+      }
+    `,
+  ];
+
+  @property()
+  value = '';
+
+  render() {
+    return html`<uui-textarea .value=${this.value}></uui-textarea>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-property-editor-textarea': UmbPropertyEditorTextarea;
+  }
+}