align input naming

src/Umbraco.Web.UI.Client/src/packages/language/components/index.ts

@@ -1 +1 @@
-import './input-language-picker/input-language-picker.element.js';
+import './input-language/input-language.element.js';

src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.stories.ts

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './input-language-picker.element.js';
-import type { UmbInputLanguagePickerElement } from './input-language-picker.element.js';
-
-const meta: Meta<UmbInputLanguagePickerElement> = {
-	title: 'Components/Inputs/Language Picker',
-	component: 'umb-input-language-picker',
-};
-
-export default meta;
-type Story = StoryObj<UmbInputLanguagePickerElement>;
-
-export const Overview: Story = {
-	args: {},
-};

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

@@ -1,12 +1,12 @@
 import type { UmbLanguageItemModel } from '../../repository/index.js';
-import { UmbLanguagePickerContext } from './input-language-picker.context.js';
+import { UmbLanguagePickerContext } from './input-language.context.js';
 import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
-@customElement('umb-input-language-picker')
-export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-language')
+export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -133,10 +133,10 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	];
 }
 
-export default UmbInputLanguagePickerElement;
+export default UmbInputLanguageElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-input-language-picker': UmbInputLanguagePickerElement;
+		'umb-input-language': UmbInputLanguageElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './input-language.element.js';
+import type { UmbInputLanguageElement } from './input-language.element.js';
+
+const meta: Meta<UmbInputLanguageElement> = {
+	title: 'Components/Inputs/Language Picker',
+	component: 'umb-input-language-picker',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputLanguageElement>;
+
+export const Overview: Story = {
+	args: {},
+};

src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/views/language-details-workspace-view.element.ts

@@ -1,6 +1,7 @@
 import { UMB_LANGUAGE_WORKSPACE_CONTEXT } from '../language-workspace.context.js';
-import type { UmbInputLanguagePickerElement } from '../../../components/input-language-picker/input-language-picker.element.js';
+import type { UmbInputLanguageElement } from '../../../components/input-language/input-language.element.js';
 import type { UmbLanguageDetailModel } from '../../../types.js';
+import type { UmbLanguageItemModel } from '../../../repository/index.js';
 import type { UmbInputCultureSelectElement } from '@umbraco-cms/backoffice/culture';
 import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
 import { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -74,9 +75,7 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem
 				// If the unique is empty, we reset the value to the original value.
 				// Provides a way better UX
 				//TODO: Maybe the combobox should implement something similar?
-				const resetFunction = () => {
-					target.value = this._language?.unique;
-				};
+				const resetFunction = () => (target.value = this._language?.unique as string);
 
 				target.addEventListener('close', resetFunction, { once: true });
 				target.addEventListener('blur', resetFunction, { once: true });
@@ -108,7 +107,7 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem
 
 	#handleFallbackChange(event: UmbChangeEvent) {
 		if (event instanceof UmbChangeEvent) {
-			const target = event.target as UmbInputLanguagePickerElement;
+			const target = event.target as UmbInputLanguageElement;
 			const selectedLanguageUnique = target.selectedUniques?.[0];
 			this.#languageWorkspaceContext?.setFallbackCulture(selectedLanguageUnique);
 		}
@@ -169,13 +168,13 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem
 				<umb-property-layout
 					label="Fallback language"
 					description="To allow multi-lingual content to fall back to another language if not present in the requested language, select it here.">
-					<umb-input-language-picker
+					<umb-input-language
 						value=${ifDefined(this._language?.fallbackIsoCode === null ? undefined : this._language?.fallbackIsoCode)}
 						slot="editor"
 						max="1"
 						@change=${this.#handleFallbackChange}
-						.filter=${(language: UmbLanguageDetailModel) =>
-							language.unique !== this._language?.unique}></umb-input-language-picker>
+						.filter=${(language: UmbLanguageItemModel) =>
+							language.unique !== this._language?.unique}></umb-input-language>
 				</umb-property-layout>
 			</uui-box>
 		`;

src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -1,6 +1,6 @@
 import type { UmbInputDocumentElement } from '../../../documents/documents/components/input-document/input-document.element.js';
 import type { UmbInputMediaElement } from '../../../media/media/components/input-media/input-media.element.js';
-import type { UmbInputLanguagePickerElement } from '../../../language/components/input-language-picker/input-language-picker.element.js';
+import type { UmbInputLanguageElement } from '../../../language/components/input-language/input-language.element.js';
 import type { UUIBooleanInputEvent, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import {
 	css,
@@ -219,11 +219,11 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 
 	#renderLanguageSection() {
 		return html`<div slot="editor">
-			<umb-input-language-picker
+			<umb-input-language
 				.value="${this._package.languages?.join(',') ?? ''}"
 				@change="${(e: CustomEvent) => {
-					this._package.languages = (e.target as UmbInputLanguagePickerElement).selectedUniques;
-				}}"></umb-input-language-picker>
+					this._package.languages = (e.target as UmbInputLanguageElement).selectedUniques;
+				}}"></umb-input-language>
 		</div>`;
 	}