@corp-products/ui-components 0.0.1 → 1.0.0

package/src/lib/app-tabs/app-tab.interface.ts

@@ -1,26 +0,0 @@
-import { TemplateRef } from "@angular/core";
-
-interface Tab {
-  title: string;
-  iconName?: string;
-  iconPathCount?: number;
-  disabled?: boolean;
-  count?: number;
-  permissionKey?: string;
-}
-
-export interface RoutedTab extends Tab {
-  link: string;
-}
-export interface TemplateTab extends Tab {
-  contentTemplate: TemplateRef<unknown>;
-}
-
-
-export type AppTabs = ({
-  isRouted: true;
-  items: RoutedTab[];
-} | {
-  isRouted: false;
-  items: TemplateTab[];
-})

package/src/lib/app-tabs/app-tabs.component.html

@@ -1,35 +0,0 @@
-@if (tabs && tabs.items.length) {
-  <div [class]="tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'">
-    <p-tabs [value]="activeTabIndex" scrollable>
-      <p-tablist>
-
-        @for (tab of tabs.items; let i = $index; track i) {
-          <p-tab [value]="i" [routerLink]="tabs.isRouted ? $any(tab).link : null" [disabled]="tab.disabled"
-                 (click)="onTabChange(i)">
-            @if (tab.iconName) {
-              <app-ico-moon-card [iconClass]="'text-[17px]'" [iconName]="tab.iconName"
-                                 [iconPathCount]="tab.iconPathCount || 0"/>
-            }
-            <span>{{ tab.title | translate }} @if (tab.count) {
-              <span>({{ tab.count }})</span>
-            } </span>
-          </p-tab>
-        }
-
-      </p-tablist>
-
-      <p-tabpanels>
-        @if (tabs.isRouted) {
-          <router-outlet></router-outlet>
-        } @else {
-          @for (tab of tabs.items; let i = $index; track i) {
-            <p-tabpanel [value]="i">
-              <ng-container [ngTemplateOutlet]="tab.contentTemplate"></ng-container>
-            </p-tabpanel>
-          }
-        }
-
-      </p-tabpanels>
-    </p-tabs>
-  </div>
-}

package/src/lib/app-tabs/app-tabs.component.scss

@@ -1,103 +0,0 @@
-.tabs-container {
-  &.full-width {
-    .p-tabs .p-tablist-tab-list .p-tab {
-      @apply flex-grow flex justify-center max-w-[50%];
-    }
-  }
-
-  .p-tabs {
-    .p-tablist-tab-list {
-      @apply relative;
-
-      &:after {
-        @apply content-[''] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];
-      }
-
-      .p-tab {
-        @apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];
-
-        &:not(.p-tab-active) {
-          app-ico-moon-card {
-            @apply grayscale;
-          }
-
-        }
-      }
-    }
-
-    .p-tablist-active-bar {
-      @apply hidden;
-    }
-
-    .p-tabpanels.p-component {
-      @apply mt-5 rounded-lg;
-    }
-  }
-
-  &.basic {
-    .p-tabs {
-      .p-tablist-tab-list {
-        @apply bg-transparent;
-
-        .p-tab {
-          &.p-tab-active {
-            @apply text-primary border-primary;
-          }
-        }
-      }
-    }
-  }
-
-  &.primary_light {
-    .p-tabs {
-      .p-tablist-tab-list {
-        .p-tab {
-          @apply rounded-t-lg text-[14px];
-
-          &.p-tab-active {
-            @apply bg-purple-800/5 font-semibold text-primary border-primary;
-          }
-        }
-      }
-    }
-  }
-
-  &.primary {
-    .p-tabs {
-      .p-tablist-tab-list {
-        &:after {
-          @apply bg-purple-800/5;
-        }
-
-        .p-tab {
-          @apply rounded-t-lg text-[14px];
-
-          &.p-tab-active {
-            @apply bg-primary font-semibold text-white border-secondary;
-          }
-        }
-      }
-    }
-  }
-}
-
-[dir='rtl'] {
-  .p-tabs .p-tablist{
-    .p-iconwrapper {
-      @apply rotate-180deg;
-    }
-
-    .p-tablist-next-button {
-      @apply right-auto left-0;
-    }
-
-    .p-tablist-prev-button {
-      @apply right-0 left-auto;
-    }
-  }
-}
-
-// TODO : CHECK
-// .p-tabpanels.p-component {
-//   @apply mt-5 rounded-[1.5rem];
-// }

package/src/lib/app-tabs/app-tabs.component.spec.ts

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

package/src/lib/app-tabs/app-tabs.component.ts

