@corp-products/ui-components 3.6.1 → 3.6.2

package/src/lib/bottom-sheet/bottom-sheet.component.scss

@@ -1,31 +0,0 @@
-.sidebar {
-  &.show {
-    @apply min-w-[550px];
-  }
-}
-
-.band{
-  background-color: #DFE0E6;
-  width: 40px;
-  height: 4px;
-  border-radius: 24px;
-  display: block;
-}
-.p-drawer-header , .p-drawer-footer{
-  background-color: var(--gray-100);
-}
-
-.p-drawer-header{
-  --p-drawer-header-padding: 0.75rem var(--p-overlay-modal-padding);
-  font-weight: 500;
-  justify-content: center;
-  color: #090D0F;
-  font-size: 20px;
-  flex-direction: column;
-
-}
-
-.p-drawer-content{
-  padding: 0px !important;
-  margin: 0px !important;
-}

package/src/lib/bottom-sheet/bottom-sheet.component.ts

@@ -1,26 +0,0 @@
-import { NgClass, NgTemplateOutlet } from "@angular/common";
-import { Component, EventEmitter, Input, Output, TemplateRef, ViewEncapsulation } from "@angular/core";
-import { PrimeTemplate } from "primeng/api";
-import { Drawer } from "primeng/drawer";
-import { TooltipModule } from "primeng/tooltip";
-
-@Component({
-  selector: "app-bottom-sheet",
-  standalone: true,
-  imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule],
-  templateUrl: "./bottom-sheet.component.html",
-  styleUrl: "./bottom-sheet.component.scss",
-  encapsulation: ViewEncapsulation.None
-})
-export class BottomSheetComponent {
-  @Input() show = false;
-  @Input() contentTemplate!: TemplateRef<unknown>;
-
-  @Output() onHide = new EventEmitter<boolean>();
-  @Output() onShow = new EventEmitter<boolean>();
-
-  hideBottomSheet() {
-    this.show = false;
-    this.onHide.emit(false);
-  }
-}

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

@@ -1,37 +0,0 @@
-@if (dynamicDialogConfig.data) {
-<div class="confirmation-dialog">
-  <div class="dialog-wrapper">
-    @if (dynamicDialogConfig.data) {
-    <div class="confirmation-dialog__content my-4">
-      @if (dynamicDialogConfig.data.dialogIcon) {
-      <em [class]="dynamicDialogConfig.data.dialogIcon"></em>
-      }
-      <p class="confirmation-dialog__message text-xl mb-2">
-        {{ dynamicDialogConfig.data.message }}
-      </p>
-      @if (dynamicDialogConfig.data.hint) {
-      <p class="confirmation-dialog__hint font-normal text-base">
-        {{ dynamicDialogConfig.data.hint }}
-      </p>
-      }
-      @if (dynamicDialogConfig.data.inputForm) {
-      <app-dynamic-form [dynamicFormData]="dialogFormData"></app-dynamic-form>
-      }
-    </div>
-    }
-    <div class="confirmation-dialog__actions flex gap-2 mt-4">
-      <app-button [title]="dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)"
-        [disabled]="!!(dialogFormData && dialogFormData.formGroup?.invalid)" [severity]="'primary'"
-        [id]="dynamicDialogConfig.data.confirmBtnId" [icon]="dynamicDialogConfig.data.confirmBtnIcon || ''"
-        [label]="dynamicDialogConfig.data.confirmBtnLabel"
-        [iconPos]="dynamicDialogConfig.data.confirmBtnPosition || 'left'" [styleClass]="'confirmation-btn'"
-        (click)="submit()" />
-      <app-button [title]="dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)"
-        [severity]="'primary'" variant="outlined" [label]="dynamicDialogConfig.data.cancelBtnLabel"
-        [id]="dynamicDialogConfig.data.cancelBtnId" [styleClass]="'cancel-btn confirmation-btn cancel-btn'"
-        (click)="close()" />
-    </div>
-  </div>
-
-</div>
-}

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

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

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'"
-      [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,32 +0,0 @@
-<div class="calender-content"   #calendarContainer>
-  @if(isDatePickerShow) {
-    <stc-date-picker-switcher [variant]="'in'" [label]="label" id="dateId" (openCalender)="showCalender($event)"
-    [control]="control" [formattedDate]='selectedDate'  >
-    </stc-date-picker-switcher>
-  }
-
-  <!-- calender.html -->
-  <div [dir]="currentLang() === 'ar' ? 'rtl' : 'ltr'" class="p-2 calendar-wrapper " [@slideDown]="isShown ? 'open' : 'closed'"  >
-    <div class="header-tabs">
-      <div class="header-label">{{'calender.calender_type' | translate}}</div>
-      <div class="tabs">
-        <button class="tab-button" [class.active]="mode === 'gregorian'"  type="button" (click)="  mode='gregorian'">
-          {{'calender.gregorian' | translate}}
-        </button>
-        <button class="tab-button" [class.active]="mode === 'hijri'" type="button" (click)=" mode='hijri'">
-          {{'calender.hijri' | translate}}
-        </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,265 +0,0 @@
-.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;
-}