@corp-products/ui-components 3.5.8 → 3.6.0

package/.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+};
+
+export default config;

package/debug-storybook.log

@@ -0,0 +1,53 @@
+[14:40:41.151] [INFO] storybook v10.2.1
+[14:40:41.896] [DEBUG] Getting package.json info for D:/stc projects/ui-components/projects/ui-components-lib/package.json...
+[14:40:42.170] [WARN] You are currently using Storybook 10.2.1 but you have packages which are incompatible with it:
+
+- @storybook/addon-essentials@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
+
+Please consider updating your packages or contacting the maintainers for compatibility details.
+
+For more details on compatibility guidance, see:
+https://github.com/storybookjs/storybook/issues/32836
+[14:40:42.185] [ERROR] SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/angular/preset.
+
+Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
+
+If you believe this is a bug, please open an issue on Github.
+
+Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/angular' imported from C:\Users\digi_\AppData\Local\npm-cache\_npx\6fe9a9991b157df1\node_modules\storybook\dist\_node-chunks\chunk-KYZVFZ4V.js
+    at packageResolve (node:internal/modules/esm/resolve:873:9)
+    at moduleResolve (node:internal/modules/esm/resolve:946:18)
+    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
+    at nextResolve (node:internal/modules/esm/hooks:864:28)
+    at Hooks.resolve (node:internal/modules/esm/hooks:306:30)
+    at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:831:20)
+    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
+
+More info: 
+
+    at loadPreset (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-R3KAQRS5.js:10081:13)
+    at async Promise.all (index 0)
+    at async loadPresets (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-R3KAQRS5.js:10090:73)
+    at async getPresets (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-R3KAQRS5.js:10121:23)
+    at async buildDevStandalone (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/core-server/index.js:7532:17)
+    at async withTelemetry (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-KNMEGL7N.js:218:12)
+    at async dev (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2734:3)
+    at async _Command.<anonymous> (file:///C:/Users/digi_/AppData/Local/npm-cache/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2801:92)
+[14:40:42.195] [WARN] Broken build, fix the error above.
+You may need to refresh the browser.
+[14:40:42.436] [WARN]   Failed to load preset: {"name":"D:/stc projects/ui-components/projects/ui-components-lib/node_modules/@storybook/addon-essentials/dist/preset.js"} on level 2
+[14:40:42.437] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- .\node_modules\@storybook\addon-essentials\dist\preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (.\node_modules\@storybook\addon-essentials\dist\preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui-components-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,36 +1,25 @@
-{
-  "name": "@corp-products/ui-components",
-  "version": "3.5.8",
-  "author": "shireen Omar",
-  "description": "shared UI components across our apps",
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0 <21.0.0",
-    "@angular/core": ">=17.0.0 <21.0.0",
-    "@angular/animations": ">=17.0.0 <21.0.0",
-    "primeng": ">=17.0.0 <21.0.0",
-    "@ngx-translate/core": ">=15.0.0 <18.0.0"
-  },
-  "keywords": [
-    "angular",
-    "library"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "sideEffects": false,
-  "module": "fesm2022/corp-products-ui-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/corp-products-ui-components.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+{
+  "name": "@corp-products/ui-components",
+  "version": "3.6.0",
+  "scripts": {
+    "storybook": "npx storybook dev -p 6006"
+  },
+  "author": "shireen Omar",
+  "description": "shared UI components across our apps",
+  "peerDependencies": {
+    "@angular/animations": ">=17.0.0 <21.0.0",
+    "@angular/common": ">=17.0.0 <21.0.0",
+    "@angular/core": ">=17.0.0 <21.0.0",
+    "@ngx-translate/core": ">=15.0.0 <18.0.0",
+    "primeng": ">=17.0.0 <21.0.0"
+  },
+  "keywords": [
+    "angular",
+    "library"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

package/src/enums/date-formatter.ts

@@ -0,0 +1,22 @@
+export enum DateFormats {
+  DATE_ONLY = "yyyy-MM-dd",
+  DATE_UTC = "yyyy-MM-dd'T'HH:mm:ss'Z'",
+  DATE_TIME_FULL = "dd MMMM yyyy - hh:mm a",
+  DATE_TIME_SEMI = "yyyy/MM/dd - hh:mm a",
+  DATE = "dd MMMM yyyy",
+  DATE_TWO = "yyyy/MM/dd",
+  DAY_ONLY = "cccc",
+  TIME_ONLY = "hh:mm",
+  AM_PM = "a",
+  TIME = 'hh:mm a',
+  YEAR = 'yyyy',
+  MONTH = "MM",
+  DAY = "dd"
+}
+
+export enum TimeFormats {
+  HOURS12Format = "hh",
+  HOURS24Format = "HH",
+  MINUTES = "mm",
+  SECONDS = "ss"
+}

package/src/helper/date-handler.ts

@@ -0,0 +1,142 @@
+import { DateTime, DateTimeMaybeValid, DateTimeOptions, LocaleOptions } from 'luxon';
+import { DateFormats, TimeFormats } from '../enums/date-formatter';
+
+export class DateHandler {
+  /**
+   * @param date `ISO string`
+   * @param format `format string`
+   * @param localeOptions `opts to override the configuration options on this DateTime` - default is system's locale
+   * @param isConvertedToUTC
+   * @description Returns a string representation of this DateTime formatted according to the specified format string.
+   */
+  static formatDate(
+    date: string,
+    format: DateFormats = DateFormats.DATE_TIME_FULL,
+    localeOptions?: LocaleOptions,
+    isConvertedToUTC?: boolean
+  ): string {
+    if (!date) {
+      return '';
+    }
+    return this.getDateTimeFromISO(date, isConvertedToUTC ? { zone: 'utc' } : {})
+      ?.toFormat(format, localeOptions)
+      .toLocaleString();
+  }
+
+  static getDateTimeFromISO(
+    date: string,
+    dateTimeOptions: DateTimeOptions = {}
+  ): DateTime<true> | DateTime<false> {
+    return DateTime.fromISO(date, dateTimeOptions);
+  }
+
+  static getJSDateFromISO(date: string): Date {
+    const dateTime = this.getDateTimeFromISO(date, { zone: 'utc' }); // Ensure it's in UTC
+    if (!dateTime.isValid) {
+      throw new Error('Invalid date format');
+    }
+    return new Date(
+      dateTime.year,
+      dateTime.month - 1,
+      dateTime.day,
+      dateTime.hour,
+      dateTime.minute,
+      dateTime.second,
+      dateTime.millisecond
+    );
+  }
+
+  static getUTCDateTime(date: string): string {
+    return this.getDateTimeFromISO(date)?.toUTC()?.toISO() as string;
+  }
+
+  static getUTCDateTimeFromJsDate(date: Date): string {
+    return this.getDateFromJsDate(new Date(date))?.toUTC()?.toISO() as string;
+  }
+
+  static getCurrentUTCDateTime(): string {
+    return DateTime.utc().toISO();
+  }
+
+  static getDateFromJsDate(date: Date): DateTimeMaybeValid {
+    return DateTime.fromJSDate(date);
+  }
+
+  static checkIfTwoDatesEqual(startDate: Date, endDate: Date): boolean {
+    return DateTime.fromJSDate(startDate).equals(DateTime.fromJSDate(endDate));
+  }
+
+  static getCurrentDateTime() {
+    return DateTime;
+  }
+
+  static constructDateTime(date: Date, time: Date, isConvertedToUTC?: boolean) {
+    const dateYear = this.getPartialDateOrTime(date, DateFormats.YEAR);
+    const dateMonth = this.getPartialDateOrTime(date, DateFormats.MONTH);
+    const dateDay = this.getPartialDateOrTime(date, DateFormats.DAY);
+
+    const dateHours = this.getPartialDateOrTime(time, TimeFormats.HOURS24Format, isConvertedToUTC);
+    const dateMinutes = this.getPartialDateOrTime(time, TimeFormats.MINUTES, isConvertedToUTC);
+    const dateSeconds = this.getPartialDateOrTime(time, TimeFormats.SECONDS, isConvertedToUTC);
+
+    return DateTime.utc(+dateYear, +dateMonth, +dateDay, +dateHours, +dateMinutes, +dateSeconds)
+      .toUTC()
+      .toISO();
+  }
+
+  static getPartialDateOrTime(
+    date: Date,
+    format: TimeFormats | DateFormats,
+    isConvertedToUTC?: boolean
+  ) {
+    return DateTime.fromJSDate(date, isConvertedToUTC ? { zone: 'utc' } : {}).toFormat(format);
+  }
+
+  static getValueFromJSDate(date: Date, unit: 'year' | 'month' | 'day'): number {
+    const dt = DateTime.fromJSDate(date);
+    switch (unit) {
+      case 'year':
+        return dt.year;
+      case 'month':
+        return dt.month;
+      case 'day':
+        return dt.day;
+      default:
+        throw new Error(`Unsupported unit: ${unit}`);
+    }
+  }
+
+  static getValueFromLocalDateTime(unit: 'hour' | 'minute' | 'second'): number {
+    const now = DateTime.local();
+    switch (unit) {
+      case 'hour':
+        return now.hour;
+      case 'minute':
+        return now.minute;
+      case 'second':
+        return now.second;
+      default:
+        throw new Error(`Unsupported unit: ${unit}`);
+    }
+  }
+
+  static getISODateTime(date: Date): string {
+    if (!date) {
+      throw new Error('Invalid date: date is null or undefined');
+    }
+
+    // Create a DateTime instance from the JS Date, preserving the date parts
+    // but using local time for the time parts
+    const dt = DateTime.local().set({
+      year: DateTime.fromJSDate(date).year,
+      month: DateTime.fromJSDate(date).month,
+      day: DateTime.fromJSDate(date).day,
+      hour: DateTime.local().hour,
+      minute: DateTime.local().minute,
+      second: DateTime.local().second,
+      millisecond: DateTime.local().millisecond,
+    });
+
+    return dt.toISO() as string;
+  }
+}

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

@@ -0,0 +1,22 @@
+@if (dynamicDialogConfig.data) {
+  <div class="alert-dialog">
+    <div class="dialog-wrapper">
+      @if (dynamicDialogConfig.data) {
+        <div class="alert-dialog__content my-4">
+          @if (dynamicDialogConfig.data.dialogIcon) {
+            <em [class]="dynamicDialogConfig.data.dialogIcon"></em>
+          }
+          <p class="alert-dialog__message mb-2">
+            {{ dynamicDialogConfig.data.message }}
+          </p>
+        </div>
+      }
+      <div class="alert-dialog__actions flex gap-2 mt-4">
+        <app-button [severity]="'primary'" variant="outlined"
+          [label]="dynamicDialogConfig.data.cancelBtnLabel??('actions.close' | translate)"
+          [id]="dynamicDialogConfig.data.cancelBtnId??'button_close_alert'" [styleClass]="'cancel-btn alert-btn'"
+          (click)="close()" />
+      </div>
+    </div>
+  </div>
+}

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

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

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

@@ -0,0 +1,44 @@
+import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { AvatarModule } from 'primeng/avatar';
+import {
+  DynamicDialogConfig,
+  DynamicDialogModule,
+  DynamicDialogRef,
+  DynamicDialogStyle
+} from 'primeng/dynamicdialog';
+import { AppButtonComponent } from '../app-button';
+@Component({
+  selector: 'app-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    AppButtonComponent,
+    AvatarModule,
+    DynamicDialogModule,
+    TranslatePipe,
+  ],
+  providers: [DynamicDialogStyle],
+})
+export class AlertDialogComponent extends DynamicDialogRef implements OnInit {
+  private readonly router = inject(Router);
+  readonly dynamicDialogConfig = inject(DynamicDialogConfig);
+  private readonly _destroyRef = inject(DestroyRef);
+  private readonly _ref = inject(DynamicDialogRef);
+
+  ngOnInit() {
+    this.router.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+      if (this.dynamicDialogConfig) {
+        this._ref.close(false);
+      }
+    })
+  }
+
+  override close() {
+    this._ref.close(false);
+  }
+}

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

@@ -0,0 +1,6 @@
+export interface AlertDialogData {
+  header: string;
+  message: string;
+  cancelBtnId?: string;
+  cancelBtnLabel?: string;
+}

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

@@ -0,0 +1,33 @@
+import { inject, Injectable } from '@angular/core';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Observable, of } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { AlertDialogComponent } from './alert-dialog.component';
+import { AlertDialogData } from './alert-dialog.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AlertDialogService {
+  private readonly dialogService = inject(DialogService);
+
+  open(data: AlertDialogData): Observable<boolean> {
+    const ref: DynamicDialogRef | null = this.dialogService.open(AlertDialogComponent, {
+      data,
+      header: data.header,
+      showHeader: true,
+      width: '600px',
+      closable: true,
+      modal: true,
+      styleClass: 'alert-dialog-wrapper',
+    });
+    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/app-accordion/app-accordion.component.html

@@ -0,0 +1,15 @@
+<p-accordion value="0">
+  <p-accordion-panel value="0" [class.!border-0]="!accordionPanelBorder">
+    <p-accordion-header>
+            <span class="flex items-center gap-2 w-full">
+                <app-ico-moon-card [iconClass]="'text-[24px] text-secondary'" [iconName]="'font-icon-'+iconName" />
+                <span class="font-bold whitespace-nowrap">{{title}}</span>
+            </span>
+    </p-accordion-header>
+    <p-accordion-content>
+      <div [ngClass]="{'border-t-2 border-gray-light pt-2': contentBorderTop, }">
+        <ng-content></ng-content>
+      </div>
+    </p-accordion-content>
+  </p-accordion-panel>
+</p-accordion>

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

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

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

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { IcoMoonIconComponent } from '../ico-moon-icon/ico-moon-icon.component';
+import { AccordionModule } from 'primeng/accordion';
+import { DividerModule } from 'primeng/divider';
+
+@Component({
+  selector: "app-accordion",
+  standalone: true,
+  imports: [CommonModule, DividerModule, AccordionModule, IcoMoonIconComponent],
+  templateUrl: "./app-accordion.component.html",
+  styleUrl: "./app-accordion.component.scss"
+})
+export class AppAccordionComponent {
+  @Input() iconName!: string;
+  @Input() iconClass!: string;
+  @Input() iconPathCount = 0;
+  @Input({required: true}) title!: string;
+  @Input() contentBorderTop: boolean = true;
+  @Input() accordionPanelBorder: boolean = true;
+}

package/src/lib/app-accordion/index.ts

@@ -0,0 +1,2 @@
+// export * from './app-button';
+export * from './app-accordion.component';

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

@@ -0,0 +1,7 @@
+@if(isShown) {
+<nav class="flex gap-x-3 text-[12px] w-full items-center mb-5">
+  <div class="card flex justify-center">
+    <p-breadcrumb [model]="items"></p-breadcrumb>
+  </div>
+</nav>
+}

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

@@ -0,0 +1,25 @@
+.p-breadcrumb-list {
+  li:first-child a {
+    @apply text-secondary;
+  }
+  .p-breadcrumb-separator {
+    transform: scale(0.7);
+    display: none;
+  }
+}
+.p-breadcrumb-item:not(:last-of-type) {
+  .p-breadcrumb-item-link {
+    padding: 0 4px;
+  }
+  .p-breadcrumb-item-label {
+     @apply text-light_red relative;
+    &:hover {
+        @apply text-light_red;
+    }
+    &::before {
+      content: '/';
+      @apply inline-block absolute text-gray-900;
+      inset-inline-end: -9px;
+    }
+  }
+}