ghocomps 0.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,59 @@
+# GHOComps
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.5.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "GHOComps": {
+      "projectType": "library",
+      "root": "projects/ghocomps",
+      "sourceRoot": "projects/ghocomps/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ghocomps/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ghocomps/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "projects/ghocomps/tsconfig.spec.json"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ghocomps",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.14",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.3.13",
+    "@angular/cli": "^20.3.5",
+    "@angular/compiler-cli": "^20.3.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.9.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^20.3.0",
+    "typescript": "~5.9.2"
+  }
+}

package/projects/ghocomps/README.md

@@ -0,0 +1,63 @@
+# GHOComps
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build GHOComps
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ghocomps
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/ghocomps/ng-package.json

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

package/projects/ghocomps/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ghocomps",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/ghocomps/src/lib/date.ts

@@ -0,0 +1,298 @@
+import { CommonModule } from '@angular/common';
+import {
+    ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, HostListener,
+    Input, OnInit, SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { GHOdropdown } from "./dropdown";
+import { MatCardModule } from "@angular/material/card";
+import { MatCalendar } from "@angular/material/datepicker";
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DatePipe } from '@angular/common';
+
+@Component({
+    selector: 'gho-date',
+    standalone: true,
+    imports: [CommonModule, FormsModule, GHOdropdown, MatCalendar, MatDatepickerModule,
+        MatCardModule, DatePipe],
+    template:`
+                <div style="height: 55px !important;">
+                <div style="height: 18px !important;">
+                    @if(datavalid())
+                    {
+                    <div [ngStyle]="{ margin: '-3px 5px' }" class="input-label">{{label}}
+                    </div>
+                    }
+                </div>
+                <table>
+                    <tr>
+                        <td>
+                            <div (click)="toggleDropdown()" [ngClass]="getclass()">
+                                <span>{{ gettxt()}}</span>
+                                <i class="bi bi-caret-down-fill arrow-icon" [class.rotate]="isOpen"></i>
+                            </div>
+                        </td>
+                        @if(filter && datavalid() )
+                        {
+                        <td>
+                            <div (click)="clear()" [ngClass]="getclearclass()">
+                                <i class="bi bi-x-lg "></i>
+                            </div>
+                        </td> }
+
+
+                    </tr>
+                </table>
+            </div>
+            @if(isOpen){
+            <div class="dropdown-menu show">
+                <table>
+                    <tr class="bb">
+                        <td class="pl10">
+                            <gho-dropdown [options]="months" [(sharedValue)]="m" (selectionchange)="onmodelchange($event,'m')"  [filter]=false
+                                label="Month"></gho-dropdown>
+                        </td>
+                        <td class="">
+                            <gho-dropdown [options]="days" [(sharedValue)]="d"   (selectionchange)="onmodelchange($event,'d')" [filter]=false
+                                label="Day"></gho-dropdown>
+                        </td>
+                        <td class="pr10">
+                            <gho-dropdown [options]="years" [(sharedValue)]="y"  (selectionchange)="onmodelchange($event,'y')" [filter]=false
+                                label="Year"></gho-dropdown>
+
+                        </td>
+                        
+                        <td class="pr10 pointer" style="width: 30px; padding-top: 10px;">
+                            <div (click)="isOpen=false" >
+                                <i class="bi bi-check2 bold"></i>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <tr>
+                        <td colspan="5">
+                            <mat-calendar (selectedChange)="onDateChangeFromCalender($event)">
+                            </mat-calendar>
+                        </td>
+                    </tr>
+
+                </table>
+
+            </div>
+            }
+    `,
+    styleUrl: './input.css',
+    providers: [provideNativeDateAdapter(), DatePipe,
+    {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => GHODate),
+        multi: true
+    }],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GHODate implements ControlValueAccessor, OnInit {
+    constructor(private el: ElementRef, private cdr: ChangeDetectorRef,
+        private datePipe: DatePipe) { }
+    @Input() options: any[] = [];
+    @Input() placeholder: string = 'Select an option';
+    @Input() showclear: boolean = true;
+    @Input() appearance: string = "outline"
+    @Input() label: string = "";
+    @Input() filter: boolean = true;
+    public value: string = "";
+    public disabled: boolean = false;
+    listdata: { label: string; value: string }[] = [];
+    isOpen = false;
+    selectedtxt: string = "";
+    days: { value: string }[] = []
+    years: { value: string }[] = [];
+    months: { value: string, name: string }[] = [];
+    currentYear: number = new Date().getFullYear();
+    d: any;
+    m: any;
+    y: any;
+
+
+    // Writes a new value to the element
+    writeValue(value: any): void {
+        this.value = value;
+        if (this.value !== undefined && this.value !== null) {
+            const date = new Date(value);
+            if (!date) {
+                this.d = null;
+                this.m = null;
+                this.y = null;
+            }
+            else {
+                const formatted = this.datePipe.transform(date, 'MM/dd/yyyy');
+                if (formatted !== undefined && formatted !== null) {
+                    const [month, day, year] = formatted.split('/').map(Number);
+                    this.m = month,
+                        this.y = year;
+                    this.d = day
+                }
+            }
+        }
+    }
+
+    onmodelchange(e: any, t: any) {
+        if (t == "d") { this.d = e.value }
+        if (t == "m") { this.m = e.value }
+        if (t == "y") { this.y = e.value }
+        this.setdt();
+    }
+
+    ngOnInit(): void {
+        this.populateYears();
+        this.populateMonths();
+        this.populateDays(31);
+    }
+
+
+    setdt() {
+        if (this.d == 0 || this.m == 0 || this.y == 0) { this.value = "" }
+        else {
+            this.value = this.m + " - " + this.d + " - " + this.y
+        }
+        this.onChange(this.value);
+        this.onTouched();
+    }
+
+    onDateChangeFromCalender(date: Date | null) {
+        if (!date) return;
+        const formatted = this.datePipe.transform(date, 'MM/dd/yyyy');
+        if (formatted !== undefined && formatted !== null) {
+            const [month, day, year] = formatted.split('/').map(Number);
+            this.m = month,
+            this.y = year;
+            this.d = day
+        }
+        this.setdt()
+        this.isOpen = false;
+        this.cdr.detectChanges();
+    }
+
+    populateMonths() {
+        this.months = [
+            { value: "1", name: 'January' },
+            { value: "2", name: 'February' },
+            { value: "3", name: 'March' },
+            { value: "4", name: 'April' },
+            { value: "5", name: 'May' },
+            { value: "6", name: 'June' },
+            { value: "7", name: 'July' },
+            { value: "8", name: 'August' },
+            { value: "9", name: 'September' },
+            { value: "10", name: 'October' },
+            { value: "11", name: 'November' },
+            { value: "12", name: 'December' }
+        ];
+    }
+    populateYears(start = (this.currentYear - 95), end = 1 + new Date().getFullYear()) {
+        for (let year = end; year >= start; year--) {
+            this.years.push({ value: year.toString() });
+        }
+    }
+
+    populateDays(start = 1, end = 31) {
+        for (let i: number = 1; i < 32; i++) {
+            this.days.push({ value: i.toString() });
+        }
+    }
+
+    gettxt() {
+        if (this.datavalid()) { return this.value }
+        else { return this.label }
+    }
+
+    toggleDropdown(): void {
+        this.isOpen = !this.isOpen;
+    }
+
+    clear() {
+        this.value = "";
+        this.onChange(this.value);
+        this.onTouched();
+    }
+
+    closeDropdown(): void {
+        this.isOpen = false;
+    }
+
+    datavalid() {
+        if (this.value === undefined || this.value == null || this.value == "" || this.value == "0") {
+            return false;
+        }
+        else { return true; }
+    }
+
+
+    // Functions to call when the value changes or the control is touched
+    onChange: any = () => { };
+    onTouched: any = () => { };
+
+    // Registers a callback function that is called when the control's value changes in the UI
+    registerOnChange(fn: any): void {
+        this.isOpen = false;
+        this.onChange = fn;
+    }
+
+    // Registers a callback function that is called whenever the control receives a touch event
+    registerOnTouched(fn: any): void {
+        this.onTouched = fn;
+    }
+
+
+
+    // Sets the disabled state of the control
+    setDisabledState?(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+
+
+    onSelectionChange(v: any) {
+        this.isOpen = false;
+        this.selectedtxt = v.label;
+        const newValue = v.value;
+        this.value = newValue;
+        this.onChange(newValue); // Notify Angular forms about the change
+        this.onTouched(); // Mark the control as touched
+    }
+
+
+
+    @HostListener('document:click', ['$event'])
+    onOutsideClick(event: Event): void {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+
+
+    getclearclass() {
+        if (this.appearance == "outline") {
+            if (this.datavalid() && this.showclear) { return "input-outline-filter-img"; }
+        }
+        else { return "input-mat-img "; }
+        return "input-mat";
+    }
+    getclass() {
+        if (this.appearance == "outline") {
+            let css = " d-flex  gap-3"
+            if (!this.filter) { css = "input-outline" }
+
+            if (this.filter) { if (!this.datavalid()) { css = "input-outline" } }
+
+            if (this.filter) { if (this.datavalid()) { css = "input-outline-filter " } }
+
+            if (!this.showclear) { css = "input-outline" }
+
+            return css + " input d-flex  gap-3 "
+        }
+        else {
+            return "input-mat d-flex  gap-3 "
+        }
+    }
+
+}

package/projects/ghocomps/src/lib/dropdown.ts

@@ -0,0 +1,189 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input,
+  NgZone, Output, SimpleChanges,
+  OnChanges
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'gho-dropdown',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, FormsModule],
+  template: `
+<div style="height: 55px !important;">
+    <div style="height: 18px !important;">
+        @if(datavalid())
+        {
+        <div [ngStyle]="{ margin: '-3px 5px' }" class="input-label">{{label}}
+        </div>
+        }
+    </div>
+    <table>
+        <tr>
+            <td>
+                <div (click)="toggleDropdown()" [ngClass]="getclass()">
+                    <span>{{selectedtxt}}</span>
+                    <i class="bi bi-caret-down-fill arrow-icon" [class.rotate]="isOpen"></i>
+                </div>
+            </td>
+            @if(filter && datavalid() )
+            {
+            <td>
+                <div (click)="clear()" [ngClass]="getclearclass()">
+                    <i class="bi bi-x-lg "></i>
+                </div>
+            </td> }        
+        </tr>
+    </table>
+</div>
+@if(isOpen){
+<div class="dropdown-menu show ">
+    <div class="list-panel">
+        @for (dlitem of listdata; track dlitem) {
+        <div class="list-item " (click)="onSelectionChange(dlitem)" [class.list-item-selected]="dlitem.value == sharedValue">
+            <table class="w100">
+                <tr>
+                    <td>
+                        {{ dlitem.label }}
+                    </td>
+                    @if(dlitem.value == sharedValue){
+                    <td class="right" style="width:30px;"> <i class="bi bi-check2"></i> </td>}
+                </tr>
+            </table>
+        </div>
+        }
+    </div>
+    <table class=w100>
+        <tr class="bt ">
+            <td class="p10" (click)="clear()"><span matButton class="ghoddl-btn  "> Clear </span> </td>
+            <td class="p10" (click)="closeDropdown()"><span matButton class="ghoddl-btn  "> Cancel </span> </td>
+        </tr>
+    </table>
+</div>
+}
+`,
+  styleUrl: './input.css',
+})
+export class GHOdropdown implements OnChanges {
+  constructor(private el: ElementRef, private cdr: ChangeDetectorRef, private ngZone: NgZone) { }
+  @Input() options: any[] = [];
+  @Input() placeholder: string = 'Select an option';
+  @Input() showclear: boolean = true;
+  @Input() appearance: string = "outline"
+  @Input() label: string = "";
+  @Input() filter: boolean = true;
+  listdata: { label: string; value: string }[] = [];
+  isOpen = false;
+  selectedtxt: string = "";
+
+  @Input() sharedValue: string = '';
+  @Output() sharedValueChange = new EventEmitter<string>();
+  @Output() selectionchange = new EventEmitter<([])>();
+
+
+
+  onModelChange(v: string): void {
+    this.sharedValue = v;
+    this.sharedValueChange.emit(v);
+    this.setlabel();
+  }
+  setlabel() {
+    if (this.listdata.length > 0) {
+      for (let i: number = 0; i < this.listdata.length; i++) {
+
+        if (this.sharedValue &&this.listdata[i].value.toString() == this.sharedValue.toString()) {
+          this.selectedtxt = this.listdata[i].label
+          break;
+        }
+        else {
+          this.selectedtxt = this.label
+        }
+      }
+    }
+    else { this.selectedtxt = this.label }
+  }
+
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['options']) {
+      this.listdata = []; debugger;
+      const allKeys = Array.from(
+        new Set(this.options.flatMap(item => Object.keys(item)))
+      );
+      for (let i: number = 0; i < this.options.length; i++) {
+        if (allKeys.length == 1) {
+          this.listdata.push({ label: this.options[i][allKeys[0]], value: this.options[i][allKeys[0]] })
+        }
+        else {
+          this.listdata.push({ label: this.options[i][allKeys[1]], value: this.options[i][allKeys[0]] })
+        }
+      }
+      this.setlabel();
+    }
+    if (changes['sharedValue']) {
+      this.setlabel();
+    }
+  }
+
+
+  toggleDropdown(): void {
+    this.isOpen = !this.isOpen;
+  }
+
+  clear() {
+    this.onModelChange("")
+    this.isOpen = false;
+  }
+
+  closeDropdown(): void {
+    this.isOpen = false;
+  }
+
+  onSelectionChange(v: any) {
+    this.isOpen = false;
+    this.onModelChange(v.value);
+    this.selectionchange.emit(v);
+  }
+
+  datavalid() {
+    if (this.label != this.selectedtxt) { return true }
+    if (this.label == this.selectedtxt) { return false }
+    return false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onOutsideClick(event: Event): void {
+    if (!this.el.nativeElement.contains(event.target)) {
+      this.isOpen = false;
+    }
+  }
+
+
+  getclearclass() {
+    if (this.appearance == "outline") {
+      if (this.datavalid() && this.showclear) { return "input-outline-filter-img"; }
+    }
+    else { return "input-mat-img "; }
+    return "input-mat";
+  }
+  getclass() {
+    if (this.appearance == "outline") {
+      let css = " d-flex  gap-3"
+      if (!this.filter) { css = "input-outline" }
+
+      if (this.filter) { if (!this.datavalid()) { css = "input-outline" } }
+
+      if (this.filter) { if (this.datavalid()) { css = "input-outline-filter " } }
+
+      if (!this.showclear) { css = "input-outline" }
+
+      return css + " input d-flex  gap-3 "
+    }
+    else {
+      return "input-mat d-flex  gap-3 "
+    }
+  }
+
+}

