From a745a631639703e082a4b269621842bdef59f684 Mon Sep 17 00:00:00 2001
From: MattMo <matt@montoyatech.com>
Date: Fri, 26 Aug 2022 08:35:55 -0700
Subject: [PATCH] Upgraded to new IgniteHtml register element.

---
 app-bar.js            | 7 ++++---
 chip-list.js          | 3 ++-
 chip.js               | 3 ++-
 circular-progress.js  | 3 ++-
 collapsable-region.js | 5 +++--
 drawer.js             | 7 ++++---
 editable-image.js     | 5 +++--
 editable-label.js     | 5 +++--
 icon-tabs.js          | 5 +++--
 linear-progress.js    | 3 ++-
 pagination-list.js    | 5 +++--
 popper.js             | 3 ++-
 12 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/app-bar.js b/app-bar.js
index 43d9a37..f76329a 100644
--- a/app-bar.js
+++ b/app-bar.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from "../ignite-html/ignite-html.js";
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, div, h1, slot, button, list } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -53,8 +54,8 @@ class AppBarTemplate extends IgniteTemplate {
     }
 }
 
+IgniteHtml.register("mt-app-bar", AppBar);
+
 export {
     AppBarTemplate as AppBar
-};
-
-customElements.define("mt-app-bar", AppBar);
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/chip-list.js b/chip-list.js
index 78c6435..cc07de2 100644
--- a/chip-list.js
+++ b/chip-list.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, list, div, input, button, h4, span } from "../ignite-html/ignite-template.js";
 import { Chip } from "./chip.js";
@@ -301,7 +302,7 @@ class ChipListTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-chip-list", ChipList);
+IgniteHtml.register("mt-chip-list", ChipList);
 
 export {
     ChipListTemplate as ChipList
diff --git a/chip.js b/chip.js
index 3e7ef4c..b06cf7a 100644
--- a/chip.js
+++ b/chip.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
 
@@ -60,7 +61,7 @@ class ChipTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-chip", Chip);
+IgniteHtml.register("mt-chip", Chip);
 
 export {
     ChipTemplate as Chip
diff --git a/circular-progress.js b/circular-progress.js
index a3f7e87..ef27e8f 100644
--- a/circular-progress.js
+++ b/circular-progress.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot, div, svg, circle } from "../ignite-html/ignite-template.js";
 
@@ -103,7 +104,7 @@ class CircularProgressTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-circular-progress", CircularProgress);
+IgniteHtml.register("mt-circular-progress", CircularProgress);
 
 export {
     CircularProgressTemplate as CircularProgress
diff --git a/collapsable-region.js b/collapsable-region.js
index a0fca11..ade3472 100644
--- a/collapsable-region.js
+++ b/collapsable-region.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, div, slot } from "../ignite-html/ignite-template.js";
 
@@ -40,8 +41,8 @@ class CollapsableRegionTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-collapsable-region", CollapsableRegion);
+IgniteHtml.register("mt-collapsable-region", CollapsableRegion);
 
 export {
     CollapsableRegionTemplate as CollapsableRegion
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/drawer.js b/drawer.js
index 5d7a912..76c9d9d 100644
--- a/drawer.js
+++ b/drawer.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -225,8 +226,8 @@ class DrawerTemplate extends IgniteTemplate {
     }
 }
 
+IgniteHtml.register("mt-drawer", Drawer);
+
 export {
     DrawerTemplate as Drawer
-};
-
-customElements.define("mt-drawer", Drawer);
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/editable-image.js b/editable-image.js
index 8b9ccb6..b3146a9 100644
--- a/editable-image.js
+++ b/editable-image.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, button, div, img, input } from "../ignite-html/ignite-template.js";
 
@@ -98,8 +99,8 @@ class EditableImageTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-editable-image", EditableImage);
+IgniteHtml.register("mt-editable-image", EditableImage);
 
 export {
     EditableImageTemplate as EditableImage
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/editable-label.js b/editable-label.js
index 3c1ce4b..1454294 100644
--- a/editable-label.js
+++ b/editable-label.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -157,8 +158,8 @@ class EditableLabelTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-editable-label", EditableLabel);
+IgniteHtml.register("mt-editable-label", EditableLabel);
 
 export {
     EditableLabelTemplate as EditableLabel
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/icon-tabs.js b/icon-tabs.js
index 873868d..81bb982 100644
--- a/icon-tabs.js
+++ b/icon-tabs.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot, list, div } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -43,8 +44,8 @@ class IconTabsTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-icon-tabs", IconTabs);
+IgniteHtml.register("mt-icon-tabs", IconTabs);
 
 export {
     IconTabsTemplate as IconTabs
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/linear-progress.js b/linear-progress.js
index a458099..40d528e 100644
--- a/linear-progress.js
+++ b/linear-progress.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot, div, svg, circle } from "../ignite-html/ignite-template.js";
 
@@ -83,7 +84,7 @@ class LinearProgressTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-linear-progress", LinearProgress);
+IgniteHtml.register("mt-linear-progress", LinearProgress);
 
 export {
     LinearProgressTemplate as LinearProgress
diff --git a/pagination-list.js b/pagination-list.js
index 03e2f63..554e03b 100644
--- a/pagination-list.js
+++ b/pagination-list.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, button, ul, slot, span, div, list, html, pagination, population } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -132,8 +133,8 @@ class PaginationListTemplate extends IgniteTemplate {
     }
 }
 
-customElements.define("mt-pagination-list", PaginationList);
+IgniteHtml.register("mt-pagination-list", PaginationList);
 
 export {
     PaginationListTemplate as PaginationList
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/popper.js b/popper.js
index 2ec661b..9bbb378 100644
--- a/popper.js
+++ b/popper.js
@@ -1,3 +1,4 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot } from "../ignite-html/ignite-template.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
@@ -82,7 +83,7 @@ class Popper extends IgniteElement {
     }
 }
 
-customElements.define("mt-popper", Popper);
+IgniteHtml.register("mt-popper", Popper);
 
 class PopperTemplate extends IgniteTemplate {
     constructor(...children) {