@@ -1,48 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
-import { TabsModule } from "primeng/tabs";
-import { AppTabs } from "./app-tab.interface";
-import { IcoMoonIconComponent } from "../ico-moon-icon/ico-moon-icon.component";
-import { TranslateModule } from "@ngx-translate/core";
-import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet } from "@angular/router";
-import { filter } from "rxjs";
-
-@Component({
-  selector: "app-tabs",
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, TabsModule, RouterLink, RouterOutlet, IcoMoonIconComponent, TranslateModule],
-  templateUrl: "./app-tabs.component.html",
-  styleUrl: "./app-tabs.component.scss"
-})
-export class AppTabsComponent implements OnInit {
-  @Input() tabs: AppTabs;
-  @Input() tabsStyle: "basic" | "primary_light" | "primary" = "basic";
-  @Input() responsive = false;
-  activeTabIndex = 0;
-  constructor(private route: ActivatedRoute, private router: Router) {}
-
-  ngOnInit(): void {
-    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-      this.updateActiveTab();
-    });
-    // to be refactor
-    this.updateActiveTab();
-  }
-
-  // Updates the active tab index based on the current route
-  private updateActiveTab(): void {
-    if (!this.tabs.isRouted) return;
-    const currentUrl = this.router.url;
-    const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
-    this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
-  }
-
-  onTabChange(index: number): void {
-    if (!this.tabs.isRouted) return;
-    const selectedTab = this.tabs.items[index];
-    if (selectedTab && !selectedTab.disabled) {
-      this.router.navigate([selectedTab.link], { relativeTo: this.route });
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-@if (dynamicDialogConfig.data) {
-  <div>
-    <div class="bg-gray-150 p-4 flex items-center">
-      <div class="flex-grow flex gap-2">
-        @if (dynamicDialogConfig.data.headerIcon) {
-          <i [class]="dynamicDialogConfig.data.headerIcon"></i>
-        }
-
-        <h3 class="m-0 font-bold text-[16px]">
-          {{ dynamicDialogConfig.data.header }}
-        </h3>
-      </div>
-
-      <app-button (click)="close()" icon="font-icon-close" [style]="'secondary'" variant="text"/>
-    </div>
-
-    @if (dynamicDialogConfig.data) {
-      <div class="p-4">
-        @if (dynamicDialogConfig.data.dialogIcon) {
-          <em [class]="dynamicDialogConfig.data.dialogIcon"></em>
-        }
-        <div>
-          {{ dynamicDialogConfig.data.message }}
-        </div>
-        @if (dynamicDialogConfig.data.hint) {
-          <div class="font-bold text-[14px] mt-2">
-            {{ dynamicDialogConfig.data.hint }}
-          </div>
-        }
-      </div>
-    }
-
-    @if (dynamicDialogConfig.data.inputForm) {
-      <app-dynamic-form [dynamicFormData]="dialogFormData"></app-dynamic-form>
-    }
-
-    <div class="p-4 flex gap-3">
-      <app-button
-        [title]="dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)" class="w-[50%]"
-        [disabled]="!!(dialogFormData && dialogFormData.formGroup?.invalid)"
-        [icon]="dynamicDialogConfig.data.confirmBtnIcon || ''"
-        [iconPos]="dynamicDialogConfig.data.confirmBtnPosition || 'left'"
-        [style]="dynamicDialogConfig.data.confirmBtnStyle ||'primary'"
-        (click)="submit()"/>
-
-      <app-button
-        [title]="dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)"
-        class="w-[50%]"
-        [style]="'secondary'"
-        [variant]="'outlined'"
-        (click)="close()"/>
-    </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,51 +0,0 @@
-import { Component, OnDestroy, OnInit, inject } from "@angular/core";
-import { NavigationStart, Router } from "@angular/router";
-import { AvatarModule } from "primeng/avatar";
-import { filter, Subscription } from "rxjs";
-import { AppButtonComponent } from "../app-button/app-button.component";
-import { DialogService, DynamicDialog, DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
-import { DynamicFormComponent } from "../dynamic-form/dynamic-form.component";
-import { DynamicFormData } from "../dynamic-form/dynamic-form.interface";
-import {TranslatePipe} from "@ngx-translate/core";
-
-@Component({
-  selector: "app-confirm-dialog",
-  templateUrl: "./confirmation-dialog.component.html",
-  styleUrls: ["./confirmation-dialog.component.scss"],
-  standalone: true,
-  imports: [AppButtonComponent, AvatarModule, DynamicDialog, DynamicFormComponent, TranslatePipe],
-  providers: [DialogService]
-})
-export class ConfirmationDialogComponent implements OnInit, OnDestroy {
-  router = inject(Router);
-  dialogService = inject(DialogService);
-  dynamicDialogConfig = inject(DynamicDialogConfig);
-  private readonly _ref = inject(DynamicDialogRef);
-  private readonly _subscription = new Subscription();
-  dialogFormData: DynamicFormData;
-
-  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();
-        }
-      })
-    );
-    this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
-  }
-
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
-  }
-
-  submit() {
-    const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
-    this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
-  }
-
-  close() {
-    this._ref.close();
-  }
-}

