umb-editor-property-layout

src/Umbraco.Web.UI.Client/src/app.ts

@@ -11,7 +11,8 @@ import { UmbNodeStore } from './core/stores/node.store';
 import { UmbDataTypeStore } from './core/stores/data-type.store';
 
 // Load these in the correct components
-import './editors/node-editor/node-editor-layout.element';
+import './editors/editor-layout.element';
+import './editors/editor-property-layout.element';
 import './editors/node-editor/node-property-data-type.element';
 import './editors/node-editor/node-property.element';
 

src/Umbraco.Web.UI.Client/src/editors/editor-layout.element.ts

@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 
-@customElement('umb-node-editor-layout')
-class UmbNodeEditorLayout extends LitElement {
+@customElement('umb-editor-layout')
+class UmbEditorLayout extends LitElement {
   static styles = [
     UUITextStyles,
     css`
@@ -13,7 +13,7 @@ class UmbNodeEditorLayout extends LitElement {
         height: 100%;
       }
 
-      #node-editor {
+      #editor-frame {
         background-color: var(--uui-color-background);
         width: 100%;
         height: 100%;
@@ -57,7 +57,7 @@ class UmbNodeEditorLayout extends LitElement {
 
   render() {
     return html`
-      <div id="node-editor">
+      <div id="editor-frame">
         <div id="header">
           <slot name="name"></slot>
           <slot name="apps"></slot>
@@ -76,6 +76,6 @@ class UmbNodeEditorLayout extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'umb-node-editor-layout': UmbNodeEditorLayout;
+    'umb-editor-layout': UmbEditorLayout;
   }
 }

src/Umbraco.Web.UI.Client/src/editors/editor-property-layout.element.ts

@@ -0,0 +1,32 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-editor-property-layout')
+class UmbEditorPropertyLayout extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-columns: 200px 600px;
+        gap: 32px;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <slot name="header" class="header">
+      </slot>
+      <slot name="editor" class="editor">
+      </slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-editor-property-layout': UmbEditorPropertyLayout;
+  }
+}

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

@@ -10,18 +10,10 @@ class UmbNodeProperty extends LitElement {
       :host {
         display: block;
       }
-      .property {
-        display: grid;
-        grid-template-columns: 200px 600px;
-        gap: 32px;
-      }
-      .property > .property-label > p {
+
+      p {
         color: var(--uui-color-text-alt);
       }
-      .property uui-input,
-      .property uui-textarea {
-        width: 100%;
-      }
     `,
   ];
 
@@ -41,18 +33,18 @@ class UmbNodeProperty extends LitElement {
 
   render() {
     return html`
-      <div class="property">
-        <div class="header">
+      <umb-editor-property-layout>
+        <div slot="header">
           <uui-label>${this.property.label}</uui-label>
           <p>${this.property.description}</p>
         </div>
-        <div class="editor">
+        <div slot="editor">
           <umb-node-property-data-type
             .dataTypeKey=${this.property.dataTypeKey}
             .value=${this.value}
             @property-data-type-value-change=${this._onPropertyDataTypeChange}></umb-node-property-data-type>
         </div>
-      </div>
+      </umb-editor-property-layout>
     `;
   }
 }

src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts

@@ -108,7 +108,7 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
 
   render() {
     return html`
-      <umb-node-editor-layout>
+      <umb-editor-layout>
         <uui-input slot="name" .value="${this._node?.name}"></uui-input>
         <uui-tab-group slot="apps">
           <uui-tab label="Content" active></uui-tab>
@@ -139,7 +139,7 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
             color="positive"
             label="Save and publish"></uui-button>
         </div>
-      </umb-node-editor-layout>
+      </umb-editor-layout>
     `;
   }
 }