feat(common-components): add notifications as an Angular 22 compatible alternative for ngx-toastr

angular.json

@@ -106,6 +106,7 @@
                         "port": 6006,
                         "styles": [
                             "src/styles.scss",
+                            "projects/ppwcode/.storybook/styles.scss",
                             "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
                             "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
                         ]
@@ -120,6 +121,7 @@
                         "outputDir": "dist/storybook",
                         "styles": [
                             "src/styles.scss",
+                            "projects/ppwcode/.storybook/styles.scss",
                             "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
                             "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
                         ]

projects/ppwcode/.storybook/_theme-colors.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #18428c, secondary: #6eb343
+$_palettes: (
+    primary: (
+        0: #000000,
+        10: #001944,
+        20: #002d6e,
+        25: #053882,
+        30: #1a448e,
+        35: #29509a,
+        40: #375ca7,
+        50: #5275c2,
+        60: #6d8fde,
+        70: #87aafa,
+        80: #b0c6ff,
+        90: #d9e2ff,
+        95: #edf0ff,
+        98: #faf8ff,
+        99: #fefbff,
+        100: #ffffff
+    ),
+    secondary: (
+        0: #000000,
+        10: #092100,
+        20: #153800,
+        25: #1b4400,
+        30: #215100,
+        35: #285e00,
+        40: #2f6c00,
+        50: #458619,
+        60: #5ea133,
+        70: #77bd4c,
+        80: #91d964,
+        90: #acf67d,
+        95: #ceffab,
+        98: #eeffdd,
+        99: #f8ffec,
+        100: #ffffff
+    ),
+    tertiary: (
+        0: #000000,
+        10: #330043,
+        20: #4d165e,
+        25: #5a236a,
+        30: #662f76,
+        35: #733c83,
+        40: #814890,
+        50: #9c60ab,
+        60: #b87ac6,
+        70: #d494e3,
+        80: #f1afff,
+        90: #fbd7ff,
+        95: #ffebfe,
+        98: #fff7fb,
+        99: #fffbff,
+        100: #ffffff
+    ),
+    neutral: (
+        0: #000000,
+        10: #1a1b20,
+        20: #2f3036,
+        25: #3a3b41,
+        30: #45464c,
+        35: #515258,
+        40: #5d5e64,
+        50: #76777d,
+        60: #909097,
+        70: #ababb1,
+        80: #c6c6cd,
+        90: #e2e2e9,
+        95: #f1f0f7,
+        98: #faf8ff,
+        99: #fefbff,
+        100: #ffffff,
+        4: #0c0e13,
+        6: #121318,
+        12: #1e1f24,
+        17: #282a2f,
+        22: #33353a,
+        24: #38393e,
+        87: #dad9e0,
+        92: #e8e7ee,
+        94: #eeedf4,
+        96: #f4f3fa
+    ),
+    neutral-variant: (
+        0: #000000,
+        10: #181b25,
+        20: #2d303a,
+        25: #383b45,
+        30: #434651,
+        35: #4f525d,
+        40: #5b5e69,
+        50: #747782,
+        60: #8e909c,
+        70: #a8abb7,
+        80: #c4c6d3,
+        90: #e0e2ef,
+        95: #eef0fd,
+        98: #faf8ff,
+        99: #fefbff,
+        100: #ffffff
+    ),
+    error: (
+        0: #000000,
+        10: #410002,
+        20: #690005,
+        25: #7e0007,
+        30: #93000a,
+        35: #a80710,
+        40: #ba1a1a,
+        50: #de3730,
+        60: #ff5449,
+        70: #ff897d,
+        80: #ffb4ab,
+        90: #ffdad6,
+        95: #ffedea,
+        98: #fff8f7,
+        99: #fffbff,
+        100: #ffffff
+    )
+);
+
+$_rest: (
+    secondary: map.get($_palettes, secondary),
+    neutral: map.get($_palettes, neutral),
+    neutral-variant: map.get($_palettes, neutral-variant),
+    error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

projects/ppwcode/.storybook/styles.scss

@@ -0,0 +1,7 @@
+@use '@angular/material' as mat;
+@use 'ppw-ds' as ppwDs;
+@use './theme-colors' as themeColors;
+
+:root {
+    @include ppwDs.ppw-ds-material-color-tokens(themeColors.$primary-palette, themeColors.$tertiary-palette);
+}

projects/ppwcode/ng-common-components/package.json

@@ -11,6 +11,9 @@
         "@ppwcode/ng-common": "^22.2.1",
         "@ppwcode/ng-utils": "^22.2.1"
     },
+    "optionalDependencies": {
+        "@ppwcode/ng-ppw-ds": "0.0.4"
+    },
     "dependencies": {
         "tslib": "^2.3.0"
     },

projects/ppwcode/ng-common-components/src/lib/notifications/notification.ts

