@corp-products/ui-components 3.2.9 → 3.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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