@corp-products/ui-components 3.2.7 → 3.2.9

package/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,64 @@
+import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { AvatarModule } from 'primeng/avatar';
+import {
+  DialogService,
+  DynamicDialogConfig,
+  DynamicDialogModule,
+  DynamicDialogRef,
+  DynamicDialogStyle,
+} from 'primeng/dynamicdialog';
+import { filter, Subscription } from 'rxjs';
+import { AppButtonComponent } from '../app-button/app-button.component';
+import { DynamicFormComponent } from '../dynamic-form/dynamic-form.component';
+import { DynamicFormData } from '../dynamic-form/dynamic-form.interface';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    AppButtonComponent,
+    AvatarModule,
+    DynamicDialogModule,
+    DynamicFormComponent,
+    TranslatePipe,
+  ],
+  providers: [DialogService, DynamicDialogStyle],
+})
+export class ConfirmationDialogComponent extends DynamicDialogRef implements OnInit, OnDestroy {
+  router = inject(Router);
+  dialogService = inject(DialogService);
+  dynamicDialogConfig = inject(DynamicDialogConfig);
+  private readonly _ref = inject(DynamicDialogRef);
+  private readonly _subscription = new Subscription();
+  dialogFormData: DynamicFormData;
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+  ngOnInit() {
+    // closing when navigating back from the browser
+    this._subscription.add(
+      this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
+        if (this.dynamicDialogConfig) {
+          this._ref.close(false);
+        }
+      })
+    );
+    this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
+  }
+  submit() {
+    // we should pass submitted data when using form dialog
+    // const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
+    // this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
+    this._ref.close(true);
+  }
+
+  override close() {
+    this._ref.close(false);
+  }
+}

package/src/lib/confirmation-dialog/confirmation-dialog.interface.ts

@@ -0,0 +1,13 @@
+export interface ConfirmationDialogData {
+  header: string;
+  message: string;
+  confirmBtnId: string;
+  cancelBtnId: string;
+  cancelBtnLabel?: string;
+  confirmBtnLabel?: string;
+  confirmBtnIcon?: string;
+  confirmBtnPosition?: string;
+  hint?: string;
+  inputForm?: any;
+  breakpoints?: any;
+}

package/src/lib/confirmation-dialog/confirmation-dialog.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Observable, of } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { ConfirmationDialogData } from './confirmation-dialog.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationDialogService {
+  constructor(private dialogService: DialogService) { }
+
+  open(data: ConfirmationDialogData): Observable<boolean> {
+    const ref: DynamicDialogRef | null = this.dialogService.open(ConfirmationDialogComponent, {
+      data,
+      header: data.header,
+      showHeader: true,
+      width: '600px',
+      closable: true,
+      modal: true,
+      styleClass: 'confirmation-dialog-wrapper',
+      breakpoints: data.breakpoints,
+    });
+    if (!ref) {
+      return of(false); // or EMPTY / throwError — depending on your logic
+    }
+    // Emit true/false when dialog closes
+    return ref.onClose.pipe(
+      filter((res) => res !== undefined),
+      map((res) => !!res)
+    );
+  }
+}

package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.html

@@ -0,0 +1,27 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+    <p-floatlabel [variant]="variant">
+    <input [id]="inputId" [type]="'text-float-label'" [formControl]="control" [readonly]="true" (focus)="openCalendar(true)"
+      (click)="openCalendar(true)" [pSize]="'small'"  style="direction: rtl; unicode-bidi: plaintext;"
+      [class]="
+        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
+        " [disabled]="disabled" [name]="name" pInputText
+      class="w-full"
+      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}" />
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+    </label>
+  </p-floatlabel>
+  @if (hint) {
+  <small class="p-mt-1">{{ hint }}</small>
+  }
+  @if (isInvalid && (control.dirty || control.touched)) {
+  <small class="p-error">
+    @for (error of control.errors | validationErrors; track error) {
+    {{ error }}<br>
+    }
+  </small>
+  }
+</div>

package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.scss

@@ -0,0 +1,22 @@
+.p-datepicker-clear-icon {
+  @apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;
+}
+
+/* Hide default calendar inside panel */
+
+.my-custom-datepicker-panel {
+  display: none !important;
+}
+
+.d-ltr {
+  direction: ltr;
+}
+
+
+.text-required {
+  color: red;
+}
+
+.p-error {
+  color: #dc2626;
+}

package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.ts

