slider and toggle

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

@@ -28,6 +28,7 @@ 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-slider/input-slider.element';
+import './input-toggle/input-toggle-element';
 
 import './empty-state/empty-state.element';
 import './color-picker/color-picker.element';

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

@@ -38,6 +38,7 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
+		console.log(this.initVal1);
 		if (this.enableRange) return this.#renderRangeSlider();
 		else return this.#renderSlider();
 	}

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

@@ -0,0 +1,80 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUIBooleanInputEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-input-toggle')
+export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) {
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-toggle {
+				width: 100%;
+			}
+		`,
+	];
+
+	_checked = false;
+	@property({ type: Boolean })
+	public set checked(toggle: boolean) {
+		this._checked = toggle;
+		this.#updateLabel();
+
+		//TODO: do we set value to true/false as strings?
+	}
+	public get checked(): boolean {
+		return this._checked;
+	}
+
+	@property({ type: Boolean })
+	showLabels = false;
+
+	@property({ type: String })
+	labelOn?: string;
+
+	@property({ type: String })
+	labelOff?: string;
+
+	@state()
+	_currentLabel?: string;
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.#updateLabel();
+	}
+
+	#onChange(e: UUIBooleanInputEvent) {
+		this.checked = e.target.checked;
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	}
+
+	#updateLabel() {
+		this._currentLabel = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : '';
+	}
+
+	render() {
+		return html`<uui-toggle
+			.checked="${this._checked}"
+			.label="${this._currentLabel}"
+			@change="${this.#onChange}"></uui-toggle>`;
+	}
+}
+
+export default UmbInputToggleElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-toggle': UmbInputToggleElement;
+	}
+}

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

@@ -1,7 +1,9 @@
 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 { UmbInputToggleElement } from '../../../components/input-toggle/input-toggle-element';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
 
 /**
  * @element umb-property-editor-ui-toggle
@@ -11,13 +13,44 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement {
 	static styles = [UUITextStyles];
 
 	@property()
-	value = '';
+	value = false;
+
+	@state()
+	_labelOff?: string;
+
+	@state()
+	_labelOn?: string;
+
+	@state()
+	_showLabels?: boolean;
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: Array<DataTypePropertyModel>) {
+		const defaultValue = config.find((x) => x.alias === 'default');
+		if (defaultValue) this.value = defaultValue.value as boolean;
+
+		const labelOff = config.find((x) => x.alias === 'labelOff');
+		if (labelOff) this._labelOff = labelOff.value as string;
+
+		const labelOn = config.find((x) => x.alias === 'labelOn');
+		if (labelOn) this._labelOn = labelOn.value as string;
+
+		const showLabels = config.find((x) => x.alias === 'showLabels');
+		if (showLabels) this._showLabels = showLabels.value as boolean;
+	}
+
+	private _onChange(event: CustomEvent) {
+		this.value = (event.target as UmbInputToggleElement).checked;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-toggle</div>`;
+		return html`<umb-input-toggle
+			?checked="${this.value}"
+			.labelOn="${this._labelOn}"
+			.labelOff=${this._labelOff}
+			?showLabels="${this._showLabels}"
+			@change="${this._onChange}"></umb-input-toggle>`;
 	}
 }
 

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

@@ -185,7 +185,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [
 			{
 				alias: 'enableRange',
-				value: false,
+				value: true,
 			},
 			{
 				alias: 'initVal1',
@@ -216,7 +216,24 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		parentKey: null,
 		propertyEditorAlias: 'Umbraco.TrueFalse',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Toggle',
-		data: [],
+		data: [
+			{
+				alias: 'default',
+				value: false,
+			},
+			{
+				alias: 'labelOff',
+				value: 'Not activated',
+			},
+			{
+				alias: 'labelOn',
+				value: 'Activated',
+			},
+			{
+				alias: 'showLabels',
+				value: true,
+			},
+		],
 	},
 	{
 		type: 'data-type',