@aurodesignsystem-dev/auro-datetime 0.0.0-pr83.0 → 0.0.0-pr89.0

package/dist/auro-datetime-39FU0ZIU.js

@@ -0,0 +1,6 @@
+import{LitElement as e,html as t}from"lit";class i{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,i=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||i(t.getRootNode().host):null){return i(t)}handleComponentTagRename(e,t){const i=t.toLowerCase();e.tagName.toLowerCase()!==i&&e.setAttribute(i,!0)}elementMatch(e,t){const i=t.toLowerCase();return e.tagName.toLowerCase()===i||e.hasAttribute(i)}getSlotText(e,t){const i=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}const a=/^(\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?)?)(Z|[+-]\d{2}:\d{2})?$/u;class n extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.locale="en-US",this._warnedLocales=new Set,this._warnedTimeZones=new Set,this._warnedValues=new Set,this._effectiveLocale=this._resolveLocale(this.locale),this._effectiveTimeZone=this._resolveTimeZone(this.timezone),this.runtimeUtils=new i}_resolveLocale(e){if(!e)return"en-US";try{return Intl.getCanonicalLocales(e)[0]}catch{return this._warnedLocales&&!this._warnedLocales.has(e)&&(this._warnedLocales.add(e),console.warn(`auro-datetime: "${e}" is not a valid BCP 47 locale tag. Falling back to "en-US".`)),"en-US"}}_resolveTimeZone(e){if(e)try{return new Intl.DateTimeFormat(void 0,{timeZone:e}),e}catch{return void(this._warnedTimeZones&&!this._warnedTimeZones.has(e)&&(this._warnedTimeZones.add(e),console.warn(`auro-datetime: "${e}" is not a valid IANA timezone. Falling back to viewer-local.`)))}}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit"}}static get properties(){return{locale:{type:String},month:{type:String},timezone:{type:String},type:{type:String},value:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){i.prototype.registerComponent(e,n)}willUpdate(e){e.has("locale")&&(this._effectiveLocale=this._resolveLocale(this.locale)),e.has("timezone")&&(this._effectiveTimeZone=this._resolveTimeZone(this.timezone))}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}_zonedWallClockToUtc(e,t){const i=new Date(`${e}Z`),a=new Intl.DateTimeFormat("en-US",{timeZone:t,hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).formatToParts(i),n=Object.fromEntries(a.filter(e=>"literal"!==e.type).map(e=>[e.type,e.value])),o=new Date(`${n.year}-${n.month}-${n.day}T${n.hour}:${n.minute}:${n.second}Z`),s=i.getTime()-o.getTime();return new Date(i.getTime()+s)}_resolveInputDate(){const e=this._effectiveTimeZone;if(null==this.value)return{date:new Date,timeZoneOption:e};const t=this.value.match(a);if(!t)return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string.`)),{date:null,timeZoneOption:void 0};const i=t[1],n=Boolean(t[2]);if(n&&!i.includes("T"))return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string (offset/Z requires a time component).`)),{date:null,timeZoneOption:void 0};const o=i.includes("T")?i:`${i}T00:00:00`,s=(()=>e&&!n?this._zonedWallClockToUtc(o,e):e&&n?new Date(this.value):new Date(o))();return Number.isNaN(s.getTime())?(this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 date.`)),{date:null,timeZoneOption:void 0}):{date:s,timeZoneOption:e}}humanDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={...this.dateTemplate};return t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanDateConversion(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={};switch(t&&(i.timeZone=t),this.type){case"day":i.day="numeric";break;case"month":i.month=this.month;break;case"year":i.year="numeric";break;case"weekday":i.weekday=this.weekday}return e.toLocaleString(this._effectiveLocale,i)}numericDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={...this.dateTemplate,month:"numeric"};return Reflect.deleteProperty(i,"weekday"),t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanTime(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={...this.timeTemplate};t&&(i.timeZone=t);const a=e.toLocaleString(this._effectiveLocale,i);return/[ap]\.?m\.?/iu.test(a)?a.replace(/^0+/u,"").toLowerCase():a}whichDate(){switch(this.type){case"date":default:return this.humanDate();case"time":return this.humanTime();case"year":case"month":case"weekday":case"day":return this.humanDateConversion();case"numeric":return this.numericDate()}}render(){return t`
+      <slot name="pre"></slot>
+      <span class="yield">${this.whichDate()}</span>
+      <slot name="post"></slot>
+      <slot></slot>
+    `}}export{n as A};

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-
 import type { AuroDatetime } from "src/auro-datetime.js";
 
 /**
@@ -21,13 +20,12 @@ import type { AuroDatetime } from "src/auro-datetime.js";
  */
 export type ScopedElements<
   Prefix extends string = "",
-  Suffix extends string = ""
+  Suffix extends string = "",
 > = {
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
 type BaseProps<T extends HTMLElement> = {
-
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -70,122 +68,200 @@ type BaseProps<T extends HTMLElement> = {
   popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
   popovertargetaction?: "show" | "hide" | "toggle";
-
-} ;
-
-type BaseEvents = {
-
-
 };
 
-
+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'). */
+  locale?: AuroDatetime["locale"];
   /** Defines format of month */
-  "month"?: AuroDatetime['month'];
-  /** Pass in string to set date */
-  "setDate"?: AuroDatetime['setDate'];
-  /** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
-  "timeZone"?: AuroDatetime['timeZone'];
+  month?: AuroDatetime["month"];
+  /** Pass in string to define [timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+When set, the moment described by `value` is converted into this IANA zone for display.
+When unset, the wall-clock time from the input string is rendered as-is. */
+  timezone?: AuroDatetime["timezone"];
   /** Defines type of data to render */
-  "type"?: AuroDatetime['type'];
-  /** Pass in ISO 8601 UTC formatted time code */
-  "utc"?: AuroDatetime['utc'];
+  type?: AuroDatetime["type"];
+  /** ISO 8601 date or date-time string. Examples:
+- `2022-07-14T08:00:00-07:00` (with offset)
+- `2022-07-14T08:00:00Z` (UTC)
+- `2022-07-14T08:00:00` (no offset)
+- `2022-07-14` (date only)
+
+When omitted, the component renders today's date.
+Invalid input is logged as a warning and renders nothing. */
+  value?: AuroDatetime["value"];
   /** Defines format of weekday */
-  "weekday"?: AuroDatetime['weekday'];
+  weekday?: AuroDatetime["weekday"];
+};
 
+export type AuroDatetimeSolidJsProps = {
+  /** 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"];
+  /** Pass in string to define [timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+When set, the moment described by `value` is converted into this IANA zone for display.
+When unset, the wall-clock time from the input string is rendered as-is. */
+  "prop:timezone"?: AuroDatetime["timezone"];
+  /** Defines type of data to render */
+  "prop:type"?: AuroDatetime["type"];
+  /** ISO 8601 date or date-time string. Examples:
+- `2022-07-14T08:00:00-07:00` (with offset)
+- `2022-07-14T08:00:00Z` (UTC)
+- `2022-07-14T08:00:00` (no offset)
+- `2022-07-14` (date only)
 
-}
+When omitted, the component renders today's date.
+Invalid input is logged as a warning and renders nothing. */
+  "prop:value"?: AuroDatetime["value"];
+  /** Defines format of weekday */
+  "prop:weekday"?: AuroDatetime["weekday"];
 
-  export type CustomElements = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+export type CustomElements = {
+  /**
+   * The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
+   * - `month`: Defines format of month
+   * - `timezone`: Pass in string to define [timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+   * When set, the moment described by `value` is converted into this IANA zone for display.
+   * When unset, the wall-clock time from the input string is rendered as-is.
+   * - `type`: Defines type of data to render
+   * - `value`: ISO 8601 date or date-time string. Examples:
+   * - `2022-07-14T08:00:00-07:00` (with offset)
+   * - `2022-07-14T08:00:00Z` (UTC)
+   * - `2022-07-14T08:00:00` (no offset)
+   * - `2022-07-14` (date only)
+   *
+   * When omitted, the component renders today's date.
+   * Invalid input is logged as a warning and renders nothing.
+   * - `weekday`: Defines format of weekday
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `post`: Content that comes after the `pre` content
+   * - `pre`: Content that comes before the `post` content
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `_initializeDefaults() => void`: undefined
+   * - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
+   */
+  "auro-datetime": Partial<
+    AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents
+  >;
+};
 
+export type CustomElementsSolidJs = {
   /**
-     * The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `cap`: Capitalize AM or PM designation 
- * - `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) 
- * - `type`: Defines type of data to render 
- * - `utc`: Pass in ISO 8601 UTC formatted time code 
- * - `weekday`: Defines format of weekday 
- * 
- * ## Slots
- * 
- * Areas where markup can be added to the component.
- * 
- * - `post`: Content that comes after the `pre` content
- * - `pre`: Content that comes before the `post` content
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `_initializeDefaults() => void`: undefined
- * - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
-  */
-    "auro-datetime": Partial<AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents>;
-  }
+   * The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
+   * - `month`: Defines format of month
+   * - `timezone`: Pass in string to define [timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+   * When set, the moment described by `value` is converted into this IANA zone for display.
+   * When unset, the wall-clock time from the input string is rendered as-is.
+   * - `type`: Defines type of data to render
+   * - `value`: ISO 8601 date or date-time string. Examples:
+   * - `2022-07-14T08:00:00-07:00` (with offset)
+   * - `2022-07-14T08:00:00Z` (UTC)
+   * - `2022-07-14T08:00:00` (no offset)
+   * - `2022-07-14` (date only)
+   *
+   * When omitted, the component renders today's date.
+   * Invalid input is logged as a warning and renders nothing.
+   * - `weekday`: Defines format of weekday
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `post`: Content that comes after the `pre` content
+   * - `pre`: Content that comes before the `post` content
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `_initializeDefaults() => void`: undefined
+   * - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
+   */
+  "auro-datetime": Partial<
+    AuroDatetimeProps &
+      AuroDatetimeSolidJsProps &
+      BaseProps<AuroDatetime> &
+      BaseEvents
+  >;
+};
 
