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 9e4fde7df8..3efa9c4cc8 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 @@ -8,14 +8,6 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement override render() { return html` - - + property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker" + .config=${[ + { + alias: 'singleItemMode', + value: true, + }, + ]}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts index 236ac774a0..66ba634c0d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts @@ -12,14 +12,6 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement label="Label" alias="label" property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"> - + label="Thumbnail" + alias="thumbnail" + property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker" + .config=${[ + { + alias: 'singleItemMode', + value: true, + }, + ]}> + label="Thumbnail" + alias="thumbnail" + property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker" + .config=${[ + { + alias: 'singleItemMode', + value: true, + }, + ]}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts index 9456e899b6..fe85e21721 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts @@ -11,17 +11,21 @@ import '../../components/input-static-file/index.js'; @customElement('umb-property-editor-ui-static-file-picker') export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - private _value: Array = []; + private _singleItemMode = false; - @property({ type: Array }) - public set value(value: Array) { - this._value = value || []; + @state() + private _value?: string | Array; + + @property({ attribute: false }) + public set value(value: string | Array | undefined) { + this._value = value; } - public get value(): Array { + public get value() { return this._value; } public set config(config: UmbPropertyEditorConfigCollection | undefined) { + this._singleItemMode = config?.getValueByAlias('singleItemMode') ?? false; const validationLimit = config?.getValueByAlias('validationLimit'); this._limitMin = validationLimit?.min; @@ -34,7 +38,11 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im private _limitMax?: number; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputStaticFileElement).selection; + if (this._singleItemMode) { + this.value = (event.target as UmbInputStaticFileElement).selection[0]; + } else { + this.value = (event.target as UmbInputStaticFileElement).selection; + } this.dispatchEvent(new UmbPropertyValueChangeEvent()); } @@ -42,10 +50,10 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im override render() { return html` + .max=${this._limitMax ?? Infinity} + @change=${this._onChange}> `; } }