@corp-products/ui-components 3.2.8 → 3.2.9

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,22 @@
-{
-  "name": "@corp-products/ui-components",
-  "version": "3.2.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.2.9",
+  "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
+}

package/src/enums/date-formatter.ts

@@ -0,0 +1,21 @@
+export enum DateFormats {
+  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/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;
+    }
+  }
+}

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

@@ -0,0 +1,140 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { filter } from 'rxjs';
+import { BreadCrumbExtraData, BreadcrumbItem } from './app-breadcrumb.interface';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './app-breadcrumb.component.html',
+  styleUrl: './app-breadcrumb.component.scss',
+  standalone: true,
+  imports: [CommonModule, Breadcrumb, RouterModule],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppBreadcrumbComponent implements OnInit {
+  @Input() items: BreadcrumbItem[] | undefined;
+  isShown: boolean;
+
+  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
+
+  ngOnInit(): void {
+    if (this.items) {
+      this.isShown = true;
+      return;
+    }
+    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => {
+      // remove duplicates
+      this.items = (this._createBreadcrumbs(this.activatedRoute.root) as BreadcrumbItem[]).filter(
+        (item, index, self) =>
+          index ===
+          self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink)
+      );
+      this._checkHiddenBreadcrumb();
+      this._checkEmpty();
+    });
+  }
+
+  private _checkHiddenBreadcrumb() {
+    const activeBreadcrumb = this.items?.find((item) => {
+      return item.routerLink === this.router.url;
+    });
+    this.isShown = !!activeBreadcrumb?.isShown;
+  }
+
+  private _createBreadcrumbs(
+    activatedRoute: ActivatedRoute,
+    routerLink = '',
+    breadcrumbs: MenuItem[] = []
+  ): any {
+    const children: ActivatedRoute[] = activatedRoute.children;
+
+    if (children.length === 0) {
+      return breadcrumbs;
+    }
+
+    for (const child of children) {
+      const routeURL: string = child.snapshot.url.map((segment) => segment.path).join('/');
+      if (routeURL !== '') {
+        routerLink += `/${routeURL}`;
+      }
+
+      let label = child.snapshot.data['breadcrumb'];
+      const notClickableBreadcrumb = !!child.snapshot.data['notClickableBreadcrumb'];
+      const isShown = !!child.snapshot.data['isShown'];
+      const extraBreadcrumbs: BreadCrumbExtraData[] = child.snapshot.data['extraBreadcrumbs'] || [];
+      if (!(typeof label === 'undefined' || label === null)) {
+        const data = activatedRoute.snapshot.firstChild?.data || {};
+        // Resolve dynamic breadcrumb label
+        if (label && label.startsWith('[') && label.endsWith(']')) {
+          label = this._getRecursiveKey(data, label.slice(1, -1).split('.'));
+        }
+
+        // Resolve dynamic URL parts
+        const resolveDynamicUrl = (route: string): string => {
+          return route.replace(
+            /\[([^\]]+)]/g,
+            (_, key) => this._getRecursiveKey(data, key.split('.')) || ''
+          );
+        };
+
+        const mainBreadcrumb: MenuItem = {
+          label,
+          routerLink,
+          data,
+          notClickableBreadcrumb,
+          isShown,
+        };
+
+        // Process extra breadcrumbs
+        const beforeBreadcrumbs: MenuItem[] = [];
+        const afterBreadcrumbs: MenuItem[] = [];
+
+        extraBreadcrumbs.forEach((extra) => {
+          let extraLabel = extra.label || '';
+          if (extraLabel.startsWith('[') && extraLabel.endsWith(']')) {
+            extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split('.'));
+          }
+
+          const extraUrl = resolveDynamicUrl(extra.routerLink || '');
+
+          const extraBreadcrumb: MenuItem = { ...extra, label: extraLabel, routerLink: extraUrl };
+
+          if (extra.position === 'before') {
+            beforeBreadcrumbs.push(extraBreadcrumb);
+          } else {
+            afterBreadcrumbs.push(extraBreadcrumb);
+          }
+        });
+
+        // Merge breadcrumbs
+        breadcrumbs.push(...beforeBreadcrumbs, mainBreadcrumb, ...afterBreadcrumbs);
+      }
+      return this._createBreadcrumbs(child, routerLink, breadcrumbs);
+    }
+  }
+
+  private _checkEmpty() {
+    if (!this.items) return;
+    const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShown;
+    this.items = this.items.filter((b) => b.label !== '');
+    this.items[this.items.length - 1].isShown = lastBreadcrumbVisibility;
+  }
+
+  private _getRecursiveKey(obj: Record<string, any>, keys: string[]): any | undefined {
+    if (keys.length === 0) {
+      return undefined;
+    }
+
+    const [currentKey, ...remainingKeys] = keys;
+    if (currentKey in obj) {
+      if (remainingKeys.length > 0) {
+        return this._getRecursiveKey(obj[currentKey], remainingKeys);
+      }
+      return obj[currentKey];
+    }
+    return undefined;
+  }
+}

package/src/lib/app-breadcrumb/app-breadcrumb.interface.ts

