@aurodesignsystem-dev/auro-datetime 0.0.0-pr82.0 → 0.0.0-pr82.2

package/demo/api.md

@@ -7,16 +7,16 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
 
 ### Properties & Attributes
 
-| Properties | Attributes | Modifiers | Type                                                                                             | Default | Description                                                                                                                      |
-| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| cap        | cap        |           | boolean                                                                                          |         | Capitalize AM or PM designation                                                                                                  |
-| locale     | locale     |           | string                                                                                           | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').<br>Defaults to 'en-US' when not set. |
-| month      | month      |           | `short` \| `long`                                                                                | `short` | Defines format of month                                                                                                          |
-| setDate    | setDate    |           | string                                                                                           |         | Pass in string to set date                                                                                                       |
-| timeZone   | timeZone   |           | string                                                                                           |         | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)                                |
-| type       | type       |           | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` |         | Defines type of data to render                                                                                                   |
-| utc        | utc        |           | string                                                                                           |         | Pass in ISO 8601 UTC formatted time code                                                                                         |
-| weekday    | weekday    |           | `short` \| `long`                                                                                | `short` | Defines format of weekday                                                                                                        |
+| Properties | Attributes | Modifiers | Type                                                                                             | Default | Description                                                                                       |
+| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
+| cap        | cap        |           | boolean                                                                                          |         | Capitalize AM or PM designation                                                                   |
+| locale     | locale     |           | string                                                                                           | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').       |
+| month      | month      |           | `short` \| `long`                                                                                | `short` | Defines format of month                                                                           |
+| setDate    | setDate    |           | string                                                                                           |         | Pass in string to set date                                                                        |
+| timeZone   | timeZone   |           | string                                                                                           |         | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
+| type       | type       |           | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` |         | Defines type of data to render                                                                    |
+| utc        | utc        |           | string                                                                                           |         | Pass in ISO 8601 UTC formatted time code                                                          |
+| weekday    | weekday    |           | `short` \| `long`                                                                                | `short` | Defines format of weekday                                                                         |
 
 ### Methods
 

package/demo/auro-datetime.min.js

@@ -131,6 +131,7 @@ class AuroDatetime extends i {
   _initializeDefaults() {
     this.weekday = "short";
     this.month = "short";
+    this.locale = "en-US";
 
     /**
      * @private
@@ -169,7 +170,6 @@ class AuroDatetime extends i {
 
       /**
        * BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
-       * Defaults to 'en-US' when not set.
        * @type {string}
        * @default 'en-US'
        */
@@ -224,6 +224,16 @@ class AuroDatetime extends i {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatetime);
   }
 
+  willUpdate(changedProperties) {
+    if (changedProperties.has('locale') && this.locale) {
+      try {
+        Intl.getCanonicalLocales(this.locale);
+      } catch {
+        this.locale = "en-US";
+      }
+    }
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, "auro-datetime");
@@ -244,7 +254,7 @@ class AuroDatetime extends i {
       newDate = new Date(this.setDate);
     }
 
-    return newDate.toLocaleString(this.locale || "en-us", this.dateTemplate);
+    return newDate.toLocaleString(this.locale, this.dateTemplate);
   }
 
   /**
@@ -280,7 +290,7 @@ class AuroDatetime extends i {
         this.template.weekday = this.template;
     }
 
-    return newDate.toLocaleString(this.locale || "en-us", this.template);
+    return newDate.toLocaleString(this.locale, this.template);
   }
 
   /**
@@ -300,7 +310,7 @@ class AuroDatetime extends i {
       newDate = new Date(this.setDate);
     }
 
-    return newDate.toLocaleString(this.locale || "en-us", this.dateTemplate);
+    return newDate.toLocaleString(this.locale, this.dateTemplate);
   }
 
   /**
@@ -320,12 +330,12 @@ class AuroDatetime extends i {
 
     if (this.cap) {
       return newTime
-        .toLocaleString(this.locale || "en-us", this.timeTemplate)
+        .toLocaleString(this.locale, this.timeTemplate)
         .replace(/^0+/u, "");
     }
 
     return newTime
-      .toLocaleString(this.locale || "en-us", this.timeTemplate)
+      .toLocaleString(this.locale, this.timeTemplate)
       .replace(/^0+/u, "")
       .toLowerCase();
   }
@@ -342,11 +352,11 @@ class AuroDatetime extends i {
     const newDateTime = new Date(scrubTimeZone);
 
     if (this.cap) {
-      return newDateTime.toLocaleString(this.locale || "en-us", template).replace(/^0+/u, "");
+      return newDateTime.toLocaleString(this.locale, template).replace(/^0+/u, "");
     }
 
     return newDateTime
-      .toLocaleString(this.locale || "en-us", template)
+      .toLocaleString(this.locale, template)
       .replace(/^0+/u, "")
       .replace("AM", "am")
       .replace("PM", "pm");

package/dist/auro-datetime-DxCkU1MY.js

@@ -0,0 +1,6 @@
+import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,t){const a=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class s extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.locale="en-US",this.runtimeUtils=new a}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit",timeZone:this.timeZone},this.template={}}static get properties(){return{cap:{type:Boolean},locale:{type:String},month:{type:String},setDate:{type:String},timeZone:{type:String},type:{type:String},utc:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}willUpdate(e){if(e.has("locale")&&this.locale)try{Intl.getCanonicalLocales(this.locale)}catch{this.locale="en-US"}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}humanDate(){let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale,this.dateTemplate)}humanDateConversion(){let e=new Date;switch(this.utc?(this.template.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.type){case"day":this.template.day="numeric";break;case"month":this.template.month=this.month;break;case"year":this.template.year="numeric";break;case"weekday":this.template.weekday=this.weekday;break;default:this.template.weekday=this.template}return e.toLocaleString(this.locale,this.template)}numericDate(){this.dateTemplate.month="numeric",Reflect.deleteProperty(this.dateTemplate,"weekday");let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale,this.dateTemplate)}humanTime(){let e=new Date;return this.utc?(this.timeTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.cap?e.toLocaleString(this.locale,this.timeTemplate).replace(/^0+/u,""):e.toLocaleString(this.locale,this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString(this.locale,e).replace(/^0+/u,""):a.toLocaleString(this.locale,e).replace(/^0+/u,"").replace("AM","am").replace("PM","pm")}whichDate(){let e="";switch(this.type){case"date":e=this.humanDate();break;case"tzDate":e=this.tzTime(this.dateTemplate);break;case"tzTime":e=this.tzTime(this.timeTemplate);break;case"time":e=this.humanTime();break;case"year":case"month":case"weekday":case"day":e=this.humanDateConversion();break;case"numeric":e=this.numericDate();break;default:this.humanDate()}return this.setDate&&!this.type||this.utc&&!this.type?this.humanDate():e}render(){return t`
+      <slot name="pre"></slot>
+      <span class="yield">${this.whichDate()}</span>
+      <slot name="post"></slot>
+      <slot></slot>
+    `}}export{s as A};

package/dist/index.d.ts

@@ -75,8 +75,7 @@ type BaseEvents = {};
 export type AuroDatetimeProps = {
   /** Capitalize AM or PM designation */
   cap?: AuroDatetime["cap"];
