From e93b0ca04686d14b9aabab0006537745762e4d51 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 19 Jun 2024 15:19:32 +0300
Subject: [PATCH] fix(components/input-icon-button): disabled button should not
 fire events #1823

---
 .../input-icon-buttons-example.component.html | 39 +++++++++++++++----
 .../input-icon-buttons-example.component.ts   |  8 +++-
 .../input/input-text/input-example.module.ts  |  3 +-
 .../input-icon-button.component.ts            |  9 ++++-
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html b/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html
index 6051570747..997010389d 100644
--- a/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html
+++ b/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html
@@ -4,7 +4,7 @@ <h3>Right template</h3>
   <input prizmInput />
 
   <ng-container prizm-input-right>
-    <button prizmInputIconButton="add-circle"></button>
+    <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
   </ng-container>
 </prizm-input-layout>
 
@@ -12,7 +12,11 @@ <h3>Left template</h3>
 
 <prizm-input-layout label="Заголовок">
   <ng-container prizm-input-left>
-    <button prizmInputIconButton="arrows-refresh"></button>
+    <button
+      [disabled]="disabled"
+      (click)="handleButtonClick()"
+      prizmInputIconButton="arrows-refresh"
+    ></button>
   </ng-container>
 
   <input prizmInput />
@@ -22,14 +26,18 @@ <h3>Left and right template</h3>
 
 <prizm-input-layout label="Заголовок">
   <ng-container prizm-input-left>
-    <button prizmInputIconButton="arrows-refresh"></button>
-    <button prizmInputIconButton="badges-tag"></button>
+    <button
+      [disabled]="disabled"
+      (click)="handleButtonClick()"
+      prizmInputIconButton="arrows-refresh"
+    ></button>
+    <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="badges-tag"></button>
   </ng-container>
 
   <input prizmInput />
 
   <ng-container prizm-input-right>
-    <button prizmInputIconButton="add-circle"></button>
+    <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
   </ng-container>
 </prizm-input-layout>
 
@@ -37,7 +45,11 @@ <h3>With status message</h3>
 
 <prizm-input-layout label="Заголовок" status="warning">
   <ng-container prizm-input-left>
-    <button prizmInputIconButton="arrows-refresh"></button>
+    <button
+      [disabled]="disabled"
+      (click)="handleButtonClick()"
+      prizmInputIconButton="arrows-refresh"
+    ></button>
   </ng-container>
 
   <input prizmInput />
@@ -45,7 +57,7 @@ <h3>With status message</h3>
   <ng-template prizmInputStatusText>Warning text</ng-template>
 
   <ng-container prizm-input-right>
-    <button prizmInputIconButton="add-circle"></button>
+    <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
   </ng-container>
 </prizm-input-layout>
 
@@ -58,3 +70,16 @@ <h3>Only icon</h3>
 
   <input prizmInput />
 </prizm-input-layout>
+
+<br />
+<br />
+
+<div>
+  Disable
+  <prizm-toggle
+    [ngModel]="disabled"
+    [ngModelOptions]="{ standalone: true }"
+    (ngModelChange)="disabled = $event"
+    size="m"
+  ></prizm-toggle>
+</div>
diff --git a/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts b/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts
index d39c7610fd..910537e9c5 100644
--- a/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts
+++ b/apps/doc/src/app/components/input/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts
@@ -6,4 +6,10 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   styleUrls: ['./input-icon-buttons-example.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class InputIconButtonsExampleComponent {}
+export class InputIconButtonsExampleComponent {
+  public disabled = false;
+
+  public handleButtonClick() {
+    console.log('Button clicked!');
+  }
+}
diff --git a/apps/doc/src/app/components/input/input-text/input-example.module.ts b/apps/doc/src/app/components/input/input-text/input-example.module.ts
index 376cece390..645c4b207b 100644
--- a/apps/doc/src/app/components/input/input-text/input-example.module.ts
+++ b/apps/doc/src/app/components/input/input-text/input-example.module.ts
@@ -6,12 +6,12 @@ import {
   PrizmHintDirective,
   PrizmIconComponent,
   PrizmInputTextModule,
+  PrizmToggleComponent,
 } from '@prizm-ui/components';
 import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc';
 import { InputIconButtonsExampleComponent } from './examples/input-icon-buttons-example/input-icon-buttons-example.component';
 import { InputComponent } from './input.component';
 import { InputLabelPositionExampleComponent } from './examples/input-label-position-example/input-label-position-example.component';
-
 import { InputSizesExampleComponent } from './examples/input-sizes-example/input-sizes-example.component';
 import { InputStatusesExampleComponent } from './examples/input-statuses-example/input-statuses-example.component';
 import { InputSubtextExampleComponent } from './examples/input-subtext-example/input-subtext-example.component';
@@ -34,6 +34,7 @@ import { InputCustomClearButtonExampleComponent } from './examples/input-custom-
     PrizmButtonModule,
     ReactiveFormsModule,
     FormsModule,
+    PrizmToggleComponent,
   ],
   declarations: [
     InputComponent,
diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts
index a9880eaf64..8903813715 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts
@@ -19,14 +19,19 @@ export class PrizmInputIconButtonComponent extends PrizmAbstractTestId {
   @Input() prizmInputIconButton!: string;
   @Input() interactive = false;
 
-  @HostBinding('class.disabled')
+  @HostBinding('attr.disabled')
   @Input()
   get disabled() {
-    return this._disabled;
+    return this._disabled || null;
   }
   set disabled(value: BooleanInput) {
     this._disabled = coerceBooleanProperty(value);
   }
+
+  @HostBinding('class.disabled')
+  get classDisabled() {
+    return this._disabled;
+  }
   private _disabled = false;
   @Input()
   @HostBinding('attr.type')