Fix CSP compliance of message timeout

Author: jissereitsma

view/frontend/templates/component/messages.phtml

@@ -9,11 +9,6 @@ use Loki\CssUtils\Util\CssClass;
 /** @var Escaper $escaper */
 /** @var CssClass $css */
 /** @var ViewModelFactory $viewModelFactory */
-
-$timeout = (int)$block->getTimeout();// @todo Right source for this?
-if (!$timeout > 0) {
-    $timeout = 10000;
-}
 ?>
 <div
     class="<?= /* @noEscape */ $css('container mx-auto py-3') ?>"
@@ -22,7 +17,7 @@ if (!$timeout > 0) {
         <div
             :data-message-text="message.text"
             @dblclick="removeMessage"
-            x-autoremove="<?= $timeout ?>"
+            x-autoremove="timeout"
             class="<?= /* @noEscape */ $css('message', 'message') ?>"
             :class="message.type">
             <div

view/frontend/templates/script/component/message-component.phtml

@@ -4,11 +4,17 @@ declare(strict_types=1);
 use Magento\Framework\View\Element\Template;
 
 /** @var Template $block */
+
+$timeout = (int)$block->getTimeout();// @todo Right source for this?
+if (!$timeout > 0) {
+    $timeout = 10000;
+}
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
         Alpine.data('LokiMessagesComponent', () => ({
             messages: [],
+            timeout: <?= (int)$timeout ?>,
             init() {
                 Alpine.effect(() => {
                     this.messages = Alpine.store('LokiMessageStore').getMessages();
@@ -20,7 +26,7 @@ use Magento\Framework\View\Element\Template;
             removeMessage() {
                 const messageText = this.$el.getAttribute('data-message-text');
                 Alpine.store('LokiMessageStore').removeMessage(messageText);
-            }
+            },
         }));
     });
 </script>