sn-alert 0.0.1

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sn-alert",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sn-alert",
+  "version": "0.0.1",
+  "description": "SnAlert is an Angular 21 standalone alert/notification banner component",
+  "author": {
+    "name": "Swapnil Nakate",
+    "email": "nakate.swapnil7@gmail.com",
+    "url": "https://swapnilnakate.in"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/swapnilnakate7/sn-ui/issues",
+    "email": "nakate.swapnil7@gmail.com"
+  },
+  "repository": {
+    "url": "https://github.com/swapnilnakate7/sn-ui",
+    "type": "git",
+    "directory": "projects/sn-alert"
+  },
+  "license": "MIT"
+}

package/src/lib/sn-alert.component.spec.ts

@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnAlertComponent } from './sn-alert.component';
+
+describe('SnAlertComponent', () => {
+  let component: SnAlertComponent;
+  let fixture: ComponentFixture<SnAlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnAlertComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default scheme to "info"', () => {
+    expect(component.scheme).toBe('info');
+  });
+
+  it('should be visible by default', () => {
+    expect(component._visible).toBeTrue();
+  });
+
+  it('should hide and emit dismissed when dismiss() is called', () => {
+    let emitted = false;
+    component.dismissed.subscribe(() => (emitted = true));
+    component.dismiss();
+    expect(component._visible).toBeFalse();
+    expect(emitted).toBeTrue();
+  });
+
+  it('should return correct icon for each scheme', () => {
+    component.scheme = 'success';
+    expect(component.icon).toBe('✓');
+    component.scheme = 'danger';
+    expect(component.icon).toBe('✗');
+    component.scheme = 'warn';
+    expect(component.icon).toBe('⚠');
+    component.scheme = 'info';
+    expect(component.icon).toBe('ℹ');
+  });
+});

package/src/lib/sn-alert.component.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+
+@Component({
+  selector: 'sn-alert',
+  standalone: true,
+  imports: [CommonModule, NgClass],
+  templateUrl: './sn-alert.html',
+  styleUrl: 'sn-alert.scss',
+})
+export class SnAlertComponent {
+  @Input() scheme: string = 'info';
+  @Input() title: string = '';
+  @Input({ transform: booleanAttribute }) dismissible: boolean = false;
+  @Output() dismissed = new EventEmitter<void>();
+
+  _visible: boolean = true;
+
+  get icon(): string {
+    switch (this.scheme) {
+      case 'success': return '✓';
+      case 'danger':  return '✗';
+      case 'warn':    return '⚠';
+      case 'info':    return 'ℹ';
+      default:        return 'ℹ';
+    }
+  }
+
+  dismiss(): void {
+    this._visible = false;
+    this.dismissed.emit();
+  }
+}

package/src/lib/sn-alert.html

@@ -0,0 +1,16 @@
+@if (_visible) {
+  <div class="sn-alert" [ngClass]="'scheme-' + scheme" role="alert">
+    <span class="sn-alert-icon">{{ icon }}</span>
+    <div class="sn-alert-body">
+      @if (title) {
+        <strong class="sn-alert-title">{{ title }}</strong>
+      }
+      <div class="sn-alert-message">
+        <ng-content></ng-content>
+      </div>
+    </div>
+    @if (dismissible) {
+      <button class="sn-alert-dismiss" (click)="dismiss()" aria-label="Dismiss">&#x2715;</button>
+    }
+  </div>
+}

package/src/lib/sn-alert.scss

@@ -0,0 +1,32 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sn-alert {
+  @apply flex items-start gap-3 p-4 rounded-lg border;
+
+  &.scheme-info    { @apply bg-blue-50 border-blue-300 text-blue-800; }
+  &.scheme-success { @apply bg-green-50 border-green-300 text-green-800; }
+  &.scheme-warn    { @apply bg-yellow-50 border-yellow-300 text-yellow-800; }
+  &.scheme-danger  { @apply bg-red-50 border-red-300 text-red-800; }
+
+  .sn-alert-icon {
+    @apply flex-shrink-0 text-lg font-bold;
+  }
+
+  .sn-alert-body {
+    @apply flex-1 min-w-0;
+  }
+
+  .sn-alert-title {
+    @apply block font-semibold mb-1;
+  }
+
+  .sn-alert-message {
+    @apply text-sm;
+  }
+
+  .sn-alert-dismiss {
+    @apply flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded opacity-70 hover:opacity-100 cursor-pointer bg-transparent border-none text-inherit text-lg leading-none;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/sn-alert.component';

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}