package/projects/ghocomps/src/lib/input.css

@@ -0,0 +1,160 @@
+ .input {
+     cursor: pointer;
+     border: 1px solid #7c7b7bdf;
+     padding: 5px !important;
+ }
+
+ .input-label {
+     background-color: transparent; position:inherit;
+     color: #202020;
+     font-size: 12px;
+     padding-left: 5px;
+ }
+
+
+ input:focus {
+     border: 1px solid #7c7b7bdf;
+     outline: none;
+ }
+
+ .input:hover {
+     background: var(--hover);
+ }
+
+ .input-outline {
+     border-radius: 5px !important;
+ }
+
+ .input-outline-filter {
+     border-top-left-radius: 5px !important;
+     border-bottom-left-radius: 5px !important;
+     background: var(--filter);
+ }
+
+ .input-filter {
+     background: var(--filter);
+ }
+
+ .input-outline-filter-img {
+     padding: 5px !important;
+     border-top-right-radius: 5px !important;
+     border-bottom-right-radius: 5px !important;
+     background: var(--filter);
+     border: 1px solid #7c7b7bdf;
+     cursor: pointer;
+ }
+
+ .input-mat {
+     border-bottom: 1px solid #7c7b7bdf;
+     padding: 5px !important;
+     cursor: pointer;
+ }
+
+ .input-mat-img {
+     border-bottom: 1px solid #7c7b7bdf;
+     padding: 5px !important;
+     cursor: pointer;
+ }
+
+
+ .list-item {
+     padding: 5px 12px;
+     cursor: pointer;
+     font-size: 14px;
+ }
+
+ .filterd {
+     background-color: var(--selected);
+     font-weight: 400;
+     cursor: pointer;
+ }
+
+ .list-item-selected {
+
+     color: var(--primary);
+     font-weight: 500;
+ }
+
+ .list-item:hover {
+     background: var(--hover);
+ }
+
+
+ .list-panel {
+     background-color: white;
+     max-height: 400px !important;
+     overflow-y: auto;
+ }
+
+ /***********************************************************/
+
+
+ .arrow-icon {
+     transition: transform 0.2s ease;
+ }
+
+ .arrow-icon.rotate {
+     transform: rotate(180deg);
+ }
+
+ .date-dropdown {
+     min-width: 280px;
+     padding: 0;
+     border: none;
+     border-radius: 10px;
+     transition: min-width 0.25s ease;
+     overflow: hidden;
+ }
+
+ .date-dropdown.custom-open {
+     min-width: 560px;
+ }
+
+ .preset-panel {
+     display: flex;
+     flex-direction: column;
+     background-color: #fff;
+ }
+
+ .preset-item {
+     background: transparent;
+     border: none;
+     text-align: left;
+     padding: 10px 14px;
+     font-size: 14px;
+     cursor: pointer;
+     border-radius: 6px;
+     transition: background-color 0.15s ease;
+ }
+
+ .preset-item:hover {
+     background-color: #f1f3f5;
+ }
+
+ .clear-item {
+     color: #e63f3f;
+     margin-top: 6px;
+ }
+
+ .custom-panel {
+     background-color: #fff;
+     border-top: 1px solid #dee2e6;
+ }
+
+ @media (min-width: 992px) {
+     .custom-panel {
+         border-top: none;
+         border-left: 1px solid #dee2e6;
+     }
+ }
+
+ .form-label {
+     font-size: 12px;
+     font-weight: 500;
+     color: #6c757d;
+ }
+
+ .form-control {
+     font-size: 14px;
+     padding: 6px 10px;
+ }

