ghocomps 1.1.25 → 1.3.25

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

@@ -1,298 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,160 +0,0 @@
- .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;
- }