@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/packages/core/collection/types.d.ts

@@ -1,14 +1,16 @@
 import type { ManifestCollection } from './extensions/types.js';
+import type { UmbCollectionItemModel } from './item/types.js';
 import type { Observable } from '../../../external/rxjs/index.js';
 import type { UmbEntityUnique } from '../entity/index.js';
 import type { UmbPaginationManager } from '../utils/index.js';
 export type * from './action/create/types.js';
+export type * from './collection-item-picker-modal/types.js';
 export type * from './conditions/types.js';
 export type * from './extensions/types.js';
 export type * from './item/types.js';
 export type * from './menu/types.js';
+export type * from './view/types.js';
 export type * from './workspace-view/types.js';
-export type * from './collection-item-picker-modal/types.js';
 export interface UmbCollectionConfiguration {
     unique?: UmbEntityUnique;
     dataTypeId?: string;
@@ -42,6 +44,7 @@ export interface UmbCollectionContext {
     setManifest(manifest: ManifestCollection): void;
     getManifest(): ManifestCollection | undefined;
     requestCollection(): Promise<void>;
+    requestItemHref?(item: UmbCollectionItemModel): Promise<string | undefined>;
     pagination: UmbPaginationManager;
     items: Observable<any[]>;
     totalItems: Observable<number>;

package/dist-cms/packages/core/collection/view/card/card-collection-view.element.d.ts

@@ -0,0 +1,13 @@
+import { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import { nothing } from '../../../../../external/lit/index.js';
+export declare class UmbCardCollectionViewElement extends UmbCollectionViewElementBase {
+    #private;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbCardCollectionViewElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-card-collection-view': UmbCardCollectionViewElement;
+    }
+}

package/dist-cms/packages/core/collection/view/card/card-collection-view.element.js

@@ -0,0 +1,56 @@
+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 { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import { css, customElement, html, nothing, repeat } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
+let UmbCardCollectionViewElement = class UmbCardCollectionViewElement extends UmbCollectionViewElementBase {
+    render() {
+        if (this._loading)
+            return nothing;
+        return html `
+			<div id="card-grid">
+				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+			</div>
+		`;
+    }
+    #renderItem(item) {
+        const href = item.unique ? this._itemHrefs.get(item.unique) : undefined;
+        return html ` <umb-entity-collection-item-card
+			.item=${item}
+			href=${href ?? nothing}
+			?selectable=${this._selectable}
+			?select-only=${this._selection.length > 0}
+			?selected=${this._isSelectedItem(item.unique)}
+			@selected=${() => this._selectItem(item.unique)}
+			@deselected=${() => this._deselectItem(item.unique)}>
+			<umb-entity-actions-bundle
+				slot="actions"
+				.entityType=${item.entityType}
+				.unique=${item.unique}></umb-entity-actions-bundle>
+		</umb-entity-collection-item-card>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+
+			#card-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+				gap: var(--uui-size-space-4);
+			}
+		`,
+    ]; }
+};
+UmbCardCollectionViewElement = __decorate([
+    customElement('umb-card-collection-view')
+], UmbCardCollectionViewElement);
+export { UmbCardCollectionViewElement };
+export { UmbCardCollectionViewElement as element };

package/dist-cms/packages/core/collection/view/card/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/view/card/manifests.js

@@ -0,0 +1,19 @@
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.CollectionView.Card',
+        matchKind: 'card',
+        matchType: 'collectionView',
+        manifest: {
+            type: 'collectionView',
+            kind: 'card',
+            element: () => import('./card-collection-view.element.js'),
+            weight: 800,
+            meta: {
+                label: 'Cards',
+                icon: 'icon-grid',
+                pathName: 'cards',
+            },
+        },
+    },
+];

package/dist-cms/packages/core/collection/view/collection-view.extension.js

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

package/dist-cms/packages/core/collection/{collection-view.manager.d.ts → view/collection-view.manager.d.ts}

