diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts new file mode 100644 index 0000000000..7532076503 --- /dev/null +++ b/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` + ${this._renderColors()} + `; + } + + private _renderColors() { + return html`${this.colors?.map((color) => { + return html``; + })}`; + } +} + +export default UmbColorPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-color-picker': UmbColorPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts new file mode 100644 index 0000000000..977ceb6a8a --- /dev/null +++ b/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` `); + }); + + 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); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts new file mode 100644 index 0000000000..3eb73e9edf --- /dev/null +++ b/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``; + } +} + +export default UmbEyeDropperElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-eye-dropper': UmbEyeDropperElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts new file mode 100644 index 0000000000..c147262812 --- /dev/null +++ b/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` `); + }); + + 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); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts index 470ab00cac..10a47367aa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts index b8841ac2db..d7f33ff52c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts +++ b/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 () => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts index d505a1aa7d..c4412c4229 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts +++ b/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) { this.selectedKeys = newSelection; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); - console.log(this._items); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts index c101ab99ae..29b81bd464 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts +++ b/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 () => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index a522d15741..c990aeb92b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/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() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts index c50a458514..f73d8a6016 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts +++ b/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) { + 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`
umb-property-editor-ui-color-picker
`; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index 42a01d4448..8ad1e00d87 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/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) { + 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`
umb-property-editor-ui-eye-dropper
`; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 27cf44c484..18620770db 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -59,7 +59,16 @@ export const data: Array = [ 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 = [ 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',