package/src/lib/dynamic-form/dynamic-form.component.html

@@ -1,39 +0,0 @@
-<div class="border-t mx-4 py-2">
-  <form [formGroup]="formGroup">
-    <div class="grid grid-cols-12 gap-x-2">
-      @for (inputName of inputsNames; track $index) {
-        <div
-          [ngClass]="inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'">
-          @switch (inputsMap[inputName].fieldType) {
-            @case (fieldType.DATE_PICKER) {
-              <stc-date-picker
-                [minDate]="inputsMap[inputName]?.dateRange?.min"
-                [id]="inputsMap[inputName].inputId"
-                [control]="getFormControl(inputName, formGroup)"
-                [name]="inputName"
-                [label]="inputsMap[inputName].label"
-                [showIcon]="inputsMap[inputName].showIcon || true"
-                [isTimeOnly]="inputsMap[inputName].isTimeOnly || false"/>
-            }
-            @case (fieldType.SELECT_BUTTON) {
-              <stc-select-button
-                [control]="getFormControl(inputName, formGroup)"
-                [id]="inputsMap[inputName].inputId"
-                [name]="inputName"
-                [label]="inputsMap[inputName].label"
-                [options]="inputsMap[inputName].selectButtonOptions || []"/>
-            }
-          }
-        </div>
-      }
-    </div>
-    <div class="col-span-12">
-      <small class="p-error text-red-700">
-        @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;
-          track error) {
-          {{ error }}
-        }
-      </small>
-    </div>
-  </form>
-</div>

package/src/lib/dynamic-form/dynamic-form.component.spec.ts

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

package/src/lib/dynamic-form/dynamic-form.component.ts

@@ -1,29 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { DynamicFormData, FormFieldTypeEnum, InputsMap } from "./dynamic-form.interface";
-import {DatePickerComponent, FormUtils, SelectButtonComponent, ValidationErrorsPipe} from "../form-components";
-import { TranslateModule } from "@ngx-translate/core";
-
-@Component({
-  selector: "app-dynamic-form",
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, DatePickerComponent, ValidationErrorsPipe, TranslateModule, SelectButtonComponent],
-  templateUrl: "./dynamic-form.component.html",
-  styleUrl: "./dynamic-form.component.scss"
-})
-export class DynamicFormComponent implements OnInit {
-  @Input({ required: true }) dynamicFormData: DynamicFormData;
-  inputsNames: string[] = [];
-  formGroup: FormGroup;
-  inputsMap: InputsMap;
-  readonly fieldType = FormFieldTypeEnum;
-  getFormControl = FormUtils.getFormControl;
-
-  ngOnInit(): void {
-    this.formGroup = this.dynamicFormData?.formGroup as FormGroup;
-    this.inputsMap = this.dynamicFormData?.inputsMap as InputsMap;
-    this.inputsNames = Object.keys(this.inputsMap || {});
-  }
-
-}

package/src/lib/dynamic-form/dynamic-form.interface.ts

@@ -1,56 +0,0 @@
-import {FormGroup} from "@angular/forms";
-import {LabelValue} from "../form-components";
-
-export type InputType = "text" | "textarea";
-export type InputContentType = "text" | "email" | "password" | "number";
-
-export interface Dropdown<T = unknown> {
-  id?: string;
-  keyValue: T;
-  label: string;
-  hidden?: boolean;
-  disabled?: boolean;
-}
-
-export interface InputsMapData {
-  // General props
-  label: string;
-  rowSize?: "half" | "full";
-  fieldType: FormFieldTypeEnum;
-  inputId?: string;
-
-  // Date
-  dateRange?: DateRangeInterface;
-  isTimeOnly?: boolean;
-  showIcon?: boolean;
-
-  //select button
-  selectButtonOptions?: LabelValue<any>[];
-}
-
-export interface InputsMap {
-  [key: string]: InputsMapData;
-}
-
-export interface DynamicFormData {
-  isActive?: boolean;
-  formGroup: FormGroup | null;
-  inputsMap: InputsMap | null;
-  title?: string;
-  isReadOnlyForm?: boolean;
-  formValidationErrorsKeys?: string[];
-}
-
-export interface DateRangeInterface {
-  min?: Date | null; // Static range, hard coded
-  max?: Date | null; // Static range, hard coded
-  notBeforeDateInput?: string; // For dynamic date range validation
-  notAfterDateInput?: string; // For dynamic date range validation
-  notBeforeOrSameDateInput?: string;
-  notAfterOrSameDateInput?: string;
-}
-
-export enum FormFieldTypeEnum {
-  DATE_PICKER = "date-picker",
-  SELECT_BUTTON = "select-button"
-}

package/src/lib/form-components/@utils/form-utils.ts

