diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json index 7130f48e85..c55d22e11e 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/settings.json +++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json @@ -4,6 +4,7 @@ "backoffice", "Backoffice", "combobox", + "ctrls", "devs", "Elementable", "invariantable", diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs index d2f7851d28..e578918f13 100644 --- a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs +++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs @@ -1,5 +1,6 @@ -import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -7,14 +8,14 @@ import { UmbLitElement } from '@umbraco-cms/element'; * @element {{ extensionTagName extensionType name }} */ @customElement('{{ extensionTagName extensionType name }}') -export class {{className extensionType name }} extends UmbLitElement { +export class {{className extensionType name }} extends UmbLitElement implements UmbPropertyEditorUiElement { static styles = [UmbTextStyles]; @property() value = ''; @property({ type: Array, attribute: false }) - public config = []; + public config?: UmbPropertyEditorConfigCollection; render() { return html`
{{ extensionTagName extensionType name }}
`; diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-initializer.controller.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-initializer.controller.ts index e3df36b64e..967db5f36f 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-initializer.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extensions-element-initializer.controller.ts @@ -11,7 +11,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; */ export class UmbExtensionsElementInitializer< ManifestTypes extends ManifestBase, - ManifestTypeName extends keyof ManifestTypeMap | string = string, + ManifestTypeName extends keyof ManifestTypeMap | string = ManifestTypes["type"], ManifestType extends ManifestBase = SpecificManifestTypeOrManifestBase, ControllerType extends UmbExtensionElementInitializer = UmbExtensionElementInitializer, MyPermittedControllerType extends ControllerType = PermittedControllerType diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/index.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/index.ts index 8a5010c657..b90a955eac 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/index.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/index.ts @@ -4,4 +4,5 @@ export * from './create-extension-element.function.js'; export * from './has-init-export.function.js'; export * from './load-manifest-api.function.js'; export * from './load-manifest-element.function.js'; -export * from './load-manifest-js.function.js'; +export * from './load-manifest-plain-js.function.js'; +export * from './load-manifest-plain-css.function.js'; diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-css.function.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-css.function.ts new file mode 100644 index 0000000000..01006b2350 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-css.function.ts @@ -0,0 +1,18 @@ +import type { JsLoaderProperty } from "../types/utils.js"; + +export async function loadManifestPlainCss(property: JsLoaderProperty): Promise { + const propType = typeof property; + if(propType === 'function') { + const result = await (property as (Exclude<(typeof property), string>))(); + if(result != null) { + return result; + } + } else if(propType === 'string') { + // Import string + const result = await (import(/* @vite-ignore */ property as string) as unknown as CssType); + if(result != null) { + return result; + } + } + return undefined; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-js.function.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-js.function.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-js.function.ts rename to src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/load-manifest-plain-js.function.ts diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/initializers/bundle-extension-initializer.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/initializers/bundle-extension-initializer.ts index c3c86b6e1d..68e4a7d6ac 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/initializers/bundle-extension-initializer.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/initializers/bundle-extension-initializer.ts @@ -1,6 +1,6 @@ import type { ManifestBase, ManifestBundle } from '../types/index.js'; import { UmbExtensionRegistry } from '../registry/extension.registry.js'; -import { loadManifestPlainJs } from '../functions/load-manifest-js.function.js'; +import { loadManifestPlainJs } from '../functions/load-manifest-plain-js.function.js'; import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; export class UmbBundleExtensionInitializer extends UmbBaseController { diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/base.types.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/base.types.ts index d240cf662a..154c8d7ef8 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/base.types.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/base.types.ts @@ -35,7 +35,7 @@ export interface ManifestPlainCss extends ManifestBase { } -export interface ManifestPlainJs extends ManifestBase { +export interface ManifestPlainJs extends ManifestBase { /** * The file location of the javascript file to load * @TJS-type string diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/utils.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/utils.ts index 6d66c57171..9cf7996dd3 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/utils.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/types/utils.ts @@ -32,7 +32,7 @@ export type CssLoaderPromise< > = (() => Promise) export type JsLoaderPromise< - JsType extends object = object + JsType > = (() => Promise) export type ElementLoaderPromise< @@ -56,7 +56,7 @@ export type CssLoaderProperty = ( | CssLoaderPromise ); -export type JsLoaderProperty = ( +export type JsLoaderProperty = ( string | JsLoaderPromise diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/localization.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/localization.model.ts index 72f218d537..c51b4f7c7d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/localization.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/localization.model.ts @@ -1,7 +1,7 @@ import type { ManifestPlainJs } from '@umbraco-cms/backoffice/extension-api'; import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api'; -export interface ManifestLocalization extends ManifestPlainJs { +export interface ManifestLocalization extends ManifestPlainJs<{default: UmbLocalizationDictionary}> { type: 'localization'; meta: MetaLocalization; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts index 94f1835982..b3826268f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts @@ -1,6 +1,6 @@ import type { UmbModalExtensionElement } from '../interfaces/modal-extension-element.interface.js'; import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; -export interface ManifestModal extends ManifestElement { +export interface ManifestModal extends ManifestElement | UmbModalExtensionElement> { type: 'modal'; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-action.model.ts index 063beb2437..1f5b6c9327 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-action.model.ts @@ -1,8 +1,7 @@ -import { UmbPropertyActionElement } from '../../property-action/shared/index.js'; import type { ConditionTypes } from '../conditions/types.js'; import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; -export interface ManifestPropertyAction extends ManifestElement, ManifestWithDynamicConditions { +export interface ManifestPropertyAction extends ManifestElement, ManifestWithDynamicConditions { type: 'propertyAction'; meta: MetaPropertyAction; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts index 7b8b83bd24..7b2ece24f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts @@ -5,7 +5,7 @@ import { registerLocalization, localizations, } from '@umbraco-cms/backoffice/localization-api'; -import { hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api'; +import { hasDefaultExport, loadManifestPlainJs } from '@umbraco-cms/backoffice/extension-api'; import { UmbBackofficeExtensionRegistry, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { BehaviorSubject, @@ -64,11 +64,13 @@ export class UmbLocalizationRegistry { } // If extension contains a js file, load it and add the default dictionary to the inner dictionary. - const loadedExtension = await loadExtension(extension); + if(extension.js) { + const loadedExtension = await loadManifestPlainJs(extension.js); - if (loadedExtension && hasDefaultExport(loadedExtension)) { - for (const [dictionaryName, dictionary] of Object.entries(loadedExtension.default)) { - this.#addOrUpdateDictionary(innerDictionary, dictionaryName, dictionary); + if (loadedExtension && hasDefaultExport(loadedExtension)) { + for (const [dictionaryName, dictionary] of Object.entries(loadedExtension.default)) { + this.#addOrUpdateDictionary(innerDictionary, dictionaryName, dictionary); + } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts index 23543deef9..2a04dbe3e9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts @@ -5,10 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-confirm-modal') export class UmbConfirmModalElement extends UmbLitElement { + @property({ attribute: false }) modalContext?: UmbModalContext; - @property({ type: Object }) + @property({ type: Object, attribute: false }) data?: UmbConfirmModalData; private _handleConfirm() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts index 77b667137e..3dde846b72 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts @@ -1,4 +1,4 @@ -import { UmbPropertyAction } from '../../shared/property-action/property-action.model.js'; +import type { UmbPropertyAction } from '../../shared/property-action/property-action.interface.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbWorkspacePropertyContext, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/copy/property-action-copy.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/copy/property-action-copy.element.ts index f3b7011b46..a253d588ca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/copy/property-action-copy.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/copy/property-action-copy.element.ts @@ -1,11 +1,11 @@ -import type { UmbPropertyAction } from '../../shared/property-action/property-action.model.js'; +import type { UmbPropertyAction } from '../../shared/property-action/property-action.interface.js'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbNotificationDefaultData, UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN, } from '@umbraco-cms/backoffice/notification'; -import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; +//import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-property-action-copy') @@ -18,10 +18,10 @@ export class UmbPropertyActionCopyElement extends UmbLitElement implements UmbPr constructor() { super(); - this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (property) => { + //this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (property) => { //console.log('Got a reference to the editor element', property.getEditor()); // Be aware that the element might switch, so using the direct reference is not recommended, instead observe the .element Observable() - }); + //}); this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => { this._notificationContext = instance; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/index.ts index 96afbaf039..ae6d8e978f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/index.ts @@ -1,2 +1,2 @@ -export * from './property-action/property-action.element.js'; -export * from './property-action-menu/property-action-menu.element.js'; +export * from './property-action/index.js'; +export * from './property-action-menu/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/index.ts new file mode 100644 index 0000000000..ef20a285be --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/index.ts @@ -0,0 +1,2 @@ +export * from './property-action-menu.context.js' +export * from './property-action-menu.element.js' \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts index e95f786867..16070cb436 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action-menu/property-action-menu.element.ts @@ -1,27 +1,40 @@ import { UmbPropertyActionMenuContext } from './property-action-menu.context.js'; -import { css, CSSResultGroup, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import { map } from '@umbraco-cms/backoffice/external/rxjs'; +import { css, CSSResultGroup, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; -import { ManifestPropertyAction, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { ManifestPropertyAction, ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbExtensionElementInitializer, UmbExtensionsElementInitializer } from '@umbraco-cms/backoffice/extension-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import '../property-action/property-action.element.js'; @customElement('umb-property-action-menu') export class UmbPropertyActionMenuElement extends UmbLitElement { + + #actionsInitializer?: UmbExtensionsElementInitializer; + + @property({ attribute: false }) - public value?: unknown; + public get value(): unknown { + return this._value; + } + public set value(value: unknown) { + this._value = value; + if(this.#actionsInitializer) { + this.#actionsInitializer.properties = { value }; + } + } + private _value?: unknown; @property() set propertyEditorUiAlias(alias: string) { - this._observeActions(alias); + + // TODO: Align property actions with entity actions. + this.#actionsInitializer = new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'propertyAction', (propertyAction) => propertyAction.meta.propertyEditors.includes(alias), (ctrls) => { + this._actions = ctrls; + }); } - - private _actionsObserver?: UmbObserverController; - @state() - private _actions: Array = []; + private _actions: Array> = []; @state() private _open = false; @@ -31,8 +44,8 @@ export class UmbPropertyActionMenuElement extends UmbLitElement { constructor() { super(); - this.observe(this._propertyActionMenuContext.isOpen, (value) => { - this._open = value; + this.observe(this._propertyActionMenuContext.isOpen, (isOpen) => { + this._open = isOpen; }); this.addEventListener('close', (e) => { @@ -41,21 +54,6 @@ export class UmbPropertyActionMenuElement extends UmbLitElement { }); } - private _observeActions(alias: string) { - this._actionsObserver?.destroy(); - // TODO: Align property actions with entity actions. - this._actionsObserver = this.observe( - umbExtensionsRegistry.extensionsOfType('propertyAction').pipe( - map((propertyActions) => { - return propertyActions.filter((propertyAction) => propertyAction.meta.propertyEditors.includes(alias)); - }) - ), - (manifests) => { - this._actions = manifests; - } - ); - } - private _toggleMenu() { this._propertyActionMenuContext.toggle(); } @@ -65,7 +63,6 @@ export class UmbPropertyActionMenuElement extends UmbLitElement { event.stopPropagation(); } - // TODO: Implement extension-slot on change event. And use the extension slot instead of custom implementation. render() { return this._actions.length > 0 ? html` @@ -81,10 +78,8 @@ export class UmbPropertyActionMenuElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/index.ts new file mode 100644 index 0000000000..ec46a53aaa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/index.ts @@ -0,0 +1 @@ +export * from './property-action.interface.js'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.element.ts deleted file mode 100644 index 2a31c246c8..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.element.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { UmbPropertyAction } from './property-action.model.js'; -import { CSSResultGroup, html, LitElement, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; -import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'; - -import type { ManifestPropertyAction } from '@umbraco-cms/backoffice/extension-registry'; - -// TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element... -@customElement('umb-property-action') -export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction { - private _propertyAction?: ManifestPropertyAction; - @property({ type: Object }) - public get propertyAction(): ManifestPropertyAction | undefined { - return this._propertyAction; - } - public set propertyAction(value: ManifestPropertyAction | undefined) { - this._propertyAction = value; - this._createElement(); - } - - // TODO: we need to investigate context api vs values props and events - @property({ attribute: false }) - public value?: unknown; - - @state() - private _element?: UmbPropertyActionElement; - - private async _createElement() { - if (!this.propertyAction) return; - - try { - // TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element... - this._element = (await createExtensionElement(this.propertyAction)); - 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.) - } - } - - render() { - return html`${this._element}`; - } - - static styles: CSSResultGroup = [UmbTextStyles]; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.interface.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.model.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property-action/shared/property-action/property-action.interface.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts index 70e019d388..3d23986281 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-block-grid-block-configuration */ @customElement('umb-property-editor-ui-block-grid-block-configuration') -export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-block-grid-block-configuration
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index 63576d4ffc..3be87591bb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-block-grid-group-configuration */ @customElement('umb-property-editor-ui-block-grid-group-configuration') -export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection render() { return html`
umb-property-editor-ui-block-grid-group-configuration
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts index 36824c3075..c4984ccafc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-block-grid-stylesheet-picker */ @customElement('umb-property-editor-ui-block-grid-stylesheet-picker') -export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends UmbLitElement { +export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-block-grid-stylesheet-picker
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts index 69d2a89a67..36b7c0b63f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-block-list-block-configuration */ @customElement('umb-property-editor-ui-block-list-block-configuration') -export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-block-list-block-configuration
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts index a972802992..4377385649 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-collection-view-bulk-action-permissions */ @customElement('umb-property-editor-ui-collection-view-bulk-action-permissions') -export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends UmbLitElement { +export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-collection-view-bulk-action-permissions
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts index e8a4e43649..951d1956ca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-collection-view-column-configuration */ @customElement('umb-property-editor-ui-collection-view-column-configuration') -export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-collection-view-column-configuration
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts index da22f536e2..b0cb58095f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-collection-view-layout-configuration */ @customElement('umb-property-editor-ui-collection-view-layout-configuration') -export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-collection-view-layout-configuration
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts index 67b0c23c4f..507c8ab67b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-collection-view-order-by */ @customElement('umb-property-editor-ui-collection-view-order-by') -export class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement { +export class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-collection-view-order-by
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts index 2a9d44e8af..fc478d0d94 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts @@ -1,3 +1,5 @@ +import { UmbPropertyEditorConfigCollection } from '../../config/index.js'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-collection-view */ @customElement('umb-property-editor-ui-collection-view') -export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement { +export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-collection-view
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts index 4a80cbe6d8..2d06aed494 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts @@ -1,14 +1,15 @@ import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; /** * @element umb-property-editor-ui-tiny-mce-maximagesize-configuration */ @customElement('umb-property-editor-ui-tiny-mce-maximagesize-configuration') -export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement extends UmbLitElement { - @property() - value?: number; +export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { + @property({type: Number}) + value: number = 0; render() { return html``; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts index c8db0205f4..b11d7f95b7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts @@ -3,17 +3,19 @@ import { css, customElement, html, property, state } from '@umbraco-cms/backoffi import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbStylesheetRepository } from '@umbraco-cms/backoffice/stylesheet'; import { StylesheetOverviewResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; /** * @element umb-property-editor-ui-tiny-mce-stylesheets-configuration */ @customElement('umb-property-editor-ui-tiny-mce-stylesheets-configuration') -export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement { +export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property({ type: Array }) value: string[] = []; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; @state() stylesheetList: Array> = []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts index 743c8525f4..69408ec0b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts @@ -1,4 +1,6 @@ +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -6,12 +8,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; * @element umb-property-editor-ui-tree-picker-start-node */ @customElement('umb-property-editor-ui-tree-picker-start-node') -export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement { +export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; render() { return html`
umb-property-editor-ui-tree-picker-start-node
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts index 53b5efb947..917740824d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts @@ -3,6 +3,7 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbStringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { ManifestTheme, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { loadManifestPlainCss } from '@umbraco-cms/backoffice/extension-api'; const LOCAL_STORAGE_KEY = 'umb-theme-alias'; @@ -37,31 +38,34 @@ export class UmbThemeContext extends UmbBaseController { .pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))), async (themes) => { this.#styleElement?.remove(); - if (themes.length > 0) { - if (themes[0].loader) { + if (themes.length > 0 && themes[0].css) { + const activeTheme = themes[0]; + if (typeof activeTheme.css === 'function') { const styleEl = (this.#styleElement = document.createElement('style')); styleEl.setAttribute('type', 'text/css'); document.head.appendChild(styleEl); - const result = await themes[0].loader(); + const result = await loadManifestPlainCss(activeTheme.css); // Checking that this is still our styleElement, it has not been replaced with another theme in between. - if (styleEl === this.#styleElement) { - (styleEl as any).appendChild(document.createTextNode(result)); + if (result && styleEl === this.#styleElement) { + styleEl.appendChild(document.createTextNode(result)); } - } else if (themes[0].css) { + } else if (typeof activeTheme.css === 'string') { this.#styleElement = document.createElement('link'); this.#styleElement.setAttribute('rel', 'stylesheet'); - this.#styleElement.setAttribute('href', themes[0].css); + this.#styleElement.setAttribute('href', activeTheme.css); document.head.appendChild(this.#styleElement); } } else { localStorage.removeItem(LOCAL_STORAGE_KEY); + this.#styleElement?.childNodes.forEach((node) => node.remove()); this.#styleElement?.setAttribute('href', ''); } } ); } else { localStorage.removeItem(LOCAL_STORAGE_KEY); + this.#styleElement?.childNodes.forEach((node) => node.remove()); this.#styleElement?.setAttribute('href', ''); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/manifests.ts index 08f16fa720..b1460257c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/manifests.ts @@ -195,7 +195,7 @@ export const granularPermissions: Array = [ type: 'userGranularPermission', alias: 'Umb.UserGranularPermission.Document', name: 'Document Granular User Permission', - loader: () => + js: () => import('../components/input-document-granular-permission/input-document-granular-permission.element.js'), meta: { entityType: 'document', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts index 56fb051b99..8c955554b5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts @@ -10,6 +10,8 @@ export class UmbCollectionViewMediaTestElement extends LitElement { static styles = [UmbTextStyles, css``]; } +export default UmbCollectionViewMediaTestElement; + declare global { interface HTMLElementTagNameMap { 'umb-collection-view-media-test': UmbCollectionViewMediaTestElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts index 975b2d33aa..8b26180371 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts @@ -5,12 +5,13 @@ import { UmbExamineFieldsSettingsModalData, UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal'; +import { ManifestModal, UmbModalExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-examine-fields-settings-modal') -export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement< +export default class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement< UmbExamineFieldsSettingsModalData, UmbExamineFieldsSettingsModalValue -> { +> implements UmbModalExtensionElement{ @state() private _fields?: UmbExamineFieldsSettingsModalData; diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts index a1bc0bfa11..6e772b8731 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/manifests.ts @@ -43,4 +43,4 @@ export const manifests: Array = [ name: 'Examine Field Settings Modal', js: () => import('./examine-management-dashboard/views/modal-views/fields-settings.element.js'), }, -]; +]; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/models-builder/dashboard-models-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/models-builder/dashboard-models-builder.element.ts index e20f8bb740..c775b14110 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/models-builder/dashboard-models-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/models-builder/dashboard-models-builder.element.ts @@ -170,6 +170,9 @@ export class UmbDashboardModelsBuilderElement extends UmbLitElement { ]; } + +export default UmbDashboardModelsBuilderElement; + declare global { interface HTMLElementTagNameMap { 'umb-dashboard-models-builder': UmbDashboardModelsBuilderElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts index 1fb5df185b..57f2961fe8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts @@ -82,7 +82,7 @@ const modals: Array = [ type: 'modal', alias: UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, name: 'Rich text editor style modal', - loader: () => + js: () => import('./views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js'), }, ]; diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/property-editors.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/property-editors.mdx index f84024f781..a1b5840d54 100644 --- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/property-editors.mdx +++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/property-editors.mdx @@ -102,11 +102,11 @@ interface UmbPropertyEditorUIElement {} import { LitElement, html, css } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-base/lib/styles'; -import { UmbElement } from '@umbraco-cms/element'; +import { UmbElementMixin } from '@umbraco-cms/element'; // TODO: should we make examples with LitElement or just vanilla JS? or should we have for more libraries? @customElement('my-text-box') -export class UmbPropertyEditorUITextBoxElement extends UmbElement(LitElement) { +export class UmbPropertyEditorUITextBoxElement extends UmbElementMixin(LitElement) implements UmbPropertyEditorUIElement { static styles = [ UUITextStyles, css` @@ -119,8 +119,8 @@ export class UmbPropertyEditorUITextBoxElement extends UmbElement(LitElement) { @property() value = ''; - @property({ type: Array, attribute: false }) - public config = []; + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; private onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value;