From db76ce82fd5466474e121efb377afba43c926288 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <wurzer.da@gmail.com>
Date: Fri, 2 Feb 2024 19:45:33 +0100
Subject: [PATCH] feat(toast): custom HTML allows templates

---
 packages/materialize |  2 +-
 pnpm-lock.yaml       |  8 --------
 toasts.html          | 20 ++++++++++++--------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/materialize b/packages/materialize
index ab5dfaa..69c4cc6 160000
--- a/packages/materialize
+++ b/packages/materialize
@@ -1 +1 @@
-Subproject commit ab5dfaacbcc3ea86ffd18c34fb29213e78efa526
+Subproject commit 69c4cc67154361d53652153aa7dea1f0adfc9d28
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1942eb..7e31654 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,10 +35,6 @@ importers:
         version: 4.4.11(sass@1.69.0)
 
   packages/materialize:
-    dependencies:
-      animejs:
-        specifier: ^3.2.1
-        version: 3.2.1
     devDependencies:
       '@commitlint/cli':
         specifier: ^17.0.3
@@ -976,10 +972,6 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /animejs@3.2.1:
-    resolution: {integrity: sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==}
-    dev: false
-
   /ansi-escapes@3.2.0:
     resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
     engines: {node: '>=4'}
diff --git a/toasts.html b/toasts.html
index d7e10f5..a0e70b9 100644
--- a/toasts.html
+++ b/toasts.html
@@ -69,7 +69,7 @@ <h3 class="header">Options</h3>
                     <td>''</td>
                     <td>
                       <p>
-                        Id of an HTML element that will be used as tootip content.
+                        Id of an HTML Template element that will be used as tootip content.
                       </p>
                     </td>
                   </tr>
@@ -159,7 +159,7 @@ <h3 class="header">Properties</h3>
               <h3 class="header">Custom HTML</h3>
               <p>
                 You can pass in an toastId as the argument as well.
-                This toastId should refer to some element in the HTML that will be used as toast content.
+                This toastId should refer to some template in the HTML that will be used as toast content.
               </p>              
               <button
                   type="button"
@@ -167,10 +167,12 @@ <h3 class="header">Custom HTML</h3>
                   onclick="M.toast({toastId: 'my-toast-1'})"
                 >Toast 1!
               </button>
-              <div id="my-toast-1" style="display: none;">
+              <template id="my-toast-1">
+                <div>
                   This is toast nº1 with a
                   <a href="https://github.com/materializecss"> link </a>
-              </div>
+                </div>                  
+              </template>
               <button
                   type="button"
                   class="waves-effect waves-light btn"
@@ -181,10 +183,12 @@ <h3 class="header">Custom HTML</h3>
                   This is toast nº2 with a <i class="material-icons icon-demo">insert_chart</i>
               </div>
               <pre><code class="language-markup">
-<xmp><button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 2!</button>
-<div id="my-toast-1" style="display: none;">
-  This is toast nº1 with a <a href="https://github.com/materializecss">link</a>
-</div></xmp></code></pre>
+<xmp><button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+<template id="my-toast-1">
+  <div>
+    This is toast nº1 with a  <a href="https://github.com/materializecss"> link </a>
+  </div>                  
+</template></xmp></code></pre>
             </div>
             <div id="callback" class="scrollspy section">
               <h3 class="header">Callback</h3>