fix: remove style add fill="currentColor" in getEmptyTemplate method #195

CHANGELOG.md

 # Changelog
+## [3.65.1] - 2024-06-17
+### Bug Fixes
+
+- close Button fix message.mjs [#197](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/197)
+- remove style add fill="currentColor" in getEmptyTemplate method [#195](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/195)
 
 ## [3.65.0] - 2024-04-15
 

source/components/datatable/datatable.mjs

@@ -946,12 +946,7 @@ function initOptionsFromArguments() {
 function getEmptyTemplate() {
 	return `<monster-state data-monster-role="empty-without-action">
     <div part="visual">
-    <style>
-      path {
-        fill: var(--monster-bg-color-primary-4);
-        }
-    </style>
-        <svg width="4rem" height="4rem" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg width="4rem" height="4rem" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="m21.5 22h-19c-1.378 0-2.5-1.121-2.5-2.5v-7c0-.07.015-.141.044-.205l3.969-8.82c.404-.896 1.299-1.475 2.28-1.475h11.414c.981 0 1.876.579 2.28 1.475l3.969 8.82c.029.064.044.135.044.205v7c0 1.379-1.122 2.5-2.5 2.5zm-20.5-9.393v6.893c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-6.893l-3.925-8.723c-.242-.536-.779-.884-1.368-.884h-11.414c-.589 0-1.126.348-1.368.885z"/>
             <path d="m16.807 17h-9.614c-.622 0-1.186-.391-1.404-.973l-1.014-2.703c-.072-.194-.26-.324-.468-.324h-3.557c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h3.557c.622 0 1.186.391 1.405.973l1.013 2.703c.073.194.261.324.468.324h9.613c.208 0 .396-.13.468-.324l1.013-2.703c.22-.582.784-.973 1.406-.973h3.807c.276 0 .5.224.5.5s-.224.5-.5.5h-3.807c-.208 0-.396.13-.468.324l-1.013 2.703c-.219.582-.784.973-1.405.973z"/>
         </svg>

source/components/notify/message.mjs

@@ -106,7 +106,7 @@ class Message extends CustomElement {
 	 * new Monster.Types.DataUrl(btoa(JSON.stringify({
 	 *        timeout: 3000,
 	 *        features: {
-	 *          clear: true,
+	 *          close: true,
 	 *          disappear: true
 	 *        }
 	 *    })),'application/json',true).toString()
@@ -116,7 +116,7 @@ class Message extends CustomElement {
 	 * @property {Object} templates Template definitions
 	 * @property {integer} timeout time in milliseconds until the message should be removed. The timeout can be disabled via the feature `disappear`.
 	 * @property {Object} features
-	 * @property {boolean} features.clear show clear button
+	 * @property {boolean} features.close show close button
 	 * @property {boolean} features.disappear automatically remove the message after the timeout
 	 * @property {string} templates.main Main template
 	 *
@@ -128,7 +128,7 @@ class Message extends CustomElement {
 			{
 				timeout: 6000,
 				features: {
-					clear: true,
+					close: true,
 					disappear: true,
 				},
 				content: "<slot></slot>",
@@ -211,12 +211,9 @@ class Message extends CustomElement {
  */
 function startFadeout() {
 	if (!this?.[timerSymbol]) {
-		this[timerSymbol] = setTimeout(
-			() => {
+		this[timerSymbol] = setTimeout(() => {
 			removeSelf.call(this);
-			},
-			this.getOption("timeout", 1000),
-		);
+		}, this.getOption("timeout", 1000));
 	}
 }
 
@@ -277,7 +274,7 @@ function initControlReferences() {
 		"[" + ATTRIBUTE_ROLE + "=control]",
 	);
 	this[removeElementSymbol] = this.shadowRoot.querySelector(
-		"[" + ATTRIBUTE_ROLE + "=remove]",
+		"[" + ATTRIBUTE_ROLE + "=close]",
 	);
 }
 
@@ -328,7 +325,7 @@ function initEventhandler() {
 	 * @param {Event} event
 	 */
 	this[removeEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "remove");
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "close");
 
 		if (element instanceof HTMLElement) {
 			removeSelf.call(this);
@@ -364,7 +361,7 @@ function getTemplate() {
 
                 </div>
                 <div part="remove"
-                     data-monster-attributes="class path:features.clear | ?::hidden "
+                     data-monster-attributes="class path:features.close | ?::hidden "
                      data-monster-role="close" tabindex="-1"></div>
             </div>
         </div>