From ba69da70aeb3f3876833ce25e9bd1463ec6d6e25 Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Fri, 19 Jan 2024 14:55:55 +0100
Subject: [PATCH 1/4] render functions doesnt use dots and handles boolean

---
 .../src/components/forms/radio/index.test.ts  |  4 ++--
 .../typesafe-generic-component-renderer.ts    | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/ui-library/src/components/forms/radio/index.test.ts b/packages/ui-library/src/components/forms/radio/index.test.ts
index 4ad37c077..e1394a52b 100644
--- a/packages/ui-library/src/components/forms/radio/index.test.ts
+++ b/packages/ui-library/src/components/forms/radio/index.test.ts
@@ -7,8 +7,6 @@ import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 
 const sampleParams: BlrRadioType = {
-  checked: false,
-  disabled: false,
   name: 'Default Name',
   optionId: 'testId',
   label: 'harald',
@@ -17,6 +15,8 @@ const sampleParams: BlrRadioType = {
   hasHint: true,
   hasError: false,
   theme: 'Light',
+  checked: false,
+  disabled: false,
 };
 
 describe('blr-radio', () => {
diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 50f53249a..3148c5c30 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -19,21 +19,35 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
       } else {
         templateFragments.push(` @${key}=`);
       }
+
+      values.push(value);
     } else if (key === 'classMap') {
       if (index === 0) {
         templateFragments.push(`<${tagName} class=`);
       } else {
         templateFragments.push(` class=`);
       }
+
+      values.push(value);
+    } else if (typeof value === 'boolean') {
+      if (value === true) {
+        if (index === 0) {
+          templateFragments.push(`<${tagName} ${key}=`);
+        } else {
+          templateFragments.push(` ${key}=`);
+        }
+
+        values.push(value);
+      }
     } else {
       if (index === 0) {
-        templateFragments.push(`<${tagName} .${key}=`);
+        templateFragments.push(`<${tagName} ${key}=`);
       } else {
-        templateFragments.push(` .${key}=`);
+        templateFragments.push(` ${key}=`);
       }
-    }
 
-    values.push(value);
+      values.push(value);
+    }
   });
 
   attrEntries.forEach(([key, value], index) => {

From d18ce177dc9b95f92bb953bf31b2ec86ba7a8cfc Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Fri, 19 Jan 2024 15:15:03 +0100
Subject: [PATCH 2/4] solved!

---
 .../src/components/forms/radio/index.test.ts         |  4 ++--
 .../src/utils/typesafe-generic-component-renderer.ts | 12 +++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/ui-library/src/components/forms/radio/index.test.ts b/packages/ui-library/src/components/forms/radio/index.test.ts
index e1394a52b..4ad37c077 100644
--- a/packages/ui-library/src/components/forms/radio/index.test.ts
+++ b/packages/ui-library/src/components/forms/radio/index.test.ts
@@ -7,6 +7,8 @@ import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 
 const sampleParams: BlrRadioType = {
+  checked: false,
+  disabled: false,
   name: 'Default Name',
   optionId: 'testId',
   label: 'harald',
@@ -15,8 +17,6 @@ const sampleParams: BlrRadioType = {
   hasHint: true,
   hasError: false,
   theme: 'Light',
-  checked: false,
-  disabled: false,
 };
 
 describe('blr-radio', () => {
diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 3148c5c30..5a71c554a 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -12,9 +12,11 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
   const attrEntries = Object.entries(htmlAttributes || {});
 
   // we will get rid of the dots later on by defining bindings within the component property decorator
-  propEntries.forEach(([key, value], index) => {
+  propEntries.forEach(([key, value]) => {
+    const needsOpenTag = templateFragments.length === 0;
+
     if (typeof value === 'function') {
-      if (index === 0) {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} @${key}=`);
       } else {
         templateFragments.push(` @${key}=`);
@@ -22,7 +24,7 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
 
       values.push(value);
     } else if (key === 'classMap') {
-      if (index === 0) {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} class=`);
       } else {
         templateFragments.push(` class=`);
@@ -31,7 +33,7 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
       values.push(value);
     } else if (typeof value === 'boolean') {
       if (value === true) {
-        if (index === 0) {
+        if (needsOpenTag) {
           templateFragments.push(`<${tagName} ${key}=`);
         } else {
           templateFragments.push(` ${key}=`);
@@ -40,7 +42,7 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
         values.push(value);
       }
     } else {
-      if (index === 0) {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} ${key}=`);
       } else {
         templateFragments.push(` ${key}=`);

From 745f6f403c947e33e2e54e3979dcf21bae05f685 Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Fri, 19 Jan 2024 15:45:51 +0100
Subject: [PATCH 3/4] arrays/objects should work again but wont show in code
 snipped

---
 .../src/utils/typesafe-generic-component-renderer.ts      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 5a71c554a..7e4718e6b 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -41,6 +41,14 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
 
         values.push(value);
       }
+    } else if (typeof value === 'object') {
+      if (needsOpenTag) {
+        templateFragments.push(`<${tagName} .${key}=`);
+      } else {
+        templateFragments.push(` .${key}=`);
+      }
+
+      values.push(value);
     } else {
       if (needsOpenTag) {
         templateFragments.push(`<${tagName} ${key}=`);

From 00fb7b88d3fd57d331536649195639dd7a96ba8b Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Fri, 19 Jan 2024 16:01:37 +0100
Subject: [PATCH 4/4] in case of boolean false, we have to give an excplicit
 false as property

---
 .../typesafe-generic-component-renderer.ts      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 7e4718e6b..4e6105e34 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -21,16 +21,12 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
       } else {
         templateFragments.push(` @${key}=`);
       }
-
-      values.push(value);
     } else if (key === 'classMap') {
       if (needsOpenTag) {
         templateFragments.push(`<${tagName} class=`);
       } else {
         templateFragments.push(` class=`);
       }
-
-      values.push(value);
     } else if (typeof value === 'boolean') {
       if (value === true) {
         if (needsOpenTag) {
@@ -38,8 +34,12 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
         } else {
           templateFragments.push(` ${key}=`);
         }
-
-        values.push(value);
+      } else {
+        if (needsOpenTag) {
+          templateFragments.push(`<${tagName} .${key}=`);
+        } else {
+          templateFragments.push(` .${key}=`);
+        }
       }
     } else if (typeof value === 'object') {
       if (needsOpenTag) {
@@ -47,17 +47,14 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
       } else {
         templateFragments.push(` .${key}=`);
       }
-
-      values.push(value);
     } else {
       if (needsOpenTag) {
         templateFragments.push(`<${tagName} ${key}=`);
       } else {
         templateFragments.push(` ${key}=`);
       }
-
-      values.push(value);
     }
+    values.push(value);
   });
 
   attrEntries.forEach(([key, value], index) => {