Merge remote-tracking branch 'origin/main' into feature/editor-views

# Conflicts:
#	src/index.ts

src/Umbraco.Web.UI.Client/src/backoffice/backoffice-header-tools.element.ts

@@ -29,7 +29,7 @@ export class UmbBackofficeHeaderTools extends LitElement {
           <uui-icon name="favorite"></uui-icon>
         </uui-button>
         <uui-button look="primary" style="font-size: 14px;" label="User" compact>
-          <uui-avatar name="Mads Rasmussen"></uui-avatar>
+          <uui-avatar name="Mr Rabbit"></uui-avatar>
         </uui-button>
       </div>
     `;

src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts

@@ -25,6 +25,12 @@ export class UmbDataTypeStore {
         name: 'External Test (DataType)',
         propertyEditorUIAlias: 'External.PropertyEditorUI.Test',
       },
+      {
+        id: 1247,
+        key: 'dt-4',
+        name: 'Context Example (DataType)',
+        propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContextExample',
+      },
     ]);
   }
 

src/Umbraco.Web.UI.Client/src/extensions/property-editors/external-property-editor-test.js

@@ -4,7 +4,7 @@ export default class ExternalPropertyEditorTest extends HTMLElement {
         super();
         this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
         const wrapper = document.createElement('span');
-        wrapper.textContent = 'hello world';
+        wrapper.textContent = 'Example of a pure JS Property Editor';
         this.shadowRoot.append(wrapper);
     }
 }

src/Umbraco.Web.UI.Client/src/extensions/property-editors/property-editor-context-example.element.ts

@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbNotificationService } from '../../core/service/notifications.store';
+
+@customElement('umb-property-editor-context-example')
+export default class UmbPropertyEditorContextExample extends UmbContextConsumerMixin(LitElement) {
+  
+  private _notificationService?: UmbNotificationService;
+
+  constructor() {
+    super();
+    // TODO: how to deal with single consumption, or situation where you dont want to store the service..
+    this.consumeContext('umbNotificationService', (service: UmbNotificationService) => {
+      this._notificationService = service;
+    })
+  }
+  private _onClick = () => {
+    this._notificationService?.peek('Hello from property editor');
+  }
+
+  render() {
+    return html`<uui-button look='secondary' label="Click to notify" @click=${this._onClick}></uui-button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-property-editor-context-example': UmbPropertyEditorContextExample;
+  }
+}

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

@@ -1,3 +1,4 @@
+import 'element-internals-polyfill';
 import { worker } from './mocks/browser';
 import { UmbExtensionRegistry, UmbExtensionManifest, UmbExtensionManifestCore } from './core/extension';
 
@@ -99,7 +100,7 @@ const registerInternalManifests = async () => {
       alias: 'External.PropertyEditorUI.Test',
       name: 'Text',
       //elementName: 'external-property-editor-test', //Gets the element name from JS file.
-      js: '/src/property-editors/external-property-editor-test.js',
+      js: '/src/extensions/property-editors/external-property-editor-test.js',
       meta: {
         icon: 'document',
         group: 'common',
@@ -128,6 +129,16 @@ const registerInternalManifests = async () => {
         group: 'common',
       },
     },
+    {
+      type: 'propertyEditorUI',
+      alias: 'Umb.PropertyEditorUI.ContextExample',
+      name: 'Context Example',
+      js: () => import('./extensions/property-editors/property-editor-context-example.element'),
+      meta: {
+        icon: 'document',
+        group: 'common',
+      },
+    },
     {
       type: 'editorView',
       alias: 'Umb.EditorView.ContentEdit',
@@ -150,8 +161,8 @@ const registerInternalManifests = async () => {
         pathname: 'info',
         weight: 90,
         icon: 'info',
-      },
-    },
+      }
+    }
   ];
 
   manifests.forEach((manifest: UmbExtensionManifestCore) =>

src/Umbraco.Web.UI.Client/src/mocks/data/content.data.ts

@@ -48,13 +48,6 @@ export const data: Array<DocumentNode> = [
         dataTypeKey: 'dt-2',
         tempValue: 'Tex areaaaa 1',
       },
-      {
-        alias: 'myExternalEditor',
-        label: 'External label 1',
-        description: 'This is the a external property',
-        dataTypeKey: 'dt-3',
-        tempValue: 'Tex lkasdfkljdfsa 1',
-      },
     ],
     /*
     // Concept for stored values, better approach for variants, separating data from structure/configuration
@@ -109,6 +102,20 @@ export const data: Array<DocumentNode> = [
         dataTypeKey: 'dt-2',
         tempValue: 'Tex areaaaa 2',
       },
+      {
+        alias: 'myExternalEditor',
+        label: 'External label 1',
+        description: 'This is the a external property',
+        dataTypeKey: 'dt-3',
+        tempValue: 'Tex lkasdfkljdfsa 1',
+      },
+      {
+        alias: 'myContextExampleEditor',
+        label: 'Context example label 1',
+        description: 'This is the a example property',
+        dataTypeKey: 'dt-4',
+        tempValue: '',
+      },
     ],
   },
 ];