From 5761adcd7df688fe3490ab821a7f19d9d525e1c9 Mon Sep 17 00:00:00 2001
From: Christian Hoffmann
 <112889877+ChristianHoffmannS2@users.noreply.github.com>
Date: Tue, 16 Jan 2024 14:36:44 +0100
Subject: [PATCH] icon uses correct event handling for blrClick - fixes
 password (#787)

* icon uses correct event handling for blrClick - fixes password

* compile issues
---
 .../src/components/forms/text-input/index.ts  |  2 +-
 .../src/components/ui/icon/index.ts           | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/forms/text-input/index.ts
index b0dbfae61..7ceb4e42f 100644
--- a/packages/ui-library/src/components/forms/text-input/index.ts
+++ b/packages/ui-library/src/components/forms/text-input/index.ts
@@ -190,7 +190,7 @@ export class BlrTextInput extends LitElement {
 
                     size: iconSizeVariant,
                     classMap: iconClasses,
-                    onClick: () => this.togglePassword(),
+                    blrClick: this.togglePassword,
                   },
                   {
                     'aria-hidden': true,
diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
index 8ac32bef6..c44ca57a4 100644
--- a/packages/ui-library/src/components/ui/icon/index.ts
+++ b/packages/ui-library/src/components/ui/icon/index.ts
@@ -17,18 +17,25 @@ export class BlrIcon extends LitElement {
   @property() size: SizesType = 'md';
 
   @property() ignoreSize?: boolean = false;
-  @property() onClick?: () => void;
-
   @property() classMap?: DirectiveResult<typeof ClassMapDirective>;
 
+  // these are not triggered directly but allows us to map it internally and bve typesafe
+  @property() blrClick?: () => void;
+
+  protected handleClick = (event: Event) => {
+    this.dispatchEvent(
+      new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } })
+    );
+  };
+
   protected render() {
     const sizeKey = this.ignoreSize ? 'full' : this.size.toLowerCase();
 
     const unfullfilledRenderResult = html`<span
-      @click="${this.onClick}"
+      @click=${this.handleClick}
       @keydown=${(event: KeyboardEvent) => {
         if (event.code === 'Space') {
-          this.onClick?.();
+          this.handleClick(event);
         }
       }}
       class="blr-icon ${sizeKey}"
@@ -42,10 +49,10 @@ export class BlrIcon extends LitElement {
       const fullfilledRenderResult = importedIcon
         .then((iconModule) => {
           return html`<span
-            @click="${this.onClick}"
+            @click=${this.handleClick}
             @keydown=${(event: KeyboardEvent) => {
               if (event.code === 'Space') {
-                this.onClick?.();
+                this.handleClick(event);
               }
             }}
             class="blr-icon ${sizeKey}"