sn-modal 0.0.1

package/ng-package.json

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sn-modal",
+  "version": "0.0.1",
+  "description": "SnModal is an Angular 21 standalone modal dialog 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-modal"
+  },
+  "license": "MIT"
+}

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

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnModalComponent } from './sn-modal.component';
+
+describe('SnModalComponent', () => {
+  let component: SnModalComponent;
+  let fixture: ComponentFixture<SnModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default open to false', () => {
+    expect(component.open).toBeFalse();
+  });
+
+  it('should default size to "md"', () => {
+    expect(component.size).toBe('md');
+  });
+
+  it('should default closeOnBackdrop to true', () => {
+    expect(component.closeOnBackdrop).toBeTrue();
+  });
+
+  it('should emit closed and set open to false when close() is called', () => {
+    component.open = true;
+    let emitted = false;
+    component.closed.subscribe(() => (emitted = true));
+    component.close();
+    expect(component.open).toBeFalse();
+    expect(emitted).toBeTrue();
+  });
+
+  it('should close on backdrop click when closeOnBackdrop is true', () => {
+    component.open = true;
+    component.closeOnBackdrop = true;
+    component.onBackdropClick();
+    expect(component.open).toBeFalse();
+  });
+
+  it('should not close on backdrop click when closeOnBackdrop is false', () => {
+    component.open = true;
+    component.closeOnBackdrop = false;
+    component.onBackdropClick();
+    expect(component.open).toBeTrue();
+  });
+});

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

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+
+@Component({
+  selector: 'sn-modal',
+  standalone: true,
+  imports: [CommonModule, NgClass],
+  templateUrl: './sn-modal.html',
+  styleUrl: 'sn-modal.scss',
+})
+export class SnModalComponent {
+  @Input({ transform: booleanAttribute }) open: boolean = false;
+  @Input() title: string = '';
+  @Input() size: string = 'md';
+  @Input({ transform: booleanAttribute }) closeOnBackdrop: boolean = true;
+  @Output() closed = new EventEmitter<void>();
+
+  get panelClasses(): Record<string, boolean> {
+    return {
+      'sn-modal-panel': true,
+      [`size-${this.size}`]: true,
+    };
+  }
+
+  onBackdropClick(): void {
+    if (this.closeOnBackdrop) {
+      this.close();
+    }
+  }
+
+  close(): void {
+    this.open = false;
+    this.closed.emit();
+  }
+}

package/src/lib/sn-modal.html

@@ -0,0 +1,18 @@
+@if (open) {
+  <div class="sn-modal-backdrop" (click)="onBackdropClick()">
+    <div [ngClass]="panelClasses" (click)="$event.stopPropagation()" role="dialog" [attr.aria-modal]="true" [attr.aria-label]="title">
+      <div class="sn-modal-header">
+        @if (title) {
+          <h2 class="sn-modal-title">{{ title }}</h2>
+        }
+        <button class="sn-modal-close" (click)="close()" aria-label="Close">&times;</button>
+      </div>
+      <div class="sn-modal-body">
+        <ng-content select="[modal-body]"></ng-content>
+      </div>
+      <div class="sn-modal-footer">
+        <ng-content select="[modal-footer]"></ng-content>
+      </div>
+    </div>
+  </div>
+}

package/src/lib/sn-modal.scss

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sn-modal-backdrop {
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50;
+}
+
+.sn-modal-panel {
+  @apply relative bg-white rounded-lg shadow-xl flex flex-col max-h-[90vh] overflow-hidden;
+
+  &.size-sm   { @apply w-full max-w-sm; }
+  &.size-md   { @apply w-full max-w-md; }
+  &.size-lg   { @apply w-full max-w-2xl; }
+  &.size-full { @apply w-full h-full max-w-none max-h-none rounded-none; }
+}
+
+.sn-modal-header {
+  @apply flex items-center justify-between px-6 py-4 border-b border-gray-200 flex-shrink-0;
+}
+
+.sn-modal-title {
+  @apply text-lg font-semibold text-gray-900 m-0;
+}
+
+.sn-modal-close {
+  @apply ml-auto -mr-2 p-1.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100 cursor-pointer bg-transparent border-none text-2xl leading-none;
+}
+
+.sn-modal-body {
+  @apply flex-1 overflow-y-auto px-6 py-4;
+}
+
+.sn-modal-footer {
+  @apply flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-200 flex-shrink-0;
+
+  &:empty { @apply hidden; }
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/sn-modal.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"]
+}