diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/index.ts deleted file mode 100644 index 152cb2f39b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './date-input.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 7eadd27e04..c9ba96ad78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -6,7 +6,7 @@ export * from './body-layout/body-layout.element.js'; export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown // export * from './code-block.js'; export * from './data-type/index.js'; -export * from './date-input/index.js'; +export * from './input-date/index.js'; export * from './dropdown/index.js'; export * from './empty-state/index.js'; export * from './entity-actions-bundle/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/index.ts new file mode 100644 index 0000000000..2347a2f0fb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/index.ts @@ -0,0 +1 @@ +export * from './input-date.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts similarity index 94% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts index 7d645530d8..de1c904429 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts @@ -3,8 +3,8 @@ import { css, html, ifDefined, customElement, property, state } from '@umbraco-c import { UUITextStyles, FormControlMixin, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -@customElement('umb-date-input') -export class UmbDateInputElement extends FormControlMixin(UmbLitElement) { +@customElement('umb-input-date') +export class UmbInputDateElement extends FormControlMixin(UmbLitElement) { protected getFormElement() { return undefined; } @@ -136,8 +136,8 @@ export class UmbDateInputElement extends FormControlMixin(UmbLitElement) { label="Pick a date or time" .type="${this.type}" @change="${this.#onChange}" - .min="${ifDefined(this.min)}" - .max="${ifDefined(this.max)}" + min="${ifDefined(this.min)}" + max="${ifDefined(this.max)}" .step="${this.step}" .value="${this.displayValue?.replace('Z', '')}"> `; @@ -146,10 +146,10 @@ export class UmbDateInputElement extends FormControlMixin(UmbLitElement) { static styles = [UUITextStyles, css``]; } -export default UmbDateInputElement; +export default UmbInputDateElement; declare global { interface HTMLElementTagNameMap { - 'umb-date-input': UmbDateInputElement; + 'umb-input-date': UmbInputDateElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts similarity index 73% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.stories.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts index cbfd368c35..c2eec6dffa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts @@ -1,15 +1,15 @@ import { Meta, StoryObj } from '@storybook/web-components'; +import type { UmbInputDateElement } from './input-date.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import './date-input.element.js'; -import type { UmbDateInputElement } from './date-input.element.js'; +import './input-date.element.js'; -const meta: Meta = { +const meta: Meta = { title: 'Components/Inputs/Date', - component: 'umb-date-input', + component: 'umb-input-date', }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Overview: Story = { args: { @@ -43,11 +43,11 @@ export const DatetimelocalOffset: Story = { displayValue: '', }, render: (args) => - html``, + .displayValue="${args.displayValue}">`, }; export const Datetimelocal: Story = { @@ -58,9 +58,9 @@ export const Datetimelocal: Story = { displayValue: '', }, render: (args) => - html``, + .displayValue="${args.displayValue}">`, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts similarity index 57% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts index 45ddf3121c..af3fa7afa4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/date-input.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.test.ts @@ -1,15 +1,15 @@ import { expect, fixture, html } from '@open-wc/testing'; -import { UmbDateInputElement } from './date-input.element.js'; +import { UmbInputDateElement } from './input-date.element.js'; import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; -describe('UmbDateInputElement', () => { - let element: UmbDateInputElement; +describe('UmbInputDateElement', () => { + let element: UmbInputDateElement; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html` `); }); it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbDateInputElement); + expect(element).to.be.instanceOf(UmbInputDateElement); }); it('passes the a11y audit', async () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 9ac2c4ab3c..5000ed07a2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -82,7 +82,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen } render() { - return html``; + label="Pick a date or time">`; } static styles = [UUITextStyles]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts index c4f172831b..dd4a637fc2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts @@ -1,16 +1,16 @@ import { expect, fixture, html } from '@open-wc/testing'; -import { UmbDateInputElement } from '../../../components/date-input/date-input.element.js'; +import { UmbInputDateElement } from '../../../components/input-date/input-date.element.js'; import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element.js'; import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; describe('UmbPropertyEditorUIDatePickerElement', () => { let element: UmbPropertyEditorUIDatePickerElement; - let inputElement: UmbDateInputElement; + let inputElement: UmbInputDateElement; beforeEach(async () => { element = await fixture(html` `); - inputElement = element.shadowRoot?.querySelector('umb-date-input') as UmbDateInputElement; + inputElement = element.shadowRoot?.querySelector('umb-input-date') as UmbInputDateElement; }); it('is defined with its own instance', () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts index 8f2127e032..04004388f8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts @@ -1,4 +1,4 @@ -import { UmbMediaInputElement } from '../../../../media/media/components/input-media/input-media.element.js'; +import { UmbInputMediaElement } from '../../../../media/media/components/input-media/input-media.element.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -36,7 +36,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme private _limitMax?: number; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbMediaInputElement).selectedIds; + this.value = (event.target as UmbInputMediaElement).selectedIds; this.dispatchEvent(new CustomEvent('property-value-change')); }