init

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts

@@ -27,7 +27,9 @@ import '../entity-actions/entity-action-list.element';
 
 import './input-media-picker/input-media-picker.element';
 import './input-document-picker/input-document-picker.element';
+import './input-color-picker/input-color-picker.element';
+import './input-eye-dropper/input-eye-dropper.element';
+import './input-checkbox-list/input-checkbox-list.element';
+import './input-multi-url-picker/input-multi-url-picker.element';
 
 import './empty-state/empty-state.element';
-
-import './color-picker/color-picker.element';

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts

@@ -1,12 +1,12 @@
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
 
-@customElement('umb-color-picker')
-export class UmbColorPickerElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-color-picker')
+export class UmbInputColorPickerElement extends FormControlMixin(UmbLitElement) {
 	static styles = [UUITextStyles];
 
 	@property({ type: Boolean })
@@ -45,10 +45,10 @@ export class UmbColorPickerElement extends FormControlMixin(UmbLitElement) {
 	}
 }
 
-export default UmbColorPickerElement;
+export default UmbInputColorPickerElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-color-picker': UmbColorPickerElement;
+		'umb-input-color-picker': UmbInputColorPickerElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.test.ts

@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbEyeDropperElement } from './eye-dropper.element';
+import { UmbInputColorPickerElement } from './input-color-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbEyeDropperElement', () => {
-	let element: UmbEyeDropperElement;
+describe('UmbInputColorPickerElement', () => {
+	let element: UmbInputColorPickerElement;
 
 	beforeEach(async () => {
-		element = await fixture(html` <umb-eye-dropper></umb-eye-dropper> `);
+		element = await fixture(html` <umb-input-color-picker></umb-input-color-picker> `);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbEyeDropperElement);
+		expect(element).to.be.instanceOf(UmbInputColorPickerElement);
 	});
 
 	it('passes the a11y audit', async () => {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.element.ts

@@ -5,8 +5,8 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
 
-@customElement('umb-eye-dropper')
-export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-eye-dropper')
+export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
 	static styles = [UUITextStyles, css``];
 
 	protected getFormElement() {
@@ -36,10 +36,10 @@ export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) {
 	}
 }
 
-export default UmbEyeDropperElement;
+export default UmbInputEyeDropperElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-eye-dropper': UmbEyeDropperElement;
+		'umb-input-eye-dropper': UmbInputEyeDropperElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.test.ts

@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbColorPickerElement } from './color-picker.element';
+import { UmbInputEyeDropperElement } from './input-eye-dropper.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbColorPickerElement', () => {
-	let element: UmbColorPickerElement;
+describe('UmbInputEyeDropperElement', () => {
+	let element: UmbInputEyeDropperElement;
 
 	beforeEach(async () => {
-		element = await fixture(html` <umb-color-picker></umb-color-picker> `);
+		element = await fixture(html` <umb-input-eye-dropper></umb-input-eye-dropper> `);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbColorPickerElement);
+		expect(element).to.be.instanceOf(UmbInputEyeDropperElement);
 	});
 
 	it('passes the a11y audit', async () => {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts

@@ -0,0 +1,149 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UmbLitElement } from '@umbraco-cms/element';
+import { DocumentTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+
+export type OverlaySize = 'small' | 'medium' | 'large';
+
+@customElement('umb-input-multi-url-picker')
+export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElement) {
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-button {
+				width: 100%;
+			}
+		`,
+	];
+
+	protected getFormElement() {
+		return undefined;
+	}
+	/**
+	 * This is a minimum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default undefined
+	 */
+	@property({ type: Number })
+	min?: number;
+
+	/**
+	 * Min validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	minMessage = 'This field need more items';
+
+	/**
+	 * This is a maximum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default undefined
+	 */
+	@property({ type: Number })
+	max?: number;
+
+	/**
+	 * Max validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	maxMessage = 'This field exceeds the allowed amount of items';
+
+	/**
+	 @attr 'hide-anchor'
+	 */
+	@property({ type: Boolean, attribute: 'hide-anchor' })
+	hideAnchor?: boolean;
+
+	/**
+	 * @type {"small" | "medium" | "large"}
+	 * @attr
+	 * @default "small"
+	 */
+	@property()
+	overlaySize: OverlaySize = 'small';
+
+	// TODO: do we need both selectedKeys and value? If we just use value we follow the same pattern as native form controls.
+	private _selectedKeys: Array<string> = [];
+	public get selectedKeys(): Array<string> {
+		return this._selectedKeys;
+	}
+	public set selectedKeys(keys: Array<string>) {
+		this._selectedKeys = keys;
+		super.value = keys.join(',');
+	}
+
+	@property()
+	public set value(keysString: string) {
+		if (keysString !== this._value) {
+			this.selectedKeys = keysString.split(/[ ,]+/);
+		}
+	}
+
+	@state()
+	private _items?: Array<DocumentTreeItemModel>;
+
+	private _modalService?: UmbModalService;
+
+	constructor() {
+		super();
+
+		this.addValidator(
+			'rangeUnderflow',
+			() => this.minMessage,
+			() => !!this.min && this._selectedKeys.length < this.min
+		);
+		this.addValidator(
+			'rangeOverflow',
+			() => this.maxMessage,
+			() => !!this.max && this._selectedKeys.length > this.max
+		);
+
+		this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
+			this._modalService = instance;
+		});
+	}
+
+	private _openPicker() {
+		const modalHandler = this._modalService?.multiUrlPicker();
+		modalHandler?.onClose().then(({ selection }: any) => {
+			//this._setSelection(selection);
+			console.log(selection);
+		});
+	}
+
+	render() {
+		return html`${this._items?.map((item) => this._renderItem(item))}
+			<uui-button look="placeholder" label="Add" @click=${this._openPicker}>Add</uui-button>`;
+	}
+
+	private _renderItem(item: FolderTreeItemModel) {
+		// TODO: remove when we have a way to handle trashed items
+		const tempItem = item as FolderTreeItemModel & { isTrashed: boolean };
+
+		return html`
+			<uui-ref-node name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.key)}>
+				${tempItem.isTrashed ? html` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
+				<uui-action-bar slot="actions"> </uui-action-bar>
+			</uui-ref-node>
+		`;
+	}
+}
+
+export default UmbInputMultiUrlPickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-multi-url-picker': UmbInputMultiUrlPickerElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts

@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import '../../../components/input-checkbox-list/input-checkbox-list.element';
 import { UmbInputCheckboxListElement } from '../../../components/input-checkbox-list/input-checkbox-list.element';
 import { UmbLitElement } from '@umbraco-cms/element';
 import type { DataTypePropertyData } from '@umbraco-cms/models';

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts

@@ -1,11 +1,9 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { ifDefined } from 'lit/directives/if-defined';
 import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
 import type { DataTypePropertyData } from '@umbraco-cms/models';
-import type { UmbColorPickerElement } from 'src/backoffice/shared/components/color-picker/color-picker.element';
 
 /**
  * @element umb-property-editor-ui-color-picker
@@ -38,10 +36,10 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-color-picker
+		return html`<umb-input-color-picker
 			@change="${this._onChange}"
 			.colors="${this._colorSwatches}"
-			.showLabels="${this._includeLabels}"></umb-color-picker>`;
+			.showLabels="${this._includeLabels}"></umb-input-color-picker>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts

@@ -3,7 +3,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
-import '../../../components/eye-dropper/eye-dropper.element';
 import type { DataTypePropertyData } from '@umbraco-cms/models';
 
 /**
@@ -37,10 +36,10 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-eye-dropper
+		return html`<umb-input-eye-dropper
 			@change="${this._onChange}"
 			.swatches=${this._swatches}
-			.opacity="${this._opacity}"></umb-eye-dropper>`;
+			.opacity="${this._opacity}"></umb-input-eye-dropper>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts

@@ -1,7 +1,11 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
+import type { OverlaySize } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
 import { UmbLitElement } from '@umbraco-cms/element';
+import type { DataTypePropertyData } from '@umbraco-cms/models';
 
 /**
  * @element umb-property-editor-ui-multi-url-picker
@@ -10,14 +14,40 @@ import { UmbLitElement } from '@umbraco-cms/element';
 export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
 	static styles = [UUITextStyles];
 
-	@property()
-	value = '';
+	private _value: string[] = [];
+	@property({ type: Array })
+	public get value(): string[] {
+		return this._value;
+	}
+	public set value(value: string[]) {
+		this._value = value || [];
+	}
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: DataTypePropertyData[]) {
+		const overlaySize = config.find((x) => x.alias === 'overlaySize');
+		if (overlaySize) this._overlaySize = overlaySize.value as OverlaySize;
+
+		const hideAnchor = config.find((x) => x.alias === 'hideAnchor');
+		if (hideAnchor) this._hideAnchor = hideAnchor.value;
+	}
+
+	@state()
+	private _overlaySize?: OverlaySize;
+	@state()
+	private _hideAnchor?: boolean;
+
+	private _onChange(event: CustomEvent) {
+		this._value = (event.target as UmbInputMultiUrlPickerElement).selectedKeys;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-multi-url-picker</div>`;
+		return html`<umb-input-multi-url-picker
+			@change="${this._onChange}"
+			overlaySize="${ifDefined(this._overlaySize)}"
+			?hide-anchor="${this._hideAnchor}"
+			.selectedKeys="${this._value}"></umb-input-multi-url-picker>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -324,7 +324,12 @@ export const data: Array<DataTypeDetails> = [
 		isFolder: false,
 		propertyEditorModelAlias: 'Umbraco.MediaPicker3',
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MediaPicker',
-		data: [],
+		data: [
+			{
+				alias: 'validationLimit',
+				value: { max: 1 },
+			},
+		],
 	},
 	{
 		name: 'Image Cropper',

src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts

@@ -0,0 +1,149 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbModalLayoutElement } from '../modal-layout.element';
+
+export interface UmbModalMultiUrlPickerData {
+	title?: string;
+	hideAnchor?: boolean;
+	selection?: string;
+}
+
+import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+
+@customElement('umb-modal-layout-multi-url-picker')
+export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement<UmbModalMultiUrlPickerData> {
+	static styles = [
+		UUITextStyles,
+		css`
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			uui-input,
+			uui-toggle,
+			uui-label {
+				width: 100%;
+			}
+
+			uui-input,
+			uui-label {
+				margin-bottom: var(--uui-size-space-6);
+			}
+
+			.link-settings {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: var(--uui-size-space-6);
+			}
+
+			#select-media {
+				display: block;
+			}
+		`,
+	];
+
+	@state()
+	_selection = '';
+
+	@state()
+	_hideAnchor = false;
+
+	@state()
+	_title = '';
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._title = this.data?.title ?? '';
+		this._hideAnchor = this.data?.hideAnchor ?? false;
+		this._selection = this.data?.selection ?? '';
+	}
+
+	private _handleSelectionChange(e: CustomEvent) {
+		e.stopPropagation();
+		const element = e.target as UmbTreeElement;
+		//TODO: Should multiple property be implemented here or be passed down into umb-tree?
+		this._selection = element.selection[element.selection.length - 1];
+		console.log(this._selection);
+	}
+
+	private _submit() {
+		this.modalHandler?.close({ selection: this._selection });
+	}
+
+	private _close() {
+		this.modalHandler?.close();
+	}
+
+	render() {
+		return html`
+			<umb-workspace-layout headline="Select Link">
+				<uui-box>
+					<div class="link-settings">
+						<span>
+							<uui-label for="link-input">Link</uui-label>
+							${this._renderLinkUrlInput()}
+						</span>
+						<span>
+							<uui-label for="anchor-input">Anchor / querystring</uui-label>
+							<uui-input id="anchor-input" placeholder="#value or ?key=value" label="#value or ?key=value"></uui-input>
+						</span>
+					</div>
+
+					<uui-label for="link-title-input">Link Title</uui-label>
+					<uui-input id="link-title-input" placeholder="Enter a title" label="link title"></uui-input>
+
+					<uui-label>Target</uui-label>
+					<uui-toggle id="#target-toggle">Open the link in a new tab</uui-toggle>
+
+					<hr />
+
+					${this._renderTrees()}
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this._close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
+				</div>
+			</umb-workspace-layout>
+		`;
+	}
+
+	private _renderLinkUrlInput() {
+		if (this._selection) {
+			return html`
+				<uui-input id="link-input" placeholder="URL" label="URL" .value="${this._selection}" disabled></uui-input>
+			`;
+		} else {
+			return html`<uui-input id="link-input" placeholder="URL" label="URL"></uui-input>`;
+		}
+	}
+
+	private _renderTrees() {
+		return html`<uui-label for="search-input">Link to page</uui-label>
+			<uui-input id="search-input" placeholder="Type to search"></uui-input>
+			<umb-tree
+				alias="Umb.Tree.Documents"
+				@selected=${this._handleSelectionChange}
+				.selection=${[this._selection]}
+				selectable></umb-tree>
+
+			<hr />
+
+			<uui-label>Link to media</uui-label>
+
+			<umb-tree
+				alias="Umb.Tree.Media"
+				@selected=${this._handleSelectionChange}
+				.selection=${[this._selection]}
+				selectable></umb-tree>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-layout-multi-url-picker': UmbModalLayoutMultiUrlPickerElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts

@@ -0,0 +1,29 @@
+import '../../../../backoffice/shared/components/body-layout/body-layout.element';
+import './modal-layout-multi-url-picker.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+
+import type {
+	UmbModalLayoutMultiUrlPickerElement,
+	UmbModalMultiUrlPickerData,
+} from './modal-layout-multi-url-picker.element';
+
+export default {
+	title: 'API/Modals/Layouts/Multi Url Picker',
+	component: 'umb-modal-layout-multi-url-picker',
+	id: 'modal-layout-multi-url-picker',
+} as Meta;
+
+const data: UmbModalMultiUrlPickerData = {
+	title: '',
+	hideAnchor: false,
+	selection: '',
+};
+
+export const Overview: Story<UmbModalLayoutMultiUrlPickerElement> = () => html`
+	<!-- TODO: figure out if generics are allowed for properties:
+	https://github.com/runem/lit-analyzer/issues/149
+	https://github.com/runem/lit-analyzer/issues/163 -->
+	<umb-modal-layout-multi-url-picker .data=${data as any}></umb-modal-layout-multi-url-picker>
+`;

src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts

@@ -5,6 +5,7 @@ import './layouts/media-picker/modal-layout-media-picker.element';
 import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import './layouts/modal-layout-current-user.element';
 import './layouts/icon-picker/modal-layout-icon-picker.element';
+import './layouts/multi-url-picker/modal-layout-multi-url-picker.element';
 
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { BehaviorSubject } from 'rxjs';
@@ -14,6 +15,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm
 import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element';
+import type { UmbModalMultiUrlPickerData } from './layouts/multi-url-picker/modal-layout-multi-url-picker.element';
 import { UmbModalHandler } from './modal-handler';
 import { UmbContextToken } from '@umbraco-cms/context-api';
 
@@ -86,6 +88,17 @@ export class UmbModalService {
 		return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
 	}
 
+	/**
+	 * Opens an Multi URL Picker sidebar modal
+	 * @public
+	 * @param {UmbModalMultiUrlPickerData} [data]
+	 * @return {*}  {UmbModalHandler}
+	 * @memberof UmbModalService
+	 */
+	public multiUrlPicker(data?: UmbModalMultiUrlPickerData): UmbModalHandler {
+		return this.open('umb-modal-layout-multi-url-picker', { data, type: 'sidebar', size: 'small' });
+	}
+
 	/**
 	 * Opens the user settings sidebar modal
 	 * @public