@@ -1,7 +1,7 @@
-import type { ManifestCollectionView } from './extensions/types.js';
-import { UmbControllerBase } from '../../../libs/class-api/index.js';
-import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
-import type { UmbRoute } from '../router/index.js';
+import type { ManifestCollectionView } from './collection-view.extension.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbRoute } from '../../router/index.js';
 export interface UmbCollectionViewManagerConfig {
     defaultViewAlias?: string;
     manifestFilter?: (manifest: ManifestCollectionView) => boolean;

package/dist-cms/packages/core/collection/{collection-view.manager.js → view/collection-view.manager.js}

@@ -1,7 +1,7 @@
-import { UmbControllerBase } from '../../../libs/class-api/index.js';
-import { UmbExtensionsManifestInitializer, createExtensionElement } from '../../../libs/extension-api/index.js';
-import { umbExtensionsRegistry } from '../extension-registry/index.js';
-import { UmbArrayState, UmbObjectState, UmbStringState } from '../../../libs/observable-api/index.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbExtensionsManifestInitializer, createExtensionElement } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+import { UmbArrayState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
 export class UmbCollectionViewManager extends UmbControllerBase {
     #views;
     #currentView;
@@ -78,7 +78,7 @@ export class UmbCollectionViewManager extends UmbControllerBase {
                 });
                 routes.push({
                     path: `**`,
-                    component: async () => (await import('../router/index.js')).UmbRouteNotFoundElement,
+                    component: async () => (await import('../../router/index.js')).UmbRouteNotFoundElement,
                 });
             }
         }

package/dist-cms/packages/core/collection/view/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/view/manifests.js

@@ -0,0 +1,3 @@
+import { manifests as cardManifests } from './card/manifests.js';
+import { manifests as refManifests } from './ref/manifests.js';
+export const manifests = [...cardManifests, ...refManifests];

package/dist-cms/packages/core/collection/view/ref/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/view/ref/manifests.js

@@ -0,0 +1,19 @@
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.CollectionView.Ref',
+        matchKind: 'ref',
+        matchType: 'collectionView',
+        manifest: {
+            type: 'collectionView',
+            kind: 'ref',
+            element: () => import('./ref-collection-view.element.js'),
+            weight: 800,
+            meta: {
+                label: 'List',
+                icon: 'icon-list',
+                pathName: 'refs',
+            },
+        },
+    },
+];

package/dist-cms/packages/core/collection/view/ref/ref-collection-view.element.d.ts

@@ -0,0 +1,13 @@
+import { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import { nothing } from '../../../../../external/lit/index.js';
+export declare class UmbRefCollectionViewElement extends UmbCollectionViewElementBase {
+    #private;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbRefCollectionViewElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-ref-collection-view': UmbRefCollectionViewElement;
+    }
+}

package/dist-cms/packages/core/collection/view/ref/ref-collection-view.element.js

