From fe9a50d367901bc6b3c21794f5fd189ab69ce2c1 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 8 Feb 2023 14:46:23 +0200
Subject: [PATCH] update ids & remove on push

---
 .../chevron-button/chevron-button.component.html     |  2 +-
 .../chevron-button/chevron-button.component.ts       |  5 +++--
 .../circle-button/circle-button.component.html       |  3 ++-
 .../buttons/circle-button/circle-button.component.ts | 11 +++--------
 .../buttons/icon-button/icon-button.component.html   |  2 +-
 src/lib/buttons/icon-button/icon-button.component.ts | 12 +++---------
 .../confirmation-dialog.component.html               |  2 +-
 .../popup-filter/popup-filter.component.html         |  2 +-
 .../inputs/details-radio/details-radio.component.ts  |  3 +--
 .../listing/page-header/page-header.component.html   |  6 +++---
 src/lib/upload-file/upload-file.component.ts         |  3 +--
 src/lib/utils/functions.ts                           |  4 ++++
 12 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/lib/buttons/chevron-button/chevron-button.component.html b/src/lib/buttons/chevron-button/chevron-button.component.html
index f70975c..212f433 100644
--- a/src/lib/buttons/chevron-button/chevron-button.component.html
+++ b/src/lib/buttons/chevron-button/chevron-button.component.html
@@ -1,4 +1,4 @@
-<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" mat-button>
+<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
     <span>{{ label }}</span>
     <mat-icon class="chevron-icon" svgIcon="iqser:arrow-down"></mat-icon>
 </button>
diff --git a/src/lib/buttons/chevron-button/chevron-button.component.ts b/src/lib/buttons/chevron-button/chevron-button.component.ts
index c06e345..be2d549 100644
--- a/src/lib/buttons/chevron-button/chevron-button.component.ts
+++ b/src/lib/buttons/chevron-button/chevron-button.component.ts
@@ -1,14 +1,15 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-chevron-button [label]',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChevronButtonComponent {
     @Input() label!: string;
     @Input() showDot = false;
     @Input() primary = false;
     @Input() disabled = false;
+    @Input() buttonId = `${randomString()}-chevron-button`;
 }
diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html
index de0dc40..9bd6478 100644
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/src/lib/buttons/circle-button/circle-button.component.html
@@ -13,11 +13,12 @@
         [class.primary]="type === circleButtonTypes.primary"
         [class.warn]="type === circleButtonTypes.warn"
         [disabled]="disabled"
-        [id]="id ? id : buttonId"
+        [id]="buttonId"
         [type]="isSubmit ? 'submit' : 'button'"
         mat-icon-button
     >
         <mat-icon [svgIcon]="icon"></mat-icon>
     </button>
+
     <div *ngIf="showDot" class="dot"></div>
 </div>
diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts
index 1fdb07d..9ec9fb8 100644
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/src/lib/buttons/circle-button/circle-button.component.ts
@@ -1,18 +1,17 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
 import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
