From 68ae540f1f5d5f319f942cae1458cab6441b04f9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:10:33 +0200 Subject: [PATCH 01/16] Update manifests.ts --- .../src/packages/property-editors/content-picker/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts index 98da3baee5..412adfacaf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts @@ -14,6 +14,7 @@ const manifest: ManifestPropertyEditorUi = { icon: 'icon-page-add', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker', + supportsReadOnly: true, settings: { properties: [ { From 4f2f535173161aec3118ffdccd188686b2c669b8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:11:23 +0200 Subject: [PATCH 02/16] pass readonly to input --- .../property-editor-ui-content-picker.element.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts index c40a756769..c6b35c9b2f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts @@ -37,6 +37,15 @@ export class UmbPropertyEditorUIContentPickerElement } #value?: UmbContentPickerValueType = []; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _type: UmbContentPickerSource['type'] = 'content'; @@ -150,6 +159,7 @@ export class UmbPropertyEditorUIContentPickerElement .startNode=${startNode} .allowedContentTypeIds=${this._allowedContentTypeUniques ?? ''} ?showOpenButton=${this._showOpenButton} + ?readonly=${this.readonly} @change=${this.#onChange}> `; } From 351db46a8301cdb405c9c2e230f59a2c1419ff48 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:11:38 +0200 Subject: [PATCH 03/16] pass readonly to inputs --- .../input-content/input-content.element.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts index b404d9a51e..3d1485052e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts @@ -8,7 +8,6 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-input-content'; - @customElement(elementName) export class UmbInputContentElement extends UmbFormControlMixin( UmbLitElement, @@ -79,6 +78,15 @@ export class UmbInputContentElement extends UmbFormControlMixin 0 ? this.#selection.join(',') : undefined; } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + #entityTypeLookup = { content: 'document', media: 'media', member: 'member' }; #selection: Array = []; @@ -117,6 +125,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } @@ -131,6 +140,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } @@ -145,6 +155,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } From f06817a4a1580b27ecee65e6173f69474f38ef62 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:25:21 +0200 Subject: [PATCH 04/16] readonly media picker --- .../input-media/input-media.element.ts | 62 ++++++++++++++----- .../media-entity-picker/manifests.ts | 1 + ...y-editor-ui-media-entity-picker.element.ts | 10 +++ 3 files changed, 59 insertions(+), 14 deletions(-) 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 3e0d1f331a..e502ea7953 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 @@ -1,7 +1,16 @@ import type { UmbMediaCardItemModel } from '../../modals/index.js'; import type { UmbMediaItemModel } from '../../repository/index.js'; import { UmbMediaPickerContext } from './input-media.context.js'; -import { css, customElement, html, ifDefined, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + html, + ifDefined, + nothing, + property, + repeat, + state, +} from '@umbraco-cms/backoffice/external/lit'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -13,7 +22,6 @@ import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import '@umbraco-cms/backoffice/imaging'; const elementName = 'umb-input-media'; - @customElement(elementName) export class UmbInputMediaElement extends UmbFormControlMixin(UmbLitElement) { #sorter = new UmbSorterController(this, { @@ -116,6 +124,27 @@ export class UmbInputMediaElement extends UmbFormControlMixin 0 ? this.selection.join(',') : undefined; } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + + if (this.#readonly) { + this.#sorter.disable(); + } else { + this.#sorter.enable(); + } + } + #readonly = false; + @state() private _editMediaPath = ''; @@ -182,7 +211,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin + label=${this.localize.term('general_choose')} + ?disabled=${this.readonly}> ${this.localize.term('general_choose')} @@ -207,30 +237,34 @@ export class UmbInputMediaElement extends UmbFormControlMixin + href="${ifDefined(href)}" + ?readonly=${this.readonly}> ${this.#renderIsTrashed(item)} - - this.#onRemove(item)}> - - - + ${this.#renderRemoveAction(item)} `; } + #renderRemoveAction(item: UmbMediaCardItemModel) { + if (this.readonly) return nothing; + return html` + this.#onRemove(item)}> + + + `; + } + #renderIsTrashed(item: UmbMediaCardItemModel) { - if (!item.isTrashed) return; + if (!item.isTrashed) return nothing; return html` Trashed diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/manifests.ts index 3b0bb49284..86bf37902e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/manifests.ts @@ -9,5 +9,6 @@ export const manifest: ManifestPropertyEditorUi = { label: 'Media Entity Picker', icon: 'icon-picture', group: 'pickers', + supportsReadOnly: true, }, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts index c5426bfe0f..96827931d1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts @@ -19,6 +19,15 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i this._max = minMax?.max ?? Infinity; } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _min: number = 0; @@ -36,6 +45,7 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i .min=${this._min} .max=${this._max} .value=${this.value} + ?readonly=${this.readonly} @change=${this.#onChange}> `; } From dc8569310ca914f7dbb9ef2aca2a1fc79bef897f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 13:53:54 +0200 Subject: [PATCH 05/16] update manifest --- .../property-editor/member-group-picker/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/manifests.ts index 2ec8bcc4f2..77db474611 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/manifests.ts @@ -12,6 +12,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.MemberGroupPicker', icon: 'icon-users-alt', group: 'people', + supportsReadOnly: true, }, }, memberGroupSchemaManifest, From 0f039add09d33f43270f65b33f114301a68b31fa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 13:54:08 +0200 Subject: [PATCH 06/16] pass readonly to input --- ...property-editor-ui-member-group-picker.element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts index 680b011fa6..b26aeea41e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -22,6 +22,15 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i this._max = minMax?.max ?? Infinity; } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _min = 0; @@ -40,7 +49,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i .max=${this._max} .value=${this.value} ?showOpenButton=${true} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } } From b4953baec952dc343a36c45713222092c3971130 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 13:56:22 +0200 Subject: [PATCH 07/16] input readonly mode --- .../input-member-group.element.ts | 45 +++++++++++++++---- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts index fe25a89706..77474c9147 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts @@ -1,6 +1,6 @@ import type { UmbMemberGroupItemModel } from '../../repository/index.js'; import { UmbMemberGroupPickerInputContext } from './input-member-group.context.js'; -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -100,6 +100,27 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin boolean = () => true; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + + if (this.#readonly) { + this.#sorter.disable(); + } else { + this.#sorter.enable(); + } + } + #readonly = false; + @state() private _editMemberGroupPath = ''; @@ -168,29 +189,37 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin= this.max) return; + if (this.max === 1 && this.selection.length >= this.max) return nothing; return html``; + label=${this.localize.term('general_choose')} + ?disabled=${this.readonly}>`; } #renderItem(item: UmbMemberGroupItemModel) { - if (!item.unique) return; + if (!item.unique) return nothing; return html` - + - ${this.#renderOpenButton(item)} - this.#removeItem(item)} label=${this.localize.term('general_remove')}> + ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} `; } + #renderRemoveButton(item: UmbMemberGroupItemModel) { + if (this.readonly) return nothing; + return html` this.#removeItem(item)} + label=${this.localize.term('general_remove')}>`; + } + #renderOpenButton(item: UmbMemberGroupItemModel) { - if (!this.showOpenButton) return; + if (!this.showOpenButton) return nothing; + if (this.readonly) return nothing; return html` Date: Mon, 26 Aug 2024 14:04:58 +0200 Subject: [PATCH 08/16] open through ref name --- .../input-member-group.element.ts | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts index 77474c9147..42e4eb17b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts @@ -201,10 +201,12 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin - - ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} - + + ${this.#renderRemoveButton(item)} `; @@ -217,18 +219,6 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin`; } - #renderOpenButton(item: UmbMemberGroupItemModel) { - if (!this.showOpenButton) return nothing; - if (this.readonly) return nothing; - return html` - - ${this.localize.term('general_open')} - - `; - } - static override styles = [ css` #btn-add { From 84aa09963f78e390e9f168813f7024f15dcb3c79 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 14:44:03 +0200 Subject: [PATCH 09/16] Update manifests.ts --- .../property-editors/markdown-editor/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts index ee9dc738f5..bde0db6793 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts @@ -11,6 +11,7 @@ const manifest: ManifestPropertyEditorUi = { propertyEditorSchemaAlias: 'Umbraco.MarkdownEditor', icon: 'icon-code', group: 'richContent', + supportsReadOnly: true, settings: { properties: [ { From cbacd14142916b82fb21b2b4ee41c62b0d772081 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 14:44:13 +0200 Subject: [PATCH 10/16] pass readonly to input --- .../property-editor-ui-markdown-editor.element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts index e4d0e93692..8383d5f090 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts @@ -17,6 +17,15 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl @property() value = ''; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() private _preview?: boolean; @@ -41,7 +50,8 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl value=${this.value} .overlaySize=${this._overlaySize} ?preview=${this._preview} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } } From e8886efc2ba2bf65760c107e7f7aceeddd629964 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Aug 2024 14:51:19 +0200 Subject: [PATCH 11/16] implement readonly mode for input --- .../input-markdown.element.ts | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts index c8135d7053..5d2b5bb964 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts @@ -1,4 +1,13 @@ -import { css, customElement, html, property, query, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + html, + nothing, + property, + query, + state, + unsafeHTML, +} from '@umbraco-cms/backoffice/external/lit'; import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; import { marked } from '@umbraco-cms/backoffice/external/marked'; import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor'; @@ -34,6 +43,22 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement, @property() overlaySize?: UUIModalSidebarSize; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + this.#editor?.monacoEditor?.updateOptions({ readOnly: this.#readonly }); + } + #readonly = false; + #editor?: UmbCodeEditorController; @query('umb-code-editor') @@ -50,6 +75,9 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement, try { this.#editor = this._codeEditor?.editor; + // Set read only mode + this.#editor?.monacoEditor?.updateOptions({ readOnly: this.#readonly }); + // TODO: make all action into extensions this.observe(umbExtensionsRegistry.byType('monacoMarkdownEditorAction'), (manifests) => { manifests.forEach(async (manifest) => { @@ -416,6 +444,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement, } #renderToolbar() { + if (this.readonly) return nothing; return html`
From f57197ee5d6895ca78e31de1c05f27340a29a8c9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 28 Aug 2024 10:30:55 +0200 Subject: [PATCH 12/16] simplify readonly UI by hiding adds button when something is selected --- .../input-document/input-document.element.ts | 12 ++++---- .../input-media/input-media.element.ts | 28 +++++++++++-------- .../input-rich-media.element.ts | 26 +++++++++-------- .../input-member-group.element.ts | 16 +++++++---- .../input-member/input-member.element.ts | 20 +++++++------ .../input-multi-url.element.ts | 22 +++++++++------ 6 files changed, 73 insertions(+), 51 deletions(-) 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 ae0236a47d..18575ba822 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 @@ -197,15 +197,17 @@ export class UmbInputDocumentElement extends UmbFormControlMixin= this.max) return; - return html` - = this.max) return nothing; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html` - `; + ?disabled=${this.readonly}>`; + } } #renderItems() { 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 fab5adca27..9be7203248 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 @@ -222,18 +222,22 @@ export class UmbInputMediaElement extends UmbFormControlMixin= this.max) return; - return html` - - - ${this.localize.term('general_choose')} - - `; + if (this._cards && this.max && this._cards.length >= this.max) return nothing; + if (this.readonly && this._cards.length > 0) { + return nothing; + } else { + return html` + + + ${this.localize.term('general_choose')} + + `; + } } #renderItem(item: UmbMediaCardItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 9b5cf80fef..e89055aa0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -362,17 +362,21 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, #renderAddButton() { if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple)) return; - return html` - - - ${this.localize.term('general_choose')} - - `; + if (this.readonly && this._cards.length > 0) { + return nothing; + } else { + return html` + + + ${this.localize.term('general_choose')} + + `; + } } #renderItem(item: UmbRichMediaCardModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts index 42e4eb17b8..06e85a651a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts @@ -190,12 +190,16 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin= this.max) return nothing; - return html``; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html``; + } } #renderItem(item: UmbMemberGroupItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 3c1983d5c9..b8ffac2d53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -196,14 +196,18 @@ export class UmbInputMemberElement extends UmbFormControlMixin= this.max) return nothing; - return html` - - `; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html` + + `; + } } #renderItem(item: UmbMemberItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts index 13be644661..67b398fbdc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts @@ -272,15 +272,19 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, } #renderAddButton() { - if (this.max === 1 && this.urls && this.urls.length >= this.max) return; - return html` - - `; + if (this.max === 1 && this.urls && this.urls.length >= this.max) return nothing; + if (this.readonly && this.urls.length > 0) { + return nothing; + } else { + return html` + + `; + } } #renderItems() { From 7f91e239dd7658a3a7dc8cbe3d5352d30393440f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 1 Sep 2024 18:24:28 +0000 Subject: [PATCH 13/16] Bump @eslint/js from 9.9.0 to 9.9.1 Bumps [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) from 9.9.0 to 9.9.1. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/commits/v9.9.1/packages/js) --- updated-dependencies: - dependency-name: "@eslint/js" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- src/Umbraco.Web.UI.Client/package-lock.json | 17 +++++++++++++---- src/Umbraco.Web.UI.Client/package.json | 2 +- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 04b68f446c..50f4d74b50 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -59,7 +59,7 @@ }, "devDependencies": { "@babel/core": "^7.24.9", - "@eslint/js": "^9.7.0", + "@eslint/js": "^9.9.1", "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", @@ -2616,9 +2616,9 @@ } }, "node_modules/@eslint/js": { - "version": "9.9.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz", - "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==", + "version": "9.9.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.1.tgz", + "integrity": "sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==", "dev": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -12810,6 +12810,15 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint/node_modules/@eslint/js": { + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz", + "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, "node_modules/eslint/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 6c89efd83a..fa6222e29a 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -231,7 +231,7 @@ }, "devDependencies": { "@babel/core": "^7.24.9", - "@eslint/js": "^9.7.0", + "@eslint/js": "^9.9.1", "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", From fed06ce0a7bccefd514481ac863d1eababdc3690 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 1 Sep 2024 18:25:03 +0000 Subject: [PATCH 14/16] Bump eslint-plugin-wc from 2.1.0 to 2.1.1 Bumps [eslint-plugin-wc](https://github.com/43081j/eslint-plugin-wc) from 2.1.0 to 2.1.1. - [Release notes](https://github.com/43081j/eslint-plugin-wc/releases) - [Changelog](https://github.com/43081j/eslint-plugin-wc/blob/master/CHANGELOG.md) - [Commits](https://github.com/43081j/eslint-plugin-wc/compare/v2.1.0...2.1.1) --- updated-dependencies: - dependency-name: eslint-plugin-wc dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- src/Umbraco.Web.UI.Client/package-lock.json | 8 ++++---- src/Umbraco.Web.UI.Client/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 04b68f446c..deb7cfc541 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -91,7 +91,7 @@ "eslint-plugin-lit": "^1.14.0", "eslint-plugin-local-rules": "^3.0.2", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-wc": "^2.1.0", + "eslint-plugin-wc": "^2.1.1", "glob": "^11.0.0", "globals": "^15.8.0", "lucide-static": "^0.424.0", @@ -12770,9 +12770,9 @@ } }, "node_modules/eslint-plugin-wc": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-2.1.0.tgz", - "integrity": "sha512-s/BGOtmpgQ2yifR6EC1OM9t0DwYLgg4ZAL07Kw4eXvBb5TYaPafI+65tswvnZvhH8FqcjERLbBZPPvYsvinkfg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-2.1.1.tgz", + "integrity": "sha512-GfJo05ZgWfwAFbW6Gkf+9CMOIU6fmbd3b4nm+PKESHgUdUTmi7vawlELCrzOhdiQjXUPZxDfFIVxYt9D/v/GdQ==", "dev": true, "dependencies": { "is-valid-element-name": "^1.0.0", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 6c89efd83a..71e92910dc 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -263,7 +263,7 @@ "eslint-plugin-lit": "^1.14.0", "eslint-plugin-local-rules": "^3.0.2", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-wc": "^2.1.0", + "eslint-plugin-wc": "^2.1.1", "glob": "^11.0.0", "globals": "^15.8.0", "lucide-static": "^0.424.0", From fa68faab012803e55abca73ebc558a36b4715401 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Sep 2024 19:35:14 +0200 Subject: [PATCH 15/16] add tdo comment input-media.element.ts --- .../media/media/components/input-media/input-media.element.ts | 1 + 1 file changed, 1 insertion(+) 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 9be7203248..b6cbe7a4ef 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 @@ -222,6 +222,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin= this.max) return nothing; if (this.readonly && this._cards.length > 0) { return nothing; From e14a1999ef4c94a12ecb72c859bf44daaa40dbff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Sep 2024 19:37:07 +0200 Subject: [PATCH 16/16] TODO comment on input-rich-media.element.ts --- .../components/input-rich-media/input-rich-media.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index e89055aa0b..1e705d6de7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -361,6 +361,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, } #renderAddButton() { + // TODO: Stop preventing adding more, instead implement proper validation for user feedback. [NL] if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple)) return; if (this.readonly && this._cards.length > 0) { return nothing;