diff --git a/components/form/demo/api.html b/components/form/demo/api.html
index 1fd6b0eb..607dd8c9 100644
--- a/components/form/demo/api.html
+++ b/components/form/demo/api.html
@@ -40,7 +40,7 @@
Prism.highlightAll();
});
-
+
diff --git a/components/form/demo/api.js b/components/form/demo/api.js
new file mode 100644
index 00000000..bfeed480
--- /dev/null
+++ b/components/form/demo/api.js
@@ -0,0 +1,3 @@
+import { AuroForm } from "../src/auro-form.js"
+
+AuroForm.register();
diff --git a/components/form/demo/api.min.js b/components/form/demo/api.min.js
new file mode 100644
index 00000000..84534f60
--- /dev/null
+++ b/components/form/demo/api.min.js
@@ -0,0 +1,67 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+ // constructor() {
+ // super();
+ // }
+
+ // This function is to define props used within the scope of this component
+ // Be sure to review https://lit.dev/docs/components/properties/
+ // to understand how to use reflected attributes with your property settings.
+ static get properties() {
+ return {
+ // ...super.properties,
+
+ // this property is DEMO ONLY! Please delete.
+ cssClass: { type: String }
+ };
+ }
+
+ static get styles() {
+ return [styleCss];
+ }
+
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
+ // 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`
+
+
+
+
+
+ `;
+ }
+}
+
+AuroForm.register();
diff --git a/components/form/demo/index.html b/components/form/demo/index.html
index 49025d30..f5607266 100644
--- a/components/form/demo/index.html
+++ b/components/form/demo/index.html
@@ -40,7 +40,7 @@
Prism.highlightAll();
});
-
+
diff --git a/components/form/demo/index.js b/components/form/demo/index.js
new file mode 100644
index 00000000..4a9d9856
--- /dev/null
+++ b/components/form/demo/index.js
@@ -0,0 +1,4 @@
+import { AuroForm } from '../src/auro-form.js';
+
+AuroForm.register();
+AuroForm.register('custom-form');
diff --git a/components/form/demo/index.min.js b/components/form/demo/index.min.js
new file mode 100644
index 00000000..4aa8cd28
--- /dev/null
+++ b/components/form/demo/index.min.js
@@ -0,0 +1,68 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+ // constructor() {
+ // super();
+ // }
+
+ // This function is to define props used within the scope of this component
+ // Be sure to review https://lit.dev/docs/components/properties/
+ // to understand how to use reflected attributes with your property settings.
+ static get properties() {
+ return {
+ // ...super.properties,
+
+ // this property is DEMO ONLY! Please delete.
+ cssClass: { type: String }
+ };
+ }
+
+ static get styles() {
+ return [styleCss];
+ }
+
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
+ // 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`
+
+
+
+
+
+ `;
+ }
+}
+
+AuroForm.register();
+AuroForm.register('custom-form');
diff --git a/components/form/docs/partials/demo.md b/components/form/docs/partials/demo.md
index 1cb0bf37..9547c642 100644
--- a/components/form/docs/partials/demo.md
+++ b/components/form/docs/partials/demo.md
@@ -44,13 +44,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-form` 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-form` 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 `AuroForm.register(name)` method and pass in a unique name.
```js
-import './node_modules/@aurodesignsystem/auro-form';
-registerComponent('custom-form');
+import { AuroForm } from './node_modules/@aurodesignsystem/auro-form/src/auro-form';
+
+AuroForm.register('custom-form');
```
This will create a new custom element that you can use in your HTML that will function identically to the `auro-form` element.
diff --git a/components/form/src/auro-component-form.js b/components/form/src/auro-component-form.js
index 16587d42..69fb2471 100644
--- a/components/form/src/auro-component-form.js
+++ b/components/form/src/auro-component-form.js
@@ -14,6 +14,8 @@ import { LitElement, html } from "lit";
// Import touch detection lib
import styleCss from "./styles/style-css.js";
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
/**
* The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -44,6 +46,18 @@ export class Form extends LitElement {
return [styleCss];
}
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
// When using auroElement, use the following attribute and function when hiding content from screen readers.
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
@@ -59,7 +73,3 @@ export class Form extends LitElement {
}
}
-// default internal definition
-if (!customElements.get("auro-component-form")) {
- customElements.define("auro-component-form", Form);
-}
diff --git a/index.js b/index.js
index 954dc80c..c4660312 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,3 @@
-import { AuroForm } from './auro-form.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroForm } from './components/form/src/auro-form.js';
-RuntimeUtils.default.prototype.registerComponent('custom-form', AuroForm);
+AuroForm.register();
diff --git a/rollup.config.mjs b/rollup.config.mjs
index c1640c9c..492e6c72 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -45,4 +45,19 @@ const componentConfigs = getComponentEntryPoints().map(({ name, input, output })
createConfig(name, input, output)
);
-export default [mainConfig, ...componentConfigs];
\ No newline at end of file
+
+function createExampleConfig(componentName, entryPoint) {
+ return {
+ input: {
+ [`${entryPoint}.min`]: `./components/${componentName}/demo/${entryPoint}.js`,
+ },
+ output: {
+ format: 'esm',
+ dir: `./components/${componentName}/demo/`,
+ },
+ };
+}
+
+const docConfig = [createExampleConfig('form', 'index'), createExampleConfig('form', 'api')];
+
+export default [mainConfig, ...componentConfigs, ...docConfig];
\ No newline at end of file