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 ad9de9b02a..262cfff0f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
@@ -1,5 +1,5 @@
import { UmbDocumentTypePickerContext } from './input-document-type.context.js';
-import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -95,6 +95,10 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
.observeRouteBuilder((routeBuilder) => {
this._editDocumentTypePath = routeBuilder({});
});
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
this.addValidator(
'rangeUnderflow',
@@ -123,20 +127,40 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
pickableFilter: (x) => x.isElement,
});
} else {
- this.#pickerContext.openPicker({ hideTreeRoot: true });
+ this.#pickerContext.openPicker({
+ hideTreeRoot: true,
+ });
}
}
render() {
- return html` ${this._items?.map((item) => this._renderItem(item))}
- ${this.#renderAddButton()}`;
+ return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
+ }
+
+ #renderItems() {
+ if (!this._items) return nothing;
+ if (this.max === 1 && this.selectedIds.length === 1) return nothing;
+ ${repeat(
+ this._items,
+ (item) => item.id,
+ (item) => this._renderItem(item),
+ )}
+ `;
}
#renderAddButton() {
- if (this.max === 1 && this.selectedIds.length === 1) return nothing;
- return html`
- Add
- `;
+ if (this.max > 0 && this.selectedIds.length >= this.max) return nothing;
+ return html`
+ ${this.localize.term('general_choose')}
+ `;
}
private _renderItem(item: DocumentTypeItemResponseModel) {
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 787e5be130..aff4f78246 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
@@ -1,5 +1,5 @@
import { UmbMediaTypePickerContext } from './input-media-type.context.js';
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { MediaTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -73,6 +73,10 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
constructor() {
super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
this.addValidator(
'rangeUnderflow',
@@ -94,30 +98,54 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
return undefined;
}
+ #openPicker() {
+ this.#pickerContext.openPicker({
+ hideTreeRoot: true,
+ });
+ }
+
render() {
- console.log('ITEMS', this._items);
+ return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
+ }
+
+ #renderItems() {
+ if (!this._items) return;
return html`
- ${this._items?.map((item) => this._renderItem(item))}
- this.#pickerContext.openPicker()} label="open"
- >Add${repeat(
+ this._items,
+ (item) => item.id,
+ (item) => this._renderItem(item),
+ )}
+ `;
+ }
+
+ #renderAddButton() {
+ if (this.max > 0 && this.selectedIds.length >= this.max) return;
+ return html`
+ ${this.localize.term('general_choose')}
`;
}
private _renderItem(item: MediaTypeItemResponseModel) {
if (!item.id) return;
-
- //TODO: Using uui-ref-node as we don't have a uui-ref-media-type yet.
return html`
-
+
this.#pickerContext.requestRemoveItem(item.id!)}
label="Remove Media Type ${item.name}"
- >Remove${this.localize.term('general_remove')}
-
+
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
index 94e6483d14..0ce146c11d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
@@ -94,26 +94,22 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
}
- protected _openPicker() {
+ protected getFormElement() {
+ return undefined;
+ }
+
+ #openPicker() {
this.#pickerContext.openPicker({
hideTreeRoot: true,
});
}
- protected getFormElement() {
- return undefined;
- }
-
render() {
- return html`
- ${this.#renderItems()}
- ${this.#renderAddButton()}
- `;
+ return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
}
#renderItems() {
if (!this._items) return;
- // TODO: Add sorting. [LK]
return html`
${repeat(
@@ -131,7 +127,7 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
${this.localize.term('general_choose')}