Refactor defaultConfig input in HotToastContainerComponent

ngxpert · Oct 23, 2024 · b6deac0 · b6deac0
1 parent e78dc48
commit b6deac0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/...xpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.html b/...xpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.html
@@ -7,7 +7,7 @@
         [offset]="calculateOffset(toast.id, toast.position)"
         [toastRef]="toastRefs[i]"
         [toastsAfter]="(toast.autoClose ? toasts.length : getVisibleToasts(toast.position).length) - 1 - i"
-        [defaultConfig]="defaultConfig()"
+        [defaultConfig]="defaultConfig"
         [isShowingAllToasts]="isShowingAllToasts"
         (showAllToasts)="showAllToasts($event)"
         (height)="updateHeight($event, toast)"

diff --git a/...ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts b/...ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, Input } from '@angular/core';
 import { Subject } from 'rxjs';
 import {
   HotToastClose,
@@ -25,7 +25,7 @@ import { HotToastService } from '../../hot-toast.service';
   imports: [HotToastComponent],
 })
 export class HotToastContainerComponent {
-  defaultConfig = input<ToastConfig>();
+  @Input() defaultConfig: ToastConfig;
 
   @ViewChildren(HotToastComponent) hotToastComponentList: QueryList<HotToastComponent>;
 
@@ -67,13 +67,13 @@ export class HotToastContainerComponent {
     const index = visibleToasts.findIndex((toast) => toast.id === toastId);
     const offset =
       index !== -1
-        ? visibleToasts.slice(...(this.defaultConfig().reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
+        ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
             const toastsAfter = visibleToasts.length - 1 - i;
-            return this.defaultConfig().visibleToasts !== 0 &&
-              i < visibleToasts.length - this.defaultConfig().visibleToasts
+            return this.defaultConfig.visibleToasts !== 0 &&
+              i < visibleToasts.length - this.defaultConfig.visibleToasts
               ? 0
               : acc +
-                  (this.defaultConfig().stacking === 'vertical' || this.isShowingAllToasts
+                  (this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
                     ? t.height || 0
                     : toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
                   HOT_TOAST_MARGIN;
@@ -94,8 +94,8 @@ export class HotToastContainerComponent {
 
     this.toasts.push(ref.getToast());
 
-    if (this.defaultConfig().visibleToasts !== 0 && this.unGroupedToasts.length > this.defaultConfig().visibleToasts) {
-      const closeToasts = this.toasts.slice(0, this.toasts.length - this.defaultConfig().visibleToasts);
+    if (this.defaultConfig.visibleToasts !== 0 && this.unGroupedToasts.length > this.defaultConfig.visibleToasts) {
+      const closeToasts = this.toasts.slice(0, this.toasts.length - this.defaultConfig.visibleToasts);
       closeToasts.forEach((t) => {
         if (t.autoClose) {
           this.closeToast(t.id);

diff --git a/src/app/shared/components/emoji-button/emoji-button.component.html b/src/app/shared/components/emoji-button/emoji-button.component.html
@@ -7,7 +7,7 @@
   <button
     style="transition: all 100ms ease-in-out"
     class="rounded bg-white text-sm font-semibold py-2 px-2 shadow-small-button inline-flex items-center hover:bg-gray-50 active:translate-y-0.5 active:shadow-button-active active:bg-toast-100 transform {{
-      className
+      className()
     }}"
     (click)="btnClick.emit()"
     [id]="btnId()"