feat: message-box package

.github/workflows/ci_test_message-box.yml

@@ -0,0 +1,24 @@
+name: Test message-box
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - '**'
+      - '!release-please--branches--main'
+    tags-ignore:
+      - '**'
+    paths:
+      - 'projects/message-box/**'
+
+concurrency:
+  group: ci-test-message-box-group-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci_test_message-box:
+    uses: ./.github/workflows/ci_job.yml
+    with:
+      working-directory: projects/message-box
+      runs-on: '["ubuntu-latest", "macos-latest", "windows-latest"]'
+      node-versions: '[18, 20]'

projects/message-box/ng-package.json

@@ -1,7 +1,14 @@
 {
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/message-box",
+    "assets": [
+        {
+            "input": "src/",
+            "glob": "_message-box-theme.scss",
+            "output": "."
+        }
+    ],
     "lib": {
         "entryFile": "src/index.ts"
     }
-}
+}

projects/message-box/package.json

@@ -20,15 +20,22 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_message-box-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test message-box",
         "test:ci": "ng test message-box --watch=false --browsers=ChromeHeadless",
         "build": "ng build message-box -c production"
     },
     "peerDependencies": {
-        "@angular/common": "^14.3.0",
-        "@angular/core": "^14.3.0"
+        "@angular/common": ">= 14",
+        "@angular/core": ">= 14",
+        "@angular/cdk": ">= 14",
+        "@angular/material": ">= 14"
     },
     "dependencies": {
         "tslib": "^2.6.2"

projects/message-box/src/_message-box-theme.scss

@@ -0,0 +1,121 @@
+@use "@angular/material" as mat;
+
+@mixin messageBoxStandard($palette) {
+    background-color: mat.get-color-from-palette($palette, 500);
+    color: mat.get-contrast-color-from-palette($palette, 900);
+    box-shadow:
+        0 4px 20px 0 rgba(0, 0, 0, 0.14),
+        0 7px 10px -5px rgba(mat.get-color-from-palette($palette), 0.4);
+
+    mat-icon {
+        color: mat.get-contrast-color-from-palette($palette, 900);
+    }
+
+    > .mat-card-actions {
+        background-color: mat.get-color-from-palette($palette, 700);
+    }
+
+    button {
+        background-color: transparent;
+    }
+}
+
+@mixin messageBoxLight($palette) {
+    background-color: mat.get-color-from-palette($palette, 50);
+    color: mat.get-color-from-palette($palette, 700);
+    box-shadow: none;
+
+    mat-icon {
+        color: mat.get-color-from-palette($palette, 700);
+    }
+
+    > .mat-card-actions {
+        color: mat.get-color-from-palette($palette, 900);
+        background-color: mat.get-color-from-palette($palette, 100);
+
+        button {
+            background-color: transparent;
+        }
+    }
+}
+
+@mixin theme($theme) {
+    $primary: map-get($theme, primary);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $warning: mat.define-palette(mat.$orange-palette);
+    $success: mat.define-palette(mat.$green-palette);
+
+    message-box {
+        &[horizontal] {
+            #msgbox {
+                &.info,
+                &.primary,
+                &.danger,
+                &.success,
+                &.warn {
+                    .mat-card-actions {
+                        background-color: transparent !important;
+                    }
+                }
+            }
+        }
+
+        &[light] {
+            #msgbox {
+                &.info,
+                &.primary {
+                    @include messageBoxLight($primary);
+                }
+
+                &.danger {
+                    @include messageBoxLight($warn);
+                }
+
+                &.warn {
+                    @include messageBoxLight($warning);
+                }
+
+                &.success {
+                    @include messageBoxLight($success);
+                }
+            }
+        }
+
+        #msgbox {
+            &.info,
+            &.primary {
+                @include messageBoxStandard($primary);
+            }
+
+            &.danger {
+                @include messageBoxStandard($warn);
+            }
+
+            &.warn {
+                @include messageBoxStandard($warning);
+            }
+
+            &.success {
+                @include messageBoxStandard($success);
+            }
+
+            > .mat-card-actions {
+                button {
+                    &.mat-success[mat-icon-button]:not([disabled]) {
+                        color: mat.get-color-from-palette($success) !important;
+                    }
+
+                    &.mat-warn[mat-icon-button]:not([disabled]) {
+                        color: mat.get-color-from-palette($warning) !important;
+                    }
+
+                    &.mat-danger[mat-icon-button]:not([disabled]) {
+                        color: mat.get-color-from-palette($warn) !important;
+                    }
+                }
+            }
+        }
+    }
+}