package/projects/ghocomps/src/lib/input.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, model, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges }
+  from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+
+@Component({
+  selector: 'gho-input',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ],
+  template: `<div style="height: 55px !important;">
+    <div style="height: 18px !important;">
+        @if(datavalid())
+        {
+        <div [ngStyle]="{ margin: '-2px 5px' }" class="input-label">{{label}}
+        </div>
+        }
+
+    </div>
+    <div >
+        <table>
+            <tr>
+                <td> <input type="text" [placeholder]="placeholder" [ngModel]="sharedValue" (input)="onInput($event)"
+                        [ngClass]="getclass()"></td>
+                @if(filter && datavalid() )
+                {
+                <td>
+                    <div (click)="clear()" [ngClass]="getclearclass()">
+                        <i class="bi bi-x-lg "></i>
+                    </div>
+                </td> }
+            </tr>
+        </table>
+    </div>
+</div>`,
+  styleUrl: './input.css',
+  providers: [DatePipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GHOInput implements OnInit {
+  constructor(private el: ElementRef, private cdr: ChangeDetectorRef, private datePipe: DatePipe) { }
+  @Input() list: [] = [];
+  @Input() label: string = "";
+  @Input() appearance: string = "outline"
+  @Input() filter: boolean = false;
+  @Input() showclear: boolean = false;
+  placeholder: string = "";
+  @Input() sharedValue: string = '';
+  @Output() sharedValueChange = new EventEmitter<string>();
+
+
+  onInput(event: Event): void {
+    this.sharedValue = (event.target as HTMLInputElement).value
+    this.sharedValueChange.emit(this.sharedValue);
+    this.setlabel();
+  }
+
+  clear()
+  {
+    this.sharedValue = ""
+    this.sharedValueChange.emit(this.sharedValue);
+    this.setlabel();
+  }
+
+  setlabel() {
+    if (this.sharedValue.length > 0) {
+      this.placeholder = ""
+    }
+    else { this.placeholder = this.label }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['sharedValue']) {
+      this.setlabel();
+    }
+  }
+
+  getclass() {
+    if (this.appearance == "outline") {
+      let css = " d-flex  gap-3"
+      if (!this.filter) { css = "input-outline" }
+
+      if (this.filter) { if (!this.datavalid()) { css = "input-outline" } }
+
+      if (this.filter) { if (this.datavalid() && this.showclear) { css = "input-outline-filter input-filter" } }
+
+      if (this.filter) { if (this.datavalid() && !this.showclear) { css = "input-outline input-filter " } }
+
+
+      if (!this.showclear) { css = "input-outline" }
+
+      return css + " input"
+    }
+    else {
+      return "input-mat d-flex  gap-3 "
+    }
+  }
+  
+  getclearclass() {
+    if (this.appearance == "outline") {
+      if (this.datavalid() && this.showclear) { return "input-outline-filter-img"; }
+    }
+    else { return "input-mat-img "; }
+    return "input-mat";
+  }
+
+  datavalid() {
+    if (this.placeholder==this.label) {
+      return false;
+    }
+    else { return true; }
+  }
+
+
+  ngOnInit(): void {
+  }
+
+}

package/projects/ghocomps/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ghocomps
+ */
+
+export * from './lib/dropdown';
+export * from './lib/input';
+export * from './lib/date';

package/projects/ghocomps/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+  "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/ghocomps/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/ghocomps/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,45 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "paths": {
+      "GHOComps": [
+        "./dist/ghocomps"
+      ]
+    },
+    "strict": true,
+    "allowJs": true,
+    "noImplicitAny": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "strictNullChecks": false,
+    "strictPropertyInitialization": false,
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true,
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./projects/ghocomps/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/ghocomps/tsconfig.spec.json"
+    }
+  ]
+}