Merge pull request #1813 from umbraco/feature/image-cropper-config-improvements

Image cropper config improvements

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts

@@ -1,8 +1,9 @@
-import { html, customElement, property, css, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, repeat, state, query } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import { generateAlias } from '@umbraco-cms/backoffice/utils';
 
 export type UmbCrop = {
 	label: string;
@@ -19,6 +20,9 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
+	@query('#label')
+	private _labelInput!: HTMLInputElement;
+
 	//TODO MAKE TYPE
 	@property({ attribute: false })
 	value: UmbCrop[] = [];
@@ -26,6 +30,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	@state()
 	editCropAlias = '';
 
+	#oldInputValue = '';
+
 	#onRemove(alias: string) {
 		this.value = [...this.value.filter((item) => item.alias !== alias)];
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -92,6 +98,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 
 		form.reset();
+		this._labelInput.focus();
 	}
 
 	#renderActions() {
@@ -101,6 +108,24 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 			: html`<uui-button look="secondary" type="submit" label="Add"></uui-button>`;
 	}
 
+	#onLabelInput() {
+		const value = this._labelInput.value ?? '';
+
+		const aliasValue = generateAlias(value);
+
+		const alias = this.shadowRoot?.querySelector('#alias') as HTMLInputElement;
+
+		if (!alias) return;
+
+		const oldAliasValue = generateAlias(this.#oldInputValue);
+
+		if (alias.value === oldAliasValue || !alias.value) {
+			alias.value = aliasValue;
+		}
+
+		this.#oldInputValue = value;
+	}
+
 	render() {
 		if (!this.value) this.value = [];
 
@@ -109,7 +134,14 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 				<form @submit=${this.#onSubmit}>
 					<div class="input">
 						<uui-label for="label">Label</uui-label>
-						<uui-input label="Label" id="label" name="label" type="text" autocomplete="false" value=""></uui-input>
+						<uui-input
+							@input=${this.#onLabelInput}
+							label="Label"
+							id="label"
+							name="label"
+							type="text"
+							autocomplete="false"
+							value=""></uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="alias">Alias</uui-label>