Cleaning up CSS in components and adding in a drawer component.

chip-list.js

@@ -9,7 +9,7 @@ class ChipList extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-chip-list {
                 display: flex;
                 flex-direction: row;

chip.js

@@ -15,7 +15,7 @@ class Chip extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-chip {
                 border-radius: 1em;
                 background-color: #e0e0e0;

circular-progress.js

@@ -7,7 +7,7 @@ class CircularProgress extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
         mt-circular-progress > div > svg {
             position: absolute;
             z-index: 999999;

collapsable-region.js

@@ -7,7 +7,7 @@ class CollapsableRegion extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-collapsable-region .title:hover {
                 cursor: pointer;
             }

drawer.js

@@ -0,0 +1,94 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
+
+class Drawer extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return /*css*/`
+            mt-drawer > div {
+                position: relative;
+                background-color: #f8f9fa;
+            }
+
+            mt-drawer > div.absolute {
+                position: absolute;
+            }
+
+            mt-drawer > div.left {
+                left: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.right {
+                right: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.top {
+                top: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.bottom {
+                bottom: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.show {
+                display: flex;
+                flex-direction: column;
+            }
+
+            mt-drawer > div {
+                display: none;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            show: true,
+            responsiveClasses: "d-none d-md-flex",
+            position: "left",
+            width: "20em",
+            height: null,
+            padding: "1em",
+            absolute: true
+        };
+    }
+
+    render() {
+        return this.template
+            .child(
+                new div()
+                    .class(this.responsiveClasses)
+                    .class(this.show, (value) => { return value ? "show" : null })
+                    .class(this.absolute, (value) => { return value ? "absolute" : null })
+                    .class(this.position)
+                    .style("width", this.width)
+                    .style("height", this.height)
+                    .style("padding", this.padding)
+                    .child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
+                    .child(new slot(this))
+            );
+    }
+}
+
+class DrawerTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-drawer", children);
+    }
+}
+
+export {
+    DrawerTemplate as Drawer
+};
+
+customElements.define("mt-drawer", Drawer);

editable-image.js

@@ -7,7 +7,7 @@ class EditableImage extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-editable-image {
                 position: relative;
                 display: flex;

editable-label.js

@@ -8,7 +8,7 @@ class EditableLabel extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-editable-label {
                 display: flex;
                 flex-direction: row;

icon-tabs.js

@@ -8,7 +8,7 @@ class IconTabs extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-icon-tabs > .icons {
                 display: flex;
                 flex-direction: row;

linear-progress.js

@@ -7,7 +7,7 @@ class LinearProgress extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-linear-progress {
                 display: flex;
                 align-items: center;

pagination-list.js

@@ -16,7 +16,7 @@ class PaginationList extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-pagination-list .list-container {
                 display: flex;
                 flex-direction: row;