refactor: implement custom ce naming extension

.npmignore

@@ -20,4 +20,5 @@ dist/es5.js
 index.html
 
 # ignore src
-src/**/*
+src/**/*.scss
+src/**/*.css

apiExamples/dynamicMenu.js

@@ -45,7 +45,7 @@ function generateMenuOptionHtml(menu, label, value) {
 const dynamicData = new DynamicData();
 const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
 
-const input = dynamicMenuExample.shadowRoot.querySelector('auro-dropdown').querySelector('auro-input');
+const input = dynamicMenuExample.shadowRoot.querySelector('combobox-dropdown').querySelector('combobox-input');
 
 input.addEventListener('input', () => {
   let data = dynamicData.getData();

apiExamples/focus.js

@@ -1,8 +1,6 @@
-// export function focus(elem) {
-  const focusExample = document.querySelector('#focusExample');
-  const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
+const focusExample = document.querySelector('#focusExample');
+const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
 
-  focusExampleBtnElem.addEventListener('click', () => {
-    focusExample.focus();
-  });
-// }
+focusExampleBtnElem.addEventListener('click', () => {
+  focusExample.focus();
+});

apiExamples/persistent.js

@@ -1,7 +1,5 @@
 const persistentExample = document.querySelector('#persistent');
 
-console.log(persistentExample);
-
 persistentExample.addEventListener('addNewAddress', () => {
   console.warn('addNewAddress event fired');
   alert(`addNewAddress event fired`);

apiExamples/swapValue.js

@@ -2,11 +2,7 @@ const btn = document.querySelector('#swapExampleBtn');
 const comboboxOne = document.querySelector('#swapExampleLeft');
 const comboboxTwo = document.querySelector('#swapExampleRight');
 
-console.log("hello");
-console.log(btn);
-
 btn.addEventListener('click', () => {
-  console.log("btn clicked");
   const valueOne = comboboxOne.value;
   const valueTwo = comboboxTwo.value;
 

demo/api.md

@@ -160,7 +160,7 @@ function generateMenuOptionHtml(menu, label, value) {
 const dynamicData = new DynamicData();
 const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
 
-const input = dynamicMenuExample.shadowRoot.querySelector('auro-dropdown').querySelector('auro-input');
+const input = dynamicMenuExample.shadowRoot.querySelector('combobox-dropdown').querySelector('combobox-input');
 
 input.addEventListener('input', () => {
   let data = dynamicData.getData();
@@ -492,14 +492,12 @@ The focus method will apply focus state to the combobox input field.
   <span slot="trigger">See code</span>
 
 ```js
-// export function focus(elem) {
-  const focusExample = document.querySelector('#focusExample');
-  const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
-
-  focusExampleBtnElem.addEventListener('click', () => {
-    focusExample.focus();
-  });
-// }
+const focusExample = document.querySelector('#focusExample');
+const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
+
+focusExampleBtnElem.addEventListener('click', () => {
+  focusExample.focus();
+});
 ```
 
 ```html

index.js

@@ -1 +1,23 @@
-export * from './dist/auro-combobox';
+import { AuroInput } from '@aurodesignsystem/auro-input/src/auro-input.js';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
+import { AuroCombobox } from './src/auro-combobox.js';
+
+if (!customElements.get("combobox-input")) {
+  customElements.define("combobox-input", class extends AuroInput {});
+}
+
+if (!customElements.get("combobox-dropdown")) {
+  customElements.define("combobox-dropdown", class extends AuroDropdown {});
+}
+
+/**
+ * Register Custom Element.
+ * @param {Object} name - Name to use for custom element.
+ * @returns {void}
+ */
+export function registerComponent(name) {
+  // alias definition
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends AuroCombobox {});
+  }
+}