diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/index.ts index 257c2b8f4a..7a11bfea9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/language/components/index.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.stories.ts deleted file mode 100644 index 74eda92b20..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.stories.ts +++ /dev/null @@ -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 = { - title: 'Components/Inputs/Language Picker', - component: 'umb-input-language-picker', -}; - -export default meta; -type Story = StoryObj; - -export const Overview: Story = { - args: {}, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.context.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts similarity index 91% rename from src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts index 4905a5331b..4f2ed306d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language-picker/input-language-picker.element.ts +++ b/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; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.stories.ts new file mode 100644 index 0000000000..faa99db8d0 --- /dev/null +++ b/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 = { + title: 'Components/Inputs/Language Picker', + component: 'umb-input-language-picker', +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = { + args: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/views/language-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/views/language-details-workspace-view.element.ts index 94b80dadaa..e4537c686c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/views/language-details-workspace-view.element.ts +++ b/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 - - language.unique !== this._language?.unique}> + .filter=${(language: UmbLanguageItemModel) => + language.unique !== this._language?.unique}> `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts index ad5277a158..eb7c328839 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts +++ b/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`
- + this._package.languages = (e.target as UmbInputLanguageElement).selectedUniques; + }}">
`; }