Merge branch 'main' into v15/dev

Author: iOvergaard

package-lock.json

@@ -262,7 +262,7 @@
 		"typescript": "^5.5.3",
 		"typescript-eslint": "^8.0.1",
 		"typescript-json-schema": "^0.64.0",
-		"vite": "^5.3.4",
+		"vite": "^5.4.6",
 		"vite-plugin-static-copy": "^1.0.6",
 		"vite-tsconfig-paths": "^4.3.2",
 		"web-component-analyzer": "^2.0.0"

package.json

@@ -175,7 +175,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 			<div id="sorter-wrapper">
 				${repeat(
 					this._items,
-					(item) => item.value,
+					(item, index) => index,
 					(item, index) => html`
 						<umb-multiple-color-picker-item-input
 							label=${item.label}
@@ -185,6 +185,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 							?disabled=${this.disabled}
 							?readonly=${this.readonly}
 							?showLabels=${this.showLabels}
+							@enter=${this.#onAdd}
 							@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
 							@delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}>
 						</umb-multiple-color-picker-item-input>

src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts

@@ -84,12 +84,25 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 		this.dispatchEvent(new UmbInputEvent());
 	}
 
+	#onLabelKeydown(event: KeyboardEvent) {
+		event.stopPropagation();
+		const target = event.currentTarget as UUIInputElement;
+		if (event.key === 'Enter' && target.value) {
+			this.dispatchEvent(new CustomEvent('enter'));
+		}
+	}
+
 	#onLabelChange(event: UUIInputEvent) {
 		event.stopPropagation();
 		this.label = event.target.value as string;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
+	#onValueKeydown(event: KeyboardEvent) {
+		event.stopPropagation();
+		if (event.key === 'Enter') this.#onColorClick();
+	}
+
 	#onValueChange(event: UUIInputEvent) {
 		event.stopPropagation();
 		this.value = event.target.value as string;
@@ -145,6 +158,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 							placeholder=${this.localize.term('general_value')}
 							required=${this.required}
 							required-message="Value is missing"
+							@keydown=${this.#onValueKeydown}
 							@input=${this.#onValueInput}
 							@change=${this.#onValueChange}>
 							<uui-color-swatch
@@ -162,6 +176,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 								label=${this.localize.term('placeholders_label')}
 								placeholder=${this.localize.term('placeholders_label')}
 								value=${ifDefined(this.label)}
+								@keydown=${this.#onLabelKeydown}
 								@input="${this.#onLabelInput}"
 								@change="${this.#onLabelChange}"
 								?disabled=${this.disabled}
@@ -210,6 +225,12 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 				padding: var(--uui-size-1);
 			}
 
+			uui-color-swatch:focus-within {
+				outline: 2px solid var(--uui-color-selected);
+				outline-offset: 0;
+				border-radius: var(--uui-border-radius);
+			}
+
 			.color-wrapper {
 				position: relative;
 				flex: 1;

src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts

@@ -53,7 +53,9 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 		super.updated(_changedProperties);
 
 		if (_changedProperties.has('data')) {
-			this.#pickerContext.search.updateConfig({ ...this.data?.search });
+			if (this.data?.search) {
+				this.#pickerContext.search.updateConfig({ ...this.data?.search });
+			}
 
 			const multiple = this.data?.multiple ?? false;
 			this.#pickerContext.selection.setMultiple(multiple);

src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts

@@ -76,6 +76,10 @@ describe('UmbSelectionManager', () => {
 			it('has a clearSelection method', () => {
 				expect(manager).to.have.property('clearSelection').that.is.a('function');
 			});
+
+			it('has a setAllowLimitation method', () => {
+				expect(manager).to.have.property('setAllowLimitation').that.is.a('function');
+			});
 		});
 	});
 
@@ -150,6 +154,15 @@ describe('UmbSelectionManager', () => {
 			manager.select('3');
 			expect(manager.getSelection()).to.deep.equal([]);
 		});
+
+		it('can not select an item if it does not pass the allow function', () => {
+			manager.setAllowLimitation((item) => item !== '2');
+			expect(() => manager.select('2')).to.throw();
+			expect(manager.getSelection()).to.deep.equal([]);
+
+			manager.select('1');
+			expect(manager.getSelection()).to.deep.equal(['1']);
+		});
 	});
 
 	describe('Deselect', () => {

src/packages/core/utils/selection-manager/selection.manager.test.ts

@@ -18,6 +18,9 @@ export class UmbSelectionManager<ValueType extends string | null = string | null
 	#multiple = new UmbBooleanState(false);
 	public readonly multiple = this.#multiple.asObservable();
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	#allow = (unique: ValueType) => true;
+
 	constructor(host: UmbControllerHost) {
 		super(host);
 	}
@@ -109,6 +112,9 @@ export class UmbSelectionManager<ValueType extends string | null = string | null
 	public select(unique: ValueType) {
 		if (this.getSelectable() === false) return;
 		if (this.isSelected(unique)) return;
+		if (this.#allow(unique) === false) {
+			throw new Error('The item is now allowed to be selected');
+		}
 		const newSelection = this.getMultiple() ? [...this.getSelection(), unique] : [unique];
 		this.#selection.setValue(newSelection);
 		this.getHostElement().dispatchEvent(new UmbSelectedEvent(unique));
@@ -146,4 +152,13 @@ export class UmbSelectionManager<ValueType extends string | null = string | null
 		if (this.getSelectable() === false) return;
 		this.#selection.setValue([]);
 	}
+
+	/**
+	 * Sets a function that determines if an item is selectable or not.
+	 * @param compareFn A function that determines if an item is selectable or not.
+	 * @memberof UmbSelectionManager
+	 */
+	public setAllowLimitation(compareFn: (unique: ValueType) => boolean): void {
+		this.#allow = compareFn;
+	}
 }

src/packages/core/utils/selection-manager/selection.manager.ts

@@ -78,8 +78,8 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
 			}
 
 			#popover-trigger {
-				--uui-button-padding-top-factor: 0.5;
-				--uui-button-padding-bottom-factor: 0.1;
+				--uui-button-padding-top-factor: 0;
+				--uui-button-padding-bottom-factor: 0.125;
 			}
 		`,
 	];

src/packages/core/workspace/components/workspace-action-menu/workspace-action-menu.element.ts

@@ -41,6 +41,15 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 		this.#selectionManager.setMultiple(true);
 		this.#selectionManager.setSelectable(true);
 
+		const pickableFilter = this.data?.pickableFilter;
+
+		if (pickableFilter) {
+			this.#selectionManager.setAllowLimitation((unique) => {
+				const option = this.data?.options.find((o) => o.unique === unique);
+				return option ? pickableFilter(option) : true;
+			});
+		}
+
 		// Only display variants that are relevant to pick from, i.e. variants that are draft or published with pending changes:
 		this._options =
 			this.data?.options.filter(

src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts

@@ -1,5 +1,14 @@
 import { UmbDocumentVariantState, type UmbDocumentVariantOptionModel } from '../../types.js';
-import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	customElement,
+	html,
+	nothing,
+	property,
+	repeat,
+	state,
+	type PropertyValues,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
@@ -37,6 +46,17 @@ export class UmbDocumentVariantLanguagePickerElement extends UmbLitElement {
 	@property({ attribute: false })
 	public pickableFilter?: (item: UmbDocumentVariantOptionModel) => boolean;
 
+	protected override updated(_changedProperties: PropertyValues): void {
+		super.updated(_changedProperties);
+
+		if (this.selectionManager && this.pickableFilter) {
+			this.#selectionManager.setAllowLimitation((unique) => {
+				const option = this.variantLanguageOptions.find((o) => o.unique === unique);
+				return option ? this.pickableFilter!(option) : true;
+			});
+		}
+	}
+
 	override render() {
 		return this.variantLanguageOptions.length
 			? repeat(