diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts index a7aae0b63a..45dff85c28 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-action.element.ts +++ b/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.) } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts index 5ef6a54120..72233ea95a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property-actions.element.ts +++ b/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 = []; @@ -106,7 +110,7 @@ export class UmbNodePropertyActions extends UmbContextConsumerMixin(LitElement) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts index 8230f18562..b2d949fcbe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-property.element.ts +++ b/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``: '' }`; + return html`${ this._dataType ? html``: '' }`; } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts index 4bd0feaaff..02651cc63d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-clear.element.ts +++ b/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` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts index c742f5ad70..5da8bb299d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts +++ b/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); }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-element.model.ts new file mode 100644 index 0000000000..bef6c6d198 --- /dev/null +++ b/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; +} \ No newline at end of file