diff --git a/demo/index.html b/demo/index.html
index 9d36c3b..bd7e90a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -40,13 +40,7 @@
Prism.highlightAll();
});
-
-
+
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..f3cdf77
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+import { AuroDatetime } from '../src/auro-datetime.js';
+
+AuroDatetime.register();
+AuroDatetime.register('custom-datetime');
diff --git a/demo/index.md b/demo/index.md
index bc0c324..cc137d7 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -2,15 +2,15 @@
The index.md file is a compiled document. No edits should be made directly to this file.
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from `./docs/partials/index.md`
--->
-
+-->
+
# Datetime
The `` custom element makes it really easy to add dates to your web app with a simple HTML API.
-
-
+
+
## auro-datetime use cases
@@ -18,8 +18,8 @@ The `` custom element makes it really easy to add dates to your w
The `` element should be used in situations where users may:
* A date and/or time is required
-
-
+
+
## Example(s)
### Basic Date
@@ -29,18 +29,18 @@ The `` element should be used in situations where users may:
-
+
- See code
+ See code
-
-
+
+
```html
-
-```
-
-
-
+
+```
+
+
+
### Basic Time
@@ -48,30 +48,29 @@ The `` element should be used in situations where users may:
-
+
- See code
+ See code
-
-
+
+
```html
-
-```
-
-
-Having a closing statement about your example helps to really complete the thought with your reader.
-
+
+```
+
+
+Having a closing statement about your example helps to really complete the thought with your reader.
+
## Recommended Use and Version Control
-There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-datetime` custom element is defined automatically.
+There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-datetime` custom element is defined automatically.
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDatetime.register(name)` method and pass in a unique name.
```js
import { AuroDatetime } from './src/auro-datetime.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-RuntimeUtils.default.prototype.registerComponent('custom-datetime', AuroDatetime);
+AuroDatetime.register('custom-datetime');
```
This will create a new custom element that you can use in your HTML that will function identically to the `auro-datetime` element.
@@ -81,11 +80,14 @@ This will create a new custom element that you can use in your HTML that will fu
-
+
- See code
-
-
-
-
+ See code
+
+
+
+```html
+
+```
+
diff --git a/demo/index.min.js b/demo/index.min.js
new file mode 100644
index 0000000..38301e3
--- /dev/null
+++ b/demo/index.min.js
@@ -0,0 +1,270 @@
+import { LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// If using auroElement base class
+// See instructions for importing auroElement base class https://git.io/JULq4
+// import { html, css } from "lit";
+// import AuroElement from '@aurodesignsystem/orion-web-core-style-sheets/dist/auroElement/auroElement';
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-datetime custom element is for the purposes of providing an easy to use date and time API.
+ *
+ * @attr {String} type - Define type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]`
+ * @attr {String} utc - Pass in ISO 8601 UTC formatted time code
+ * @attr {String} weekday - Display long version of weekday. Option `[long]`
+ * @attr {String} month - Display long version of month. Option `[long]`
+ * @attr {String} timeZone - Pass in string to define [timeZone](https://docs.trifacta.com/display/DP/Supported+Time+Zone+Values)
+ * @attr {String} setDate - Pass in string to set date
+ * @attr {Boolean} cap - Capitalize AM or PM designation
+ * @slot pre - Content that comes before the `post` content
+ * @slot post - Content that comes after the `pre` content
+ */
+
+// build the component class
+class AuroDatetime extends LitElement {
+ constructor() {
+ super();
+
+ this.weekday = 'short';
+ this.month = 'short';
+
+ /**
+ * @private
+ */
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
+ }
+
+ 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 = {};
+ }
+
+ // function to define props used within the scope of this component
+ static get properties() {
+ return {
+ // ...super.properties,
+ type: { type: String },
+ utc: { type: String },
+ weekday: { type: String },
+ month: { type: String },
+ timeZone: { type: String },
+ setDate: { type: String },
+ cap: { type: Boolean }
+ };
+ }
+
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-datetime"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroDatetime.register("custom-datetime") // this will register this element to
+ *
+ */
+ static register(name = "auro-datetime") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatetime);
+ }
+
+ firstUpdated() {
+ // Add the tag name as an attribute if it is different than the component name
+ this.runtimeUtils.handleComponentTagRename(this, 'auro-datetime');
+ }
+
+ /**
+ * Internal function generate date string.
+ * @private
+ * @returns {string} - Date string.
+ */
+ humanDate() {
+ let newDate = new Date();
+
+ if (this.utc) {
+ this.dateTemplate.timeZone = 'UTC';
+ newDate = new Date(this.utc);
+
+ } else if (this.setDate) {
+ newDate = new Date(this.setDate);
+
+ }
+
+ return newDate.toLocaleString('en-us', this.dateTemplate);
+ }
+
+ /**
+ * Internal function to determine new Date object based on input type.
+ * @private
+ * @returns {string} - Date string.
+ */
+ humanDateConversion() {
+ let newDate = new Date();
+
+ if (this.utc) {
+ this.template.timeZone = 'UTC';
+ newDate = new Date(this.utc);
+ } else if (this.setDate) {
+ newDate = new Date(this.setDate);
+ }
+
+ switch (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 newDate.toLocaleString('en-us', this.template);
+ }
+
+ /**
+ * Internal function generate numeric date string 00/00/0000.
+ * @private
+ * @returns {string} - Date string.
+ */
+ numericDate() {
+ this.dateTemplate.month = 'numeric';
+ Reflect.deleteProperty(this.dateTemplate, 'weekday');
+ let newDate = new Date();
+
+ if (this.utc) {
+ this.dateTemplate.timeZone = 'UTC';
+ newDate = new Date(this.utc);
+ } else if (this.setDate) {
+ newDate = new Date(this.setDate);
+ }
+
+ return newDate.toLocaleString('en-us', this.dateTemplate);
+ }
+
+ /**
+ * Internal function generate standard time string.
+ * @private
+ * @returns {string} - Time string.
+ */
+ humanTime() {
+ let newTime = new Date();
+
+ if (this.utc) {
+ this.timeTemplate.timeZone = 'UTC';
+ newTime = new Date(this.utc);
+ } else if (this.setDate) {
+ newTime = new Date(this.setDate);
+ }
+
+ if (this.cap) {
+ return newTime.toLocaleString('en-us', this.timeTemplate).replace(/^0+/u, '');
+ }
+
+ return newTime.toLocaleString('en-us', this.timeTemplate).replace(/^0+/u, '').
+ toLowerCase();
+ }
+
+ /**
+ * Internal function to generate proper time zone local.
+ * @private
+ * @returns {string} - Date/Time zone string.
+ * @param {string} template - Determines which template model to use.
+ */
+ tzTime(template) {
+ const scrubNumber = -6;
+ const scrubTimeZone = this.setDate.slice(0, scrubNumber);
+ const newDateTime = new Date(scrubTimeZone);
+
+ if (this.cap) {
+ return newDateTime.toLocaleString('en-us', template).replace(/^0+/u, '');
+ }
+
+ return newDateTime.toLocaleString('en-us', template).replace(/^0+/u, '').
+ replace("AM", "am").
+ replace("PM", "pm");
+ }
+
+
+ /**
+ * Internal function UI decision.
+ * @private
+ * @returns {function} - Function determines which style of date data to show.
+ */
+ whichDate() {
+ let result = '';
+
+ switch (this.type) {
+ case 'date':
+ result = this.humanDate();
+ break;
+ case 'tzDate':
+ result = this.tzTime(this.dateTemplate);
+ break;
+ case 'tzTime':
+ result = this.tzTime(this.timeTemplate);
+ break;
+ case 'time':
+ result = this.humanTime();
+ break;
+ case 'year':
+ case 'month':
+ case 'weekday':
+ case 'day':
+ result = this.humanDateConversion();
+ break;
+ case 'numeric':
+ result = this.numericDate();
+ break;
+ default: this.humanDate();
+ }
+
+ if (this.setDate && !this.type) {
+ return this.humanDate();
+ } else if (this.utc && !this.type) {
+ return this.humanDate();
+ }
+
+ return result;
+ }
+
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+ // function that renders the HTML and CSS into the scope of the component
+ render() {
+ return html`
+
+ ${this.whichDate()}
+
+
+ `;
+ }
+}
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+AuroDatetime.register();
+AuroDatetime.register('custom-datetime');
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 9a066a9..d824b9a 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -50,15 +50,14 @@ Having a closing statement about your example helps to really complete the thoug
## Recommended Use and Version Control
-There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-datetime` custom element is defined automatically.
+There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-datetime` custom element is defined automatically.
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDatetime.register(name)` method and pass in a unique name.
```js
import { AuroDatetime } from './src/auro-datetime.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-RuntimeUtils.default.prototype.registerComponent('custom-datetime', AuroDatetime);
+AuroDatetime.register('custom-datetime');
```
This will create a new custom element that you can use in your HTML that will function identically to the `auro-datetime` element.
@@ -71,7 +70,7 @@ This will create a new custom element that you can use in your HTML that will fu
See code
-
-
+
+
diff --git a/index.js b/index.js
index 1918c7d..4f93e8e 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,3 @@
import { AuroDatetime } from './src/auro-datetime.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-RuntimeUtils.default.prototype.registerComponent('custom-datetime', AuroDatetime);
+AuroDatetime.register();
diff --git a/package-lock.json b/package-lock.json
index c5649db..4f67607 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@aurodesignsystem/auro-datetime",
- "version": "2.2.0",
+ "version": "2.2.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@aurodesignsystem/auro-datetime",
- "version": "2.2.0",
+ "version": "2.2.1",
"hasInstallScript": true,
"license": "Apache-2.0",
"dependencies": {
diff --git a/package.json b/package.json
index a3b68f3..6195cbb 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
"web components"
],
"scripts": {
- "build": "npm-run-all build:sass sass:render types",
+ "build": "npm-run-all build:sass sass:render bundler types",
"build:test": "npm-run-all test linters",
"build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
"build:ci": "npm-run-all sweep build:release",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 1141b0a..708abde 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -21,4 +21,14 @@ const production = !process.env.ROLLUP_WATCH,
]
};
-export default [modernConfig];
+const indexExamplesConfig = {
+ input: {
+ ['index.min']: './demo/index.js',
+ },
+ output: {
+ format: 'esm',
+ dir: 'demo/'
+ }
+};
+
+export default [modernConfig, indexExamplesConfig];
diff --git a/src/auro-datetime.js b/src/auro-datetime.js
index 7cc0e1e..eb0b217 100644
--- a/src/auro-datetime.js
+++ b/src/auro-datetime.js
@@ -75,6 +75,18 @@ export class AuroDatetime extends LitElement {
};
}
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-datetime"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroDatetime.register("custom-datetime") // this will register this element to
+ *
+ */
+ static register(name = "auro-datetime") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatetime);
+ }
+
firstUpdated() {
// Add the tag name as an attribute if it is different than the component name
this.runtimeUtils.handleComponentTagRename(this, 'auro-datetime');
@@ -254,9 +266,3 @@ export class AuroDatetime extends LitElement {
`;
}
}
-
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-datetime")) {
- customElements.define("auro-datetime", AuroDatetime);
-}
diff --git a/test/auro-datetime.test.js b/test/auro-datetime.test.js
index d3d2e8b..c3b4453 100644
--- a/test/auro-datetime.test.js
+++ b/test/auro-datetime.test.js
@@ -1,5 +1,5 @@
import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-datetime.js';
+import '../index.js';
describe('auro-datetime', () => {
it('auro-datetime is accessible', async () => {