-  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
-Defaults to 'en-US' when not set. */
+  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
   locale?: AuroDatetime["locale"];
   /** Defines format of month */
   month?: AuroDatetime["month"];
@@ -95,8 +94,7 @@ Defaults to 'en-US' when not set. */
 export type AuroDatetimeSolidJsProps = {
   /** Capitalize AM or PM designation */
   "prop:cap"?: AuroDatetime["cap"];
-  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
-Defaults to 'en-US' when not set. */
+  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
   "prop:locale"?: AuroDatetime["locale"];
   /** Defines format of month */
   "prop:month"?: AuroDatetime["month"];
@@ -127,7 +125,6 @@ export type CustomElements = {
    *
    * - `cap`: Capitalize AM or PM designation
    * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
-   * Defaults to 'en-US' when not set.
    * - `month`: Defines format of month
    * - `setDate`: Pass in string to set date
    * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
@@ -164,7 +161,6 @@ export type CustomElementsSolidJs = {
    *
    * - `cap`: Capitalize AM or PM designation
    * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
-   * Defaults to 'en-US' when not set.
    * - `month`: Defines format of month
    * - `setDate`: Pass in string to set date
    * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroDatetime}from"./auro-datetime-BobtS5w7.js";import"lit";
+export{A as AuroDatetime}from"./auro-datetime-DxCkU1MY.js";import"lit";

package/dist/registered.js

@@ -1 +1 @@
-import{A as r}from"./auro-datetime-BobtS5w7.js";import"lit";r.register();
+import{A as r}from"./auro-datetime-DxCkU1MY.js";import"lit";r.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-datetime",
-  "version": "0.0.0-pr82.0",
+  "version": "0.0.0-pr82.2",
   "description": "auro-datetime HTML custom element",
   "repository": {
     "type": "git",

package/dist/auro-datetime-BobtS5w7.js

@@ -1,6 +0,0 @@
-import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,t){const a=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class s extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.runtimeUtils=new a}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit",timeZone:this.timeZone},this.template={}}static get properties(){return{cap:{type:Boolean},locale:{type:String},month:{type:String},setDate:{type:String},timeZone:{type:String},type:{type:String},utc:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}humanDate(){let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale||"en-us",this.dateTemplate)}humanDateConversion(){let e=new Date;switch(this.utc?(this.template.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.type){case"day":this.template.day="numeric";break;case"month":this.template.month=this.month;break;case"year":this.template.year="numeric";break;case"weekday":this.template.weekday=this.weekday;break;default:this.template.weekday=this.template}return e.toLocaleString(this.locale||"en-us",this.template)}numericDate(){this.dateTemplate.month="numeric",Reflect.deleteProperty(this.dateTemplate,"weekday");let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale||"en-us",this.dateTemplate)}humanTime(){let e=new Date;return this.utc?(this.timeTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.cap?e.toLocaleString(this.locale||"en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString(this.locale||"en-us",this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString(this.locale||"en-us",e).replace(/^0+/u,""):a.toLocaleString(this.locale||"en-us",e).replace(/^0+/u,"").replace("AM","am").replace("PM","pm")}whichDate(){let e="";switch(this.type){case"date":e=this.humanDate();break;case"tzDate":e=this.tzTime(this.dateTemplate);break;case"tzTime":e=this.tzTime(this.timeTemplate);break;case"time":e=this.humanTime();break;case"year":case"month":case"weekday":case"day":e=this.humanDateConversion();break;case"numeric":e=this.numericDate();break;default:this.humanDate()}return this.setDate&&!this.type||this.utc&&!this.type?this.humanDate():e}render(){return t`
-      <slot name="pre"></slot>
-      <span class="yield">${this.whichDate()}</span>
-      <slot name="post"></slot>
-      <slot></slot>
-    `}}export{s as A};