Extract window component to reuse on modal

src/components/app-base.js

@@ -32,18 +32,6 @@ class AppBase extends HTMLElement {
       * {
         margin: 0;
       }
-      #window {
-        width: 800px;
-        height: 477px;
-        background: #FFFFFF 0% 0% no-repeat padding-box;
-        box-shadow: 0px 5px 12px #0000001F;
-        border-radius: 20px;
-        opacity: 1;
-        padding: 50px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 35px;
-      }
       #title {
         height: 49px;;
         margin-bottom: -12px;
@@ -94,7 +82,7 @@ class AppBase extends HTMLElement {
         margin-top: 3px;
       }
     </style>
-    <div id="window">
+    <main-window width="900px" height="577px" gap="35px">
       <h1 id="title">${this.text.title}</h1>
       <p id="description">${this.text.description}</p>
       <select id="list" multiple is="item-list">
@@ -111,7 +99,7 @@ class AppBase extends HTMLElement {
         <custom-button action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</custom-button>
         <custom-button action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</custom-button>
       </span>
-    </div>
+    </main-window>
     `;
   }
 }

src/components/main-window.js

@@ -1,5 +1,5 @@
 class MainWindow extends HTMLElement {
-  static observedAttributes = ['title', 'description'];
+  static observedAttributes = ['width', 'height', 'gap'];
 
   constructor() {
     super();
@@ -18,45 +18,21 @@ class MainWindow extends HTMLElement {
 
     this.shadowRoot.innerHTML = `
     <style>
-      #window {
+      div {
-        width: 800px;
+        width: ${this.getAttribute('width')};
-        height: 477px;
+        height: ${this.getAttribute('height')};
+        box-sizing: border-box;
+        padding: 50px;
         background: #FFFFFF 0% 0% no-repeat padding-box;
         box-shadow: 0px 5px 12px #0000001F;
         border-radius: 20px;
         opacity: 1;
-        padding: 50px;
+        display: flex;
-        display: flex
+        flex-direction: column;
-      }
+        row-gap: ${this.getAttribute('gap')};
-      h1 {
-        height: 49px;
-        margin: 0;
-        margin-bottom: 13px;
-        text-align: center;
-        font-size: 40px;
-        font-family: "Montserrat", sans-serif;
-        font-weight: normal;
-        letter-spacing: 0px;
-        color: #333333;
-        opacity: 1;
-      }
-      p {
-        text-align: center;
-        height: 74px;
-        margin: 0;
-        margin-bottom: 35px;
-        text-align: center;
-        font-size: 18px;
-        font-family: "Montserrat", sans-serif;
-        font-weight: normal;
-        letter-spacing: 0px;
-        color: #333333;
-        opacity: 1;
       }
     </style>
-    <div id="window">
+    <div>
-      <h1>${title}</h1>
-      <p>${description}</p>
       <slot></slot>
     </div>
     `;

src/components/modal.js

@@ -0,0 +1,57 @@
+import Store from '../modules/store.js';
+
+class CustomModal extends HTMLElement {
+  static observedAttributes = ['active', 'color', 'action'];
+
+  constructor() {
+    super();
+    this.publish = Store.publish;
+    this.attachShadow({ mode: 'open' });
+  }
+  
+  onClick(e) {
+    this.publish(this.getAttribute('action'));
+  }
+
+  connectedCallback() {
+    this.render();
+    this.shadowRoot.getElementById('button').addEventListener('click', this.onClick.bind(this));
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.getElementById('button').removeEventListener('click', this.onClick);
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+    <style>
+      button {
+        border-radius: 50px;
+        border-width: 1px;
+        border-style: ${isOutline ? 'solid' : 'hidden'};
+        border-color: ${this.getAttribute('color')};
+        opacity: 1;
+        width: ${this.getAttribute('width')};
+        height: 49px;
+        background-color: ${isOutline ? 'white' : this.getAttribute('color')};
+        color: ${isOutline ? this.getAttribute('color') : 'white'};
+        text-align: center;
+        font-size: 16px;
+        font-family: "Montserrat", sans-serif;
+        font-weight: normal
+        letter-spacing: 0px;
+        text-transform: uppercase;
+      }
+    </style>
+    <main-window width="700px" height="276px" gap="25px">
+      <slot></slot>
+    </main-window>
+    `;
+  }
+}
+
+customElements.define('custom-modal', CustomModal);

src/main.js

@@ -1,4 +1,6 @@
 import './components/app-base.js';
+import './main-window.js';
 import './components/custom-button.js';
 import './components/item-list.js';
+import './components/custom-modal.js';