@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

package/dist-cms/packages/members/member-type/property-type/member-type-property-type-item-ref.element.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '../entity.js';
+import { UMB_EDIT_MEMBER_TYPE_WORKSPACE_PATH_PATTERN } from '../paths.js';
+import { customElement, html, ifDefined, nothing, property, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../core/workspace/index.js';
+let UmbMemberTypePropertyTypeItemRefElement = class UmbMemberTypePropertyTypeItemRefElement extends UmbLitElement {
+    constructor() {
+        super();
+        this.readonly = false;
+        this.standalone = false;
+        this._editPath = '';
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addUniquePaths(['unique'])
+            .onSetup(() => {
+            return { data: { entityType: UMB_MEMBER_TYPE_ENTITY_TYPE, preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editPath = routeBuilder({});
+        });
+    }
+    #getHref() {
+        if (!this.item?.unique)
+            return;
+        const path = UMB_EDIT_MEMBER_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({ unique: this.item.memberType.unique });
+        return `${this._editPath}/${path}`;
+    }
+    #getName() {
+        const memberTypeName = this.item?.memberType.name ?? 'Unknown';
+        return `Member Type: ${memberTypeName}`;
+    }
+    #getDetail() {
+        const propertyTypeDetails = this.item?.name ? this.item.name + ' (' + this.item.alias + ')' : 'Unknown';
+        return `Property Type: ${propertyTypeDetails}`;
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        return html `
+			<uui-ref-node
+				name=${this.#getName()}
+				detail=${this.#getDetail()}
+				href=${ifDefined(this.#getHref())}
+				?readonly=${this.readonly}
+				?standalone=${this.standalone}>
+				<slot name="actions" slot="actions"></slot>
+				${this.#renderIcon()}
+			</uui-ref-node>
+		`;
+    }
+    #renderIcon() {
+        if (!this.item?.memberType.icon)
+            return nothing;
+        return html `<umb-icon slot="icon" name=${this.item.memberType.icon}></umb-icon>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], UmbMemberTypePropertyTypeItemRefElement.prototype, "item", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMemberTypePropertyTypeItemRefElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMemberTypePropertyTypeItemRefElement.prototype, "standalone", void 0);
+__decorate([
+    state()
+], UmbMemberTypePropertyTypeItemRefElement.prototype, "_editPath", void 0);
+UmbMemberTypePropertyTypeItemRefElement = __decorate([
+    customElement('umb-member-type-property-type-item-ref')
+], UmbMemberTypePropertyTypeItemRefElement);
+export { UmbMemberTypePropertyTypeItemRefElement };
+export { UmbMemberTypePropertyTypeItemRefElement as element };

package/dist-cms/packages/members/member-type/property-type/member-type-property-type-reference-response.management-api.mapping.d.ts

@@ -0,0 +1,8 @@
+import type { UmbMemberTypePropertyTypeReferenceModel } from './types.js';
+import type { MemberTypePropertyTypeReferenceResponseModel } from '../../../../external/backend-api/index.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbDataSourceDataMapping } from '../../../core/repository/index.js';
+export declare class UmbMemberTypePropertyTypeReferenceResponseManagementApiDataMapping extends UmbControllerBase implements UmbDataSourceDataMapping<MemberTypePropertyTypeReferenceResponseModel, UmbMemberTypePropertyTypeReferenceModel> {
+    map(data: MemberTypePropertyTypeReferenceResponseModel): Promise<UmbMemberTypePropertyTypeReferenceModel>;
+}
+export { UmbMemberTypePropertyTypeReferenceResponseManagementApiDataMapping as api };

package/dist-cms/packages/members/member-type/property-type/member-type-property-type-reference-response.management-api.mapping.js

@@ -0,0 +1,19 @@
+import { UMB_MEMBER_TYPE_PROPERTY_TYPE_ENTITY_TYPE } from './entity.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+export class UmbMemberTypePropertyTypeReferenceResponseManagementApiDataMapping extends UmbControllerBase {
+    async map(data) {
+        return {
+            alias: data.alias,
+            memberType: {
+                alias: data.memberType.alias,
+                icon: data.memberType.icon,
+                name: data.memberType.name,
+                unique: data.memberType.id,
+            },
+            entityType: UMB_MEMBER_TYPE_PROPERTY_TYPE_ENTITY_TYPE,
+            name: data.name,
+            unique: data.id,
+        };
+    }
+}
+export { UmbMemberTypePropertyTypeReferenceResponseManagementApiDataMapping as api };

package/dist-cms/packages/members/member-type/property-type/types.d.ts

@@ -0,0 +1,11 @@
+import type { UmbEntityModel } from '../../../core/entity/index.js';
+export interface UmbMemberTypePropertyTypeReferenceModel extends UmbEntityModel {
+    alias: string;
+    memberType: {
+        alias: string;
+        icon: string;
+        name: string;
+        unique: string;
+    };
+    name: string;
+}

package/dist-cms/packages/members/member-type/property-type/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/members/member-type/workspace/member-type-workspace-editor.element.d.ts

@@ -1,13 +1,5 @@
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 export declare class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
-    #private;
-    private _name?;
-    private _description?;
-    private _alias?;
-    private _icon?;
-    private _isNew?;
-    constructor();
-    private _handleIconClick;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/members/member-type/workspace/member-type-workspace-editor.element.js

@@ -4,81 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from './member-type-workspace.context-token.js';
-import { css, html, customElement, state, ifDefined } from '../../../../external/lit/index.js';
-import { UmbLitElement, umbFocus } from '../../../core/lit-element/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT } from '../../../core/modal/index.js';
-import { UMB_ICON_PICKER_MODAL } from '../../../core/icon-registry/index.js';
+import { css, html, customElement } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
 let UmbMemberTypeWorkspaceEditorElement = class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
-    #workspaceContext;
-    constructor() {
-        super();
-        this.consumeContext(UMB_MEMBER_TYPE_WORKSPACE_CONTEXT, (instance) => {
-            this.#workspaceContext = instance;
-            this.#observeMemberType();
-        });
-    }
-    #observeMemberType() {
-        if (!this.#workspaceContext)
-            return;
-        this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeName');
-        this.observe(this.#workspaceContext.description, (description) => (this._description = description), '_observeDescription');
-        this.observe(this.#workspaceContext.alias, (alias) => (this._alias = alias), '_observeAlias');
-        this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon');
-        this.observe(this.#workspaceContext.isNew, (isNew) => (this._isNew = isNew), '_observeIsNew');
-    }
-    async _handleIconClick() {
-        const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? [];
-        const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-        const modalContext = modalManager.open(this, UMB_ICON_PICKER_MODAL, {
-            value: {
-                icon: alias,
-                color: color,
-            },
-        });
-        modalContext?.onSubmit().then((saved) => {
-            if (saved.icon && saved.color) {
-                this.#workspaceContext?.set('icon', `${saved.icon} color-${saved.color}`);
-            }
-            else if (saved.icon) {
-                this.#workspaceContext?.set('icon', saved.icon);
-            }
-        });
-    }
-    #onNameAndAliasChange(event) {
-        this.#workspaceContext?.setName(event.target.value ?? '');
-        this.#workspaceContext?.setAlias(event.target.alias ?? '');
-    }
-    #onDescriptionChange(event) {
-        this.#workspaceContext?.setDescription(event.target.value.toString() ?? '');
-    }
     render() {
         return html `
 			<umb-entity-detail-workspace-editor>
-				<div id="header" slot="header">
-					<uui-button id="icon" compact label="icon" look="outline" @click=${this._handleIconClick}>
-						<umb-icon name=${ifDefined(this._icon)}></umb-icon>
-					</uui-button>
-
-					<div id="editors">
-						<umb-input-with-alias
-							id="name"
-							label=${this.localize.term('placeholders_entername')}
-							value=${this._name}
-							alias=${this._alias}
-							?auto-generate-alias=${this._isNew}
-							@change=${this.#onNameAndAliasChange}
-							${umbFocus()}>
-						</umb-input-with-alias>
-
-						<uui-input
-							id="description"
-							.label=${this.localize.term('placeholders_enterDescription')}
-							.value=${this._description}
-							.placeholder=${this.localize.term('placeholders_enterDescription')}
-							@input=${this.#onDescriptionChange}></uui-input>
-					</div>
-				</div>
+				<umb-content-type-workspace-editor-header slot="header"></umb-content-type-workspace-editor-header>
 			</umb-entity-detail-workspace-editor>
 		`;
     }
@@ -89,69 +21,9 @@ let UmbMemberTypeWorkspaceEditorElement = class UmbMemberTypeWorkspaceEditorElem
 				width: 100%;
 				height: 100%;
 			}
-
-			#header {
-				display: flex;
-				flex: 1 1 auto;
-				gap: var(--uui-size-space-2);
-			}
-
-			#editors {
-				display: flex;
-				flex: 1 1 auto;
-				flex-direction: column;
-				gap: var(--uui-size-space-1);
-			}
-
-			#name {
-				width: 100%;
-				flex: 1 1 auto;
-				align-items: center;
-			}
-
-			#description {
-				width: 100%;
-				--uui-input-height: var(--uui-size-8);
-				--uui-input-border-color: transparent;
-			}
-
-			#description:hover {
-				--uui-input-border-color: var(--uui-color-border);
-			}
-
-			#alias-lock {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-			}
-			#alias-lock uui-icon {
-				margin-bottom: 2px;
-			}
-
-			#icon {
-				font-size: var(--uui-size-8);
-				height: 60px;
-				width: 60px;
-			}
 		`,
     ]; }
 };
