From 2d1de69bd398c63c65904a1064aa18da1eae16c7 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 17:44:24 +0100 Subject: [PATCH 01/18] add a new property editor ui to pick media types --- .../packages/media/media-types/manifests.ts | 2 + .../media-types/property-editors/manifests.ts | 4 ++ .../media-type-picker/manifests.ts | 23 ++++++ ...rty-editor-ui-media-type-picker.element.ts | 70 +++++++++++++++++++ ...rty-editor-ui-media-type-picker.stories.ts | 15 ++++ 5 files changed, 114 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/manifests.ts index 51dc7d38ed..208a10d90d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/manifests.ts @@ -3,6 +3,7 @@ import { manifests as menuItemManifests } from './menu-item/manifests.js'; import { manifests as repositoryManifests } from './repository/manifests.js'; import { manifests as treeManifests } from './tree/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; +import { manifests as propertyEditorUiManifests } from './property-editors/manifests.js'; export const manifests = [ ...entityActionsManifests, @@ -10,4 +11,5 @@ export const manifests = [ ...repositoryManifests, ...treeManifests, ...workspaceManifests, + ...propertyEditorUiManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/manifests.ts new file mode 100644 index 0000000000..7e8e7ff3b2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/manifests.ts @@ -0,0 +1,4 @@ +import { manifest as mediaTypePickerUI } from './media-type-picker/manifests.js'; +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [mediaTypePickerUI]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/manifests.ts new file mode 100644 index 0000000000..3d30182b52 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/manifests.ts @@ -0,0 +1,23 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestPropertyEditorUi = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.MediaTypePicker', + name: 'Media Type Picker Property Editor UI', + js: () => import('./property-editor-ui-media-type-picker.element.js'), + meta: { + label: 'Media Type Picker', + icon: 'icon-media-dashed-line', + group: 'advanced', + settings: { + properties: [ + { + alias: 'showOpenButton', + label: 'Show open button', + description: 'Opens the node in a dialog', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts new file mode 100644 index 0000000000..0d8a972f07 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -0,0 +1,70 @@ +import type { UmbInputMediaTypeElement } from '../../components/index.js'; +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; + +@customElement('umb-property-editor-ui-media-type-picker') +export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { + @property({ type: Array }) + public get value(): Array | string | undefined { + return this._value; + } + public set value(value: Array | string | undefined) { + this._value = value; + } + private _value?: Array | string; + + @property({ attribute: false }) + public set config(config: UmbPropertyEditorConfigCollection | undefined) { + if (config) { + const validationLimit = config.getValueByAlias('validationLimit'); + this._limitMin = validationLimit?.min; + this._limitMax = validationLimit?.max; + + // We have the need in Block Editors, to just pick a single ID not as an array. So for that we use the multiPicker config, which can be set to true if you wanted to be able to pick multiple. + this._multiPicker = config.getValueByAlias('multiPicker') ?? false; + } + } + + @state() + private _limitMin?: number; + @state() + private _limitMax?: number; + @state() + private _multiPicker?: boolean; + + private _onChange(event: CustomEvent) { + const selectedIds = (event.target as UmbInputMediaTypeElement).selectedIds; + this.value = this._multiPicker ? selectedIds : selectedIds[0]; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + render() { + return this._multiPicker !== undefined + ? html` + ) ?? [] + : this._value + ? [this._value as string] + : []} + .min=${this._limitMin ?? 0} + .max=${this._limitMax ?? Infinity}> + Add + + ` + : ''; + } +} + +export default UmbPropertyEditorUIMediaTypePickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-media-type-picker': UmbPropertyEditorUIMediaTypePickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts new file mode 100644 index 0000000000..b2d9e1dac8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyEditorUIMediaTypePickerElement } from './property-editor-ui-media-type-picker.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property-editor-ui-media-type-picker.element.js'; + +export default { + title: 'Property Editor UIs/Document Type Picker', + component: 'umb-property-editor-ui-document-type-picker', + id: 'umb-property-editor-ui-document-type-picker', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; From a670c876cb252f2029f12e12ba7c43f79eee306a Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 17:44:43 +0100 Subject: [PATCH 02/18] allow to specify types for the treepicker --- .../uis/tree-picker/property-editor-ui-tree-picker.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts index c01c6eae0c..d1952c415c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts @@ -56,6 +56,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen this.min = Number(config?.getValueByAlias('minNumber')) || 0; this.max = Number(config?.getValueByAlias('maxNumber')) || 0; + this.type = config?.getValueByAlias('type') ?? 'content'; this.allowedContentTypeIds = config?.getValueByAlias('filter'); this.showOpenButton = config?.getValueByAlias('showOpenButton'); this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes'); From 8634a6161c20af38535f359458f15a16fc0591aa Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 17:44:51 +0100 Subject: [PATCH 03/18] use the media type picker to configure the mediapicker --- .../core/property-editor/schemas/Umbraco.MediaPicker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.MediaPicker.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.MediaPicker.ts index c03b67a7a3..12b32ace13 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.MediaPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.MediaPicker.ts @@ -12,7 +12,7 @@ export const manifest: ManifestPropertyEditorSchema = { alias: 'filter', label: 'Accepted types', description: 'Limit to specific types', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaTypePicker', }, { alias: 'multiple', From ee196c5a0c8e4efdc4793a0dc9fafdcfbaa8eb38 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:00:58 +0100 Subject: [PATCH 04/18] remove multipicker config copied from data-type-picker and accept that the server value could be a comma-separated string --- ...rty-editor-ui-media-type-picker.element.ts | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index 0d8a972f07..adcd17192d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -9,14 +9,22 @@ import { @customElement('umb-property-editor-ui-media-type-picker') export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { + @state() + _value?: Array; + @property({ type: Array }) + public set value(value: Array | string | undefined) { + if (Array.isArray(value)) { + this._value = value; + } else if (typeof value === 'string') { + this._value = value.split(','); + } else { + this._value = undefined; + } + } public get value(): Array | string | undefined { return this._value; } - public set value(value: Array | string | undefined) { - this._value = value; - } - private _value?: Array | string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -24,9 +32,6 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp const validationLimit = config.getValueByAlias('validationLimit'); this._limitMin = validationLimit?.min; this._limitMax = validationLimit?.max; - - // We have the need in Block Editors, to just pick a single ID not as an array. So for that we use the multiPicker config, which can be set to true if you wanted to be able to pick multiple. - this._multiPicker = config.getValueByAlias('multiPicker') ?? false; } } @@ -34,30 +39,23 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp private _limitMin?: number; @state() private _limitMax?: number; - @state() - private _multiPicker?: boolean; private _onChange(event: CustomEvent) { const selectedIds = (event.target as UmbInputMediaTypeElement).selectedIds; - this.value = this._multiPicker ? selectedIds : selectedIds[0]; + this.value = selectedIds; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } + render() { - return this._multiPicker !== undefined - ? html` - ) ?? [] - : this._value - ? [this._value as string] - : []} - .min=${this._limitMin ?? 0} - .max=${this._limitMax ?? Infinity}> - Add - - ` - : ''; + return html` + + Add + + `; } } From 733e7df80b9d3b11ede0202e35f9cdc3b265cd48 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:12:13 +0100 Subject: [PATCH 05/18] add missing `@property` --- .../input-document-type.element.ts | 11 +++++------ .../input-media-type/input-media-type.element.ts | 7 ++++--- 2 files changed, 9 insertions(+), 9 deletions(-) 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 3e5be1075f..89978f248b 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 @@ -72,12 +72,13 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { - return this.#pickerContext.getSelection(); - } + @property({ type: Array }) public set selectedIds(ids: Array | undefined) { this.#pickerContext.setSelection(ids ?? []); } + public get selectedIds(): Array { + return this.#pickerContext.getSelection(); + } @property() public set value(idsString: string) { @@ -165,9 +166,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) id="add-button" look="placeholder" @click=${this.#openPicker} - label="${this.localize.term('general_choose')}" - >${this.localize.term('general_choose')} + label="${this.localize.term('general_choose')}"> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts index f6f590da8e..cc19e4555d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts @@ -53,12 +53,13 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { - return this.#pickerContext.getSelection(); - } + @property({ type: Array }) public set selectedIds(ids: Array) { this.#pickerContext.setSelection(ids); } + public get selectedIds(): Array { + return this.#pickerContext.getSelection(); + } @property() public set value(idsString: string) { From 068941e4eae2d951589d9b67da307612a9376770 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:12:24 +0100 Subject: [PATCH 06/18] add missing getter --- .../input-media-type/input-media-type.element.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts index cc19e4555d..b17f6f80e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts @@ -66,6 +66,9 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. this.selectedIds = splitStringToArray(idsString); } + public get value() { + return this.selectedIds.join(','); + } @state() private _items?: Array; @@ -108,13 +111,13 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { #renderItems() { if (!this._items) return; return html` - ${repeat( + + ${repeat( this._items, (item) => item.unique, (item) => this.#renderItem(item), - )} + )} + `; } From 5b3f6caa3146600964ea32638644ab450466e931 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:12:32 +0100 Subject: [PATCH 07/18] add localization --- ...roperty-editor-ui-document-type-picker.element.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 f7c7c37b07..730bfc55eb 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 @@ -52,14 +52,14 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement .selectedIds=${this._multiPicker ? (this._value as Array) ?? [] : this._value - ? [this._value as string] - : []} + ? [this._value as string] + : []} .min=${this._limitMin ?? 0} .max=${this._limitMax ?? Infinity} - .elementTypesOnly=${this._onlyElementTypes ?? false} - >Add - ` + .elementTypesOnly=${this._onlyElementTypes ?? false}> + Add + + ` : ''; } } From 9aec1eab98fba81d86206e26d2d201882e1f5f27 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:12:51 +0100 Subject: [PATCH 08/18] use `.selectedIds` property --- ...erty-editor-ui-media-type-picker.element.ts | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index adcd17192d..e82e9600b6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -9,22 +9,8 @@ import { @customElement('umb-property-editor-ui-media-type-picker') export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @state() - _value?: Array; - @property({ type: Array }) - public set value(value: Array | string | undefined) { - if (Array.isArray(value)) { - this._value = value; - } else if (typeof value === 'string') { - this._value = value.split(','); - } else { - this._value = undefined; - } - } - public get value(): Array | string | undefined { - return this._value; - } + public value?: Array | string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -50,7 +36,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp return html` Add From 3c2c8567e1d6e9e8e15742af26e856c1beb8e7b4 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:24:14 +0100 Subject: [PATCH 09/18] reset the value property and split the string in case the server returns a string --- ...erty-editor-ui-document-type-picker.element.ts | 15 +++------------ ...roperty-editor-ui-media-type-picker.element.ts | 3 ++- 2 files changed, 5 insertions(+), 13 deletions(-) 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 730bfc55eb..f80980d8d5 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 @@ -3,17 +3,12 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-type-picker') export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property({ type: Array }) - public get value(): Array | string | undefined { - return this._value; - } - public set value(value: Array | string | undefined) { - this._value = value; - } - private _value?: Array | string; + public value?: Array | string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -49,11 +44,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement ? html` ) ?? [] - : this._value - ? [this._value as string] - : []} + .selectedIds=${this.value ? (Array.isArray(this.value) ? this.value : splitStringToArray(this.value)) : []} .min=${this._limitMin ?? 0} .max=${this._limitMax ?? Infinity} .elementTypesOnly=${this._onlyElementTypes ?? false}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index e82e9600b6..d1aaa405ac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -6,6 +6,7 @@ import { UmbPropertyValueChangeEvent, type UmbPropertyEditorConfigCollection, } from '@umbraco-cms/backoffice/property-editor'; +import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-media-type-picker') export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { @@ -36,7 +37,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp return html` Add From 1cfebd53381eb51954f9073c1569a0cc5f342f2e Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:29:41 +0100 Subject: [PATCH 10/18] split values correctly --- ...erty-editor-ui-document-type-picker.element.ts | 3 +++ .../property-editor-ui-document-picker.element.ts | 15 ++++++--------- ...roperty-editor-ui-media-type-picker.element.ts | 3 +++ .../property-editor-ui-media-picker.element.ts | 15 ++++++--------- 4 files changed, 18 insertions(+), 18 deletions(-) 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 f80980d8d5..71ebbb7cef 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 @@ -22,6 +22,9 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement this._onlyElementTypes = config.getValueByAlias('onlyPickElementTypes') ?? false; } } + public get config() { + return undefined; + } @state() private _limitMin?: number; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index 1239e92c6b..7a4bfb1865 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -3,18 +3,12 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-picker') export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - private _value: Array = []; - @property({ type: Array }) - public get value(): Array { - return this._value; - } - public set value(value: Array) { - this._value = Array.isArray(value) ? value : value ? [value] : []; - } + public value?: Array | string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -23,6 +17,9 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl this._limitMin = (validationLimit?.value as any)?.min; this._limitMax = (validationLimit?.value as any)?.max; } + public get config() { + return undefined; + } @state() private _limitMin?: number; @@ -39,7 +36,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl return html` Add = []; - @property({ type: Array }) - public get value(): Array { - return this._value; - } - public set value(value: Array | undefined) { - this._value = value || []; - } + public value?: Array | string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -30,6 +24,9 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme this._limitMin = minMax.min ?? 0; this._limitMax = minMax.max ?? Infinity; } + public get config() { + return undefined; + } @state() private _limitMin: number = 0; @@ -45,7 +42,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme return html` Add Date: Tue, 5 Mar 2024 18:30:32 +0100 Subject: [PATCH 11/18] add localization --- .../property-editor-ui-document-picker.element.ts | 6 +++--- .../media-picker/property-editor-ui-media-picker.element.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index 7a4bfb1865..9006b71461 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -38,9 +38,9 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl @change=${this._onChange} .selectedIds=${this.value ? (Array.isArray(this.value) ? this.value : splitStringToArray(this.value)) : []} .min=${this._limitMin ?? 0} - .max=${this._limitMax ?? Infinity} - >Add + .max=${this._limitMax ?? Infinity}> + Add + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index a1d37ed228..35c8a282de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -44,9 +44,9 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme @change=${this._onChange} .selectedIds=${this.value ? (Array.isArray(this.value) ? this.value : splitStringToArray(this.value)) : []} .min=${this._limitMin} - .max=${this._limitMax} - >Add + .max=${this._limitMax}> + Add + `; } } From d064bca92240fdffefcae2320db5d581a8907f19 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:31:09 +0100 Subject: [PATCH 12/18] add getters --- .../components/input-document/input-document.element.ts | 3 +++ .../media/media/components/input-media/input-media.element.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts index 200afe809a..ac14ad3495 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts @@ -96,6 +96,9 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. this.selectedIds = splitStringToArray(idsString); } + public get value() { + return this.selectedIds.join(','); + } @state() private _editDocumentPath = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts index 2e7f622da6..dfe4b9d75e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts @@ -96,6 +96,9 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) { // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. this.selectedIds = splitStringToArray(idsString); } + public get value() { + return this.selectedIds.join(','); + } @state() private _editMediaPath = ''; From 1a13adcd3e8db1ee2bb7b09edd985f73e58f53a8 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:36:12 +0100 Subject: [PATCH 13/18] fix story --- .../property-editor-ui-media-type-picker.stories.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts index b2d9e1dac8..5ceb9df55a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.stories.ts @@ -5,11 +5,11 @@ import { html } from '@umbraco-cms/backoffice/external/lit'; import './property-editor-ui-media-type-picker.element.js'; export default { - title: 'Property Editor UIs/Document Type Picker', - component: 'umb-property-editor-ui-document-type-picker', - id: 'umb-property-editor-ui-document-type-picker', + title: 'Property Editor UIs/Media Type Picker', + component: 'umb-property-editor-ui-media-type-picker', + id: 'umb-property-editor-ui-media-type-picker', } as Meta; export const AAAOverview: Story = () => - html` `; + html` `; AAAOverview.storyName = 'Overview'; From eec5a36f807b13fa38743e9d33a9205918b6865f Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 19:42:32 +0100 Subject: [PATCH 14/18] make all property editor ui's use strings to store their values to match the migrated server data --- .../property-editor-ui-document-type-picker.element.ts | 8 ++++---- .../property-editor-ui-document-picker.element.ts | 6 +++--- .../property-editor-ui-media-type-picker.element.ts | 9 ++++----- .../property-editor-ui-media-picker.element.ts | 8 ++++---- 4 files changed, 15 insertions(+), 16 deletions(-) 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 71ebbb7cef..39554ed374 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 @@ -7,8 +7,8 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-type-picker') export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @property({ type: Array }) - public value?: Array | string; + @property() + public value?: string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -37,7 +37,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement private _onChange(event: CustomEvent) { const selectedIds = (event.target as UmbInputDocumentTypeElement).selectedIds; - this.value = this._multiPicker ? selectedIds : selectedIds[0]; + this.value = this._multiPicker ? selectedIds.join(',') : selectedIds[0]; this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -47,7 +47,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement ? html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index 9006b71461..aba103a6ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -7,8 +7,8 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-picker') export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @property({ type: Array }) - public value?: Array | string; + @property() + public value?: string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -27,7 +27,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl private _limitMax?: number; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputDocumentElement).selectedIds; + this.value = (event.target as UmbInputDocumentElement).selectedIds.join(','); this.dispatchEvent(new CustomEvent('property-value-change')); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index bb28b53aa2..bb74fea2b1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -10,8 +10,8 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-media-type-picker') export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @property({ type: Array }) - public value?: Array | string; + @property() + public value?: string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -31,8 +31,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp private _limitMax?: number; private _onChange(event: CustomEvent) { - const selectedIds = (event.target as UmbInputMediaTypeElement).selectedIds; - this.value = selectedIds; + this.value = (event.target as UmbInputMediaTypeElement).selectedIds.join(','); this.dispatchEvent(new UmbPropertyValueChangeEvent()); } @@ -40,7 +39,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp return html` Add diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index 35c8a282de..61db976ec2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -11,8 +11,8 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; */ @customElement('umb-property-editor-ui-media-picker') export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @property({ type: Array }) - public value?: Array | string; + @property() + public value?: string; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -34,7 +34,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme private _limitMax: number = Infinity; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputMediaElement).selectedIds; + this.value = (event.target as UmbInputMediaElement).selectedIds.join(','); this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -42,7 +42,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme return html` Add From d28aedc94d02f43a275d1e844e465579994b8b06 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 5 Mar 2024 19:44:40 +0100 Subject: [PATCH 15/18] map id to unique --- .../repository/item/media-type-item.server.data-source.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/item/media-type-item.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/item/media-type-item.server.data-source.ts index 1e0529824e..cc8f9099c2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/item/media-type-item.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/item/media-type-item.server.data-source.ts @@ -34,6 +34,6 @@ const mapper = (item: MediaTypeItemResponseModel): UmbMediaTypeItemModel => { return { icon: item.icon || null, name: item.name, - unique: item.name, + unique: item.id, }; }; From 9648080c2e9fce290db06650279a583e76708a0e Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 19:44:43 +0100 Subject: [PATCH 16/18] cleanup --- .../property-editor-ui-document-type-picker.element.ts | 8 +++++--- .../property-editor-ui-document-picker.element.ts | 7 +++++-- .../property-editor-ui-media-type-picker.element.ts | 1 - .../property-editor-ui-media-picker.element.ts | 8 +++++--- 4 files changed, 15 insertions(+), 9 deletions(-) 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 39554ed374..b90e5184f2 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 @@ -2,8 +2,10 @@ import type { UmbInputDocumentTypeElement } from '../../components/input-documen import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; @customElement('umb-property-editor-ui-document-type-picker') export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { @@ -38,7 +40,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement private _onChange(event: CustomEvent) { const selectedIds = (event.target as UmbInputDocumentTypeElement).selectedIds; this.value = this._multiPicker ? selectedIds.join(',') : selectedIds[0]; - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } // TODO: Implement mandatory? diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index aba103a6ea..49742cc5c0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -2,7 +2,10 @@ import type { UmbInputDocumentElement } from '../../components/input-document/in import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-picker') @@ -28,7 +31,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl private _onChange(event: CustomEvent) { this.value = (event.target as UmbInputDocumentElement).selectedIds.join(','); - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } // TODO: Implement mandatory? diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index bb74fea2b1..38365a5c35 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -6,7 +6,6 @@ import { UmbPropertyValueChangeEvent, type UmbPropertyEditorConfigCollection, } from '@umbraco-cms/backoffice/property-editor'; -import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-media-type-picker') export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index 61db976ec2..2443efbfa6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -1,10 +1,12 @@ import type { UmbInputMediaElement } from '../../components/input-media/input-media.element.js'; import '../../components/input-media/input-media.element.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; /** * @element umb-property-editor-ui-media-picker @@ -35,7 +37,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme private _onChange(event: CustomEvent) { this.value = (event.target as UmbInputMediaElement).selectedIds.join(','); - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { From 6b1111d6108324e62a2445e0b5d00f591e3bcc69 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 5 Mar 2024 19:48:10 +0100 Subject: [PATCH 17/18] use .value to support the server data --- .../property-editor-ui-document-picker.element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index 49742cc5c0..e70230c44a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -6,7 +6,6 @@ import { UmbPropertyValueChangeEvent, type UmbPropertyEditorConfigCollection, } from '@umbraco-cms/backoffice/property-editor'; -import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-property-editor-ui-document-picker') export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { @@ -39,7 +38,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl return html` Add From 302fdd1600d138eda2d37229afa842a679f51b09 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 6 Mar 2024 10:01:13 +0000 Subject: [PATCH 18/18] imports `UMB_MEMBER_TYPE_ITEM_REPOSITORY_ALIAS` --- .../components/input-member-type/input-member-type.context.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.context.ts index 0915ef4d24..30b7ab1cea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.context.ts @@ -1,11 +1,10 @@ import { UMB_MEMBER_TYPE_PICKER_MODAL } from '../../modal/member-type-picker-modal.token.js'; +import { UMB_MEMBER_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/member-type'; import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbMemberTypePickerContext extends UmbPickerInputContext { constructor(host: UmbControllerHost) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore super(host, UMB_MEMBER_TYPE_ITEM_REPOSITORY_ALIAS, UMB_MEMBER_TYPE_PICKER_MODAL); } }