Fix/icon content

ADD_PLAYGROUND.md

@@ -0,0 +1,13 @@
+# Add New Hot Toast Demo
+
+1. Clone the repo
+2. Add new demo to `src/app/features/playground/playground.ts`
+3. If new component is needed, add it to `src/app/features/playground/components`
+4. Run `npm run start:lib`
+5. Run `npm run start`
+6. Open `http://localhost:4200/playground`
+7. Verify that new demo is added and is working
+8. Stage your changes
+9. Commit your changes using `npm run commit` > Select `docs`
+10. Push your changes to the remote repo
+11. Create a PR

angular.json

@@ -31,7 +31,8 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/prismjs/themes/prism-okaidia.min.css"
+              "node_modules/prismjs/themes/prism-okaidia.min.css",
+              "node_modules/highlight.js/styles/atom-one-dark.css"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@angular/animations": "^19.0.3",
+    "@angular/cdk": "~19.0.2",
     "@angular/common": "^19.0.3",
     "@angular/compiler": "^19.0.3",
     "@angular/core": "^19.0.3",
@@ -48,6 +49,7 @@
     "@angular/router": "^19.0.3",
     "@ngneat/overview": "6.1.1",
     "@ngxpert/cmdk": "^1.0.0",
+    "highlight.js": "^11.10.0",
     "prismjs": "^1.23.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
@@ -117,4 +119,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.html

@@ -1,3 +1,3 @@
 <div class="hot-toast-animated-icon" [style.color]="iconTheme?.primary">
-  <ng-content></ng-content>
+  <ng-container *dynamicView="icon"></ng-container>
 </div>

projects/ngxpert/hot-toast/src/lib/components/animated-icon/animated-icon.component.ts

@@ -1,12 +1,16 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { IconTheme } from '../../hot-toast.model';
+import { Content, DynamicViewDirective } from '@ngneat/overview';
 
 @Component({
   selector: 'hot-toast-animated-icon',
   templateUrl: './animated-icon.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [DynamicViewDirective],
 })
 export class AnimatedIconComponent {
   @Input() iconTheme: IconTheme;
+  @Input() icon: Content;
 }
+

projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.html

