clear property value from property action - props and events

src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts

@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui';
 import { CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../core/extension';
+import type { UmbPropertyActionElement } from '../property-actions/property-action-element.model';
 
 @customElement('umb-node-property-action')
 export class UmbNodePropertyAction extends LitElement {
@@ -19,14 +20,21 @@ export class UmbNodePropertyAction extends LitElement {
     this._createElement();
   }
 
+  // TODO: we need to investigate context api vs values props and events
+  @property()
+  public value?: string;
+
   @state()
-  private _element?: HTMLElement;
+  private _element?: UmbPropertyActionElement;
 
   private async _createElement () {
     if (!this.propertyAction) return;
 
     try {
-      this._element = await createExtensionElement(this.propertyAction);
+      this._element = await createExtensionElement(this.propertyAction) as UmbPropertyActionElement | undefined;
+      if (!this._element) return;
+
+      this._element.value = this.value;
     } catch (error) {
       // TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
     }

src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts

@@ -42,6 +42,10 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
   @property()
   public propertyEditorUIAlias = '';
 
+  // TODO: we need to investigate context api vs values props and events
+  @property()
+  public value?: string;
+
   @state()
   private _actions: Array<UmbExtensionManifestPropertyAction> = [];
 
@@ -106,7 +110,7 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
           <div slot="popover" id="dropdown">
             ${this._actions.map(
               action => html`
-                <umb-node-property-action .propertyAction=${action}></umb-node-property-action>
+                <umb-node-property-action .propertyAction=${action} .value="${this.value}"></umb-node-property-action>
               `
             )}
           </div>

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

@@ -58,10 +58,14 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
       this._extensionRegistry = _instance;
       this._useDataType();
     });
-
     // TODO: solution to know when both contexts are available
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('property-editor-change', this._onPropertyEditorChange as any as EventListener);
+  }
+
   // TODO: use subscribtion, rename to _useDataType:
   private _useDataType() {
     this._dataTypeSubscription?.unsubscribe();
@@ -99,17 +103,7 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
         this._element = el;
 
         // TODO: Set/Parse Data-Type-UI-configuration
-
-        if (oldValue) {
-          oldValue.removeEventListener('property-editor-change', this._onPropertyEditorChange as any as EventListener);
-        }
-
-        /* NYT lav callback: */
         if (this._element) {
-          this._element.addEventListener(
-            'property-editor-change',
-            this._onPropertyEditorChange as any as EventListener
-          );
           this._element.value = this.value; // Be aware its duplicated code
         }
         this.requestUpdate('element', oldValue);
@@ -120,9 +114,9 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
   }
 
   private _onPropertyEditorChange = (e: CustomEvent) => {
-    this.value = (e.target as any).value;
+    const target = e.composedPath()[0] as any;
+    this.value = target.value;
     this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true }));
-    // No need for this event to leave scope.
     e.stopPropagation();
   };
 
@@ -144,7 +138,7 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
   }
 
   private _renderPropertyActions () {
-    return html`${ this._dataType ? html`<umb-node-property-actions .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}"></umb-node-property-actions>`: '' }`;
+    return html`${ this._dataType ? html`<umb-node-property-actions .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}" .value="${this.value}"></umb-node-property-actions>`: '' }`;
   }
 
   render() {

src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts

@@ -1,12 +1,7 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbNotificationService } from '../../core/services/notification.service';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface UmbPropertyActionElement {
-  value: string;
-}
+import { UmbPropertyActionElement } from './property-action-element.model';
 
 @customElement('umb-property-action-clear')
 export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement {
@@ -14,26 +9,26 @@ export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitE
   @property()
   value = '';
 
-  private _notificationService?: UmbNotificationService;
-  
   constructor () {
     super();
 
+    // TODO implement a property context
     this.consumeContext('umbProperty', (property) => {
       console.log('PROPERTY', property);
     });
-
-    this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => {
-      this._notificationService = notificationService;
-    });
   }
 
   private _handleLabelClick () {
-    this._notificationService?.peek('Clear value');
+    this._clearValue();
     // TODO: how do we want to close the menu? Testing an event based approach
     this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
   }
 
+  private _clearValue () {
+    this.value = '';
+    this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true }));
+  }
+
   render() {
     return html`
       <uui-menu-item label="Clear" @click-label="${this._handleLabelClick}">

src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts

@@ -2,11 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../core/context';
 import { UmbNotificationService } from '../../core/services/notification.service';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface UmbPropertyActionElement {
-  value: string;
-}
+import type { UmbPropertyActionElement } from './property-action-element.model';
 
 @customElement('umb-property-action-copy')
 export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement {
@@ -19,6 +15,7 @@ export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitEl
   constructor () {
     super();
 
+    // TODO implement a property context
     this.consumeContext('umbProperty', (property) => {
       console.log('PROPERTY', property);
     });

src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts

@@ -0,0 +1,4 @@
+// TODO: Where should things like these live?
+export interface UmbPropertyActionElement extends HTMLElement {
+  value?: string;
+}