-import { IqserTooltipPosition, IqserTooltipPositions } from '../../utils';
+import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-circle-button [icon]',
     templateUrl: './circle-button.component.html',
     styleUrls: ['./circle-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CircleButtonComponent implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
 
-    @Input() id!: string;
+    @Input() buttonId = `${randomString()}-circle-button`;
     @Input() icon!: string;
     @Input() tooltip?: string;
     @Input() tooltipClass?: string;
@@ -32,10 +31,6 @@ export class CircleButtonComponent implements OnInit {
 
     constructor(private readonly _elementRef: ElementRef) {}
 
-    get buttonId(): string {
-        return `${Math.random().toString(36).substring(2, 9)}-button`;
-    }
-
     ngOnInit(): void {
         (this._elementRef.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
         (this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);
diff --git a/src/lib/buttons/icon-button/icon-button.component.html b/src/lib/buttons/icon-button/icon-button.component.html
index 9510afe..1f79488 100644
--- a/src/lib/buttons/icon-button/icon-button.component.html
+++ b/src/lib/buttons/icon-button/icon-button.component.html
@@ -1,7 +1,7 @@
 <button
     (click)="!disabled && action.emit($event)"
     [disabled]="disabled"
-    [id]="id ? id : buttonId"
+    [id]="buttonId"
     [ngClass]="classes"
     [type]="submit ? 'submit' : 'button'"
     mat-button
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
index ebffa69..2928def 100644
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -1,18 +1,16 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
+import { randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-icon-button [label]',
     templateUrl: './icon-button.component.html',
     styleUrls: ['./icon-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconButtonComponent {
     readonly iconButtonTypes = IconButtonTypes;
-    readonly buttonId: string;
-
     @Input() label!: string;
-    @Input() id?: string;
+    @Input() buttonId = `${randomString()}-icon-button`;
     @Input() icon?: string;
     @Input() showDot = false;
     @Input() disabled = false;
@@ -20,10 +18,6 @@ export class IconButtonComponent {
     @Input() type: IconButtonType = IconButtonTypes.default;
     @Output() readonly action = new EventEmitter<MouseEvent>();
 
-    constructor() {
-        this.buttonId = `${Math.random().toString(36).substring(2, 9)}-button`;
-    }
-
     get classes(): Record<string, boolean> {
         return {
             overlay: this.showDot,
diff --git a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
index 0cf0a5a..3c487d8 100644
--- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
@@ -33,7 +33,7 @@
             [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
             [label]="config.confirmationText"
             [type]="iconButtonTypes.primary"
-            id="confirm"
+            buttonId="confirm"
         >
         </iqser-icon-button>
 
diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html
index bd2e108..7fc3e13 100644
--- a/src/lib/filtering/popup-filter/popup-filter.component.html
+++ b/src/lib/filtering/popup-filter/popup-filter.component.html
@@ -8,7 +8,7 @@
             [label]="primaryGroup.label?.capitalize() || ('filter-menu.label' | translate)"
             [matMenuTriggerFor]="filterMenu"
             [showDot]="hasActiveFilters$ | async"
-            id="{{ primaryGroup.slug }}"
+            buttonId="{{ primaryGroup.slug }}"
         ></iqser-icon-button>
     </ng-container>
 
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index 98501c9..b5738dd 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { DetailsRadioOption } from './details-radio-option';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FormFieldComponent } from '../form-field/form-field-component.directive';
@@ -7,7 +7,6 @@ import { FormFieldComponent } from '../form-field/form-field-component.directive
     selector: 'iqser-details-radio [options]',
     templateUrl: './details-radio.component.html',
     styleUrls: ['./details-radio.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index 3375657..ff5a019 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -44,11 +44,11 @@
             <iqser-icon-button
                 (action)="config.action($event)"
                 *ngIf="!config.hide"
+                [buttonId]="config.label.replace('.', '-')"
                 [icon]="config.icon"
-                [id]="config.label.replace('.', '-')"
                 [iqserHelpMode]="config.helpModeKey"
-                [overlappingElements]="config.overlappingElements"
                 [label]="config.label | translate"
+                [overlappingElements]="config.overlappingElements"
                 [type]="config.type"
             ></iqser-icon-button>
         </ng-container>
@@ -58,9 +58,9 @@
                 <iqser-circle-button
                     (action)="config.action($event)"
                     *ngIf="!config.hide"
+                    [buttonId]="config.id"
                     [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
-                    [id]="config.id"
                     [iqserHelpMode]="config.helpModeKey"
                     [overlappingElements]="config.overlappingElements"
                     [tooltipPosition]="'below'"
diff --git a/src/lib/upload-file/upload-file.component.ts b/src/lib/upload-file/upload-file.component.ts
index 42fbb83..864b0f7 100644
--- a/src/lib/upload-file/upload-file.component.ts
+++ b/src/lib/upload-file/upload-file.component.ts
@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'iqser-upload-file',
     templateUrl: './upload-file.component.html',
     styleUrls: ['./upload-file.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UploadFileComponent {
     @ViewChild('attachFileInput', { static: true }) attachFileInput!: ElementRef;
diff --git a/src/lib/utils/functions.ts b/src/lib/utils/functions.ts
index f69a134..5808346 100644
--- a/src/lib/utils/functions.ts
+++ b/src/lib/utils/functions.ts
@@ -73,6 +73,10 @@ export function toNumber(str: string): number {
     }
 }
 
+export function randomString() {
+    return Math.random().toString(36).substring(2, 9);
+}
+
 export function trackByFactory<T extends ITrackable<PrimaryKey>, PrimaryKey extends Id = T['id']>() {
     return (_index: number, item: T): Id => item.id;
 }