From c9846c65adedf7ae7bd9d92900aed1faf9f15ff0 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 3 Jan 2024 15:24:24 +0100 Subject: [PATCH 1/3] block type workspace settings --- .../block-grid-column-span/manifests.ts | 13 ++ ...ditor-ui-block-grid-column-span.element.ts | 41 ++++++ ...ditor-ui-block-grid-column-span.stories.ts | 15 +++ .../block-grid/property-editors/manifests.ts | 3 +- ...id-type-workspace-view-advanced.element.ts | 49 ++----- ...-grid-type-workspace-view-areas.element.ts | 79 +---------- ...id-type-workspace-view-settings.element.ts | 123 ++++++++++-------- .../block-type-workspace-editor.element.ts | 4 +- .../input-number-range.element.ts | 7 +- .../input-document-type.element.ts | 16 ++- 10 files changed, 174 insertions(+), 176 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts new file mode 100644 index 0000000000..7aa8cf4e08 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts @@ -0,0 +1,13 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestPropertyEditorUi = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.BlockGridColumnSpan', + name: 'Block Grid Column Span Property Editor UI', + js: () => import('./property-editor-ui-block-grid-column-span.element.js'), + meta: { + label: 'Block Grid Column Span', + icon: 'icon-document', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts new file mode 100644 index 0000000000..007d4b3732 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts @@ -0,0 +1,41 @@ +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; + +@customElement('umb-property-editor-ui-block-grid-column-span') +export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement implements UmbPropertyEditorUiElement { + private _value: Array = []; + + @property({ type: Array }) + public get value(): Array { + return this._value; + } + public set value(value: Array) { + this._value = value || []; + } + + @property({ attribute: false }) + public set config(config: UmbPropertyEditorConfigCollection | undefined) {} + + private _onChange(event: CustomEvent) { + //this.value = (event.target as UmbInputStaticFileElement).selectedPaths; + this.dispatchEvent(new CustomEvent('property-value-change')); + } + + // TODO: Implement mandatory? + render() { + return html`Column span TODO `; + } + + static styles = [UmbTextStyles]; +} + +export default UmbPropertyEditorUIBlockGridColumnSpanElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-block-grid-column-span': UmbPropertyEditorUIBlockGridColumnSpanElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts new file mode 100644 index 0000000000..042a5422b9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyEditorUIBlockGridColumnSpanElement } from './property-editor-ui-block-grid-column-span.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property-editor-ui-block-grid-column-span.element.js'; + +export default { + title: 'Property Editor UIs/Block Grid Column Span', + component: 'umb-property-editor-ui-block-grid-column-span', + id: 'umb-property-editor-ui-block-grid-column-span', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts index c3f119f8f5..11b3d055ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts @@ -1,5 +1,6 @@ import { manifest as blockGridEditor } from './block-grid-editor/manifests.js'; import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js'; import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js'; +import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js'; -export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet]; +export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet, blockGridColumnSpan]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts index b33b0934c6..a89d85dc4d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts @@ -7,12 +7,7 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement { render() { return html` -
GRID BLOCK ADVANCED View
- - + - - - + label="Inline editing" + alias="inlineEditing" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + label="Hide content editor" + alias="hideContentEditor" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + label="Thumbnail" + alias="thumbnail" + property-editor-ui-alias="Umb.PropertyEditorUi.MediaPicker"> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts index a3d522f937..a12b413e30 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts @@ -7,70 +7,15 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement { render() { return html` -
GRID BLOCK AREAS View
- + + label=${this.localize.term('blockEditor_areasLayoutColumns')} + alias="areasLayoutColumns" + property-editor-ui-alias="Umb.PropertyEditorUi.Number"> - - - - - - - - - - - - + label=${this.localize.term('blockEditor_areasConfigurations')} + alias="areas" + property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreas"> `; } @@ -86,16 +31,6 @@ export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement imp uui-box { margin-top: var(--uui-size-layout-1); } - - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { - display: flex; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts index b8c116b232..9c0f9280c3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts @@ -1,80 +1,90 @@ -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; +import { UmbBlockTypeWorkspaceContext } from '../../../block-type/workspace/block-type-workspace.context.js'; +import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; @customElement('umb-block-grid-type-workspace-view') export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement { + #labelOnTopSetting = { alias: 'labelOnTop', value: true }; + + @state() + private _showSizeOptions = false; + + @state() + private _data?: UmbBlockTypeBase; + + constructor() { + super(); + console.log('constructor'); + this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { + const workspace = instance as UmbBlockTypeWorkspaceContext; + this.observe(workspace.data, (data) => (this._data = data)); + }); + } + render() { return html` -
GRID BLOCK SETTINGS View
- + + property-editor-ui-alias="Umb.PropertyEditorUi.TextBox" + .config=${[this.#labelOnTopSetting]}> - - - - - - - + + label=${this.localize.term('blockEditor_allowBlockInRoot')} + alias="allowInRoot" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> - + label=${this.localize.term('blockEditor_allowBlockInAreas')} + alias="allowInAreas" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + ${this.#renderSizeOptions()} `; } + #renderSizeOptions() { + if (this._showSizeOptions) { + return html` + `; + } else { + return html`
+ (this._showSizeOptions = !this._showSizeOptions)}> +
`; + } + } + static styles = [ UmbTextStyles, css` @@ -83,18 +93,17 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement margin: var(--uui-size-layout-1); padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container. } + uui-box { margin-top: var(--uui-size-layout-1); } - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { + #showOptions { display: flex; + height: 100px; + } + #showOptions uui-button { + flex: 1; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts index 4f29915c66..a2ce992de5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts @@ -50,7 +50,9 @@ export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement { render() { return this.workspaceAlias ? html` - + ` : ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts index f92c67a51f..37fadc0063 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts @@ -78,7 +78,12 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement) @input=${this._onMinInput} label=${this.minLabel}> – - `; + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts index a802cfa080..3a071f9fd1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts @@ -1,5 +1,5 @@ import { UmbDocumentTypePickerContext } from './input-document-type.context.js'; -import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -116,10 +116,16 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) } render() { - return html` - ${this._items?.map((item) => this._renderItem(item))} - Add - `; + return html` ${this._items?.map((item) => this._renderItem(item))} + ${this.#renderAddButton()}`; + } + + #renderAddButton() { + //TODO: Why does it show length 1 (initially only) when array is empty? + //if (this.max > 0 && this.selectedIds.length >= this.max) return nothing; + return html` + Add + `; } private _renderItem(item: DocumentTypeItemResponseModel) { From 28941c96905a0cc23ca981a071077ee96bf5088f Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 4 Jan 2024 10:51:11 +0100 Subject: [PATCH 2/3] overlay size --- ...ditor-ui-block-grid-column-span.element.ts | 2 - ...id-type-workspace-view-advanced.element.ts | 12 +---- ...id-type-workspace-view-settings.element.ts | 44 ++++++++++++++++--- ...property-editor-ui-overlay-size.element.ts | 28 ++++++++++-- 4 files changed, 64 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts index 007d4b3732..a22f67b1ab 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts @@ -20,11 +20,9 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement public set config(config: UmbPropertyEditorConfigCollection | undefined) {} private _onChange(event: CustomEvent) { - //this.value = (event.target as UmbInputStaticFileElement).selectedPaths; this.dispatchEvent(new CustomEvent('property-value-change')); } - // TODO: Implement mandatory? render() { return html`Column span TODO `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts index a89d85dc4d..c3ac612a4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts @@ -41,7 +41,7 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement + property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"> `; } @@ -57,16 +57,6 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement uui-box { margin-top: var(--uui-size-layout-1); } - - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { - display: flex; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts index 9c0f9280c3..e439873fbf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts @@ -1,6 +1,6 @@ import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; import { UmbBlockTypeWorkspaceContext } from '../../../block-type/workspace/block-type-workspace.context.js'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -14,14 +14,43 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement private _showSizeOptions = false; @state() - private _data?: UmbBlockTypeBase; + private _backgroundColor?: string; + + @state() + private _contentElementTypeKey?: string; + + @state() + private _editorSize?: string; + + @state() + private _iconColor?: string; + + @state() + private _label?: string; + + @state() + private _settingsElementTypeKey?: string; + + @state() + private _stylesheet?: string; + + @state() + private _view?: string; constructor() { super(); - console.log('constructor'); this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { const workspace = instance as UmbBlockTypeWorkspaceContext; - this.observe(workspace.data, (data) => (this._data = data)); + this.observe(workspace.data, (data) => { + this._backgroundColor = data?.backgroundColor; + this._contentElementTypeKey = data?.contentElementTypeKey; + this._editorSize = data?.editorSize; + this._iconColor = data?.iconColor; + this._label = data?.label; + this._settingsElementTypeKey = data?.settingsElementTypeKey; + this._stylesheet = data?.stylesheet; + this._view = data?.view; + }); }); } @@ -31,12 +60,14 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement = [ + { value: 'small', name: 'Small', selected: true }, + { value: 'medium', name: 'Medium' }, + { value: 'large', name: 'Large' }, + { value: 'full', name: 'Full' }, + ]; @property({ attribute: false }) public config?: UmbPropertyEditorConfigCollection; + firstUpdated() { + if (!this.value) return; + this._list = this._list.map((option) => ({ + ...option, + selected: option.value === this.value, + })); + } + + #onChange(event: UUISelectEvent) { + this.value = event.target.value as string; + this.dispatchEvent(new CustomEvent('property-value-change')); + } + render() { - return html`
umb-property-editor-ui-overlay-size
`; + return html``; } static styles = [UmbTextStyles]; From 361ee60cd6b147e72e4a8c25878337f2164b1941 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:07:27 +0100 Subject: [PATCH 3/3] document type input fix --- .../block-grid-type-workspace-view-settings.element.ts | 3 --- .../input-document-type/input-document-type.element.ts | 4 +--- .../property-editor-ui-document-type-picker.element.ts | 8 ++++++-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts index e439873fbf..09b06fc88e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts @@ -60,14 +60,12 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement | undefined) { - console.log('selectedIds', ids); this.#pickerContext.setSelection(ids ?? []); } @@ -121,8 +120,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) } #renderAddButton() { - //TODO: Why does it show length 1 (initially only) when array is empty? - //if (this.max > 0 && this.selectedIds.length >= this.max) return nothing; + if (this.max === 1 && this.selectedIds.length === 1) return nothing; return html` Add `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts index 1700db5a8a..dbe96d6a8b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts @@ -11,7 +11,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement return this._value; } public set value(value: Array | string | undefined) { - this._value = value ?? []; + this._value = value; } private _value?: Array | string; @@ -49,7 +49,11 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement ? html` ) ?? [] : [this._value as string]} + .selectedIds=${this._multiPicker + ? (this._value as Array) ?? [] + : this._value + ? [this._value as string] + : []} .min=${this._limitMin ?? 0} .max=${this._limitMax ?? Infinity} .element-types-only=${this._onlyElementTypes}