) {
+ const listData = config.find((x) => x.alias === 'itemList');
+
+ if (!listData) return;
+ this._list = listData.value;
+ }
+
+ @state()
+ private _list: [] = [];
+
+ private _onChange(event: CustomEvent) {
+ this.value = (event.target as UmbInputCheckboxListElement).selectedKeys;
+ this.dispatchEvent(new CustomEvent('property-value-change'));
+ console.log(this._value);
+ }
render() {
- return html`umb-property-editor-ui-checkbox-list
`;
+ return html``;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
index 13254a1cf4..202b47cbef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/document-picker/property-editor-ui-document-picker.element.ts
@@ -1,8 +1,7 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import { UmbInputDocumentPickerElement } from '../../../components/input-document-picker/input-document-picker.element';
import { UmbLitElement } from '@umbraco-cms/element';
-import type { UmbInputDocumentPickerElement } from 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
-import '../../../components/input-document-picker/input-document-picker.element';
import type { DataTypePropertyData } from '@umbraco-cms/models';
@customElement('umb-property-editor-ui-document-picker')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
index b7c18cd63b..e96df3ce5f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
@@ -1,23 +1,53 @@
import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmbInputMediaPickerElement } from '../../../../../backoffice/shared/components/input-media-picker/input-media-picker.element';
import { UmbLitElement } from '@umbraco-cms/element';
+import type { DataTypePropertyData } from '@umbraco-cms/models';
/**
* @element umb-property-editor-ui-media-picker
*/
@customElement('umb-property-editor-ui-media-picker')
export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement {
- static styles = [UUITextStyles];
+ private _value: Array = [];
- @property()
- value = '';
+ @property({ type: Array })
+ public get value(): Array {
+ return this._value;
+ }
+ public set value(value: Array) {
+ this._value = value || [];
+ }
@property({ type: Array, attribute: false })
- public config = [];
+ public set config(config: Array) {
+ const validationLimit = config.find((x) => x.alias === 'validationLimit');
+ if (!validationLimit) return;
+
+ this._limitMin = (validationLimit?.value as any).min;
+ this._limitMax = (validationLimit?.value as any).max;
+ }
+
+ @state()
+ private _limitMin?: number;
+ @state()
+ private _limitMax?: number;
+
+ private _onChange(event: CustomEvent) {
+ this.value = (event.target as UmbInputMediaPickerElement).selectedKeys;
+ this.dispatchEvent(new CustomEvent('property-value-change'));
+ }
render() {
- return html`umb-property-editor-ui-media-picker
`;
+ return html`
+ Add
+ `;
}
}
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 6c488aca96..2a52c9dbed 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
@@ -255,7 +255,15 @@ export const data: Array = [
isFolder: false,
propertyEditorModelAlias: 'Umbraco.CheckboxList',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.CheckboxList',
- data: [],
+ data: [
+ {
+ alias: 'itemList',
+ value: [
+ { label: 'Label 1', key: '123' },
+ { label: 'Label 2', key: '456' },
+ ],
+ },
+ ],
},
{
name: 'Block List',
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
index fb85c037e8..82567b8e78 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
@@ -1,15 +1,13 @@
-import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches';
+import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
import icons from '../../../../../public-assets/icons/icons.json';
-import '@umbraco-ui/uui-color-swatch';
-import '@umbraco-ui/uui-color-swatches';
-
export interface UmbModalIconPickerData {
multiple: boolean;
selection: string[];
@@ -56,6 +54,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement icon.name);
@property({ type: Array })
- iconlistFiltered: Array;
+ iconlistFiltered: Array = [];
@property({ type: Array })
colorlist = [
@@ -118,10 +117,10 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement
+ .value="${this._currentColor || ''}"
+ label="Color switcher for icons"
+ @change="${this._onColorChange}">
+ ${this.colorlist.map(
+ (color) =>
+ html` `
+ )}
+
${this.renderIconSelection()}
@@ -199,8 +197,9 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement