From 358c888864cb0f1e85800b82e082043ad64f571c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 20:57:51 +0100 Subject: [PATCH 1/7] reorder getter and setter methods to match future requirement and remove Lit complains --- ...block-grid-area-type-permission.element.ts | 9 +++--- ...itor-ui-block-grid-areas-config.element.ts | 11 ++++--- .../property-editor-ui-block-grid.element.ts | 6 ++-- ...-block-grid-group-configuration.element.ts | 6 ++-- ...ui-block-grid-layout-stylesheet.element.ts | 8 ++--- .../property-editor-ui-block-list.element.ts | 6 ++-- .../input-block-type.element.ts | 7 +++-- .../field-dropdown-list.element.ts | 8 ++--- .../input-toggle/input-toggle.element.ts | 4 --- .../input-multiple-text-string.element.ts | 6 ++-- .../modal/component/modal-base.element.ts | 12 ++++---- ...roperty-editor-ui-checkbox-list.element.ts | 6 ++-- .../property-editor-ui-dropdown.element.ts | 6 ++-- ...y-editor-ui-member-group-picker.element.ts | 6 ++-- ...roperty-editor-ui-member-picker.element.ts | 8 ++--- ...property-editor-ui-number-range.element.ts | 8 ++--- ...rty-editor-ui-radio-button-list.element.ts | 6 ++-- ...-tree-picker-source-type-picker.element.ts | 4 +-- .../property-dataset.element.ts | 12 ++++---- .../input-section/input-section.element.ts | 21 ++++++++------ .../input-tree/input-tree.element.ts | 8 ++--- .../modal/public-access-modal.element.ts | 4 +-- .../input-media-type.element.ts | 22 +++++++------- ...rty-editor-ui-media-type-picker.element.ts | 2 +- ...a-type-workspace-view-structure.element.ts | 2 +- .../input-media/input-media.element.ts | 26 ++++++++--------- ...property-editor-ui-media-picker.element.ts | 2 +- .../input-member-type.element.ts | 13 +++++---- .../input-member/input-member.element.ts | 29 ++++++++++--------- .../workspace-package-builder.element.ts | 4 +-- ...ty-editor-ui-static-file-picker.element.ts | 6 ++-- .../tags/property-editor-ui-tags.element.ts | 6 ++-- ...y-mce-stylesheets-configuration.element.ts | 10 +++---- .../user-group-workspace-editor.element.ts | 2 +- .../user-workspace-access-settings.element.ts | 2 +- 35 files changed, 151 insertions(+), 147 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts index c0a803ed71..92e7a2a5c7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts @@ -14,12 +14,13 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement implements UmbPropertyEditorUiElement { @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value ?? []; } + public get value(): Array { + return this._value; + } + @state() private _value: Array = []; @@ -151,7 +152,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement By default, all block types are allowed in an Area, Use this option to allow only selected types. - ` + ` : nothing} `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts index 551ee938fb..95f453e080 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts @@ -24,15 +24,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement #defaultAreaGridColumns: number = 12; #valueOfAreaGridColumns?: number | null; - #workspaceModal: UmbModalRouteRegistrationController; - @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value ?? []; } + public get value(): Array { + return this._value; + } + @state() private _value: Array = []; @@ -59,7 +58,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement constructor() { super(); - this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL) + new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL) .addAdditionalPath('block-grid-area-type') .onSetup(() => { return { data: { entityType: 'block-grid-area-type', preset: {} }, modal: { size: 'large' } }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts index ae7ab63921..3e46a10288 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts @@ -56,9 +56,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement private _layoutColumns?: number; @property({ attribute: false }) - public get value(): UmbBlockGridValueModel { - return this._value; - } public set value(value: UmbBlockGridValueModel | undefined) { const buildUpValue: Partial = value ? { ...value } : {}; buildUpValue.layout ??= {}; @@ -70,6 +67,9 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement this.#context.setContents(buildUpValue.contentData); this.#context.setSettings(buildUpValue.settingsData); } + public get value(): UmbBlockGridValueModel { + return this._value; + } constructor() { super(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index c4d9db8862..5c39eb9ab6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -14,12 +14,12 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement private _value: Array = []; @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value || []; } + public get value(): Array { + return this._value; + } @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts index b32bb507ea..00da126e69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts @@ -17,15 +17,15 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement private _value: Array = []; @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value || []; } + public get value(): Array { + return this._value; + } @property({ attribute: false }) - public set config(config: UmbPropertyEditorConfigCollection | undefined) {} + public config?: UmbPropertyEditorConfigCollection; private _onChange(event: CustomEvent) { this.value = (event.target as UmbInputStaticFileElement).selectedPaths; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index c6f17862c9..fa308c7852 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -51,9 +51,6 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }; @property({ attribute: false }) - public get value(): UmbBlockListValueModel { - return this._value; - } public set value(value: UmbBlockListValueModel | undefined) { const buildUpValue: Partial = value ? { ...value } : {}; buildUpValue.layout ??= {}; @@ -65,6 +62,9 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement this.#managerContext.setContents(buildUpValue.contentData); this.#managerContext.setSettings(buildUpValue.settingsData); } + public get value(): UmbBlockListValueModel { + return this._value; + } @state() private _createButtonLabel = this.localize.term('content_createEmpty'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index af2608a99a..5643b99105 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -13,12 +13,12 @@ export class UmbInputBlockTypeElement< BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, > extends UmbLitElement { @property({ type: Array, attribute: false }) - public get value() { - return this._items; - } public set value(items) { this._items = items ?? []; } + public get value() { + return this._items; + } @property({ type: String }) workspacePath?: string; @@ -26,6 +26,7 @@ export class UmbInputBlockTypeElement< @state() private _items: Array = []; + // TODO: Seems no need to have these initially, then can be retrieved inside the `create` method. [NL] #datasetContext?: UmbPropertyDatasetContext; #filter: Array = []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts index 370ccd8e0a..837006de80 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts @@ -39,15 +39,15 @@ export class UmbFieldDropdownListElement extends UmbLitElement { private _value: FieldPickerValue | undefined; @property({ type: Object }) - public get value(): FieldPickerValue | undefined { - return this._value; - } public set value(val: FieldPickerValue | undefined) { const oldVal = this._value; this._value = val; this.requestUpdate('value', oldVal); this.dispatchEvent(new UmbChangeEvent()); } + public get value(): FieldPickerValue | undefined { + return this._value; + } @state() private _type?: FieldType; @@ -168,7 +168,7 @@ export class UmbFieldDropdownListElement extends UmbLitElement { display-value=${this.localize.term('content_mediatype')}> ${this.localize.term('content_mediatype')} ${this.localize.term('defaultdialogs_treepicker')} - ` + ` : nothing} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts index b2a8579b1f..6b7f5c856b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts @@ -32,10 +32,6 @@ export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) { return undefined; } - constructor() { - super(); - } - connectedCallback(): void { super.connectedCallback(); this.#updateLabel(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts index 93b381c130..e014cbeba7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts @@ -126,12 +126,12 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl // How do we handle this? /* @property() - public get value() { - throw new Error(`${this} does not support to get the value directly. Use items instead.`); - } public set value(value: FormDataEntryValue | FormData) { throw new Error(`${this} does not support to set the value directly. Use items instead.`); } + public get value() { + throw new Error(`${this} does not support to get the value directly. Use items instead.`); + } */ #onAdd() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal-base.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal-base.element.ts index 20dd262981..c4a1defa21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal-base.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal-base.element.ts @@ -38,21 +38,21 @@ export abstract class UmbModalBaseElement< #modalContext?: UmbModalContext | undefined; @property({ attribute: false }) - public get data(): ModalDataType | undefined { - return this._data; - } public set data(value: ModalDataType | undefined) { this._data = value; } + public get data(): ModalDataType | undefined { + return this._data; + } private _data?: ModalDataType | undefined; @property({ attribute: false }) - public get value(): ModalValueType { - return this.#value; - } public set value(value: ModalValueType) { this.#modalContext?.setValue(value); } + public get value(): ModalValueType { + return this.#value; + } public updateValue(partialValue: Partial) { this.#modalContext?.updateValue(partialValue); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 00776a8210..e2f9b9d949 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -12,12 +12,12 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorUiElement { #value: Array = []; @property({ type: Array }) - public get value(): Array { - return this.#value; - } public set value(value: Array) { this.#value = value ?? []; } + public get value(): Array { + return this.#value; + } @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts index e310cb10d5..e6a63339e2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts @@ -11,12 +11,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorUiElement { #value = ''; @property({ type: String }) - public get value(): string { - return this.#value; - } public set value(value: string | undefined) { this.#value = value?.trim() || ''; } + public get value(): string { + return this.#value; + } @state() _multiple?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts index b2110e4df5..ac4d7d8132 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -13,12 +13,12 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i // 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 get value(): Array { + // return this._value; + // } @property({ type: String }) public value: string = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.element.ts index 175a7c1286..d10b104c7a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.element.ts @@ -13,12 +13,12 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem // 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 get value(): Array { + // return this._value; + // } @property({ type: String }) public value: string = ''; @@ -48,7 +48,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem private _onChange(event: CustomEvent) { //TODO: This is a hack, something changed so now we need to convert the array to a comma separated string to make it work with the server. - const toCommaSeparatedString = (event.target as UmbInputMemberElement).selectedIds.join(','); + const toCommaSeparatedString = (event.target as UmbInputMemberElement).selection.join(','); // this.value = (event.target as UmbInputMemberElement).selectedIds; this.value = toCommaSeparatedString; this.dispatchEvent(new CustomEvent('property-value-change')); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.element.ts index f06d003f42..4501a25d0c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.element.ts @@ -13,15 +13,15 @@ import '../../../components/input-number-range/input-number-range.element.js'; @customElement('umb-property-editor-ui-number-range') export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property({ type: Object }) - private _value: NumberRangeValueType = { min: undefined, max: undefined }; - public get value() { - return this._value; - } public set value(value: NumberRangeValueType | undefined) { this._value = value || { min: undefined, max: undefined }; this._minValue = value?.min; this._maxValue = value?.max; } + public get value() { + return this._value; + } + private _value: NumberRangeValueType = { min: undefined, max: undefined }; @property({ attribute: false }) public config?: UmbPropertyEditorConfigCollection; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index 250387e4c4..c2b89ba8ee 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -12,12 +12,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement implements UmbPropertyEditorUiElement { #value = ''; @property({ type: String }) - public get value(): string { - return this.#value; - } public set value(value: string | undefined) { this.#value = value?.trim() || ''; } + public get value(): string { + return this.#value; + } @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts index dd1ee00dee..8ed1c25a65 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts @@ -76,10 +76,10 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement this.#setValue((event.target).selectedIds); break; case 'media': - this.#setValue((event.target).selectedIds); + this.#setValue((event.target).selection); break; case 'member': - this.#setValue((event.target).selectedIds); + this.#setValue((event.target).selection); break; default: break; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts index a769df5d04..6a804ffbe3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts @@ -47,15 +47,15 @@ export class UmbPropertyDatasetElement extends UmbLitElement { * ``` */ @property({ attribute: false }) - public get value(): Array { - return this.context.getValues(); - } public set value(value: Array) { this.#allowChangeEvent = false; this.context.setValues(value); // Above might not trigger a observer callback (if no change), so set the allow change event to true: this.#allowChangeEvent = true; } + public get value(): Array { + return this.context.getValues(); + } /** * The name of the dataset, this name varies depending on the use-case. But this is either @@ -71,15 +71,15 @@ export class UmbPropertyDatasetElement extends UmbLitElement { * ` */ @property({ attribute: false }) - public get name(): string | undefined { - return this.context.getName(); - } public set name(value: string | undefined) { this.#allowChangeEvent = false; this.context.setName(value); // Above might not trigger a observer callback (if no change), so set the allow change event to true: this.#allowChangeEvent = true; } + public get name(): string | undefined { + return this.context.getName(); + } constructor() { super(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts index ae1f7eaf8d..f06139c632 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts @@ -14,12 +14,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) { * @default 0 */ @property({ type: Number }) - public get min(): number { - return this.#pickerContext.min; - } public set min(value: number) { this.#pickerContext.min = value; } + public get min(): number { + return this.#pickerContext.min; + } /** * Min validation message. @@ -37,12 +37,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) { * @default Infinity */ @property({ type: Number }) - public get max(): number { - return this.#pickerContext.max; - } public set max(value: number) { this.#pickerContext.max = value; } + public get max(): number { + return this.#pickerContext.max; + } /** * Max validation message. @@ -53,12 +53,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selection(): Array { - return this.#pickerContext.getSelection(); - } public set selection(uniques: Array) { this.#pickerContext.setSelection(uniques); } + public get selection(): Array { + return this.#pickerContext.getSelection(); + } @property() public set value(selectionString: string) { @@ -67,6 +67,9 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) { if (selectionString === this.value) return; this.selection = splitStringToArray(selectionString); } + public get value(): string { + return this.selection.join(','); + } @state() private _items?: Array; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts index b3abc71622..05ad86848f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts @@ -75,14 +75,14 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { break; case 'media': { const input = event.target as UmbInputMediaElement; - this.#selectedIds = input.selectedIds; - this.value = input.selectedIds.join(','); + this.#selectedIds = input.selection; + this.value = input.selection.join(','); break; } case 'member': { const input = event.target as UmbInputMemberElement; - this.#selectedIds = input.selectedIds; - this.value = input.selectedIds.join(','); + this.#selectedIds = input.selection; + this.value = input.selection.join(','); break; } default: diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts index caa6a15925..771e01b570 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts @@ -136,11 +136,11 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< } #onChangeGroup(e: CustomEvent) { - this._selectedIds = (e.target as UmbInputMemberTypeElement).selectedIds; + this._selectedIds = (e.target as UmbInputMemberTypeElement).selection; } #onChangeMember(e: CustomEvent) { - this._selectedIds = (e.target as UmbInputMemberElement).selectedIds; + this._selectedIds = (e.target as UmbInputMemberElement).selection; } // Renders 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 b17f6f80e4..0d9e7ebcae 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 @@ -14,12 +14,12 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { * @default 0 */ @property({ type: Number }) - public get min(): number { - return this.#pickerContext.min; - } public set min(value: number) { this.#pickerContext.min = value; } + public get min(): number { + return this.#pickerContext.min; + } /** * Min validation message. @@ -37,12 +37,12 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { * @default Infinity */ @property({ type: Number }) - public get max(): number { - return this.#pickerContext.max; - } public set max(value: number) { this.#pickerContext.max = value; } + public get max(): number { + return this.#pickerContext.max; + } /** * Max validation message. @@ -53,21 +53,20 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - @property({ type: Array }) - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); } - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); } public get value() { - return this.selectedIds.join(','); + return this.selection.join(','); } @state() @@ -122,7 +121,6 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { } #renderAddButton() { - if (this.max > 0 && this.selectedIds.length >= this.max) return; return html` { - this.selectedIds = model; + this.selection = model; }, }); @@ -36,12 +36,12 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) { * @default 0 */ @property({ type: Number }) - public get min(): number { - return this.#pickerContext.min; - } public set min(value: number) { this.#pickerContext.min = value; } + public get min(): number { + return this.#pickerContext.min; + } /** * Min validation message. @@ -59,12 +59,12 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) { * @default Infinity */ @property({ type: Number }) - public get max(): number { - return this.#pickerContext.max; - } public set max(value: number) { this.#pickerContext.max = value; } + public get max(): number { + return this.#pickerContext.max; + } /** * Max validation message. @@ -75,13 +75,13 @@ export class UmbInputMemberElement 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(); - } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); this.#sorter.setModel(ids); } + public get selection(): Array { + return this.#pickerContext.getSelection(); + } @property({ type: Boolean }) showOpenButton?: boolean; @@ -92,7 +92,10 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) { @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); + } + public get value(): string { + return this.selection.join(','); } @property({ type: Object, attribute: false }) @@ -180,7 +183,7 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) { } #renderAddButton() { - if (this.max > 0 && this.selectedIds.length >= this.max) return; + if (this.max > 0 && this.selection.length >= this.max) return; return html` Download - ` + ` : nothing} + (this._package.mediaIds = (e.target as UmbInputMediaElement).selection)}"> = []; @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value || []; } + public get value(): Array { + return this._value; + } @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts index c5953eaf73..d15af2dc37 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts @@ -13,12 +13,12 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb private _value: Array = []; @property({ type: Array }) - public get value(): Array { - return this._value; - } public set value(value: Array) { this._value = value || []; } + public get value(): Array { + return this._value; + } @state() private _group?: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts index 75ecb4bc8b..37bb2fed6a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts @@ -14,16 +14,16 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { - private _value: Array = []; @property({ type: Array }) - public get value(): Array { - if (!this._value) return []; - return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[]; - } public set value(value: Array) { if (!value) return; this._value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique)); } + public get value(): Array { + if (!this._value) return []; + return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[]; + } + private _value: Array = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts index c229018da0..a86fdbf218 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts @@ -45,7 +45,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { #onMediaStartNodeChange(event: CustomEvent) { event.stopPropagation(); const target = event.target as UmbInputMediaElement; - this.#workspaceContext?.updateProperty('mediaStartNode', { unique: target.selectedIds[0] }); + this.#workspaceContext?.updateProperty('mediaStartNode', { unique: target.selection[0] }); } #onNameChange(event: UUIInputEvent) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts index d7f4a626b8..160f77bad5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts @@ -36,7 +36,7 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement { #onMediaStartNodeChange(event: UmbChangeEvent) { const target = event.target as UmbInputMediaElement; - this.#userWorkspaceContext?.updateProperty('mediaStartNodeUniques', target.selectedIds); + this.#userWorkspaceContext?.updateProperty('mediaStartNodeUniques', target.selection); } render() { From ff781b9063797ff9c0eb4a049dbce7aa4d18c809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 21:51:03 +0100 Subject: [PATCH 2/7] more selection correction --- ...ui-block-grid-layout-stylesheet.element.ts | 4 +- ...roperty-editor-ui-checkbox-list.element.ts | 2 +- ...y-editor-ui-member-group-picker.element.ts | 6 +-- ...roperty-editor-ui-member-picker.element.ts | 4 +- ...-tree-picker-source-type-picker.element.ts | 18 ++++----- .../input-tree/input-tree.element.ts | 20 +++++----- .../data-type-input.element.ts | 21 +++++----- .../input-document-type.element.ts | 22 +++++----- ...-editor-ui-document-type-picker.element.ts | 4 +- ...t-type-workspace-view-structure.element.ts | 4 +- ...t-type-workspace-view-templates.element.ts | 4 +- .../input-document/input-document.element.ts | 24 +++++------ .../modal/public-access-modal.element.ts | 28 ++++++------- ...perty-editor-ui-document-picker.element.ts | 2 +- ...a-type-workspace-view-structure.element.ts | 2 +- ...property-editor-ui-media-picker.element.ts | 6 +-- .../input-member-group.element.ts | 13 +++--- .../member-workspace-view-member.element.ts | 9 +++-- .../workspace-package-builder.element.ts | 4 +- .../input-static-file.element.ts | 10 ++--- ...ty-editor-ui-static-file-picker.element.ts | 4 +- .../stylesheet-input.element.ts | 6 +-- .../input-template/input-template.element.ts | 40 +++++++++---------- ...y-mce-stylesheets-configuration.element.ts | 4 +- .../user-group-input.element.ts | 9 +++-- .../user-group-workspace-editor.element.ts | 6 +-- .../user-input/user-input.element.ts | 9 +++-- .../modal/invite/user-invite-modal.element.ts | 2 +- .../create/create-user-modal.element.ts | 2 +- .../user-workspace-access-settings.element.ts | 10 ++--- 30 files changed, 154 insertions(+), 145 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts index 00da126e69..b5e2ab09fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts @@ -28,7 +28,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement public config?: UmbPropertyEditorConfigCollection; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputStaticFileElement).selectedPaths; + this.value = (event.target as UmbInputStaticFileElement).selection; this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -37,7 +37,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement return html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index e2f9b9d949..9e2895b40f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -52,7 +52,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem render() { return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts index ac4d7d8132..237f606a2b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -48,8 +48,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i private _onChange(event: CustomEvent) { //TODO: This is a hack, something changed so now we need to convert the array to a comma separated string to make it work with the server. - const toCommaSeparatedString = (event.target as UmbInputMemberGroupElement).selectedIds.join(','); - // this.value = (event.target as UmbInputMemberGroupElement).selectedIds; + const toCommaSeparatedString = (event.target as UmbInputMemberGroupElement).selection.join(','); + // this.value = (event.target as UmbInputMemberGroupElement).selection; this.value = toCommaSeparatedString; this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -58,7 +58,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i return html` AddAddevent.target).selectedIds); + this.#setValue((event.target).selection); break; case 'media': this.#setValue((event.target).selection); @@ -86,7 +86,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement } } - #selectedIds: Array = []; + #selection: Array = []; #setValue(value: string[]) { this.value = value.join(','); @@ -113,19 +113,17 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement #renderTypeContent() { return html``; + .selection=${this.#selection}>`; } #renderTypeMedia() { - return html``; + return html``; } #renderTypeMember() { return html``; + .selection=${this.#selection}>`; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts index 05ad86848f..5129eacf48 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts @@ -55,33 +55,33 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { @property({ type: Array }) public set items(items: Array) { - this.#selectedIds = items?.map((item) => item.unique) ?? []; + this.#selection = items?.map((item) => item.unique) ?? []; this.value = items?.map((item) => item.unique).join(','); } public get items(): Array { - return this.#selectedIds.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id })); + return this.#selection.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id })); } - #selectedIds: Array = []; + #selection: Array = []; #onChange(event: CustomEvent) { switch (this._type) { case 'content': { const input = event.target as UmbInputDocumentElement; - this.#selectedIds = input.selectedIds; - this.value = input.selectedIds.join(','); + this.#selection = input.selection; + this.value = input.selection.join(','); } break; case 'media': { const input = event.target as UmbInputMediaElement; - this.#selectedIds = input.selection; + this.#selection = input.selection; this.value = input.selection.join(','); break; } case 'member': { const input = event.target as UmbInputMemberElement; - this.#selectedIds = input.selection; + this.#selection = input.selection; this.value = input.selection.join(','); break; } @@ -111,7 +111,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { #renderDocumentPicker() { return html` { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); + } + public get value(): string { + return this.selection.join(','); } @state() 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 89978f248b..befb7d5a4e 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 @@ -33,12 +33,12 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) * @default 0 */ @property({ type: Number }) - public get min(): number { - return this.#pickerContext.min; - } public set min(value: number) { this.#pickerContext.min = value; } + public get min(): number { + return this.#pickerContext.min; + } /** * Min validation message. @@ -56,12 +56,12 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) * @default Infinity */ @property({ type: Number }) - public get max(): number { - return this.#pickerContext.max; - } public set max(value: number) { this.#pickerContext.max = value; } + public get max(): number { + return this.#pickerContext.max; + } /** * Max validation message. @@ -73,20 +73,20 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) maxMessage = 'This field exceeds the allowed amount of items'; @property({ type: Array }) - public set selectedIds(ids: Array | undefined) { + public set selection(ids: Array | undefined) { this.#pickerContext.setSelection(ids ?? []); } - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); } public get value(): string { - return this.selectedIds.join(','); + return this.selection.join(','); } @state() @@ -160,7 +160,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) } #renderAddButton() { - if (this.max > 0 && this.selectedIds.length >= this.max) return nothing; + if (this.max > 0 && this.selection.length >= this.max) return nothing; return html` 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 ac14ad3495..449f7c06fd 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 @@ -21,7 +21,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { itemSelector: 'uui-ref-node', containerSelector: 'uui-ref-list', onChange: ({ model }) => { - this.selectedIds = model; + this.selection = model; }, }); @@ -32,12 +32,12 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { * @default 0 */ @property({ type: Number }) - public get min(): number { - return this.#pickerContext.min; - } public set min(value: number) { this.#pickerContext.min = value; } + public get min(): number { + return this.#pickerContext.min; + } /** * Min validation message. @@ -55,12 +55,12 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { * @default Infinity */ @property({ type: Number }) - public get max(): number { - return this.#pickerContext.max; - } public set max(value: number) { this.#pickerContext.max = value; } + public get max(): number { + return this.#pickerContext.max; + } /** * Max validation message. @@ -71,10 +71,10 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); this.#sorter.setModel(ids); } @@ -94,10 +94,10 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); } public get value() { - return this.selectedIds.join(','); + return this.selection.join(','); } @state() @@ -177,7 +177,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { } #renderAddButton() { - if (this.max > 0 && this.selectedIds.length >= this.max) return; + if (this.max > 0 && this.selection.length >= this.max) return; return html` = []; + private _selection: Array = []; @state() private _loginPageId?: string; @@ -76,11 +76,11 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< // Specific or Groups this._specific = data.members.length > 0 ? true : false; - //SelectedIds + //selection if (data.members.length > 0) { - this._selectedIds = data.members.map((m: any) => m.id); + this._selection = data.members.map((m: any) => m.id); } else if (data.groups.length > 0) { - this._selectedIds = data.groups.map((g: any) => g.id); + this._selection = data.groups.map((g: any) => g.id); } this._loginPageId = data.loginPageId; @@ -96,8 +96,8 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< async #handleSave() { if (!this._loginPageId || !this._errorPageId || !this.#unique) return; - const groups = this._specific ? [] : this._selectedIds; - const members = this._specific ? this._selectedIds : []; + const groups = this._specific ? [] : this._selection; + const members = this._specific ? this._selection : []; const requestBody: PublicAccessRequestModel = { memberGroupNames: groups, @@ -128,19 +128,19 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< // Change Events #onChangeLoginPage(e: CustomEvent) { - this._loginPageId = (e.target as UmbInputDocumentElement).selectedIds[0]; + this._loginPageId = (e.target as UmbInputDocumentElement).selection[0]; } #onChangeErrorPage(e: CustomEvent) { - this._errorPageId = (e.target as UmbInputDocumentElement).selectedIds[0]; + this._errorPageId = (e.target as UmbInputDocumentElement).selection[0]; } #onChangeGroup(e: CustomEvent) { - this._selectedIds = (e.target as UmbInputMemberTypeElement).selection; + this._selection = (e.target as UmbInputMemberTypeElement).selection; } #onChangeMember(e: CustomEvent) { - this._selectedIds = (e.target as UmbInputMemberElement).selection; + this._selection = (e.target as UmbInputMemberElement).selection; } // Renders @@ -204,13 +204,11 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< ? html` Select the members who have access to the page ${this._documentName} - ` + ` : html` Select the groups who have access to the page ${this._documentName} - `; + `; } // Action buttons @@ -223,7 +221,7 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement< look="primary" color="positive" label=${this.localize.term('buttons_save')} - ?disabled=${!this._loginPageId || !this._errorPageId || this._selectedIds.length === 0} + ?disabled=${!this._loginPageId || !this._errorPageId || this._selection.length === 0} @click="${this.#handleSave}">` : html` Add 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 3c70cd64f4..d59af60d1e 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 @@ -25,7 +25,7 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement) #sorter = new UmbSorterController(this, { ...SORTER_CONFIG, onChange: ({ model }) => { - this.selectedIds = model; + this.selection = model; }, }); @@ -75,10 +75,10 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement) @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); this.#sorter.setModel(ids); } @@ -92,7 +92,10 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement) @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); + } + public get value(): string { + return this.selection.join(','); } @property({ type: Object, attribute: false }) @@ -180,7 +183,7 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement) } #renderAddButton() { - if (this.max > 0 && this.selectedIds.length >= this.max) return; + if (this.max > 0 && this.selection.length >= this.max) return; return html` { const newPassword = this.shadowRoot?.querySelector('uui-input[name="newPassword"]')?.value; - const confirmPassword = this.shadowRoot?.querySelector('uui-input[name="confirmPassword"]') - ?.value; + const confirmPassword = this.shadowRoot?.querySelector( + 'uui-input[name="confirmPassword"]', + )?.value; if (newPassword !== confirmPassword) { this._newPasswordError = 'Passwords do not match'; @@ -157,7 +158,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement + .selection=${this._workspaceContext.memberGroups}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts index 0c0608216f..da980dbb3b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts @@ -176,7 +176,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement { .value=${this._package.contentNodeId ?? ''} max="1" @change="${(e: CustomEvent) => - (this._package.contentNodeId = (e.target as UmbInputDocumentElement).selectedIds[0])}"> + (this._package.contentNodeId = (e.target as UmbInputDocumentElement).selection[0])}"> { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedPaths(paths: Array) { + public set selection(paths: Array) { this.#pickerContext.setSelection(paths); } @@ -64,7 +64,7 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) { // get value is handled by super class. public set value(pathsString: string) { // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. - this.selectedPaths = splitStringToArray(pathsString); + this.selection = splitStringToArray(pathsString); } @state() @@ -104,14 +104,14 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) { (item) => item.unique, (item) => this._renderItem(item), )} - ` + ` : ''} ${this.#renderAddButton()} `; } #renderAddButton() { - if (this.max > 0 && this.selectedPaths.length >= this.max) return; + if (this.max > 0 && this.selection.length >= this.max) return; return html` `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts index 701171bdd8..3d3784132c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts @@ -53,17 +53,17 @@ export class UmbStylesheetInputElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); } public get value() { return this.#pickerContext.getSelection().join(','); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts index 5e373fb475..7abec0e1cb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts @@ -51,25 +51,25 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - _selectedIds: Array = []; @property({ type: Array }) - public get selectedIds() { - return this._selectedIds; - } - public set selectedIds(newKeys: Array | undefined) { - this._selectedIds = newKeys ?? []; + public set selection(newKeys: Array | undefined) { + this._selection = newKeys ?? []; this.#observePickedTemplates(); } + public get selection() { + return this._selection; + } + _selection: Array = []; _defaultUnique = ''; @property({ type: String }) - public get defaultUnique(): string { - return this._defaultUnique; - } public set defaultUnique(newId: string) { this._defaultUnique = newId; super.value = newId; } + public get defaultUnique(): string { + return this._defaultUnique; + } private _templateItemRepository = new UmbTemplateItemRepository(this); @@ -93,7 +93,7 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { async #observePickedTemplates() { this.observe( - (await this._templateItemRepository.requestItems(this._selectedIds)).asObservable(), + (await this._templateItemRepository.requestItems(this._selection)).asObservable(), (data) => { const oldValue = this._pickedTemplates; this._pickedTemplates = data; @@ -108,11 +108,11 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { } #appendTemplates(unique: string[]) { - this.selectedIds = [...(this.selectedIds ?? []), ...unique]; + this.selection = [...(this.selection ?? []), ...unique]; // If there is no default, set the first picked template as default. - if (!this.defaultUnique && this.selectedIds.length) { - this.defaultUnique = this.selectedIds[0]; + if (!this.defaultUnique && this.selection.length) { + this.defaultUnique = this.selection[0]; } this.dispatchEvent(new UmbChangeEvent()); @@ -131,7 +131,7 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { data: { hideTreeRoot: true, multiple: true, - pickableFilter: (template) => template.unique !== null && !this._selectedIds.includes(template.unique), + pickableFilter: (template) => template.unique !== null && !this._selection.includes(template.unique), }, }); @@ -139,12 +139,12 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { if (!value?.selection) return; - const selectedIds = value.selection.filter((x) => x !== null) as Array; + const selection = value.selection.filter((x) => x !== null) as Array; - if (!selectedIds.length) return; + if (!selection.length) return; // Add templates to row of picked templates and dispatch change event - this.#appendTemplates(selectedIds); + this.#appendTemplates(selection); } #removeTemplate(unique: string) { @@ -157,12 +157,12 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { In current backoffice we just prevent deleting a default when there are other templates. But if its the only one its okay. This is a weird experience, so we should make something that makes more sense. BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates. */ - this.selectedIds = this._selectedIds.filter((x) => x !== unique); + this.selection = this._selection.filter((x) => x !== unique); // If the default template is removed, set the first picked template as default or reset defaultUnique. if (unique === this.defaultUnique) { - if (this.selectedIds.length) { - this.defaultUnique = this.selectedIds[0]; + if (this.selection.length) { + this.defaultUnique = this.selection[0]; } else { this.defaultUnique = ''; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts index 37bb2fed6a..062837d269 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts @@ -32,12 +32,12 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement #onChange(event: CustomEvent) { const target = event.target as UmbStylesheetInputElement; - this._value = target.selectedIds; + this._value = target.selection; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts index d1f27adce2..ab60ee9545 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts @@ -53,17 +53,20 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); + } + public get value(): string { + return this.selection.join(','); } @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts index a86fdbf218..8b81de9396 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts @@ -39,7 +39,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { #onDocumentStartNodeChange(event: CustomEvent) { event.stopPropagation(); const target = event.target as UmbInputDocumentElement; - this.#workspaceContext?.updateProperty('documentStartNode', { unique: target.selectedIds[0] }); + this.#workspaceContext?.updateProperty('documentStartNode', { unique: target.selection[0] }); } #onMediaStartNodeChange(event: CustomEvent) { @@ -107,7 +107,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts index 0280e78f3d..218c4517c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts @@ -53,17 +53,20 @@ export class UmbUserInputElement extends FormControlMixin(UmbLitElement) { @property({ type: String, attribute: 'min-message' }) maxMessage = 'This field exceeds the allowed amount of items'; - public get selectedIds(): Array { + public get selection(): Array { return this.#pickerContext.getSelection(); } - public set selectedIds(ids: Array) { + public set selection(ids: Array) { this.#pickerContext.setSelection(ids); } @property() public set value(idsString: string) { // 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); + this.selection = splitStringToArray(idsString); + } + public get value(): string { + return this.selection.join(','); } @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts index c8a33d2380..948f6b99d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts @@ -24,7 +24,7 @@ export class UmbInviteUserModalElement extends UmbModalBaseElement { //TODO: How should we handle pickers forms? const userGroupPicker = form.querySelector('#userGroups') as UmbUserGroupInputElement; - const userGroupUniques = userGroupPicker?.selectedIds; + const userGroupUniques = userGroupPicker?.selection; const message = formData.get('message') as string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts index 5457858201..0f0d7ac088 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts @@ -27,7 +27,7 @@ export class UmbCreateUserModalElement extends UmbModalBaseElement { const email = formData.get('email') as string; const userGroupPicker = form.querySelector('#userGroups') as UmbUserGroupInputElement; - const userGroups = userGroupPicker?.selectedIds; + const userGroups = userGroupPicker?.selection; const { data: userScaffold } = await this.#userDetailRepository.createScaffold(); if (!userScaffold) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts index 160f77bad5..862138070d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.ts @@ -26,12 +26,12 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement { #onUserGroupsChange(event: UmbChangeEvent) { const target = event.target as UmbUserGroupInputElement; - this.#userWorkspaceContext?.updateProperty('userGroupUniques', target.selectedIds); + this.#userWorkspaceContext?.updateProperty('userGroupUniques', target.selection); } #onDocumentStartNodeChange(event: UmbChangeEvent) { const target = event.target as UmbInputDocumentElement; - this.#userWorkspaceContext?.updateProperty('documentStartNodeUniques', target.selectedIds); + this.#userWorkspaceContext?.updateProperty('documentStartNodeUniques', target.selection); } #onMediaStartNodeChange(event: UmbChangeEvent) { @@ -48,14 +48,14 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement { description="${this.localize.term('user_groupsHelp')}"> @@ -63,7 +63,7 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement { label=${this.localize.term('user_mediastartnodes')} description=${this.localize.term('user_mediastartnodeshelp')}> From 6372fa7e52b7a5adce551557a4b3b09471e04572 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 22:05:54 +0100 Subject: [PATCH 3/7] more + remove config reactive property decorators --- ...itor-ui-block-grid-areas-config.element.ts | 1 - ...ditor-ui-block-grid-column-span.element.ts | 1 - .../property-editor-ui-block-grid.element.ts | 1 - ...-block-grid-group-configuration.element.ts | 1 - .../property-editor-ui-block-list.element.ts | 1 - .../input-multi-url.element.ts | 9 +++++-- .../input-number-range.element.ts | 5 ++-- .../input-radio-button-list.element.ts | 11 +++++--- .../default/entity-action.element.ts | 3 ++- .../modal-route-registration.controller.ts | 3 +++ .../default/property-action.element.ts | 1 - ...roperty-editor-ui-checkbox-list.element.ts | 1 - ...perty-editor-ui-collection-view.element.ts | 14 ++++------- ...property-editor-ui-color-picker.element.ts | 1 - ...editor-ui-color-swatches-editor.element.ts | 1 - .../property-editor-ui-date-picker.element.ts | 1 - .../property-editor-ui-dropdown.element.ts | 1 - .../property-editor-ui-eye-dropper.element.ts | 1 - ...y-editor-ui-member-group-picker.element.ts | 1 - ...roperty-editor-ui-member-picker.element.ts | 1 - ...erty-editor-ui-multi-url-picker.element.ts | 1 - ...-editor-ui-multiple-text-string.element.ts | 1 - .../property-editor-ui-number.element.ts | 1 - ...rty-editor-ui-radio-button-list.element.ts | 1 - .../property-editor-ui-slider.element.ts | 1 - .../property-editor-ui-text-box.element.ts | 1 - .../property-editor-ui-textarea.element.ts | 1 - .../property-editor-ui-toggle.element.ts | 1 - .../property-editor-ui-tree-picker.element.ts | 1 - ...property-editor-ui-upload-field.element.ts | 1 - .../workspace-action-menu-item.element.ts | 1 - ...-editor-ui-document-type-picker.element.ts | 1 - ...perty-editor-ui-document-picker.element.ts | 1 - .../input-language/input-language.element.ts | 25 +++++++++++-------- ...language-details-workspace-view.element.ts | 4 +-- ...perty-editor-ui-markdown-editor.element.ts | 1 - ...rty-editor-ui-media-type-picker.element.ts | 1 - ...roperty-editor-ui-image-cropper.element.ts | 1 - ...property-editor-ui-media-picker.element.ts | 1 - .../workspace-package-builder.element.ts | 2 +- ...ty-editor-ui-static-file-picker.element.ts | 1 - .../tags/property-editor-ui-tags.element.ts | 1 - 42 files changed, 43 insertions(+), 66 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts index 95f453e080..b464d72a0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts @@ -35,7 +35,6 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement @state() private _value: Array = []; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { const defaultAreaGridColumns = config?.getValueByAlias('defaultAreaGridColumns'); if (typeof defaultAreaGridColumns === 'number' && defaultAreaGridColumns > 0) { 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 d4a4030b26..69bcdf527e 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 @@ -13,7 +13,6 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement @state() private _columnsArray = Array.from(Array(12).keys()); - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { const maxColumns = config?.getValueByAlias('maxColumns'); if (typeof maxColumns === 'number') { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts index 3e46a10288..7da4fc8061 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts @@ -26,7 +26,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement settingsData: [], }; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index 5c39eb9ab6..a38f9966e8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -21,7 +21,6 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement return this._value; } - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) {} #addGroup() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index fa308c7852..d1ec621370 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -69,7 +69,6 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement @state() private _createButtonLabel = this.localize.term('content_createEmpty'); - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts index 38b14583f7..d2ceeabca2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts @@ -22,11 +22,17 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) { public set alias(value: string | undefined) { this.myModalRegistration.setUniquePathValue('propertyAlias', value); } + public get alias(): string | undefined { + return this.myModalRegistration.getUniquePathValue('propertyAlias'); + } @property() public set variantId(value: string | UmbVariantId | undefined) { this.myModalRegistration.setUniquePathValue('variantId', value?.toString()); } + public get variantId(): string | undefined { + return this.myModalRegistration.getUniquePathValue('variantId'); + } /** * This is a minimum amount of selected items in this input. @@ -91,8 +97,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) { this._urls = [...data]; // Unfreeze data coming from State, so we can manipulate it. super.value = this._urls.map((x) => x.url).join(','); } - - get urls() { + get urls(): Array { return this._urls; } 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 3a5c17e825..ca4f086e89 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 @@ -54,9 +54,8 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement) this.maxValue = getNumberOrUndefined(splittedValue[1]); } } - - constructor() { - super(); + public get value(): string { + return this.minValue || this.maxValue ? (this.minValue || '') + ',' + (this.maxValue || '') : ''; } protected getFormElement() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts index 8c0bb4f7ed..7d1f356ac4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts @@ -8,17 +8,17 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme /** * List of items. */ - @property() + @property({ attribute: false }) public list: Array<{ key: string; sortOrder: number; value: string }> = []; #selected = ''; - public get selected(): string { - return this.#selected; - } public set selected(key: string) { this.#selected = key; super.value = key; } + public get selected(): string { + return this.#selected; + } @property() public set value(key: string) { @@ -26,6 +26,9 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme this.selected = key; } } + public get value(): string { + return this.selected; + } protected getFormElement() { return undefined; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/default/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/default/entity-action.element.ts index b382785a33..e0c639c52c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/default/entity-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/default/entity-action.element.ts @@ -12,16 +12,17 @@ export class UmbEntityActionElement< > extends UmbLitElement { #api?: ApiType; + // TODO: Do these need to be properties? [NL] @property({ type: String }) entityType?: string | null; + // TODO: Do these need to be properties? [NL] @property({ type: String }) public unique?: string | null; @property({ attribute: false }) public manifest?: ManifestEntityAction; - @property({ attribute: false }) public set api(api: ApiType | undefined) { this.#api = api; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/route-registration/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/route-registration/modal-route-registration.controller.ts index 8a0c7903b4..d5377f7e45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/route-registration/modal-route-registration.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/route-registration/modal-route-registration.controller.ts @@ -118,6 +118,9 @@ export class UmbModalRouteRegistrationController; - @property({ attribute: false }) public set api(api: ApiType | undefined) { this.#api = api; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 9e2895b40f..491688eb1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -19,7 +19,6 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem return this.#value; } - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; const listData: Record | undefined = config.getValueByAlias('items'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts index 98877f738f..b423bf9ebb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts @@ -1,17 +1,14 @@ -import type { - UmbCollectionBulkActionPermissions, - UmbCollectionConfiguration, -} from '../../../../core/collection/types.js'; import type { UmbPropertyEditorConfigCollection } from '../../config/index.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_DOCUMENT_COLLECTION_ALIAS } from '@umbraco-cms/backoffice/document'; -import { UMB_MEDIA_COLLECTION_ALIAS } from '@umbraco-cms/backoffice/media'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; -import { UMB_WORKSPACE_CONTEXT, UMB_WORKSPACE_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/workspace'; -import type { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document'; -import type { UmbMediaWorkspaceContext } from '@umbraco-cms/backoffice/media'; +import { UMB_WORKSPACE_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { + UmbCollectionBulkActionPermissions, + UmbCollectionConfiguration, +} from '@umbraco-cms/backoffice/collection'; /** * @element umb-property-editor-ui-collection-view @@ -27,7 +24,6 @@ export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement impl @state() private _config?: UmbCollectionConfiguration; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this._config = this.#mapDataTypeConfigToCollectionConfig(config); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts index d0d796877b..04cca387c0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts @@ -21,7 +21,6 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme @state() private _swatches: UmbSwatchDetails[] = []; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels; this._swatches = config?.getValueByAlias('items') ?? []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts index d2d4f13a77..ac9c9df30a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts @@ -18,7 +18,6 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement @state() private _showLabels = this.#defaultShowLabels; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts index 560353a64e..af73be2070 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -53,7 +53,6 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen private _offsetTime?: boolean; - @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; const oldVal = this._inputType; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts index e6a63339e2..c200e6b562 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts @@ -24,7 +24,6 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements @state() private _list: Array