sn-card 0.0.2

package/README.md

@@ -0,0 +1,24 @@
+# SnCard
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project snCard` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project snCard`.
+> Note: Don't forget to add `--project snCard` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build snCard` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build snCard`, go to the dist folder `cd dist/sn-card` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test snCard` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "sn-card",
+  "version": "0.0.2",
+  "description": "Angular card component for displaying content in containers - SnUI Library",
+  "author": {
+    "name": "Swapnil Nakate",
+    "email": "nakate.swapnil7@gmail.com",
+    "url": "https://swapnilnakate.in"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.7"
+  },
+  "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-card"
+  },
+  "license": "MIT"
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnCardComponent } from './sn-card.component';
+
+describe('SnCardComponent', () => {
+  let component: SnCardComponent;
+  let fixture: ComponentFixture<SnCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnCardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SnCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'sn-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './sn-card.html',
+  styleUrl: 'sn-card.scss',
+})
+export class SnCardComponent implements OnInit {
+  
+
+  @Input() title?: string;
+  _imageSrc : string="https://picsum.photos/200";
+  _actions: any[] = []
+
+  ngOnInit(): void {
+  // this._imageSrc ="";
+  }
+  
+}

package/src/lib/sn-card.html

@@ -0,0 +1,36 @@
+  <div class="grid  grid-flow-row grid-cols-12 grid-card-row  
+  gap-1
+  w-full pt-4 container border rounded-md shadow-md">
+   
+      @if (_imageSrc) {
+        <div class="col-span-2 row-span-1 p-2">
+        <img [src]="_imageSrc" class="rounded-xl" />
+      </div>
+      }
+      
+   
+    <div class="col-span-10 row-span-1">
+      @if(title){
+        <h1 class="text-3xl font-bold text-center">{{title}}</h1>
+        }
+        <div class="text-left">
+          <ng-content></ng-content>
+        </div>
+    </div>
+
+    @if(_actions.length){
+      <div class="row-span-1 col-span-12 flex text-sm justify-center">
+        <div class="flex-1 shadow-sm  text-center border-t-2 
+        hover:shadow-inner">Action 1</div>
+        <div class="flex-1 shadow-sm  text-center border-t-2 
+        hover:shadow-inner border-l-2 -ml-1">Action 2</div>
+       
+      </div>
+    }
+    
+    <!-- <div class="row-span-1 col-span-6 shadow-sm text-center border-t-2 border-r-gray-600 hover:shadow-inner">Action 1</div>
+    <div class="row-span-1 col-span-6 shadow-sm text-center border-t-2 hover:shadow-inner">Action 2</div>
+    -->
+  </div>
+
+

package/src/lib/sn-card.scss

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.card {
+  background: #ffffff;
+  border: 1px solid #ececec;
+  border-radius: 0.625rem;
+  padding: 0.625rem;
+  box-shadow: 0 4px 10px #00000008, 0 0 2px #0000000f, 0 2px 6px #0000001f;
+  .card-title {
+    text-align: center;
+  }
+}
+
+.grid-card-row{
+  grid-template-rows: auto 2rem;
+}

package/src/lib/sn-card.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SnCardService } from './sn-card.service';
+
+describe('SnCardService', () => {
+  let service: SnCardService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SnCardService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/sn-card.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnCardService {
+
+  constructor() { }
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of sn-card
+ */
+
+export * from './lib/sn-card.service';
+export * from './lib/sn-card.component';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "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,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}