@@ -0,0 +1,33 @@
+import { Subscription } from 'rxjs'
+
+/** The different types of supported notifications. */
+export type NotificationType = 'success' | 'error' | 'warning' | 'info'
+
+/**
+ * Represents a notification instance shown to the user.
+ */
+export interface Notification {
+    /** A random id, so we can distinguish it from other notifications. */
+    id: string
+    /** The body of the notification. */
+    body: NotificationBody
+    /** The type of the notification. */
+    type: NotificationType
+    /** The automatic removal delay in milliseconds. A value of 0 means the notification is indefinite. */
+    timeout: number
+    /**
+     * A subscription to the timer that will automatically close the notification.
+     * This is to be unsubscribed explicitly when closing the notification before the timer has passed.
+     */
+    timerSubscription: Subscription
+}
+
+/**
+ * The body of the notification.
+ */
+export interface NotificationBody {
+    /** A translation key to be translated into a notification text. */
+    messageKey: string
+    /** Optional parameters to be used within the translated text. */
+    messageParams?: object
+}

projects/ppwcode/ng-common-components/src/lib/notifications/notification/notification.component.html

@@ -0,0 +1,34 @@
+<div class="ppw-notification-content">
+    <aside
+        class="ppw-notification-content__status-icon-wrapper"
+        [class.ppw-notification-content__status-icon-wrapper--with-timer]="timeout() > 0"
+    >
+        <mat-icon
+            class="ppw-notification-content__status-icon-wrapper__status-icon"
+            data-testid="ppw-notification__icon"
+            >{{ icon() }}</mat-icon
+        >
+    </aside>
+
+    <div class="ppw-notification-content__message">
+        <div class="ppw-notification-content__message__content" data-testid="ppw-notification__content">
+            <span [innerHTML]="body().messageKey | translate: body().messageParams"></span>
+        </div>
+
+        <mat-icon
+            class="ppw-notification-content__message__close-button"
+            data-testid="ppw-notification__close-button"
+            (click)="closeNotification.emit()"
+            >close</mat-icon
+        >
+    </div>
+</div>
+
+@if (timeout() > 0) {
+    <div
+        class="ppw-notification-timer"
+        data-testid="ppw-notification__timer"
+        aria-hidden="true"
+        [style.--ppw-notification-timeout]="timeout() + 'ms'"
+    ></div>
+}

projects/ppwcode/ng-common-components/src/lib/notifications/notification/notification.component.scss

@@ -0,0 +1,109 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--ppw-ds-radius-small);
+    width: 472px;
+    min-height: 49px;
+    background: var(--ppw-ds-neutral-100);
+    @include mat.elevation(1);
+
+    --status-icon-color: var(--ppw-ds-neutral-600);
+    --status-icon-background-color: var(--ppw-ds-neutral-300);
+
+    &.notification--info {
+        --status-icon-color: var(--ppw-ds-neutral-600);
+        --status-icon-background-color: var(--ppw-ds-neutral-300);
+    }
+
+    &.notification--warning {
+        --status-icon-color: var(--ppw-ds-warning-600);
+        --status-icon-background-color: var(--ppw-ds-warning-300);
+    }
+
+    &.notification--success {
+        --status-icon-color: var(--ppw-ds-success-600);
+        --status-icon-background-color: var(--ppw-ds-success-300);
+    }
+
+    &.notification--error {
+        --status-icon-color: var(--ppw-ds-error-600);
+        --status-icon-background-color: var(--ppw-ds-error-300);
+    }
+}
+
+.ppw-notification-content {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.ppw-notification-content__status-icon-wrapper {
+    padding: var(--ppw-ds-spacing-4);
+    border-top-left-radius: var(--ppw-ds-radius-small);
+    color: var(--status-icon-color);
+    background-color: var(--status-icon-background-color);
+    font-size: 2em;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    &:not(&--with-timer) {
+        border-bottom-left-radius: var(--ppw-ds-radius-small);
+    }
+}
+
+.ppw-notification-content__message {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+
+    padding: var(--ppw-ds-spacing-4);
+    word-break: break-word;
+}
+
+.ppw-notification-content__message__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ppw-ds-spacing-2);
+    flex: 1;
+}
+
+.ppw-notification-content__message__close-button {
+    cursor: pointer;
+}
+
+.ppw-notification-timer {
+    height: 4px;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-bottom-right-radius: var(--ppw-ds-radius-small);
+    border-bottom-left-radius: var(--ppw-ds-radius-small);
+    background-color: var(--ppw-ds-neutral-200);
+
+    &::after {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: var(--status-icon-background-color);
+        content: '';
+        transform: scaleX(1);
+        transform-origin: left;
+        animation: ppw-notification-timer var(--ppw-notification-timeout) linear forwards;
+    }
+}
+
+:host(:hover) .ppw-notification-timer::after {
+    animation-play-state: paused;
+}
+
+@keyframes ppw-notification-timer {
+    to {
+        transform: scaleX(0);
+    }
+}