@@ -24,7 +24,7 @@
     >
       <div class="hot-toast-icon" aria-hidden="true">
         @if (toast.icon !== undefined) { @if (isIconString) {
-        <hot-toast-animated-icon [iconTheme]="toast.iconTheme">{{ toast.icon }}</hot-toast-animated-icon>
+        <hot-toast-animated-icon [iconTheme]="toast.iconTheme" [icon]="toast.icon"></hot-toast-animated-icon>
         } @else {
         <div>
           <ng-container *dynamicView="toast.icon"></ng-container>

src/app/app.component.html

@@ -23,131 +23,10 @@
 
 <div class="bg-gradient-to-b from-toast-50 to-white bg-opacity-10 relative">
   <div class="container relative">
-    <div class="flex flex-col items-center">
-      <!-- #region intro -->
-      <img src="assets/butter-1.svg" alt="" class="absolute -left-24 md:left-24 transition-opacity duration-200" />
-      <div>
-        <img
-          src="assets/logo.svg"
-          alt=""
-          srcset=""
-          class="relative animate-slide-in transition-all duration-200 -mt-4 md:-mt-8"
-          width="125"
-        />
-      </div>
-      <div class="text-center my-12 relative duration-200">
-        <h1 class="text-3xl md:text-4xl animate-enter font-bold text-toast-900">The Best Angular Toast in Town</h1>
-        <h2 class="text-xl md:text-2xl font-bold text-toast-600 mt-2">Smoking hot Angular notifications.</h2>
-        <h4 class="text-md md:text-lg text-toast-400 mt-2">
-          Inspired from
-          <a
-            class="font-bold text-toast-400 hover:bg-gray-100 hover:text-toast-600 transform"
-            href="https://react-hot-toast.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-            style="transition-property: background-color, color"
-            >React Hot Toast</a
-          >
-        </h4>
-      </div>
-      <!-- #endregion -->
-
-      <!-- #region quick buttons -->
-      <div class="grid md:grid-cols-3 gap-4 rounded-2xl bg-toast-200 p-4 w-full max-w-4xl">
-        <button
-          [ngClass]="[
-            'rounded-lg font-bold gap-4 flex bg-gradient-to-b from-white to-toast-200 shadow-button text-center',
-            'py-4 px-6',
-            'active:translate-y-0.5 active:shadow-button-active active:bg-gray-100 transform',
-            'focus:outline-none focus:ring-4'
-          ]"
-          style="transition-property: box-shadow, transform"
-          (click)="observe()"
-        >
-          <div>🍞</div>
-          <span class="flex-1 mr-2">Make me a toast</span>
-        </button>
-        <a
-          [href]="repoUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-          [ngClass]="[
-            'rounded-lg flex font-bold bg-white py-4 px-6 shadow-button  text-toast-800',
-            'active:translate-y-0.5 active:shadow-button-active transform'
-          ]"
-          style="transition-property: box-shadow, transform"
-        >
-          <div>
-            <img src="assets/github.svg" alt="GitHub" />
-          </div>
-          <span class="flex-1 text-toast-800 text-center">Give me a ⭐</span></a
-        >
-        <a
-          href="https://github.com/ngxpert/hot-toast#installation"
-          [ngClass]="[
-            'rounded-lg flex font-bold bg-white py-4 px-6 shadow-button  text-toast-800',
-            'active:translate-y-0.5 active:shadow-button-active transform'
-          ]"
-          style="transition-property: box-shadow, transform"
-        >
-          <div>
-            <img src="assets/book.svg" alt="Book" />
-          </div>
-          <span class="flex-1 text-center">Documentation</span></a
-        >
-      </div>
-      <div class="my-2 flex items-center space-x-2">
-        <a href="#grouping">
-          <img
-            alt="what's new: stacking"
-            src="https://img.shields.io/badge/🌟what's new-grouping-purple?style=flat-square"
-          />
-        </a>
-        <a href="https://www.npmjs.com/package/@ngxpert/hot-toast" target="_blank">
-          <img
-            alt="npm version"
-            src="https://img.shields.io/npm/v/@ngxpert/hot-toast?color=rgb%2872%2C%2035%2C%207%29&label=npm&style=flat-square"
-          />
-        </a>
-        <a href="https://github.com/ngxpert/hot-toast#supported-browsers" target="_blank">
-          <img alt="browser support" src="https://img.shields.io/badge/supported-browsers-f6d338?style=flat-square" />
-        </a>
-      </div>
-      <!-- #endregion -->
-
-      <!-- #region features -->
-      <app-features></app-features>
-      <!-- #endregion -->
-    </div>
-
-    <!-- #region first steps -->
-    <app-steps></app-steps>
-    <!-- #endregion -->
-
-    <h3 class="ml-5 mr-5 mb-4 bg-toast-200 p-4 rounded-2xl p-4">
-      ℹ All the code snippets are available on
-      <a
-        href="https://github.com/ngxpert/hot-toast/tree/master/src/app/sections"
-        target="_blank"
-        class="text-toast-600 hover:bg-gray-100 hover:text-toast-800 transform"
-        style="transition-property: background-color, color"
-        >GitHub</a
-      >.
-    </h3>
-
-    <!-- #region examples -->
-    <app-example></app-example>
-    <!-- #endregion -->
-
-    <app-position></app-position>
-
-    <app-stacking></app-stacking>
-
-    <app-grouping></app-grouping>
-
-    <app-reverse-order></app-reverse-order>
+    <img src="assets/butter-1.svg" alt="" class="absolute -left-24 md:left-24 transition-opacity duration-200" />
+    <router-outlet></router-outlet>
 
-    <div class="container flex justify-end -mt-24 pointer-events-none">
+    <div class="container flex justify-end pointer-events-none">
       <img src="assets/butter-2.svg" class="transform translate-x-20" />
     </div>
   </div>

src/app/app.component.ts

@@ -1,116 +1,16 @@
 import { Component } from '@angular/core';
