feat(api): add register static method

AuroInput.register is to easily register the element without extra importing
`import "@aurodesignsystem/auro-input"` will still register this element to <auro-input>
`import { AuroInput } from '../src/auro-input.js` wont register this element until AuroInput.register gets called

demo/index.html

@@ -30,9 +30,8 @@
 
     <script type="module">
       import { AuroInput } from '../src/auro-input.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-      RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
+      AuroInput.register('custom-input');
 
       import { initExamples } from "./index.min.js";
 

demo/index.md

@@ -223,13 +223,12 @@ The `<auro-input>` component supports setting a custom validity message specific
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 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 <a href="#install">install</a> section, the class is imported and the `auro-input` 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 `AuroInput.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroInput } from './src/auro-input.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
+AuroInput.register('custom-input');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.

docs/partials/index.md

@@ -135,13 +135,12 @@ The `<auro-input>` component supports setting a custom validity message specific
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 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 <a href="#install">install</a> section, the class is imported and the `auro-input` 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 `AuroInput.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroInput } from './src/auro-input.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
+AuroInput.register('custom-input');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.

index.js

@@ -1,4 +1,3 @@
 import { AuroInput } from './src/auro-input.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
+AuroInput.register();

src/auro-input.js

@@ -13,6 +13,8 @@ import i18n from './i18n.js';
 import BaseInput from './base-input.js';
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
@@ -39,6 +41,18 @@ export class AuroInput extends BaseInput {
     this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-inpu"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroInput.register("custom-input") // this will register this element to <custom-input/>
+   *
+   */
+  static register(name = "auro-input") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroInput);
+  }
+
   /**
    * Function to determine if the input is meant to render an icon visualizing the input type.
    * @private
@@ -206,8 +220,3 @@ export class AuroInput extends BaseInput {
     `;
   }
 }
-
-// default internal definition
-if (!customElements.get("auro-input")) {
-  customElements.define("auro-input", AuroInput);
-}

test/auro-input.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testing';
-import '../src/auro-input.js';
+import '../index.js';
 
 describe('auro-input', () => {