projects/message-box/src/index.ts

@@ -1,6 +1,2 @@
-/*
- * Public API Surface of lib
- */
-
-export * from './example/example.service';
-export * from './example/example.component';
+export * from './message-box.component';
+export * from './message-box.model';

projects/message-box/src/message-box.component.html

@@ -0,0 +1,28 @@
+<mat-card id="msgbox" class="{{type}}">
+    <mat-card-title *ngIf="icon || showCloseIcon">
+        <mat-icon id="icon" *ngIf="icon">{{icon}}</mat-icon>
+        <span id="title" *ngIf="!horizontal">{{title}}</span>
+        <div class="header-actions">
+            <button *ngIf="showCloseIcon" mat-icon-button type="button" class="close" (click)="onClose()">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>
+    </mat-card-title>
+    <mat-card-content>
+        <h2 id="title" *ngIf="horizontal && title">{{title}}</h2>
+        <ng-content></ng-content>
+    </mat-card-content>
+    <mat-card-actions *ngIf="actions">
+        <span *ngFor="let action of actions">
+            <button mat-button type="button" *ngIf="action.text" (click)="action.action()" class="with-icon" [attr.data-icon]="action.icon">
+                {{action.text}}
+            </button>
+            <button mat-icon-button type="button" *ngIf="!action.text && action.icon as icon" [class.action-button]="!action.type" (click)="action.action()">
+                <mat-icon>{{ icon }}</mat-icon>
+            </button>
+        </span>
+    </mat-card-actions>
+    <mat-card-actions *ngIf="!actions && actionsTemplate">
+		<ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
+	</mat-card-actions>
+</mat-card>

projects/message-box/src/message-box.component.scss

@@ -0,0 +1,105 @@
+message-box {
+    display: block;
+    border-radius: 3px;
+    overflow: hidden;
+    background-color: transparent;
+
+    #msgbox {
+        border: 0;
+        margin: 0;
+        padding: 0;
+        display: block;
+        border-radius: 3px;
+
+        >.mat-card-title {
+            text-transform: uppercase;
+            align-items: center;
+            display: flex;
+            margin: 0;
+            padding: 1rem 0rem 0rem 1.2rem;
+            font-size: 1rem;
+
+            #icon {
+                margin-right: 0.3rem;
+            }
+
+            .header-actions {
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+
+        >.mat-card-content {
+            margin: 0;
+            padding: 0.75rem;
+            overflow: hidden;
+            font-weight: 300;
+            padding-left: 1.3rem;
+            padding-top: 0.5rem;
+
+            h2 {
+                font-size: 1rem;
+                margin: 0;
+                font-weight: 500;
+                text-transform: uppercase;
+                line-height: 1.5rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+
+        >.mat-card-actions {
+            align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            margin: 0;
+            padding: 0.5rem 0.5rem;
+        }
+    }
+
+    &[horizontal] {
+        #msgbox {
+            align-items: stretch;
+            display: flex;
+            flex-direction: row;
+            padding: 0;
+            position: relative;
+
+            >.mat-card-title {
+                align-items: center;
+                display: flex;
+                flex: 0 0 auto;
+                justify-content: center;
+                margin: 0;
+                text-align: center;
+                padding: 0.5rem 0rem 0.5rem 0.8rem;
+
+                #icon {
+                    margin: 0;
+                }
+            }
+
+            >.mat-card-content {
+                align-self: center;
+                flex: 1 1 auto;
+                padding: 0.75rem;
+            }
+
+            >.mat-card-actions {
+                margin: 0;
+                padding: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+
+                [mat-icon-button] {
+                    mat-icon {
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+    }
+}