-import { HotToastService } from '@ngxpert/hot-toast';
-import { from, of } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { NgClass } from '@angular/common';
-// import { Dialog } from '@angular/cdk/dialog';
-
-import { REPO_URL } from './core/constants';
+import { RouterOutlet } from '@angular/router';
 import { FooterComponent } from './sections/footer/footer.component';
-import { ReverseOrderComponent } from './sections/reverse-order/reverse-order.component';
-import { StackingComponent } from './sections/stacking/stacking.component';
-import { PositionComponent } from './sections/position/position.component';
-import { ExampleComponent } from './sections/example/example.component';
-import { StepsComponent } from './sections/steps/steps.component';
-import { FeaturesComponent } from './sections/features/features.component';
-import { GroupingComponent } from './sections/grouping/grouping.component';
-import { EmojiButtonComponent } from './shared/components/emoji-button/emoji-button.component';
 // import { JumpToDialogComponent } from './shared/components/jump-to-dialog/jump-to-dialog.component';
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    imports: [
-        NgClass,
-        FeaturesComponent,
-        StepsComponent,
-        ExampleComponent,
-        PositionComponent,
-        StackingComponent,
-        GroupingComponent,
-        ReverseOrderComponent,
-        FooterComponent,
-        EmojiButtonComponent,
-        // JumpToDialogComponent,
-    ]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  imports: [
+    // JumpToDialogComponent,
+    RouterOutlet,
+    FooterComponent,
+  ],
 })
 export class AppComponent {
-  readonly repoUrl = REPO_URL;
   isDialogOpen = false;
-
-  constructor(private toast: HotToastService) // private dialog: Dialog
-  {}
-
-  // keyDownListener(ev: KeyboardEvent) {
-  //   const key = ev.key;
-  //   const element = document.querySelector('[data-keyboard-key="' + key.toUpperCase() + '"]');
-  //   element.classList.add('active');
-  // }
-
-  // keyUpListener(ev: KeyboardEvent) {
-  //   const key = ev.key;
-  //   const element = document.querySelector('[data-keyboard-key="' + key.toUpperCase() + '"]');
-  //   element.classList.remove('active');
-  //   if (key === '/') {
-  //     ev.preventDefault();
-  //     this.openDialog();
-  //   }
-  // }
-
-  // ngOnInit() {
-  //   document.addEventListener('keyup', this.keyUpListener);
-  //   document.addEventListener('keydown', this.keyDownListener);
-  // }
-
-  // ngOnDestroy() {
-  //   document.removeEventListener('keyup', this.keyUpListener);
-  //   document.removeEventListener('keydown', this.keyDownListener);
-  // }
-
-  // openDialog() {
-  //   if (!this.isDialogOpen) {
-  //     this.isDialogOpen = true;
-
-  //     const dialogRef = this.dialog.open<string>(JumpToDialogComponent, {
-  //       width: '350px',
-  //     });
-
-  //     dialogRef.closed.subscribe((result) => {
-  //       this.isDialogOpen = false;
-  //     });
-  //   }
-  // }
-
-  observe() {
-    const promise = new Promise((res, rej) => {
-      if (Math.random() < 0.85) {
-        setTimeout(res, 2000);
-      } else {
-        setTimeout(rej, 2000);
-      }
-    });
-    from(promise)
-      .pipe(
-        this.toast.observe({
-          loading: { content: 'Preparing toast', style: { width: '200px' } },
-          error: { content: 'Whoops, it burnt', style: { width: '200px' } },
-          success: { content: `Here's your toast`, style: { width: '200px' } },
-        }),
-        catchError((error) => of(error))
-      )
-      .subscribe();
-  }
 }
-
-@Component({
-  selector: 'app-icon',
-  template: '✋',
-  standalone: true,
-})
-export class IconComponent {}
-@Component({
-  selector: 'app-msg',
-  template: 'Hey, how are you?',
-  standalone: true,
-})
-export class MessageComponent {}

src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { PlaygroundComponent } from './features/playground/playground.component';
+import { HomeComponent } from './features/home/home.component';
+
+export const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'playground', component: PlaygroundComponent },
+];