@aurodesignsystem-dev/auro-datetime 0.0.0-pr100.0

package/demo/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+import { AuroDatetime } from "../src/index";
+
+AuroDatetime.register();
+AuroDatetime.register("custom-datetime");

package/demo/index.md

@@ -0,0 +1,60 @@
+<!--
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
+-->
+
+# Datetime
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
+<!-- The below content is automatically added from ./../docs/partials/description.md -->
+The `<auro-datetime>` custom element makes it really easy to add dates to your web app with a simple HTML API.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
+The `<auro-datetime>` element should be used in situations where users may:
+
+* A date and/or time is required
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Basic Date
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-datetime type="date"></auro-datetime>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-datetime type="date"></auro-datetime>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Basic Time
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
+  <auro-datetime type="time"></auro-datetime>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
+
+```html
+<auro-datetime type="time"></auro-datetime>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+ 

package/demo/index.min.js

@@ -0,0 +1,6 @@
+import { A as AuroDatetime } from './auro-datetime.min.js';
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+AuroDatetime.register();
+AuroDatetime.register("custom-datetime");

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

@@ -0,0 +1,273 @@
+import type { AuroDatetime } from "src/auro-datetime.js";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix 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) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  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 = {};
+
+export type AuroDatetimeProps = {
+  /** 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 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"];
+  /** 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"];
+};
+
+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"];
+
+  /** 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.
+   *
+   * - `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 = {};
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "@builder.io/qwik" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "@stencil/core" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "hono/jsx" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "react-native" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+declare global {
+  namespace svelteHTML {
+    interface IntrinsicElements extends CustomElements {}
+  } 
+}
+
+
+export { AuroDatetime } from "./index.js";

package/dist/index.js

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

package/dist/registered.js

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

package/package.json

@@ -0,0 +1,86 @@
+{
+  "//": [
+    "================================================================================",
+    "# To work within the development environment, run the following tasks",
+    "  1. $ npm run dev",
+    "  2. Go to http://localhost:8000",
+    "================================================================================"
+  ],
+  "name": "@aurodesignsystem-dev/auro-datetime",
+  "version": "0.0.0-pr100.0",
+  "description": "auro-datetime HTML custom element",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-datetime"
+  },
+  "type": "module",
+  "main": "dist/registered.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "lit": "^3.3.2"
+  },
+  "devDependencies": {
+    "@aurodesignsystem/auro-cli": "^3.6.0",
+    "@aurodesignsystem/auro-config": "^1.3.1",
+    "@aurodesignsystem/auro-library": "^5.12.2",
+    "husky": "^9.1.7"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 iOS major versions",
+    "last 2 Firefox versions",
+    "last 2 Edge versions",
+    "last 2 Safari major versions"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "alaska airlines",
+    "auro",
+    "design system",
+    "web components"
+  ],
+  "scripts": {
+    "build": "auro build",
+    "dev": "auro dev -w -s",
+    "dev:open": "auro dev -w -s --open",
+    "lint": "biome check --no-errors-on-unmatched && stylelint \"./src/**/*.scss\"",
+    "lint:fix": "biome check --fix --no-errors-on-unmatched && stylelint \"./src/**/*.scss\" --fix",
+    "test": "auro test",
+    "test:watch": "auro test --watch",
+    "prepare": "husky",
+    "test:coverage": "auro test --coverage-report --open"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./readme.md": "./README.md",
+    "./custom-elements.json": "./custom-elements.json",
+    ".": {
+      "module": "./dist/registered.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/registered.js"
+    },
+    "./demo/*.md": "./demo/*.md",
+    "./demo/*.js": "./demo/*.min.js",
+    "./class": {
+      "module": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "demo/**/*",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "customElements": "custom-elements.json"
+}