Merge pull request #509 from umbraco/feature/property-editor-color-picker

Feature/property editor color picker

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

@@ -0,0 +1,54 @@
+import { css, 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) {
+	static styles = [UUITextStyles];
+
+	@property({ type: Boolean })
+	showLabels = false;
+
+	@property()
+	colors?: string[];
+
+	constructor() {
+		super();
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	private _onChange(e: UUIColorSwatchesEvent) {
+		e.stopPropagation();
+		super.value = e.target.value;
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	render() {
+		return html`
+			<uui-color-swatches @change="${this._onChange}" label="Color picker">${this._renderColors()} </uui-color-swatches>
+		`;
+	}
+
+	private _renderColors() {
+		return html`${this.colors?.map((color) => {
+			return html`<uui-color-swatch
+				label="${color}"
+				value="${color}"
+				.showLabel=${this.showLabels}></uui-color-swatch>`;
+		})}`;
+	}
+}
+
+export default UmbColorPickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-color-picker': UmbColorPickerElement;
+	}
+}

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

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

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

@@ -0,0 +1,45 @@
+import { css, 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 { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-eye-dropper')
+export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) {
+	static styles = [UUITextStyles, css``];
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	private _onChange(e: UUIColorPickerChangeEvent) {
+		e.stopPropagation();
+		super.value = e.target.value;
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	@property({ type: Boolean })
+	opacity = false;
+
+	@property()
+	swatches: string[] = [];
+	//TODO if empty swatches, the color picker still shows the area where they are supposed to  be rendered.
+	// BTW in the old backoffice "palette" seemed to be true/false setting, but here its an array.
+
+	render() {
+		return html`<uui-color-picker
+			label="Eye dropper"
+			@change="${this._onChange}"
+			.opacity="${this.opacity}"
+			.swatches="${this.swatches}"></uui-color-picker>`;
+	}
+}
+
+export default UmbEyeDropperElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-eye-dropper': UmbEyeDropperElement;
+	}
+}

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

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

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

@@ -17,4 +17,4 @@ import './workspace/workspace-content/workspace-content.element';
 import './input-media-picker/input-media-picker.element';
 import './input-document-picker/input-document-picker.element';
 import './empty-state/empty-state.element';
-
+import './color-picker/color-picker.element';

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

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { UmbInputDocumentPickerElement } from './input-document-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbPropertyEditorUINumberRangeElement', () => {
+describe('UmbInputDocumentPickerElement', () => {
 	let element: UmbInputDocumentPickerElement;
 
 	beforeEach(async () => {

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

@@ -163,7 +163,6 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 	private _setSelection(newSelection: Array<string>) {
 		this.selectedKeys = newSelection;
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-		console.log(this._items);
 	}
 
 	render() {

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

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { UmbInputMediaPickerElement } from './input-media-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbPropertyEditorUINumberRangeElement', () => {
+describe('UmbInputMediaPickerElement', () => {
 	let element: UmbInputMediaPickerElement;
 
 	beforeEach(async () => {

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

@@ -36,7 +36,6 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement {
 	private _onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputCheckboxListElement).selectedKeys;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
-		console.log(this._value);
 	}
 
 	render() {

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

@@ -1,7 +1,11 @@
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+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
@@ -13,11 +17,31 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement {
 	@property()
 	value = '';
 
+	@state()
+	private _includeLabels = false;
+
+	@state()
+	private _colorSwatches: string[] = [];
+
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: Array<DataTypePropertyData>) {
+		const includeLabels = config.find((x) => x.alias === 'includeLabels');
+		if (includeLabels) this._includeLabels = includeLabels.value;
+
+		const colorSwatches = config.find((x) => x.alias === 'colors');
+		if (colorSwatches) this._colorSwatches = colorSwatches.value;
+	}
+
+	private _onChange(event: UUIColorSwatchesEvent) {
+		this.value = event.target.value;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-color-picker</div>`;
+		return html`<umb-color-picker
+			@change="${this._onChange}"
+			.colors="${this._colorSwatches}"
+			.showLabels="${this._includeLabels}"></umb-color-picker>`;
 	}
 }
 

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

@@ -1,7 +1,10 @@
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+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';
 
 /**
  * @element umb-property-editor-ui-eye-dropper
@@ -13,11 +16,31 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement {
 	@property()
 	value = '';
 
+	@state()
+	private _opacity = false;
+
+	@state()
+	private _swatches: string[] = [];
+
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: Array<DataTypePropertyData>) {
+		const showAlpha = config.find((x) => x.alias === 'showAlpha');
+		if (showAlpha) this._opacity = showAlpha.value;
+
+		const colorSwatches = config.find((x) => x.alias === 'palette');
+		if (colorSwatches) this._swatches = colorSwatches.value;
+	}
+
+	private _onChange(event: UUIColorPickerChangeEvent) {
+		this.value = event.target.value;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-eye-dropper</div>`;
+		return html`<umb-eye-dropper
+			@change="${this._onChange}"
+			.swatches=${this._swatches}
+			.opacity="${this._opacity}"></umb-eye-dropper>`;
 	}
 }
 

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

@@ -59,7 +59,16 @@ export const data: Array<DataTypeDetails> = [
 		isFolder: false,
 		propertyEditorModelAlias: 'Umbraco.ColorPicker',
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.ColorPicker',
-		data: [],
+		data: [
+			{
+				alias: 'includeLabels',
+				value: false,
+			},
+			{
+				alias: 'colors',
+				value: ['#000000', '#373737', '#9e9e9e', '#607d8b', '#2196f3', '#03a9f4', '#3f51b5', '#9c27b0', '#673ab7'],
+			},
+		],
 	},
 	{
 		name: 'Content Picker',
@@ -90,7 +99,33 @@ export const data: Array<DataTypeDetails> = [
 		isFolder: false,
 		propertyEditorModelAlias: 'Umbraco.ColorPicker.EyeDropper',
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.EyeDropper',
-		data: [],
+		data: [
+			{
+				alias: 'palette',
+				value: [
+					'#d0021b',
+					'#f5a623',
+					'#f8e71c',
+					'#8b572a',
+					'#7ed321',
+					'#417505',
+					'#bd10e0',
+					'#9013fe',
+					'#4a90e2',
+					'#50e3c2',
+					'#b8e986',
+					'#000',
+					'#444',
+					'#888',
+					'#ccc',
+					'#fff',
+				],
+			},
+			{
+				alias: 'showAlpha',
+				value: false,
+			},
+		],
 	},
 	{
 		name: 'Multi URL Picker',