use localize lib for utility components

src/components/format-bytes/format-bytes.ts

@@ -1,13 +1,16 @@
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { formatBytes } from '../../internal/number';
+import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @since 2.0
  * @status stable
  */
 @customElement('sl-format-bytes')
 export default class SlFormatBytes extends LitElement {
+  private localize = new LocalizeController(this);
+
   /** The number to format in bytes. */
   @property({ type: Number }) value = 0;
 
@@ -20,7 +23,7 @@ export default class SlFormatBytes extends LitElement {
   render() {
     return formatBytes(this.value, {
       unit: this.unit,
-      lang: this.lang
+      formatter: num => this.localize.number(num)
     });
   }
 }

src/components/format-date/format-date.ts

@@ -1,12 +1,15 @@
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @since 2.0
  * @status stable
  */
 @customElement('sl-format-date')
 export default class SlFormatDate extends LitElement {
+  private localize = new LocalizeController(this);
+
   /** The date/time to format. If not set, the current date and time will be used. */
   @property() date: Date | string = new Date();
 
@@ -55,7 +58,7 @@ export default class SlFormatDate extends LitElement {
       return;
     }
 
-    return new Intl.DateTimeFormat(this.lang, {
+    return this.localize.date(date, {
       weekday: this.weekday,
       era: this.era,
       year: this.year,
@@ -67,7 +70,7 @@ export default class SlFormatDate extends LitElement {
       timeZoneName: this.timeZoneName,
       timeZone: this.timeZone,
       hour12: hour12
-    }).format(date);
+    });
   }
 }
 

src/components/format-number/format-number.ts

@@ -1,12 +1,15 @@
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @since 2.0
  * @status stable
  */
 @customElement('sl-format-number')
 export default class SlFormatNumber extends LitElement {
+  private localize = new LocalizeController(this);
+
   /** The number to format. */
   @property({ type: Number }) value = 0;
 
@@ -45,7 +48,7 @@ export default class SlFormatNumber extends LitElement {
       return '';
     }
 
-    return new Intl.NumberFormat(this.lang, {
+    return this.localize.number(this.value, {
       style: this.type,
       currency: this.currency,
       currencyDisplay: this.currencyDisplay,
@@ -55,7 +58,7 @@ export default class SlFormatNumber extends LitElement {
       maximumFractionDigits: this.maximumFractionDigits,
       minimumSignificantDigits: this.minimumSignificantDigits,
       maximumSignificantDigits: this.maximumSignificantDigits
-    }).format(this.value);
+    });
   }
 }
 

src/components/relative-time/relative-time.ts

@@ -1,13 +1,14 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @since 2.0
  * @status stable
  */
 @customElement('sl-relative-time')
 export default class SlRelativeTime extends LitElement {
+  private localize = new LocalizeController(this);
   private updateTimeout: any;
 
   @state() private isoTime = '';
@@ -37,23 +38,18 @@ export default class SlRelativeTime extends LitElement {
     clearTimeout(this.updateTimeout);
   }
 
-  @watch('date')
-  @watch('lang')
-  @watch('format')
-  @watch('numeric')
-  @watch('sync')
-  updateTime() {
+  render() {
     const now = new Date();
-    const date = new Date(this.date);
+    const then = new Date(this.date);
 
     // Check for an invalid date
-    if (isNaN(date.getMilliseconds())) {
+    if (isNaN(then.getMilliseconds())) {
       this.relativeTime = '';
       this.isoTime = '';
-      return;
+      return '';
     }
 
-    const diff = +date - +now;
+    const diff = +then - +now;
     const availableUnits = [
       { max: 2760000, value: 60000, unit: 'minute' }, // max 46 minutes
       { max: 72000000, value: 3600000, unit: 'hour' }, // max 20 hours
@@ -64,23 +60,24 @@ export default class SlRelativeTime extends LitElement {
     ];
     const { unit, value } = availableUnits.find(unit => Math.abs(diff) < unit.max) as any;
 
-    this.isoTime = date.toISOString();
-    this.titleTime = new Intl.DateTimeFormat(this.lang, {
+    this.isoTime = then.toISOString();
+    this.titleTime = this.localize.date(then, {
       month: 'long',
       year: 'numeric',
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
       timeZoneName: 'short'
-    }).format(date);
+    });
 
-    this.relativeTime = new Intl.RelativeTimeFormat(this.lang, {
+    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
       numeric: this.numeric,
       style: this.format
-    }).format(Math.round(diff / value), unit);
+    });
 
     // If sync is enabled, update as time passes
     clearTimeout(this.updateTimeout);
+
     if (this.sync) {
       // Calculates the number of milliseconds until the next respective unit changes. This ensures that all components
       // update at the same time which is less distracting than updating independently.
@@ -89,7 +86,6 @@ export default class SlRelativeTime extends LitElement {
         const value = units[unit];
         return value - (now.getTime() % value);
       };
-
       let nextInterval: number;
 
       // NOTE: this could be optimized to determine when the next update should actually occur, but the size and cost of
@@ -105,11 +101,10 @@ export default class SlRelativeTime extends LitElement {
         // value it can accept. https://stackoverflow.com/a/3468650/567486
         nextInterval = getTimeUntilNextUnit('day'); // next day
       }
-      this.updateTimeout = setTimeout(() => this.updateTime(), nextInterval);
+
+      this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
     }
-  }
 
-  render() {
     return html` <time datetime=${this.isoTime} title=${this.titleTime}>${this.relativeTime}</time> `;
   }
 }

src/internal/number.ts

@@ -5,7 +5,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
   options = Object.assign(
     {
       unit: 'bytes',
-      lang: undefined
+      formatter: (number: number) => number.toLocaleString()
     },
     options
   );
@@ -20,13 +20,13 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
 
   const i = Math.min(Math.floor(Math.log10(bytes) / 3), units.length - 1);
   const num = Number((bytes / Math.pow(1000, i)).toPrecision(3));
-  const numString = num.toLocaleString(options.lang);
+  const numString = options.formatter ? options.formatter(num) : num;
   const prefix = isNegative ? '-' : '';
 
   return `${prefix}${numString} ${units[i]}`;
 }
 
 interface FormatBytesOptions {
   unit?: 'bytes' | 'bits';
-  lang?: string;
+  formatter?: (number: number) => string;
 }