refactor: migrate toast-notification HTML template to separate JS file and update styles for icons

Author: caperaven

components/toast-notification/toast-notification.css

@@ -42,4 +42,20 @@
 .close {
   cursor: pointer;
   align-self: flex-start;
+}
+
+.info {
+  fill: var(--cl-progress);
+}
+
+.error {
+  fill: var(--cl-invalid);
+}
+
+.success {
+  fill: var(--cl-valid);
+}
+
+.warning {
+  fill: var(--cl-danger);
 }

components/toast-notification/toast-notification.html renamed to components/toast-notification/toast-notification.html.js

@@ -1,3 +1,5 @@
+export const HTML = `
+<link rel="stylesheet" href="__css__" />
 <svg class="hidden">
   <symbol id="icon-info" viewBox="0 0 24 24">
     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
@@ -18,34 +20,35 @@
 
 <template id="info-toast">
   <div class="toast">
-    <svg class="icon info"><use xlink:href="#icon-info"></use></svg>
+    <material-icon icon="info" class="info"></material-icon>
     <p class="message">This is an info toast.</p>
     <svg class="icon close"><use xlink:href="#icon-close"></use></svg>
   </div>
 </template>
 
 <template id="error-toast">
   <div class="toast toast-error">
-    <svg class="icon error"><use xlink:href="#icon-error"></use></svg>
+    <material-icon icon="error_outline" class="error"></material-icon>
     <p class="message">This is an error toast.</p>
     <svg class="icon close"><use xlink:href="#icon-close"></use></svg>
   </div>
 </template>
 
 <template id="success-toast">
   <div class="toast">
-    <svg class="icon success"><use xlink:href="#icon-success"></use></svg>
+    <material-icon icon="check" class="success"></material-icon>
     <p class="message">This is a success toast.</p>
     <svg class="icon close"><use xlink:href="#icon-close"></use></svg>
   </div>
 </template>
 
 <template id="warning-toast">
   <div class="toast">
-    <svg class="icon warning"><use xlink:href="#icon-warning"></use></svg>
+    <material-icon icon="warning" class="warning"></material-icon>
     <p class="message">This is a warning toast.</p>
     <svg class="icon close"><use xlink:href="#icon-close"></use></svg>
   </div>
 </template>
 
-<div class="toast-container"></div>
+<div class="toast-container"></div>
+`.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/toast-notification/toast-notification.js

@@ -1,5 +1,4 @@
-// This component handles the creation and display of toast notifications.
-import {ComponentModule} from "../../src/modules/component.js";
+import { HTML } from "./toast-notification.html.js";
 
 /**
  * The ToastNotification web component handles creating and displaying toasts.
@@ -19,16 +18,13 @@ export class ToastNotification extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = HTML;
     }
 
     /**
      * Loads HTML content and attaches click handler.
      */
     async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
         this.addEventListener("click", this.#clickHandler);
     }