add property action menu context

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

@@ -8,7 +8,7 @@ import { createExtensionElement, UmbExtensionManifest, UmbExtensionRegistry } fr
 import { UmbDataTypeStore } from '../../core/stores/data-type.store';
 import { DataTypeEntity } from '../../mocks/data/content.data';
 
-import './node-property-actions.element';
+import '../property-actions/property-action-menu/property-action-menu.element';
 
 @customElement('umb-node-property')
 class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
@@ -138,7 +138,7 @@ class UmbNodeProperty extends UmbContextConsumerMixin(LitElement) {
   }
 
   private _renderPropertyActions () {
-    return html`${ this._dataType ? html`<umb-node-property-actions .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}" .value="${this.value}"></umb-node-property-actions>`: '' }`;
+    return html`${ this._dataType ? html`<umb-property-action-menu .propertyEditorUIAlias="${this._dataType.propertyEditorUIAlias}" .value="${this.value}"></umb-property-action-menu>`: '' }`;
   }
 
   render() {

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

@@ -1,30 +1,34 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbPropertyActionElement } from './property-action-element.model';
+import { UmbPropertyActionMenuContext } from './property-action-menu/property-action-menu.context';
+import { UmbPropertyAction } from './property-action-element.model';
 
 @customElement('umb-property-action-clear')
-export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement {
+export default class UmbPropertyActionClearElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction {
   
   @property()
   value = '';
 
+  private _propertyActionMenuContext?: UmbPropertyActionMenuContext;
+
   constructor () {
     super();
 
-    // TODO implement a property context
-    this.consumeContext('umbProperty', (property) => {
-      console.log('PROPERTY', property);
+    this.consumeContext('umbPropertyActionMenu', (propertyActionsContext: UmbPropertyActionMenuContext) => {
+      this._propertyActionMenuContext = propertyActionsContext;
     });
   }
 
   private _handleLabelClick () {
     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 }));
+    // TODO: how do we want to close the menu? Testing an event based approach and context api approach
+    // this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    this._propertyActionMenuContext?.close();
   }
 
   private _clearValue () {
+    // TODO: how do we want to update the value? Testing an event based approach. We need to test an api based approach too.
     this.value = '';
     this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true }));
   }
@@ -39,6 +43,6 @@ export default class UmbPropertyActionClear extends UmbContextConsumerMixin(LitE
 
 declare global {
   interface HTMLElementTagNameMap {
-    'umb-property-action-clear': UmbPropertyActionClear;
+    'umb-property-action-clear': UmbPropertyActionClearElement;
   }
 }

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

@@ -2,10 +2,10 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../core/context';
 import { UmbNotificationService } from '../../core/services/notification.service';
-import type { UmbPropertyActionElement } from './property-action-element.model';
+import type { UmbPropertyAction } from './property-action-element.model';
 
 @customElement('umb-property-action-copy')
-export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitElement) implements UmbPropertyActionElement {
+export default class UmbPropertyActionCopyElement extends UmbContextConsumerMixin(LitElement) implements UmbPropertyAction {
   
   @property()
   value = '';
@@ -41,6 +41,6 @@ export default class UmbPropertyActionCopy extends UmbContextConsumerMixin(LitEl
 
 declare global {
   interface HTMLElementTagNameMap {
-    'umb-property-action-copy': UmbPropertyActionCopy;
+    'umb-property-action-copy': UmbPropertyActionCopyElement;
   }
 }

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

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

src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-menu/property-action-menu.context.ts

@@ -0,0 +1,14 @@
+import { Observable, ReplaySubject } from 'rxjs';
+
+export class UmbPropertyActionMenuContext {
+  private _isOpen: ReplaySubject<boolean> = new ReplaySubject(1);
+  public readonly isOpen: Observable<boolean> = this._isOpen.asObservable();
+
+  open () {
+    this._isOpen.next(true);
+  }
+
+  close () {
+    this._isOpen.next(false);
+  }
+}

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

@@ -2,13 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { Subscription, map } from 'rxjs';
-import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbExtensionManifestPropertyAction, UmbExtensionRegistry } from '../../core/extension';
+import { UmbContextProviderMixin, UmbContextConsumerMixin } from '../../../core/context';
+import { UmbExtensionManifestPropertyAction, UmbExtensionRegistry } from '../../../core/extension';
+import { UmbPropertyActionMenuContext } from './property-action-menu.context';
 
-import './node-property-action.element';
+import './property-action.element';
 
-@customElement('umb-node-property-actions')
-export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) {
+@customElement('umb-property-action-menu')
+export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) {
   static styles: CSSResultGroup = [
     UUITextStyles,
     css`
@@ -54,14 +55,21 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
   
   private _extensionRegistry?: UmbExtensionRegistry;
   private _subscription?: Subscription;
+  private _propertyActionMenuContext = new UmbPropertyActionMenuContext();
   
   constructor () {
     super();
+    
+    this._propertyActionMenuContext.isOpen.subscribe((value: boolean) => {
+      this._open = value;
+    });
 
     this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => {
       this._extensionRegistry = extensionRegistry;
       this._usePropertyActions();
     });
+
+    this.provideContext('umbPropertyActionMenu', this._propertyActionMenuContext);
   }
 
   private _usePropertyActions () {
@@ -76,7 +84,8 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
   }
 
   private _toggleMenu () {
-    this._open = !this._open;
+    //this._open = !this._open;
+    this._open ? this._propertyActionMenuContext.close() : this._propertyActionMenuContext.open();
   }
 
   private _handleClose (event: CustomEvent) {
@@ -110,7 +119,7 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement)
           <div slot="popover" id="dropdown">
             ${this._actions.map(
               action => html`
-                <umb-node-property-action .propertyAction=${action} .value="${this.value}"></umb-node-property-action>
+                <umb-property-action .propertyAction=${action} .value="${this.value}"></umb-property-action>
               `
             )}
           </div>

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

@@ -1,11 +1,11 @@
 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';
+import { createExtensionElement, UmbExtensionManifestPropertyAction } from '../../../core/extension';
+import type { UmbPropertyAction } from '../property-action-element.model';
 
-@customElement('umb-node-property-action')
-export class UmbNodePropertyAction extends LitElement {
+@customElement('umb-property-action')
+export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction {
   static styles: CSSResultGroup = [
     UUITextStyles
   ];