@@ -0,0 +1,50 @@
+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 { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import { css, customElement, html, nothing, repeat } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
+let UmbRefCollectionViewElement = class UmbRefCollectionViewElement extends UmbCollectionViewElementBase {
+    render() {
+        if (this._loading)
+            return nothing;
+        return html `
+			<uui-box>
+				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+			</uui-box>
+		`;
+    }
+    #renderItem(item) {
+        const href = item.unique ? this._itemHrefs.get(item.unique) : undefined;
+        return html `<umb-entity-collection-item-ref
+			.item=${item}
+			href=${href ?? nothing}
+			?selectable=${this._selectable}
+			?select-only=${this._selection.length > 0}
+			?selected=${this._isSelectedItem(item.unique)}
+			@selected=${() => this._selectItem(item.unique)}
+			@deselected=${() => this._deselectItem(item.unique)}>
+			<umb-entity-actions-bundle
+				slot="actions"
+				.entityType=${item.entityType}
+				.unique=${item.unique}></umb-entity-actions-bundle>
+		</umb-entity-collection-item-ref>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+    ]; }
+};
+UmbRefCollectionViewElement = __decorate([
+    customElement('umb-ref-collection-view')
+], UmbRefCollectionViewElement);
+export { UmbRefCollectionViewElement };
+export { UmbRefCollectionViewElement as element };

package/dist-cms/packages/core/collection/view/types.d.ts

@@ -0,0 +1 @@
+export type * from './collection-view.extension.js';

package/dist-cms/packages/core/collection/view/types.js

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

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.d.ts

@@ -0,0 +1,31 @@
+import type { UmbCollectionItemModel } from '../types.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * Abstract base class for collection view elements.
+ * Provides shared state management, selection handling, and context consumption for collection views.
+ */
+export declare abstract class UmbCollectionViewElementBase extends UmbLitElement {
+    #private;
+    protected _items: Array<UmbCollectionItemModel>;
+    protected _selectable: boolean;
+    protected _selection: Array<string | null>;
+    protected _loading: boolean;
+    protected _itemHrefs: Map<string, string>;
+    constructor();
+    /**
+     * Selects an item in the collection.
+     * @param {string} unique - The unique identifier of the item to select.
+     */
+    protected _selectItem(unique: UmbCollectionItemModel['unique']): void;
+    /**
+     * Deselects an item in the collection.
+     * @param {string} unique - The unique identifier of the item to deselect.
+     */
+    protected _deselectItem(unique: UmbCollectionItemModel['unique']): void;
+    /**
+     * Checks if an item is currently selected.
+     * @param {string} unique - The unique identifier of the item to check.
+     * @returns {boolean} True if the item is selected, false otherwise.
+     */
+    protected _isSelectedItem(unique: UmbCollectionItemModel['unique']): boolean;
+}

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.js

@@ -0,0 +1,77 @@
+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_COLLECTION_CONTEXT } from '../default/index.js';
+import { state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * Abstract base class for collection view elements.
+ * Provides shared state management, selection handling, and context consumption for collection views.
+ */
+export class UmbCollectionViewElementBase extends UmbLitElement {
+    #collectionContext;
+    constructor() {
+        super();
+        this._items = [];
+        this._selectable = false;
+        this._selection = [];
+        this._loading = false;
+        this._itemHrefs = new Map();
+        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+            this.#collectionContext = instance;
+            this.observe(this.#collectionContext?.selection.selectable, (selectable) => (this._selectable = selectable ?? false), 'umbCollectionSelectableObserver');
+            this.observe(this.#collectionContext?.selection.selection, (selection) => (this._selection = selection ?? []), 'umbCollectionSelectionObserver');
+            this.observe(this.#collectionContext?.items, async (items) => {
+                this._items = items ?? [];
+                await this.#updateItemHrefs();
+            }, 'umbCollectionItemsObserver');
+        });
+    }
+    /**
+     * Selects an item in the collection.
+     * @param {string} unique - The unique identifier of the item to select.
+     */
+    _selectItem(unique) {
+        this.#collectionContext?.selection.select(unique);
+    }
+    /**
+     * Deselects an item in the collection.
+     * @param {string} unique - The unique identifier of the item to deselect.
+     */
+    _deselectItem(unique) {
+        this.#collectionContext?.selection.deselect(unique);
+    }
+    /**
+     * Checks if an item is currently selected.
+     * @param {string} unique - The unique identifier of the item to check.
+     * @returns {boolean} True if the item is selected, false otherwise.
+     */
+    _isSelectedItem(unique) {
+        return this.#collectionContext?.selection.isSelected(unique) ?? false;
+    }
+    async #updateItemHrefs() {
+        const entries = await Promise.all(this._items.map(async (item) => {
+            const href = await this.#collectionContext?.requestItemHref?.(item);
+            return item.unique && href ? [item.unique, href] : null;
+        }));
+        this._itemHrefs = new Map(entries.filter((entry) => entry !== null));
+    }
+}
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_selectable", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_selection", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UmbCollectionViewElementBase.prototype, "_itemHrefs", void 0);

package/dist-cms/packages/core/components/body-layout/body-layout.element.js

@@ -68,7 +68,7 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
             this._navigationSlotHasChildren
             ? ''
             : 'none'}">
-				${this.headline ? html `<h3 id="headline">${this.headline}</h3>` : nothing}
+				${this.headline ? html `<h3 id="headline" title=${this.headline}>${this.headline}</h3>` : nothing}
 
 				<slot
 					id="header-slot"
@@ -178,6 +178,7 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
 				align-items: center;
 				box-sizing: border-box;
 				min-width: 0;
+				flex-shrink: 0;
 			}
 			#navigation-slot {
 				margin-left: auto;
@@ -186,6 +187,10 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
 			#headline {
 				display: block;
 				margin: 0 var(--uui-size-layout-1);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				min-width: 0;
 			}
 
 			#main {

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.d.ts

@@ -1,6 +1,6 @@
-import type { PropertyValueMap } from '../../../../external/lit/index.js';
 import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
+import type { PropertyValueMap } from '../../../../external/lit/index.js';
 export declare class UmbEntityActionsBundleElement extends UmbLitElement {
     #private;
     entityType?: string;

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.js

@@ -5,19 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbEntityContext } from '../../entity/entity.context.js';
-import { html, nothing, customElement, property, state, ifDefined, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { css, customElement, html, ifDefined, nothing, property, state } from '../../../../external/lit/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '../../../../libs/extension-api/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
 let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends UmbLitElement {
-    // TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
+    // TODO: Ideally this is provided on a higher level, as in the Tree-item, Workspace, Collection-Row, etc [NL]
     #entityContext;
     #inViewport;
     #observingEntityActions;
     constructor() {
         super();
         this._numberOfActions = 0;
-        // TODO: provide the entity context on a higher level, like the root element of this entity, tree-item/workspace/... [NL]
+        // TODO: Ideally this is provided on a higher level, as in the Tree-item, Workspace, Collection-Row, etc [NL]
         this.#entityContext = new UmbEntityContext(this);
         this.#inViewport = false;
         this.#observingEntityActions = false;
@@ -85,13 +85,13 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
     render() {
         if (this._numberOfActions === 0)
             return nothing;
-        return html `<uui-action-bar slot="actions">${this.#renderMore()} ${this.#renderFirstAction()} </uui-action-bar>`;
+        return html `<uui-action-bar slot="actions">${this.#renderMore()}${this.#renderFirstAction()}</uui-action-bar>`;
     }
     #renderMore() {
         if (this._numberOfActions === 1)
             return nothing;
         return html `
-			<umb-entity-actions-dropdown .label=${this.label} compact>
+			<umb-entity-actions-dropdown compact .label=${this.localize.term('actions_viewActionsFor', this.label)}>
 				<uui-symbol-more slot="label"></uui-symbol-more>
 			</umb-entity-actions-dropdown>
 		`;
@@ -99,13 +99,15 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
     #renderFirstAction() {
         if (!this._firstActionApi || !this._firstActionManifest)
             return nothing;
-        return html `<uui-button
-			label=${this.localize.string(this._firstActionManifest.meta.label)}
-			data-mark=${'entity-action:' + this._firstActionManifest.alias}
-			@click=${this.#onFirstActionClick}
-			href="${ifDefined(this._firstActionHref)}">
-			<uui-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></uui-icon>
-		</uui-button>`;
+        return html `
+			<uui-button
+				label=${this.localize.string(this._firstActionManifest.meta.label, this.label)}
+				data-mark=${'entity-action:' + this._firstActionManifest.alias}
+				href=${ifDefined(this._firstActionHref)}
+				@click=${this.#onFirstActionClick}>
+				<umb-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></umb-icon>
+			</uui-button>
+		`;
     }
     static { this.styles = [
         css `

package/dist-cms/packages/core/components/input-color/input-color.element.d.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '../../lit-element/index.js';
 import type { UmbSwatchDetails } from '../../models/index.js';
-declare const UmbInputColorElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+declare const UmbInputColorElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputColorElement extends UmbInputColorElement_base {
     #private;
     protected getFormElement(): undefined;
@@ -10,8 +10,11 @@ export declare class UmbInputColorElement extends UmbInputColorElement_base {
      * @default false
      */
     readonly: boolean;
+    required: boolean;
+    requiredMessage: string;
     showLabels: boolean;
     swatches?: Array<UmbSwatchDetails>;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbInputColorElement;

package/dist-cms/packages/core/components/input-color/input-color.element.js

@@ -7,24 +7,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, map, nothing } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-import { UUIFormControlMixin } from '../../../../external/uui/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
 /*
  * This wraps the UUI library uui-color-swatches component
  * @element umb-input-color
  */
-let UmbInputColorElement = class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
+let UmbInputColorElement = class UmbInputColorElement extends UmbFormControlMixin(UmbLitElement) {
+    getFormElement() {
+        return undefined;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @attr
          * @default false
          */
         this.readonly = false;
+        this.required = false;
+        this.requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this.showLabels = false;
-    }
-    getFormElement() {
-        return undefined;
+        this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !!this.required && !this.value && !this.readonly);
     }
     #onChange(event) {
         this.value = event.target.value;
@@ -52,6 +55,12 @@ let UmbInputColorElement = class UmbInputColorElement extends UUIFormControlMixi
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputColorElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputColorElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputColorElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Boolean })
 ], UmbInputColorElement.prototype, "showLabels", void 0);

package/dist-cms/packages/core/components/input-eye-dropper/input-eye-dropper.element.d.ts

@@ -1,8 +1,12 @@
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const UmbInputEyeDropperElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+declare const UmbInputEyeDropperElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputEyeDropperElement extends UmbInputEyeDropperElement_base {
     #private;
     protected getFormElement(): undefined;
+    readonly: boolean;
+    required: boolean;
+    requiredMessage: string;
+    constructor();
     opacity: boolean;
     showPalette: boolean;
     swatches?: string[];

package/dist-cms/packages/core/components/input-eye-dropper/input-eye-dropper.element.js

@@ -7,13 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, html, property, when } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-import { UUIFormControlMixin } from '../../../../external/uui/index.js';
-let UmbInputEyeDropperElement = class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement, '') {
-    constructor() {
-        super(...arguments);
-        this.opacity = false;
-        this.showPalette = false;
-    }
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
+let UmbInputEyeDropperElement = class UmbInputEyeDropperElement extends UmbFormControlMixin(UmbLitElement) {
     getFormElement() {
         return undefined;
     }
@@ -22,6 +17,15 @@ let UmbInputEyeDropperElement = class UmbInputEyeDropperElement extends UUIFormC
         this.value = e.target.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    constructor() {
+        super();
+        this.readonly = false;
+        this.required = false;
+        this.requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+        this.opacity = false;
+        this.showPalette = false;
+        this.addValidator('valueMissing', () => this.requiredMessage, () => !this.readonly && this.required && (!this.value || this.value === ''));
+    }
     // HACK: Since `uui-color-picker` doesn't have an option to hide the swatches, we had to get creative.
     // Based on UUI v1.8.0-rc3, the value of `swatches` must be a falsey value to hide them.
     // https://github.com/umbraco/Umbraco.UI/blob/v1.8.0-rc.3/packages/uui-color-picker/lib/uui-color-picker.element.ts#L517
@@ -49,6 +53,15 @@ let UmbInputEyeDropperElement = class UmbInputEyeDropperElement extends UUIFormC
 			`);
     }
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputEyeDropperElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputEyeDropperElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputEyeDropperElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Boolean })
 ], UmbInputEyeDropperElement.prototype, "opacity", void 0);

package/dist-cms/packages/core/components/input-number-range/input-number-range.element.d.ts

@@ -8,6 +8,8 @@ export declare class UmbInputNumberRangeElement extends UmbInputNumberRangeEleme
     private _minValue?;
     set minValue(value: number | undefined);
     get minValue(): number | undefined;
+    required: boolean;
+    requiredMessage: string;
     private _maxValue?;
     set maxValue(value: number | undefined);
     get maxValue(): number | undefined;