diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts new file mode 100644 index 0000000000..f81a740217 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts @@ -0,0 +1,80 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { map } from 'rxjs'; +import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; +import { UmbObserverMixin } from '@umbraco-cms/observable-api'; +import { createExtensionElement } from '@umbraco-cms/extensions-api'; + +/** + * @element umb-extension-slot + * @description + * @slot default - slot for inserting additional things into this slot. + * @export + * @class UmbExtensionSlot + * @extends {UmbObserverMixin(LitElement)} + */ +@customElement('umb-extension-slot') +export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) { + + + private _extensions = new Map() + + @property({ type: String }) + public type= ""; + + @property({ type: Object, attribute: false }) + public filter: (manifest:ManifestTypes) => boolean = () => true; + + constructor() { + super(); + + + /* + this.extensionManager = new ExtensionManager(this, (x) => {x.meta.entityType === this.entityType}, (extensionManifests) => { + this._createElement(extensionManifests[0]); + }); + */ + } + + connectedCallback(): void { + super.connectedCallback(); + this._observeExtensions(); + } + + private _observeExtensions() { + + console.log("_observeExtensions", this.type, this.filter) + this.observe( + umbExtensionsRegistry + ?.extensionsOfType(this.type) + .pipe(map((extensions) => extensions.filter(this.filter))), + async (extensions: ManifestTypes[]) => { + + extensions.forEach(async (extension: ManifestTypes) => { + const component = await createExtensionElement(extension); + if(component) { + this._extensions.set(extension, component); + } else { + this._extensions.delete(extension); + } + }); + + } + ); + } + + render() { + + const elements = []; + for (const value of this._extensions.values()) { + elements.push(value); + } + return html`${elements}`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-extension-slot': UmbExtensionSlotElement; + } +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts index 2484aba245..6b4f567f1b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts @@ -8,9 +8,10 @@ import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { createExtensionElement } from '@umbraco-cms/extensions-api'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; -import type { ManifestEditorAction, ManifestEditorView } from '@umbraco-cms/models'; +import type { ManifestEditorView } from '@umbraco-cms/models'; import '../../../components/body-layout/body-layout.element'; +import '../../../components/extension-slot/extension-slot.element'; import '../editor-action-extension/editor-action-extension.element'; /** @@ -94,9 +95,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi @state() private _editorViews: Array = []; - @state() - private _editorActions: Array = []; - @state() private _currentView = ''; @@ -109,7 +107,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi super.connectedCallback(); this._observeEditorViews(); - this._observeEditorActions(); /* TODO: find a way to construct absolute urls */ this._routerFolder = window.location.pathname.split('/view')[0]; @@ -127,17 +124,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi ); } - private _observeEditorActions() { - this.observe( - umbExtensionsRegistry - ?.extensionsOfType('editorAction') - .pipe(map((extensions) => extensions.filter((extension) => extension.meta.editors.includes(this.alias)))), - (editorActions) => { - this._editorActions = editorActions; - } - ); - } - private async _createRoutes() { if (this._editorViews.length > 0) { this._routes = []; @@ -212,9 +198,7 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi