Toggle property Value labels and validation (#18333)

* localizations

* toggle validation

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -2051,6 +2051,7 @@ export default {
 		invalidEmail: 'Ugyldig e-mail',
 		invalidNull: 'Værdien kan ikke være tom',
 		invalidEmpty: 'Værdien kan ikke være tom',
+		invalidFalse: 'Dette felt skal være slået til',
 		invalidPattern: 'Værdien er ugyldig, som ikke matcher det korrekte format',
 		customValidation: 'Selvvalgt validering',
 		entriesShort: 'Minimum %0% element(er), tilføj <strong>%1%</strong> mere.',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2145,6 +2145,7 @@ export default {
 		invalidEmail: 'Invalid email',
 		invalidNull: 'Value cannot be null',
 		invalidEmpty: 'Value cannot be empty',
+		invalidFalse: 'This field must be turned on',
 		invalidPattern: 'Value is invalid, it does not match the correct pattern',
 		customValidation: 'Custom validation',
 		entriesShort: 'Minimum %0% entries, requires <strong>%1%</strong> more.',

src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts

@@ -1,16 +1,25 @@
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-toggle')
-export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputToggleElement extends UmbFormControlMixin(UmbLitElement, '') {
+	/**
+	 * Sets the input to required, meaning validation will fail if the value is empty.
+	 * @type {boolean}
+	 */
+	@property({ type: Boolean })
+	required?: boolean;
+
+	@property({ type: String })
+	requiredMessage?: string;
+
 	@property({ type: Boolean })
 	public set checked(toggle: boolean) {
 		this.#checked = toggle;
 		super.value = toggle.toString();
-		this.#updateLabel();
 	}
 	public get checked(): boolean {
 		return this.#checked;
@@ -32,7 +41,6 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
-	 * @attr
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true })
@@ -41,15 +49,8 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 	@state()
 	_currentLabel?: string;
 
-	protected override getFormElement() {
-		return undefined;
-	}
-
-	// test
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.#updateLabel();
+	protected override firstUpdated(): void {
+		this.addFormControlElement(this.shadowRoot!.querySelector('uui-toggle')!);
 	}
 
 	#onChange(event: UUIBooleanInputEvent) {
@@ -58,16 +59,17 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
-	#updateLabel() {
-		this._currentLabel = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : ''; 
-	}
-
 	override render() {
+		const label = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : '';
 		return html`<uui-toggle
 			.checked=${this.#checked}
-			.label="${this.ariaLabel}"
+			.label=${this.ariaLabel}
+			?required=${this.required}
+			.requiredMessage=${this.requiredMessage}
 			@change=${this.#onChange}
-			?readonly=${this.readonly}><span>${this._currentLabel}</span> </uui-toggle>`;
+			?readonly=${this.readonly}
+			><span>${label}</span>
+		</uui-toggle>`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/core/validation/const.ts

@@ -1 +1,2 @@
 export const UMB_VALIDATION_EMPTY_LOCALIZATION_KEY = '#validation_invalidEmpty';
+export const UMB_VALIDATION_FALSE_LOCALIZATION_KEY = '#validation_invalidFalse';

src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts

@@ -6,24 +6,33 @@ import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_VALIDATION_FALSE_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
-/**
- * @element umb-property-editor-ui-toggle
- */
 @customElement('umb-property-editor-ui-toggle')
-export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property({ type: Boolean })
-	value: undefined | boolean = undefined;
+export class UmbPropertyEditorUIToggleElement
+	extends UmbFormControlMixin<boolean, typeof UmbLitElement, undefined>(UmbLitElement)
+	implements UmbPropertyEditorUiElement
+{
+	@property({ type: String })
+	name?: string;
 
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
-	 * @attr
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
 
+	/**
+	 * Sets the input to mandatory, meaning validation will fail if the value is empty.
+	 * @type {boolean}
+	 */
+	@property({ type: Boolean })
+	mandatory?: boolean;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_FALSE_LOCALIZATION_KEY;
+
 	@state()
 	_ariaLabel?: string;
 
@@ -33,23 +42,23 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	@state()
 	_labelOn?: string;
 
-	@property({ type: String })
-	name?: string;
-
 	@state()
 	_showLabels = false;
 
-
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
+		// TODO: Do not set value here, but use future feature of Value Presets. [NL]
 		this.value ??= config.getValueByAlias('default') ?? false;
-
 		this._labelOff = config.getValueByAlias('labelOff');
 		this._labelOn = config.getValueByAlias('labelOn');
 		this._showLabels = Boolean(config.getValueByAlias('showLabels'));
 		this._ariaLabel = config.getValueByAlias('ariaLabel');
 	}
 
+	protected override firstUpdated(): void {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-toggle')!);
+	}
+
 	#onChange(event: CustomEvent & { target: UmbInputToggleElement }) {
 		this.value = event.target.checked;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -58,11 +67,15 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	override render() {
 		return html`
 			<umb-input-toggle
-
-				.ariaLabel=${this._ariaLabel ? this.localize.string(this._ariaLabel) : this.localize.term('general_toggleFor', [this.name])}
+				.ariaLabel=${this._ariaLabel
+					? this.localize.string(this._ariaLabel)
+					: this.localize.term('general_toggleFor', [this.name])}
+				.labelOn=${this._labelOn}
 				.labelOff=${this._labelOff}
 				?checked=${this.value}
 				?showLabels=${this._showLabels}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}>
 			</umb-input-toggle>