Refactor umb-localize into individual element

Author: filipbech

src/packages/core/localization/index.ts

@@ -1,3 +1,6 @@
 import './localize.element.js';
+import './localize-date.element.js';
+import './localize-number.element.js';
+import './localize-relative-time.element.js';
 
 export * from './registry/localization.registry.js';

src/packages/core/localization/localize-date.element.ts

@@ -0,0 +1,51 @@
+import { css, customElement, html, property, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+/**
+ * This element allows you to localize a date
+ * @element umb-localize-date
+ * @slot - The fallback value if the key is not found.
+ */
+@customElement('umb-localize-date')
+export class UmbLocalizeDateElement extends UmbLitElement {
+	/**
+	 * The date to localize.
+	 * @attr
+	 * @example date="Sep 22 2023"
+	 */
+	@property()
+	date!: string | Date;
+
+    /**
+	 * Formatting options
+	 * @attr
+	 * @example options={ dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }
+	 */
+	@property() 
+	options?: Intl.DateTimeFormatOptions;
+	
+	@state()
+	protected get text(): string {
+	    return this.localize.date(this.date, this.options);
+	}
+
+	protected render() {
+		return this.date 
+            ? html`${unsafeHTML(this.text)}`
+            : html`<slot></slot>`
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-localize-date': UmbLocalizeDateElement;
+	}
+}

src/packages/core/localization/localize-number.element.ts

@@ -0,0 +1,51 @@
+import { css, customElement, html, property, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+/**
+ * This element allows you to localize a number
+ * @element umb-localize-number
+ * @slot - The fallback value if the key is not found.
+ */
+@customElement('umb-localize-number')
+export class UmbLocalizeNumberElement extends UmbLitElement {
+	/**
+	 * The number to localize.
+	 * @attr
+	 * @example number=1_000_000
+	 */
+	@property()
+	number!: number | string;
+
+    /**
+	 * Formatting options
+	 * @attr
+	 * @example options={ style: 'currency', currency: 'EUR' }
+	 */
+	@property() 
+	options?: Intl.NumberFormatOptions;
+	
+	@state()
+	protected get text(): string {
+	    return this.localize.number(this.number, this.options);
+	}
+
+	protected render() {
+		return this.number 
+            ? html`${unsafeHTML(this.text)}`
+            : html`<slot></slot>`
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-localize-number': UmbLocalizeNumberElement;
+	}
+}

src/packages/core/localization/localize-relative-time.element.ts

@@ -0,0 +1,59 @@
+import { css, customElement, html, property, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+/**
+ * This element allows you to localize a relative time
+ * @element umb-localize-relative-time
+ * @slot - The fallback value if the key is not found.
+ */
+@customElement('umb-localize-relative-time')
+export class UmbLocalizeRelativeTimeElement extends UmbLitElement {
+	/**
+	 * The date to localize.
+	 * @attr
+	 * @example time=10
+	 */
+	@property()
+	time!: number;
+
+    /**
+	 * Formatting options
+	 * @attr
+	 * @example options={ dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }
+	 */
+	@property() 
+	options?: Intl.RelativeTimeFormatOptions;
+	
+    /**
+	 * Unit
+	 * @attr
+	 * @example unit='seconds'
+	 */
+	@property()
+	unit: Intl.RelativeTimeFormatUnit = 'seconds';
+
+	@state()
+	protected get text(): string {
+	    return this.localize.relativeTime(this.time, this.unit, this.options);
+	}
+
+	protected render() {
+		return this.time 
+            ? html`${unsafeHTML(this.text)}`
+            : html`<slot></slot>`
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-localize-relative-time': UmbLocalizeRelativeTimeElement;
+	}
+}

src/packages/core/localization/localize.element.ts

@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-localize')
 export class UmbLocalizeElement extends UmbLitElement {
 	/**
-	 * The key to localize. The key is case sensitive. For non-term localizations, this is the input
+	 * The key to localize. The key is case sensitive. 
 	 * @attr
 	 * @example key="general_ok"
 	 */
@@ -33,37 +33,11 @@ export class UmbLocalizeElement extends UmbLitElement {
 	 */
 	@property()
 	debug = false;
-
-	@property()
-	type: 'term' | 'date' | 'number' | 'relativeTime' = 'term';
-
-	@property()
-	unit: Intl.RelativeTimeFormatUnit = 'seconds';
-
-	@property() 
-	options?: Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | Intl.RelativeTimeFormatOptions;
 
 	@state()
 	protected get text(): string {
-		let localizedValue = '';
+		const localizedValue = this.localize.term(this.key, ...(this.args ?? []));
 
-		switch (this.type) {
-			case 'term':
-				localizedValue = this.localize.term(this.key, ...(this.args ?? []));
-				break;
-			case 'date':
-				localizedValue = this.localize.date(this.key, this.options as Intl.DateTimeFormatOptions);
-				break;
-			case 'number':
-				localizedValue = this.localize.number(this.key, this.options as Intl.NumberFormatOptions);
-				break;				
-			case 'relativeTime':
-				localizedValue = this.localize.relativeTime(+this.key, this.unit, this.options as Intl.RelativeTimeFormatOptions);
-				break;		
-			default:
-				throw('unsupported type')
-				break;
-		}
 		// If the value is the same as the key, it means the key was not found.
 		if (localizedValue === this.key) {
 			(this.getHostElement() as HTMLElement).setAttribute('data-localize-missing', this.key);

src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts

@@ -177,7 +177,7 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_createDate"></umb-localize></strong>
-				<span><umb-localize key="${new Date}" type="date"></umb-localize></span>
+				<span><umb-localize-date date="${new Date}"></umb-localize-date></span>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_documentType"></umb-localize></strong>