sn-input 0.0.2

package/README.md

@@ -0,0 +1,24 @@
+# SnInput
+
+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 sn-input` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sn-input`.
+> Note: Don't forget to add `--project sn-input` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build sn-input` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build sn-input`, go to the dist folder `cd dist/sn-input` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test sn-input` 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-input",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "sn-input",
+  "version": "0.0.2",
+  "description": "Angular input component with validation and styling - 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-input"
+  },
+  "license": "MIT"
+}

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

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

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

@@ -0,0 +1,81 @@
+import { booleanAttribute, Component, Input, OnInit } from '@angular/core';
+import { CommonModule, TitleCasePipe } from '@angular/common';
+import { v4 } from 'uuid';
+import { FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'sn-input',
+  standalone: true,
+  imports: [CommonModule,ReactiveFormsModule],
+  templateUrl: 'sn-input.html',
+  styleUrl: 'sn-input.scss',
+})
+export class SnInputComponent implements OnInit {
+  @Input({ required: true }) type: string = 'text';
+  @Input() label?: string;
+  @Input() placeholder?: string;
+  @Input() pattern?:string;
+  @Input({transform:booleanAttribute}) required:boolean=false;
+  @Input() infoMessages?:string[]=[];
+  @Input() errorMessages?:string[]=[];
+  @Input() warningMessages?:string[]=[];
+  @Input() successMessages?:string[]=[];
+
+  _control:FormControl = new FormControl('');
+  _info:boolean=true;
+  _error:boolean = false;
+  _warning:boolean=false;
+  _success:boolean=false;
+
+  
+  _id = v4();
+  upperCasePipe: TitleCasePipe = new TitleCasePipe();
+
+  ngOnInit(): void {
+    if(!this.placeholder) this.placeholder = `Enter ${this.upperCasePipe.transform(this.type)}`;
+
+    if(this.infoMessages?.length){
+      this._info = true;
+    }
+    if(this.warningMessages?.length){
+      this._warning = true;
+    }
+    if(this.errorMessages?.length){
+      this._error = true;
+    }
+    if(this.successMessages?.length){
+      this._success = true;
+    }
+   
+    if(this.pattern){
+      this._control.addValidators(Validators.pattern(this.pattern));
+    }
+    this._control.addValidators(this.required? Validators.required:[]);
+
+  }
+  getErrorMessage(type:string,error:ValidationErrors):string{
+    let message='';
+    console.group('getErrorMessage');
+    console.log(type);
+    console.log(error);
+    if(type === 'pattern') message = `Invalid input for Pattern: ${error['pattern'].requiredPattern}`;
+    if(type === 'required') message = `Its a required field`;
+
+    console.groupEnd();
+    return message;
+  }
+  onInputChange():void{
+    console.log(this._control.errors)
+    this.errorMessages =[];
+    if(this._control.errors){
+      const errors:ValidationErrors = this._control.errors;
+      
+      
+      for(const errorKey in errors){
+        this.errorMessages.push(this.getErrorMessage(errorKey,errors));
+      }
+      this._error=true;
+    }
+  }
+
+}

package/src/lib/sn-input.html

@@ -0,0 +1,42 @@
+
+<div class="flex flex-col mb-4">
+    <label [for]="_id" class="text-gray-500 text-sm mb-1">{{label||placeholder}}</label>
+
+    <input [id]="_id" [type]="type"
+     [placeholder]="placeholder" 
+     [formControl]="_control"
+     (keyup)="onInputChange()"
+     
+     [ngClass]="{'px-4 py-1.5 bg-white rounded-lg shadow-sm focus:ring-blue-300':type!== 'checkbox'}"
+    
+     
+     />
+    <div class="flex flex-col mt-2 mb-4 pl-1">
+        @if(_info){
+            @for(message of infoMessages;track message){
+                <span class="text-sm text-blue-500">{{message}}</span>
+            }
+        }
+       
+        @if(_error){
+            @for(message of errorMessages;track message){
+                <span class="text-sm text-red-500">{{message}}
+                </span>
+            }
+        }
+
+        @if(_warning){
+            @for(message of warningMessages;track message){
+                
+                <span  class="text-sm text-yellow-500">{{message}}</span>
+            }
+        }
+
+        @if(_success){
+            @for(message of successMessages;track message){
+                <span class="text-sm text-green-500">{{message}}
+                </span>
+            }
+        }
+    </div>
+</div>

package/src/lib/sn-input.scss

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+input {
+  border: 1px solid #ececec;
+}
+
+input[type="number"] {
+  appearance: none;
+
+  &::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  &::-webkit-outer-spin-button {
+    appearance: none;
+  }
+}

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

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

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

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

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of sn-input
+ */
+
+export * from './lib/sn-input.service';
+export * from './lib/sn-input.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"
+  ]
+}