@corp-products/ui-components 3.5.9 → 3.6.0

package/src/lib/dual-calender/dual-calendar.component.scss

@@ -0,0 +1,265 @@
+.calendar-wrapper {
+  max-width: 375px;
+  padding: 15px;
+
+  .ngb-dp-header {
+    .ngb-dp-arrow.ngb-dp-arrow-next {
+      margin: 0 10px;
+      max-width: 20px;
+    }
+  }
+
+  .rtl {
+    .ngb-dp-header {
+      .ngb-dp-arrow.ngb-dp-arrow-next {
+        inset-inline-end: -6px;
+        transform: rotate(180deg);
+        margin: 0 10px;
+        max-width: 20px;
+      }
+
+      .ngb-dp-arrow.ngb-dp-arrow-prev {
+        inset-inline-end: 22px;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .ltr {
+    .ngb-dp-header {
+      .ngb-dp-arrow.ngb-dp-arrow-next {
+        inset-inline-end: -4px;
+      }
+
+      .ngb-dp-arrow.ngb-dp-arrow-prev {
+        inset-inline-end: 11px;
+      }
+    }
+  }
+}
+
+.header-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.tabs {
+
+  background: #f0f0f5;
+  padding: 3px;
+  border-radius: 2px;
+}
+
+.tab-button {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 14px;
+  background: #f0f0f5;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.tab-button.active {
+  background: #dcd6f8;
+  color: #4a3fb4;
+  font-weight: 600;
+}
+
+.custom-datepicker {
+  width: 100%;
+  background: white;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+/* Calendar Header (Month + Arrows) */
+.custom-datepicker .ngb-dp-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  max-width: 375px;
+}
+
+.custom-datepicker .ngb-dp-arrow-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+
+}
+
+/* Weekdays Row */
+.custom-datepicker .ngb-dp-weekdays {
+  margin-bottom: 6px;
+}
+
+.custom-datepicker .ngb-dp-weekday {
+  color: #9b9b9b;
+  font-weight: 600;
+  text-align: center;
+}
+
+
+
+/* Today style */
+.custom-day.today {
+  border: 1px solid #6a41d8;
+  border-radius: 8px;
+}
+
+/* Outside month */
+.custom-day.outside {
+  opacity: 0.3;
+}
+
+/* Disabled */
+.custom-day.disabled {
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+.calender-content {
+  position: relative;
+}
+
+.calendar-wrapper {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+
+.ngb-datepicker {
+  width: 100%;
+
+  .ngb-dp-month {}
+}
+
+.custom-day {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.custom-day.today {
+  color: #4F008D;
+  border: 0 !important;
+
+}
+
+.ngb-dp-day:has(.selected) {
+  background-color: #EDE6F4 !important;
+  border: 0 !important;
+  color: #4F008D !important;
+  border-radius: 2px;
+}
+
+.custom-day.outside {
+  color: #ccc !important;
+}
+
+.custom-day.disabled {
+  color: #aaa !important;
+  pointer-events: none !important;
+}
+
+.ngb-dp-day,
+.ngb-dp-weekday,
+.ngb-dp-week-number {
+  width: 38px !important;
+  height: 44px !important;
+  display: flex;
+  margin: 5px;
+  justify-content: center;
+  align-items: center;
+}
+
+.ngb-dp-month:first-child .ngb-dp-week {
+  padding: 0 !important;
+}
+
+.ngb-dp-month:last-child .ngb-dp-week {
+  padding: 0 !important;
+}
+
+.ngb-dp-arrow-btn {
+  margin-inline-end: 0 !important;
+  outline: 0 !important;
+   padding: 0 !important;
+  margin: 0 !important;
+}
+
+.ngb-dp-header {
+  position: relative;
+
+  .ngb-dp-arrow {
+    position: absolute;
+
+    &.ngb-dp-arrow-prev {
+      inset-inline-end: 0;
+    }
+
+    &.ngb-dp-arrow-next {
+      inset-inline-end: 15px;
+    }
+
+    &:focus-visible,
+    .btn:focus-visible {
+      outline: 0 !important;
+    }
+  }
+
+  .visually-hidden {
+    display: none;
+  }
+}
+
+.ngb-dp-navigation-select {
+  max-width: 140px;
+}
+
+.ngb-dp-navigation-select {
+  select {
+    border: 0;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+}
+
+.ngb-datepicker-navigation-select>.form-select {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.ngb-dp-navigation-select,
+.form-select:first-child {
+  appearance: none !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+
+
+.ngb-dp-navigation-chevron {
+  font-size: 18px;
+  border-width: .1em .1em 0 0 !important;
+  border-color: #000;
+}

package/src/lib/dual-calender/dual-calendar.component.ts

@@ -0,0 +1,157 @@
+import { Component, effect, ElementRef, EventEmitter, HostListener, Input, Output, signal, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbCalendar, NgbDateStruct, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbDate } from '@ng-bootstrap/ng-bootstrap';
+import { HijriCalendarComponent } from './hijri-calendar/hijri-calendar.component';
+import { GregorianCalendarComponent } from './gregorian-calendar/gregorian-calendar.component';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { DatePickerModule } from 'primeng/datepicker';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { DatePickerSwitcherComponent } from './date-picker-switcher/date-picker-switcher.component';
+import '@angular/localize/init';
+import { getGregorianMonthName, getHijriMonthName } from './utils/date-i18n.utils';
+import { formatDate } from '@angular/common';
+import { DateFormats } from '../../enums/date-formatter';
+import { TranslatePipe } from '@ngx-translate/core';
+@Component({
+  selector: 'app-dual-calendar',
+  animations: [
+    trigger('slideDown', [
+      state('closed', style({
+        height: '0px',
+        opacity: 0,
+        overflow: 'hidden'
+      })),
+      state('open', style({
+        height: '*',
+        opacity: 1,
+        overflow: 'hidden'
+      })),
+      transition('closed <=> open', [
+        animate('300ms ease')
+      ])
+    ])
+  ],
+  imports: [
+    NgbDatepickerModule,
+    FormsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DatePickerModule,
+    FloatLabelModule,
+    HijriCalendarComponent,
+    DatePickerSwitcherComponent,
+    TranslatePipe,
+    GregorianCalendarComponent
+  ],
+  providers: [
+    { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
+  ],
+  templateUrl: './dual-calendar.component.html',
+  styleUrl: './dual-calendar.component.scss',
+  encapsulation: ViewEncapsulation.None
+})
+export class DualCalendarComponent {
+  selectedDate = ''
+  @Input() control: FormControl<any> = new FormControl({ value: null, disabled: false }, []);
+  @Input() label = '';
+  @Input() name = '';
+  @Input() withTime = true;
+  mode: 'gregorian' | 'hijri' = 'gregorian';
+  gregorianModel!: NgbDateStruct;
+  hijriModel!: NgbDateStruct;
+  @Input() currentLang = signal<'ar' | 'en'>('ar');
+  @Output() gregorianUTC = new EventEmitter<string>();
+  gregorianUTCValue  = ''
+  isCalendarOpen = false
+  @ViewChild('calendarContainer') calendarContainer!: ElementRef;
+  hijriCal = new NgbCalendarIslamicUmalqura();
+  constructor() {
+    effect(() => {
+      this.currentLang(); // 👈 track signal
+      this.setDate(this.gregorianUTCValue)
+    });
+  }
+  ngOnInit() {
+    this.setDate(this.control?.value);
+
+  }
+  setDate(value: string | null) {
+    if (!value) return;
+
+    const jsDate = new Date(value);
+    if (isNaN(jsDate.getTime())) return;
+
+    const ngbDate: NgbDateStruct = {
+      year: jsDate.getFullYear(),
+      month: jsDate.getMonth() + 1,
+      day: jsDate.getDate()
+    };
+
+    // 🔥 Reuse existing logic
+    this.onSelectGregorian(ngbDate);
+  }
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!this.calendarContainer) return;
+    const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
+    if (!clickedInside) {
+      this.isCalendarOpen = false;
+    }
+  }
+  private structToNgbDate(d: NgbDateStruct): NgbDate {
+    return new NgbDate(d.year, d.month, d.day);
+  }
+
+  onSelectGregorian(date: NgbDateStruct) {
+    this.gregorianModel = date;
+    // Convert to NgbDate
+    const jsDate = new Date(date.year, date.month - 1, date.day);
+    // fromGregorian expects NgbDate or JS Date (depending on version)
+    const hijri = this.hijriCal.fromGregorian(jsDate);
+    const isoUTC = jsDate.toISOString();
+     this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
+    this.gregorianUTC.emit(this.gregorianUTCValue);
+    this.hijriModel = {
+      year: hijri.year,
+      month: hijri.month,
+      day: hijri.day
+    }; // datepicker
+
+    this.selectedDate = this.formatHijri(this.structToNgbDate(this.hijriModel)); //input
+    this.isCalendarOpen = false;
+  }
+
+  onSelectHijri(date: NgbDateStruct) {
+    this.hijriModel = date;
+    const ngbDate = this.structToNgbDate(date);
+    const greg = this.hijriCal.toGregorian(ngbDate);
+    const isoUTC = greg.toISOString();
+    this.gregorianModel = {
+      year: greg.getFullYear(),
+      month: greg.getMonth() + 1,
+      day: greg.getDate()
+    };
+    const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
+     this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
+    this.gregorianUTC.emit(this.gregorianUTCValue);
+    this.selectedDate = this.formatHijri(ngbDate);
+    this.isCalendarOpen = false;
+  }
+
+  showCalender(isOpen: boolean) {
+    this.isCalendarOpen = isOpen;
+  }
+
+  formatHijri(h: NgbDate): string {
+    const hijriDay = h.day;
+    const hijriMonth = getHijriMonthName(this.currentLang(), h.month);
+    const hijriYear = h.year;
+    const greg = this.hijriCal.toGregorian(h);
+    const gregorianDay = greg.getDate();
+    const gregorianMonth =
+      getGregorianMonthName(this.currentLang(), greg.getMonth() + 1);
+    const gregorianYear = greg.getFullYear();
+    return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
+  }
+
+}

package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.html

@@ -0,0 +1,21 @@
+@for(item of [calendarKey]; track item) {
+  <ngb-datepicker #dp
+    [class.rtl]="language === 'ar'"
+    [class.ltr]="language === 'en'"
+    [ngModel]="model"
+    [startDate]="startDate"
+    (ngModelChange)="onDateChange($event)"
+    (dateSelect)="dateSelected.emit($event)"
+    [dayTemplate]="dayTemplate"
+    [markDisabled]="isDisabled">
+  </ngb-datepicker>
+  <ng-template #dayTemplate let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled">
+    <span class="custom-day"
+      [class.today]="isToday(date)"
+      [class.selected]="selected"
+      [class.outside]="date.month !== currentMonth"
+      [class.disabled]="disabled">
+      {{ date.day }}
+    </span>
+  </ng-template>
+}

package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.spec.ts

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

package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectorRef, Component, EventEmitter, inject, Input, OnChanges, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+  NgbCalendar,
+  NgbCalendarGregorian,
+  NgbDatepickerI18n,
+  NgbDatepickerModule,
+  NgbDateStruct,
+} from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { DynamicGregorianI18n } from './../services/gregorian-i18n.service';
+
+@Component({
+  selector: "app-gregorian-calendar",
+  standalone: true,
+  imports: [NgbDatepickerModule, FormsModule],
+  providers: [
+    { provide: NgbCalendar, useClass: NgbCalendarGregorian },
+    { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
+  ],
+  templateUrl: "./gregorian-calendar.component.html",
+  styleUrl: "./gregorian-calendar.component.scss",
+  encapsulation: ViewEncapsulation.None,
+})
+export class GregorianCalendarComponent implements OnChanges {
+  @Input() model!: NgbDateStruct;
+  @Output() dateSelected = new EventEmitter<NgbDateStruct>();
+  renderer = inject(Renderer2)
+  @Input() language: 'ar' | 'en' = 'en';
+  startDate!: NgbDateStruct;
+  private calendar = new NgbCalendarGregorian();
+  i18n = inject(NgbDatepickerI18n)
+  cdr = inject(ChangeDetectorRef)
+  calendarKey = 0;
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['model'] && changes['model'].currentValue) {
+      this.startDate = { ...changes['model'].currentValue };
+    }
+    if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
+      this.i18n.setLanguage(this.language);
+      this.calendarKey++; // Increment to force recreation
+    }
+  }
+
+  ngAfterViewInit() {
+    const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
+    buttons.forEach(btn => {
+      this.renderer.removeAttribute(btn, 'title');
+    });
+  }
+
+  onDateChange(date: NgbDateStruct) {
+    this.model = date;
+    this.startDate = { ...date };
+  }
+
+  isToday(date: NgbDateStruct): boolean {
+    const today = this.calendar.getToday();
+    return date.year === today.year &&
+      date.month === today.month &&
+      date.day === today.day;
+  }
+
+  isDisabled = () => false;
+}

package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.html

@@ -0,0 +1,10 @@
+<ngb-datepicker #dp [class.rtl]="language === 'ar'" [class.ltr]="language === 'en'" [ngModel]="model"
+  [startDate]="startDate" (ngModelChange)="onDateChange($event)" (dateSelect)="dateSelected.emit($event)"
+  [dayTemplate]="dayTemplate" [markDisabled]="isDisabled">
+</ngb-datepicker>
+<ng-template #dayTemplate let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled">
+  <span class="custom-day" [class.today]="isToday(date)" [class.selected]="selected"
+    [class.outside]="date.month !== currentMonth" [class.disabled]="disabled">
+    {{ date.day }}
+  </span>
+</ng-template>

package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.spec.ts

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

package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectorRef, Component, EventEmitter, inject, Input, OnChanges, Output, Renderer2, SimpleChanges } from '@angular/core';
+import {
+  NgbCalendar,
+  NgbCalendarIslamicUmalqura,
+  NgbDatepickerI18n,
+  NgbDatepickerModule,
+  NgbDateStruct,
+} from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { DynamicHijriI18n } from '../services/islamic-i18n.service';
+
+@Component({
+  selector: "app-hijri-calendar",
+  standalone: true,
+  imports: [NgbDatepickerModule, FormsModule],
+  providers: [
+    { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
+    { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
+  ],
+  templateUrl: "./hijri-calendar.component.html",
+  styleUrl: "./hijri-calendar.component.scss"
+})
+export class HijriCalendarComponent  implements OnChanges   {
+  @Input() model!: NgbDateStruct;
+  @Output() dateSelected = new EventEmitter<NgbDateStruct>();
+  @Input() language: 'ar' | 'en' = 'en';
+  renderer = inject(Renderer2)
+
+  startDate!: NgbDateStruct;
+  private calendar = new NgbCalendarIslamicUmalqura();
+  constructor(
+    private i18n: NgbDatepickerI18n,
+    private cdr: ChangeDetectorRef
+  ) {
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['model'] && changes['model'].currentValue) {
+      this.startDate = { ...changes['model'].currentValue };
+      console.log('Hijri navigating to:', this.startDate);
+    }
+
+    if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
+      this.i18n.setLanguage(this.language);
+      this.cdr.detectChanges(); // Force re-render to update labels
+    }
+  }
+ngAfterViewInit() {
+  const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
+  buttons.forEach(btn => {
+    this.renderer.removeAttribute(btn, 'title');
+  });
+}
+  onDateChange(date: NgbDateStruct) {
+    this.model = date;
+    this.startDate = { ...date };
+  }
+
+  isToday(date: NgbDateStruct): boolean {
+    const today = this.calendar.getToday();
+    return date.year === today.year &&
+      date.month === today.month &&
+      date.day === today.day;
+  }
+
+  isDisabled = () => false;
+}