Update indexedDB to use latest version of wc

Author: lpardosixtosMs

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js

@@ -50,19 +50,19 @@ class TodoApp extends HTMLElement {
     }
 
     toggleItem(event) {
-        if (event.detail.completed) {
+        if (event.detail.completed)
             this.#numberOfCompletedItems++;
-        } else {
+        else
             this.#numberOfCompletedItems--;
-        }
+
         this.list.toggleItem(event.detail.itemNumber, event.detail.completed);
         this.update("toggle-item", event.detail.id);
     }
 
     removeItem(event) {
-        if (event.detail.completed) {
+        if (event.detail.completed)
             this.#numberOfCompletedItems--;
-        }
+
         this.#numberOfItems--;
         this.update("remove-item", event.detail.id);
         this.list.removeItem(event.detail.itemNumber);
@@ -87,7 +87,6 @@ class TodoApp extends HTMLElement {
     moveToPreviousPage() {
         // Skeleton implementation of previous page navigation
         this.list.moveToPreviousPage().then(() => {
-            console.log("Moving to previous page");
             this.bottombar.reenablePreviousPageButton();
             window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
         });

experimental/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js

@@ -3,8 +3,8 @@ import template from "./todo-bottombar.template.js";
 import globalStyles from "../../styles/global.constructable.js";
 import bottombarStyles from "../../styles/bottombar.constructable.js";
 
-const additionalStyles = new CSSStyleSheet();
-additionalStyles.replaceSync(`
+const customStyles = new CSSStyleSheet();
+customStyles.replaceSync(`
 
     .clear-completed-button, .clear-completed-button:active,
     .todo-status,
@@ -29,12 +29,11 @@ additionalStyles.replaceSync(`
         grid-column: span 3;
     }
 
-    .bottombar.display-none {
+     :host([total-items="0"]) > .bottombar {
         display: none;
     }
 `);
 
-
 class TodoBottombar extends HTMLElement {
     static get observedAttributes() {
         return ["total-items", "active-items"];
@@ -52,7 +51,7 @@ class TodoBottombar extends HTMLElement {
         this.shadow = this.attachShadow({ mode: "open" });
         this.htmlDirection = document.dir || "ltr";
         this.setAttribute("dir", this.htmlDirection);
-        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, additionalStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, customStyles];
         this.shadow.append(node);
 
         this.clearCompletedItems = this.clearCompletedItems.bind(this);
@@ -61,11 +60,6 @@ class TodoBottombar extends HTMLElement {
     }
 
     updateDisplay() {
-        if (parseInt(this["total-items"]) !== 0)
-            this.element.classList.remove("display-none");
-        else
-            this.element.classList.add("display-none");
-
         this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`;
     }
 
@@ -81,14 +75,12 @@ class TodoBottombar extends HTMLElement {
     clearCompletedItems() {
         this.dispatchEvent(new CustomEvent("clear-completed-items"));
     }
-    
+
     MoveToNextPage() {
-        console.log("Moving to next page");
         this.dispatchEvent(new CustomEvent("next-page"));
     }
 
     MoveToPreviousPage() {
-        console.log("Moving to previous page button clicked");
         this.element.querySelector(".previous-page-button").disabled = true;
         this.dispatchEvent(new CustomEvent("previous-page"));
     }

experimental/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.template.js

@@ -2,7 +2,7 @@ const template = document.createElement("template");
 
 template.id = "todo-bottombar-template";
 template.innerHTML = `
-    <footer class="bottombar display-none">
+    <footer class="bottombar">
         <div class="todo-status"><span class="todo-count">0</span> item left</div>
         <ul class="filter-list">
             <li class="filter-item">

experimental/javascript-wc-indexeddb/dist/components/todo-item/todo-item.component.js

@@ -66,7 +66,7 @@ class TodoItem extends HTMLElement {
                     }
                     break;
                 case "itemcompleted":
-                    this.toggleInput.checked = this.itemcompleted === "true" ? true : false;
+                    this.toggleInput.checked = this.itemcompleted === "true";
                     break;
             }
         });
@@ -111,11 +111,10 @@ class TodoItem extends HTMLElement {
 
     updateItem(event) {
         if (event.target.value !== this.itemtitle) {
-            if (!event.target.value.length) {
+            if (!event.target.value.length)
                 this.removeItem();
-            } else {
+            else
                 this.setAttribute("itemtitle", event.target.value);
-            }
         }
 
         this.cancelEdit();