input date

src/Umbraco.Web.UI.Client/src/packages/core/components/date-input/index.ts

@@ -1 +0,0 @@
-export * from './date-input.element.js';

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';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/index.ts

@@ -0,0 +1 @@
+export * from './input-date.element.js';

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', '')}">
 		</uui-input>`;
@@ -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;
 	}
 }

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<UmbDateInputElement> = {
+const meta: Meta<UmbInputDateElement> = {
 	title: 'Components/Inputs/Date',
-	component: 'umb-date-input',
+	component: 'umb-input-date',
 };
 
 export default meta;
-type Story = StoryObj<UmbDateInputElement>;
+type Story = StoryObj<UmbInputDateElement>;
 
 export const Overview: Story = {
 	args: {
@@ -43,11 +43,11 @@ export const DatetimelocalOffset: Story = {
 		displayValue: '',
 	},
 	render: (args) =>
-		html`<umb-date-input
+		html`<umb-input-date
 			.type="${args.type}"
 			.value="${args.value}"
 			.offsetTime="${args.offsetTime}"
-			.displayValue="${args.displayValue}"></umb-date-input>`,
+			.displayValue="${args.displayValue}"></umb-input-date>`,
 };
 
 export const Datetimelocal: Story = {
@@ -58,9 +58,9 @@ export const Datetimelocal: Story = {
 		displayValue: '',
 	},
 	render: (args) =>
-		html`<umb-date-input
+		html`<umb-input-date
 			.type="${args.type}"
 			.value="${args.value}"
 			.offsetTime="${args.offsetTime}"
-			.displayValue="${args.displayValue}"></umb-date-input>`,
+			.displayValue="${args.displayValue}"></umb-input-date>`,
 };

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` <umb-date-input></umb-date-input> `);
+		element = await fixture(html` <umb-input-date></umb-input-date> `);
 	});
 
 	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 () => {

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`<umb-date-input
+		return html`<umb-input-date
 			.type=${this._inputType}
 			@input=${this._onInput}
 			.datetime=${this._valueString}
@@ -90,7 +90,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 			.max=${this._max}
 			.step=${this._step}
 			.offsetTime=${this._offsetTime}
-			label="Pick a date or time"></umb-date-input>`;
+			label="Pick a date or time"></umb-input-date>`;
 	}
 
 	static styles = [UUITextStyles];

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` <umb-property-editor-ui-date-picker></umb-property-editor-ui-date-picker> `);
-		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', () => {

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'));
 	}