-__decorate([
-    state()
-], UmbMemberTypeWorkspaceEditorElement.prototype, "_name", void 0);
-__decorate([
-    state()
-], UmbMemberTypeWorkspaceEditorElement.prototype, "_description", void 0);
-__decorate([
-    state()
-], UmbMemberTypeWorkspaceEditorElement.prototype, "_alias", void 0);
-__decorate([
-    state()
-], UmbMemberTypeWorkspaceEditorElement.prototype, "_icon", void 0);
-__decorate([
-    state()
-], UmbMemberTypeWorkspaceEditorElement.prototype, "_isNew", void 0);
 UmbMemberTypeWorkspaceEditorElement = __decorate([
     customElement('umb-member-type-workspace-editor')
 ], UmbMemberTypeWorkspaceEditorElement);

package/dist-cms/packages/models-builder/models-builder-dashboard.element.js

@@ -44,17 +44,15 @@ let UmbModelsBuilderDashboardElement = class UmbModelsBuilderDashboardElement ex
     }
     render() {
         return html `
-			<uui-box class="uui-text">
-				<div class="headline">
-					<h1 class="uui-h2">Models Builder</h1>
-					<uui-button
-						.state="${this._buttonStateReload}"
-						look="secondary"
-						label="Reload"
-						@click="${this._onDashboardReload}">
-						Reload
-					</uui-button>
-				</div>
+			<uui-box headline="Models Builder" class="overview">
+				<uui-button
+					slot="header-actions"
+					.state="${this._buttonStateReload}"
+					look="secondary"
+					label="Reload"
+					@click="${this._onDashboardReload}">
+					Reload
+				</uui-button>
 				<p>Version: ${this._modelsBuilder?.version}</p>
 				<div class="models-description">
 					<p>ModelsBuilder is enabled with the following configuration:</p>
@@ -123,12 +121,6 @@ let UmbModelsBuilderDashboardElement = class UmbModelsBuilderDashboardElement ex
 				padding: var(--uui-size-layout-1);
 			}
 
-			.headline {
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-start;
-			}
-
 			.models-description ul {
 				list-style-type: square;
 				margin: 0;

package/dist-cms/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.d.ts

@@ -9,7 +9,7 @@ import type { UUIModalSidebarSize } from '../../../../external/uui/index.js';
  * @fires focus - when the input gains focus
  */
 declare const elementName = "umb-input-multi-url";
-declare const UmbInputMultiUrlElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputMultiUrlElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputMultiUrlElement extends UmbInputMultiUrlElement_base {
     #private;
     protected getFormElement(): undefined;

package/dist-cms/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.js

@@ -42,7 +42,7 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
     async #getMediaTypes() {
         // Get all the media types, excluding the folders, so that files are selectable media items.
         const mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
-        const { data: mediaTypes } = await mediaTypeStructureRepository.requestAllowedChildrenOf(null);
+        const { data: mediaTypes } = await mediaTypeStructureRepository.requestAllowedChildrenOf(null, null);
         this._allowedMediaTypeUniques =
             mediaTypes?.items.map((x) => x.unique).filter((x) => x && !isUmbracoFolder(x)) ?? [];
     }
@@ -215,7 +215,6 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
 			<umb-input-document
 				?hidden=${!this.value.link.unique || this.value.link.type !== 'document'}
 				.max=${1}
-				.showOpenButton=${true}
 				.value=${this.value.link.unique && this.value.link.type === 'document' ? this.value.link.unique : ''}
 				@change=${(e) => this.#onPickerSelection(e, 'document')}>
 			</umb-input-document>

package/dist-cms/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.js

@@ -6,9 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, html, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../core/property/index.js';
 import '../components/input-multi-url/index.js';
+import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-multi-url-picker
@@ -51,7 +51,7 @@ let UmbPropertyEditorUIMultiUrlPickerElement = class UmbPropertyEditorUIMultiUrl
     }
     #onChange(event) {
         this.value = event.target.urls;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `

package/dist-cms/packages/property-editors/accepted-types/property-editor-ui-accepted-upload-types.element.d.ts

@@ -5,12 +5,7 @@ import type { UmbPropertyEditorUiElement } from '../../core/property-editor/inde
  */
 export declare class UmbPropertyEditorUIAcceptedUploadTypesElement extends UmbPropertyEditorUIMultipleTextStringElement implements UmbPropertyEditorUiElement {
     #private;
-    protected _acceptedTypes: string[];
-    protected _disallowedTypes: string[];
-    protected _maxFileSize?: number | null;
     connectedCallback(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
-    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIAcceptedUploadTypesElement;
 declare global {

package/dist-cms/packages/property-editors/accepted-types/property-editor-ui-accepted-upload-types.element.js

@@ -5,19 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbPropertyEditorUIMultipleTextStringElement } from '../multiple-text-string/property-editor-ui-multiple-text-string.element.js';
-import { css, customElement, html, state } from '../../../external/lit/index.js';
+import { customElement } from '../../../external/lit/index.js';
 import { UmbTemporaryFileConfigRepository } from '../../core/temporary-file/index.js';
 /**
  * @element umb-property-editor-ui-accepted-upload-types
  */
 let UmbPropertyEditorUIAcceptedUploadTypesElement = class UmbPropertyEditorUIAcceptedUploadTypesElement extends UmbPropertyEditorUIMultipleTextStringElement {
-    constructor() {
-        super(...arguments);
-        this.#temporaryFileConfigRepository = new UmbTemporaryFileConfigRepository(this);
-        this._acceptedTypes = [];
-        this._disallowedTypes = [];
-    }
-    #temporaryFileConfigRepository;
+    #temporaryFileConfigRepository = new UmbTemporaryFileConfigRepository(this);
     async connectedCallback() {
         super.connectedCallback();
         await this.#temporaryFileConfigRepository.initialized;
@@ -25,14 +19,10 @@ let UmbPropertyEditorUIAcceptedUploadTypesElement = class UmbPropertyEditorUIAcc
             if (!config)
                 return;
             this.#addValidators(config);
-            this._acceptedTypes = config.allowedUploadedFileExtensions;
-            this._disallowedTypes = config.disallowedUploadedFilesExtensions;
-            this._maxFileSize = config.maxFileSize ? config.maxFileSize * 1024 : null;
         });
     }
     #addValidators(config) {
-        const inputElement = this.shadowRoot?.querySelector('umb-input-multiple-text-string');
-        inputElement?.addValidator('badInput', () => {
+        this.addValidator('badInput', () => {
             let message = this.localize.term('validation_invalidExtensions');
             if (config.allowedUploadedFileExtensions.length) {
                 message += `<br>${this.localize.term('validation_allowedExtensions')} ${config.allowedUploadedFileExtensions.join(', ')}`;
@@ -42,7 +32,7 @@ let UmbPropertyEditorUIAcceptedUploadTypesElement = class UmbPropertyEditorUIAcc
             }
             return message;
         }, () => {
-            const extensions = inputElement?.items;
+            const extensions = this.value;
             if (!extensions)
                 return false;
             if (config.allowedUploadedFileExtensions.length &&
@@ -55,37 +45,7 @@ let UmbPropertyEditorUIAcceptedUploadTypesElement = class UmbPropertyEditorUIAcc
             return false;
         });
     }
-    render() {
-        return html `${super.render()}`;
-    }
-    static { this.styles = [
-        css `
-			#notice {
-				--uui-box-default-padding: var(--uui-size-space-4);
-				--uui-box-header-padding: var(--uui-size-space-4);
-				--uui-color-divider-standalone: var(--uui-color-warning-standalone);
-
-				border: 1px solid var(--uui-color-divider-standalone);
-				background-color: var(--uui-color-warning);
-				color: var(--uui-color-warning-contrast);
-				margin-bottom: var(--uui-size-layout-1);
-
-				p {
-					margin: 0.5rem 0;
-				}
-			}
-		`,
-    ]; }
 };
-__decorate([
-    state()
-], UmbPropertyEditorUIAcceptedUploadTypesElement.prototype, "_acceptedTypes", void 0);
-__decorate([
-    state()
-], UmbPropertyEditorUIAcceptedUploadTypesElement.prototype, "_disallowedTypes", void 0);
-__decorate([
-    state()
-], UmbPropertyEditorUIAcceptedUploadTypesElement.prototype, "_maxFileSize", void 0);
 UmbPropertyEditorUIAcceptedUploadTypesElement = __decorate([
     customElement('umb-property-editor-ui-accepted-upload-types')
 ], UmbPropertyEditorUIAcceptedUploadTypesElement);

package/dist-cms/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.d.ts

@@ -6,7 +6,7 @@ export type UmbCheckboxListItem = {
     checked: boolean;
     invalid?: boolean;
 };
-declare const UmbInputCheckboxListElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputCheckboxListElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputCheckboxListElement extends UmbInputCheckboxListElement_base {
     #private;
     list: Array<UmbCheckboxListItem>;
@@ -21,7 +21,13 @@ export declare class UmbInputCheckboxListElement extends UmbInputCheckboxListEle
      * @default false
      */
     readonly: boolean;
-    protected getFormElement(): undefined;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
+    constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.js

@@ -4,23 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, nothing, repeat, customElement, property, classMap } from '../../../../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+import { classMap, css, customElement, html, nothing, property, repeat } from '../../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitElement, '') {
-    constructor() {
-        super(...arguments);
-        this.list = [];
-        this.#selection = [];
-        /**
-         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
-         * @type {boolean}
-         * @attr
-         * @default false
-         */
-        this.readonly = false;
-    }
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
+let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #selection;
     set selection(values) {
         this.#selection = values;
@@ -35,8 +23,18 @@ let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UUIF
     get value() {
         return this.selection.join(',');
     }
-    getFormElement() {
-        return undefined;
+    constructor() {
+        super();
+        this.list = [];
+        this.#selection = [];
+        /**
+         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+        this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''));
     }
     #onChange(event) {
         event.stopPropagation();
@@ -65,13 +63,15 @@ let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UUIF
 		`;
     }
     #renderCheckbox(item) {
-        return html `<uui-checkbox
-			class=${classMap({ invalid: !!item.invalid })}
-			?checked=${item.checked}
-			label=${item.label + (item.invalid ? ` (${this.localize.term('validation_legacyOption')})` : '')}
-			title=${item.invalid ? this.localize.term('validation_legacyOptionDescription') : ''}
-			value=${item.value}
-			?readonly=${this.readonly}></uui-checkbox>`;
+        return html `
+			<uui-checkbox
+				class=${classMap({ invalid: !!item.invalid })}
+				label=${item.label + (item.invalid ? ` (${this.localize.term('validation_legacyOption')})` : '')}
+				title=${item.invalid ? this.localize.term('validation_legacyOptionDescription') : ''}
+				value=${item.value}
+				?checked=${item.checked}
+				?readonly=${this.readonly}></uui-checkbox>
+		`;
     }
     static { this.styles = [
         css `
@@ -97,6 +97,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputCheckboxListElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputCheckboxListElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputCheckboxListElement.prototype, "requiredMessage", void 0);
 UmbInputCheckboxListElement = __decorate([
     customElement('umb-input-checkbox-list')
 ], UmbInputCheckboxListElement);

package/dist-cms/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.d.ts

@@ -1,10 +1,11 @@
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
 import './components/input-checkbox-list/input-checkbox-list.element.js';
+declare const UmbPropertyEditorUICheckboxListElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | string[] | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-checkbox-list
  */
-export declare class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUICheckboxListElement extends UmbPropertyEditorUICheckboxListElement_base implements UmbPropertyEditorUiElement {
     #private;
     set value(value: Array<string> | string | undefined);
     get value(): Array<string> | undefined;
@@ -16,7 +17,14 @@ export declare class UmbPropertyEditorUICheckboxListElement extends UmbLitElemen
      * @default false
      */
     readonly: boolean;
+    /**
+     * Sets the input to mandatory, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    mandatory?: boolean;
+    mandatoryMessage: string;
     private _list;
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUICheckboxListElement;