render icons + register clear property action

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

@@ -0,0 +1,47 @@
+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;
+}
+
+@customElement('umb-property-action-clear')
+export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement {
+  
+  @property()
+  value = '';
+
+  private _notificationService?: UmbNotificationService;
+  
+  constructor () {
+    super();
+
+    this.consumeContext('umbProperty', (property) => {
+      console.log('PROPERTY', property);
+    });
+
+    this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => {
+      this._notificationService = notificationService;
+    });
+  }
+
+  private _handleLabelClick () {
+    this._notificationService?.peek('Clear value');
+  }
+
+  render() {
+    return html`
+      <uui-menu-item label="Clear" @click-label="${this._handleLabelClick}">
+        <uui-icon slot="icon" name="delete"></uui-icon>
+      </uui-menu-item>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-property-action-clear': UmbPropertyActionClear;
+  }
+}

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

@@ -33,7 +33,10 @@ export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitEl
   }
 
   render() {
-    return html`<uui-menu-item label="Copy" @click-label="${this._handleLabelClick}"></uui-menu-item>`;
+    return html`
+      <uui-menu-item label="Copy" @click-label="${this._handleLabelClick}">
+        <uui-icon slot="icon" name="copy"></uui-icon>
+      </uui-menu-item>`;
   }
 }
 

src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts

@@ -119,7 +119,17 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
     elementName: 'umb-property-action-copy',
     js: () => import('./backoffice/property-actions/property-action-copy.element'),
     meta: {
-      propertyEditors: ['Umb.PropertyEditorUI.Text'],
+      propertyEditors: ['Umb.PropertyEditorUI.Text']
+    }
+  },
+  {
+    type: 'propertyAction',
+    alias: 'Umb.PropertyAction.Clear',
+    name: 'Clear',
+    elementName: 'umb-property-action-clear',
+    js: () => import('./backoffice/property-actions/property-action-clear.element'),
+    meta: {
+      propertyEditors: ['Umb.PropertyEditorUI.Text']
     }
   }
 ];