@@ -0,0 +1,64 @@
+import { NgClass } from '@angular/common';
+import {  Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { DatePicker, DatePickerModule } from 'primeng/datepicker';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { ValidationErrorsPipe } from '../../form-components/@utils/validations/validation-message.pipe';
+import { BaseInputComponent } from '../../form-components/components/base-input.component';
+import { InputText } from 'primeng/inputtext';
+@Component({
+  selector: 'stc-date-picker-switcher',
+  standalone: true,
+  imports: [
+  FormsModule,
+    ReactiveFormsModule,
+    NgClass,
+    InputText,
+    DatePickerModule,
+    ValidationErrorsPipe,
+    TranslatePipe,
+    FloatLabelModule,
+  ],
+  templateUrl: './date-picker-switcher.component.html',
+  styleUrl: './date-picker-switcher.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class DatePickerSwitcherComponent extends BaseInputComponent  implements OnChanges {
+  @Input() type: 'text' | 'textarea' = 'text';
+  @Input() contentType: 'text' | 'email' | 'number' = 'text';
+  @Input() size: 'small' | 'large' = "small";
+  @Input() prefix: string;
+  @Input() rows = 2;
+  @Input() cols = 20;
+  @Input() autoResize = true;
+  @Input() basicInput!: boolean;
+  @Input() noStyle!: boolean;
+  @Input() hideOptionalLabel: boolean;
+  @Input() inputDirection: 'ltr' | 'rtl' | 'inherit' = 'inherit';
+  @Input() variant: 'in' | 'over' | 'on' = 'over';
+  @Input() defaultColor = '#DFE0E6'
+  @Input() formattedDate = '';
+  @Output() openCalender = new EventEmitter<boolean>();
+  constructor( ) {
+    super();
+  }
+    ngOnChanges(changes: SimpleChanges) {
+    if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
+      // Update the FormControl value if parent changes the formattedDate
+      this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
+    }
+  }
+  override ngOnInit() {
+    this.control.setValue(this.formattedDate);
+  }
+
+  clearButtonClick(e: any) {
+    this.control.setValue(null);
+  }
+
+  openCalendar(isOpen: boolean) {
+    this.openCalender.emit(isOpen)
+
+  }
+}

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

@@ -0,0 +1,31 @@
+<div class="calender-content  "   #calendarContainer>
+  <stc-date-picker-switcher [variant]="'in'" [label]="'Select Date'" id="dateId" (openCalender)="showCalender($event)"
+    [control]="control" [formattedDate]='selectedDate'  >
+  </stc-date-picker-switcher>
+
+  <!-- calender.html -->
+  <div dir="rtl" class="p-2 calendar-wrapper " [@slideDown]="isCalendarOpen ? 'open' : 'closed'"  >
+    <div class="header-tabs">
+      <div class="header-label">نوع التقويم</div>
+      <div class="tabs">
+        <button class="tab-button" [class.active]="mode === 'gregorian'" (click)="  mode='gregorian'">
+          الميلادي
+        </button>
+        <button class="tab-button" [class.active]="mode === 'hijri'" (click)=" mode='hijri'">
+          هجري
+        </button>
+      </div>
+    </div>
+    @if(mode === 'gregorian') {
+    <app-gregorian-calendar [model]="gregorianModel" [language]="currentLang"
+      (dateSelected)="onSelectGregorian($event)">
+    </app-gregorian-calendar>
+    }
+
+    @if(mode === 'hijri') {
+    <app-hijri-calendar [model]="hijriModel" [language]="currentLang" (dateSelected)="onSelectHijri($event)">
+    </app-hijri-calendar>
+    }
+  </div>
+
+</div>

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

@@ -0,0 +1,229 @@
+.calendar-wrapper {
+  font-family: "Tajawal", sans-serif;
+  max-width: 375px;
+  padding: 15px;
+}
+
+.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;
+  padding-top: 10px;
+}
+
+.calendar-wrapper {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  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;
+}
+
+.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;
+}

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

@@ -0,0 +1,107 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbCalendar, NgbDateStruct, NgbCalendarIslamicUmalqura, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+import moment from 'moment-hijri';
+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';
+@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,
+    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 }, []);
+  mode: 'gregorian' | 'hijri' = 'gregorian';
+  gregorianModel!: NgbDateStruct;
+  hijriModel!: NgbDateStruct;
+  currentLang: 'ar' | 'en' = 'ar';
+  @Output() selectButtonChange = new EventEmitter<{ name: string; value: any }>();
+  isCalendarOpen = false
+  @ViewChild('calendarContainer') calendarContainer!: ElementRef;
+  constructor() { }
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!this.calendarContainer) return;
+
+    const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
+    if (!clickedInside) {
+      this.isCalendarOpen = false;
+    }
+  }
+  onSelectGregorian(date: NgbDateStruct) {
+    this.gregorianModel = date;
+    const m = moment(`${date.year}-${date.month}-${date.day}`, 'YYYY-M-D');
+    this.hijriModel = {
+      year: +m.format('iYYYY'),
+      month: +m.format('iM'),
+      day: +m.format('iD')
+    };
+    this.selectedDate = this.formatHijri(m);
+    this.isCalendarOpen = false;
+  }
+
+  onSelectHijri(date: NgbDateStruct) {
+    this.hijriModel = date;
+    const m = moment(`${date.year}-${date.month}-${date.day}`, 'iYYYY-iM-iD');
+    this.gregorianModel = {
+      year: +m.format('YYYY'),
+      month: +m.format('M'),
+      day: +m.format('D')
+    };
+    this.selectedDate = this.formatHijri(m);
+    this.isCalendarOpen = false;
+  }
+  showCalender(isOpen: boolean) {
+    this.isCalendarOpen = isOpen;
+  }
+  formatHijri(m: moment.Moment): string {
+    const hijriDay = m.format('iD');
+    const hijriMonth = getHijriMonthName(this.currentLang, +m.format('iM'));
+    const gregorianDay = m.format('D');
+    const gregorianMonth = getGregorianMonthName(this.currentLang, +m.format('M'));
+    const gregorianYear = m.format('YYYY');
+    const hijriYear = m.format('iYYYY');
+    return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
+  }
+
+
+}

package/src/lib/dual-calender/gregorian-calendar/gregorian-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/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,59 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } 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"
+})
+export class GregorianCalendarComponent implements OnChanges {
+  @Input() model!: NgbDateStruct;
+  @Output() dateSelected = new EventEmitter<NgbDateStruct>();
+
+  @Input() language: 'ar' | 'en' = 'en';
+  startDate!: NgbDateStruct;
+  private calendar = new NgbCalendarGregorian();
+  constructor(
+    private i18n: NgbDatepickerI18n,
+    private cdr: ChangeDetectorRef
+  ) {
+  }
+  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.cdr.detectChanges();
+    }
+  }
+
+  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;
+}