From d1a3811f64ee8da6a1a5ebc202d47942afc070e0 Mon Sep 17 00:00:00 2001
From: chris <chris@denkblock.mas>
Date: Thu, 17 Apr 2025 01:18:05 +0200
Subject: [PATCH] Added package.json and modified README

---
 README.md    |  3 ++-
 icons.js     | 23 +++++++++++++++++------
 package.json | 21 +++++++++++++++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 package.json

diff --git a/README.md b/README.md
index 972c7ba..a041995 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
 # jpclwe-materialIcons
+> jpc-like-website - extension
 
-Extension that enables the user to use material-design icons from goole
\ No newline at end of file
+Extension that enables the user to use material-design icons from goole
diff --git a/icons.js b/icons.js
index 4bedae6..9aa0bd5 100644
--- a/icons.js
+++ b/icons.js
@@ -1,5 +1,5 @@
 /**
- * check https://fonts.google.com/icons (20250302)
+ * check https://fonts.google.com/icons (20250302)s
  */
 
 const MaterialIcons = new CompelExtension();
@@ -15,22 +15,32 @@ MaterialIcons.builderElements = {
          * @returns {Component}
          */
         iconMIO: function (icon, attr = {}) {
+                let styleClass = "material-icons";
+                Page.registerStyling(
+                        "." + styleClass,
+                        {
+                                "user-select": "none",
+                                "-ms-user-select": "none",
+                                "-webkit-user-select": "none",
+                        }
+                );
                 return builder.genTag('i', attr)
-                        .addStyleClass("material-icons")
+                        .addStyleClass(styleClass)
+                        //.addStyleClass("compel-"+styleClass)
                         .text(icon);
         },
 
         /**
          * 
-         * @param {MATERIAL_DESIGN_ICONS} icon       
+         * @param {ICONS} icon       
          * @param {Function} onClick 
          * @param {string} text
          * @param {Map<string,string>} attr 
          * @returns {Component}
          */
         iconButton: function (icon, onclick, text, attr = {}) {
-                let clickableIcon = builder.iconMIO(icon, attr)
-                        .addEventListener(CommonEvents.ONCLICK, onclick);
+                let clickableIcon = builder.extensions.iconMIO(icon, attr)
+                        .addEventListener("click", onclick);
                 return builder.column()
                         .alignment(Alignment.CENTER)
                         .arrangement(Arrangement.CENTER)
@@ -50,7 +60,8 @@ MaterialIcons.stylings = {
         "@font-face": new Modifier()
                 .setStyleRule("font-family", "'Material Icons'")
                 .setStyleRule("font-weight", "400")
-                .setStyleRule("src", `url(../../extensions/jpclwe-materialIcons/20250220-materialicons.woff2) format('woff2')`)
+                //.setStyleRule("src", `url(../../extensions/jpclwe-materialIcons/20250220-materialicons.woff2) format('woff2')`)
+                .setStyleRule("src", `url(file:///C:/_dev_space/repos/jpc-like-websites/extensions/jpclwe-materialIcons/20250220-materialicons.woff2) format('woff2')`)
         ,
         ".material-icons": new Modifier()
                 .setStyleRule("font-family", "'Material Icons'")
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ca6d261
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "jpclwe-materialicons",
+  "version": "1.0.0",
+  "description": "Module adding material icons to the jpc-like-websites components",
+  "keywords": [
+    "jpc",
+    "jpclwe",
+    "extension"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "http://git.labos.goip.de/chris/jpclwe-materialIcons.git"
+  },
+  "license": "ISC",
+  "author": "cm",
+  "type": "commonjs",
+  "main": "icons.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}