@@ -1,12 +0,0 @@
-import {FormControl, FormGroup} from "@angular/forms";
-
-export class FormUtils {
-  static getFormControl(controlName: string, form: FormGroup): FormControl {
-    if (!form) throw new Error(`Form is not initialized.`);
-    const formControl = form.get(controlName) as FormControl;
-
-    if (!formControl) throw new Error(`There's no form control with given name. '${controlName}'`);
-
-    return formControl;
-  }
-}

package/src/lib/form-components/@utils/validations/error-keys.enum.ts

@@ -1,24 +0,0 @@
-export enum BasicErrorKeysEnum {
-  required = "REQUIRED",
-  email = "EMAIL",
-  pattern = "PATTERN",
-  invalidArFormat = "INVALID_AR_FORMAT",
-  invalidLink = "INVALID_LINK",
-  endDateBeforeStartDate = "END_DATE_BEFORE_START_DATE",
-  startDateEqualsEndDate = "START_DATE_EQUALS_END_DATE",
-  endTimeBeforeStartTime = "END_TIME_BEFORE_START_TIME",
-  startTimeEqualsEndTime = "START_TIME_EQUALS_END_TIME",
-  integer = "INTEGER",
-  positiveNumber = "POSITIVE_NUMBER",
-  fileSelected = "FILE_SELECTED",
-  default = "DEFAULT"
-}
-export enum ErrorsWithValuesKeysEnum {
-  minlength = "MIN_LENGTH",
-  maxlength = "MAX_LENGTH",
-  min = "MIN",
-  max = "MAX",
-  maxSize = "MAX_SIZE",
-  maxFiles = "MAX_FILES",
-  allowedTypes = "ALLOWED_TYPES"
-}

package/src/lib/form-components/@utils/validations/form-validation.service.ts

@@ -1,53 +0,0 @@
-import { inject, Injectable } from "@angular/core";
-import { TranslateService } from "@ngx-translate/core";
-import { InterpolationParameters } from "@ngx-translate/core/lib/translate.service";
-import { BasicErrorKeysEnum, ErrorsWithValuesKeysEnum } from "./error-keys.enum";
-
-@Injectable({
-  providedIn: "root"
-})
-export class FormValidationService {
-  private translate = inject(TranslateService);
-
-  private getTranslation(key: string, interpolateParams?: InterpolationParameters): string {
-    return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
-  }
-
-  getErrorMessage(errorKey: string, errorValue: any): string {
-    if (this.isBasicErrorKey(errorKey)) {
-      return this.getTranslation(BasicErrorKeysEnum[errorKey as keyof typeof BasicErrorKeysEnum]);
-    }
-
-    if (this.isErrorWithValueKey(errorKey)) {
-      return this.getErrorWithValueMessage(errorKey as keyof typeof ErrorsWithValuesKeysEnum, errorValue);
-    }
-
-    return this.getTranslation(BasicErrorKeysEnum.default);
-  }
-
-  // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
-  private isBasicErrorKey(key: string): key is keyof typeof BasicErrorKeysEnum {
-    return Object.keys(BasicErrorKeysEnum).includes(key as BasicErrorKeysEnum);
-  }
-
-  // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
-  private isErrorWithValueKey(key: string): key is keyof typeof ErrorsWithValuesKeysEnum {
-    return Object.keys(ErrorsWithValuesKeysEnum).includes(key as ErrorsWithValuesKeysEnum);
-  }
-
-  private getErrorWithValueMessage(errorKey: keyof typeof ErrorsWithValuesKeysEnum, errorValue: any): string {
-    const messages: Record<keyof typeof ErrorsWithValuesKeysEnum, (value: any) => string> = {
-      minlength: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.minlength, { requiredLength: val?.requiredLength, actualLength: val?.actualLength }),
-      maxlength: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, { requiredLength: val?.requiredLength, actualLength: val?.actualLength }),
-      min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
-      max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
-      maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
-      maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
-      allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(", ") })
-    };
-
-    return messages[errorKey](errorValue);
-  }
-}

package/src/lib/form-components/@utils/validations/validation-message.pipe.ts

@@ -1,24 +0,0 @@
-import { inject, Pipe, PipeTransform } from "@angular/core";
-import { ValidationErrors } from "@angular/forms";
-import { FormValidationService } from "./form-validation.service";
-
-@Pipe({
-  name: "validationErrors",
-  standalone: true,
-  pure: true
-})
-export class ValidationErrorsPipe implements PipeTransform {
-  private formValidationService = inject(FormValidationService);
-
-  // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
-  // we pass this custom key to handle the error messages only for the allowed keys
-  transform(errors: ValidationErrors | null, allowedKeys?: string[]): string[] {
-    if (!errors) return [];
-
-    return Object.keys(errors)
-      .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
-      .map((errorKey) => {
-        return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
-      });
-  }
-}