@@ -0,0 +1,15 @@
+import { MenuItem } from 'primeng/api';
+
+export interface BreadcrumbItem {
+  notClickable: boolean;
+  label: string;
+  routerLink: string;
+  isShown: boolean;
+  extraBreadcrumbs?: BreadCrumbExtraData[];
+}
+
+export interface BreadCrumbPosition {
+  position: 'before' | 'after';
+}
+
+export type BreadCrumbExtraData = MenuItem & BreadCrumbPosition;

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

@@ -0,0 +1,7 @@
+<p-button (onFocus)="onFocus.emit()" (onBlur)="onBlur.emit()" (onClick)="onClick.emit()" [size]="size"
+  [loadingIcon]="loadingIcon" [disabled]="disabled" [iconPos]="iconPos" [icon]="icon" [label]="label"
+  [rounded]="rounded" [severity]="severity" [styleClass]="styleClass" [text]="text" [variant]="variant"
+  [loading]="loading" [autofocus]="autofocus" [link]="link" [plain]="plain" [raised]="raised"
+  [loadingIcon]="loadingIcon" [style]="style" [outlined]="outlined">
+  <ng-content></ng-content>
+</p-button>

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

@@ -0,0 +1,14 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
+
+@Component({
+  imports: [ButtonModule],
+  selector: 'app-button',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  styleUrl: './app-button.component.scss',
+  templateUrl: './app-button.component.html',
+  providers: [ButtonStyle],
+})
+export class AppButtonComponent extends Button {
+}

package/src/lib/app-button/app-button.ts

@@ -0,0 +1,15 @@
+export type AppButtonSeverity =
+  | 'success'
+  | 'info'
+  | 'warn'
+  | 'danger'
+  | 'help'
+  | 'primary'
+  | 'secondary'
+  | 'contrast';
+
+export type AppButtonSize = 'large' | 'small';
+
+export type AppButtonIconPos = 'left' | 'right' | 'top' | 'bottom';
+
+export type AppButtonVariant = 'outlined' | 'text' | undefined;

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

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

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.html

@@ -0,0 +1,22 @@
+@if (showMenu) {
+<app-button (click)="op.toggle($event)" [class]="buttonClass" [iconPos]="buttonIconPosition" [icon]="buttonIcon"
+  [title]="buttonTitle" [styleClass]="buttonStyle" />
+}
+<p-popover #op [styleClass]="popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'">
+  <div class="flex flex-col gap-4 text-sm md:text-xs">
+    <ul>
+      @for (item of menuItems; track $index) {
+      @if (item.show) {
+      <li [ngClass]="{'flex-row-reverse': item.iconPosition === 'right'}"
+        [class]="'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)"
+        (click)="onMenuItemClick(item)">
+        {{ item.title | translate }}
+        @if (item.icon) {
+        <i [class]="item.icon"></i>
+        }
+      </li>
+      }
+      }
+    </ul>
+  </div>
+</p-popover>

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.scss

@@ -0,0 +1,39 @@
+.p-popover.p-component {
+  box-shadow: none;
+  &:is(.purple-menu) {
+    @apply bg-primary text-white text-sm mt-2;
+    li:not(:last-child) {
+      @apply border-b-2 border-purple-700;
+    }
+  }
+  &:is(.white-menu) {
+    li:not(:last-child) {
+      @apply border-b;
+    }
+  }
+  border-radius: 3px;
+  margin-top: 13px;
+  &::before, &::after {
+    display: none;
+  }
+  .p-popover-content {
+    width: auto;
+    min-width: unset;
+
+    ul {
+      li {
+        @apply py-3;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+      li:first-child {
+        @apply pt-0
+      }
+      li:last-child {
+        @apply pb-0
+      }
+    }
+
+  }
+}

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.spec.ts

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

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.ts

@@ -0,0 +1,43 @@
+import {Component, inject, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import { AppButtonComponent } from '../app-button';
+import { Popover } from 'primeng/popover';
+import { DropdownMenuItem } from './app-dropdown-menu';
+import {Router} from '@angular/router';
+import {AppButtonIconPos, AppButtonSeverity} from '../app-button';
+import { TranslateModule } from '@ngx-translate/core';
+import {NgClass} from "@angular/common";
+import {MenuPopupTextColorPipe} from "./menu-popup.pipe";
+
+@Component({
+  selector: "app-dropdown-menu",
+  standalone: true,
+  imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe],
+  templateUrl: "./app-dropdown-menu.component.html",
+  styleUrl: "./app-dropdown-menu.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class AppDropdownMenuComponent implements OnInit {
+  @Input({ required: true }) buttonTitle: string;
+  @Input({ required: true }) menuItems: DropdownMenuItem[] = [];
+  @Input() popupMenuStyle: "white" | "purple" = "purple";
+  @Input() buttonIcon = "font-icon-plus";
+  @Input() buttonClass: string;
+  @Input() buttonStyle: AppButtonSeverity;
+  @Input() buttonIconPosition: AppButtonIconPos = "left";
+  router = inject(Router);
+
+  showMenu: boolean;
+
+  ngOnInit() {
+    this.showMenu = this.menuItems.some((item) => {
+      return item.show;
+    });
+  }
+  onMenuItemClick(item: DropdownMenuItem): void {
+    if (item.callback) {
+      item.callback();
+    } else if (item.routerLink) {
+      this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
+    }
+  }
+}