-export type CustomCssProperties = {
+export type CustomCssProperties = {};
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
 }
 
-
-declare module 'react' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'preact' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module '@builder.io/qwik' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module '@stencil/core' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'hono/jsx' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'react-native' {
+declare module "solid-js" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends CustomElementsSolidJs {}
   }
-  
 }
 
 declare global {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 declare global {
   namespace svelteHTML {

package/dist/index.js

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

package/dist/registered.js

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

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-datetime",
-  "version": "0.0.0-pr83.0",
+  "version": "0.0.0-pr89.0",
   "description": "auro-datetime HTML custom element",
   "repository": {
     "type": "git",
@@ -21,12 +21,12 @@
     "node": ">=20"
   },
   "dependencies": {
-    "lit": "^3.3.1"
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@aurodesignsystem/auro-cli": "^3.5.0",
+    "@aurodesignsystem/auro-cli": "^3.6.0",
     "@aurodesignsystem/auro-config": "^1.3.1",
-    "@aurodesignsystem/auro-library": "^5.5.4",
+    "@aurodesignsystem/auro-library": "^5.12.2",
     "husky": "^9.1.7"
   },
   "browserslist": [

package/dist/auro-datetime-jIlTbbhr.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},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("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("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("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("en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString("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("en-us",e).replace(/^0+/u,""):a.toLocaleString("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};