@corp-products/ui-components 3.2.8 → 3.2.9

package/src/lib/side-bar/side-bar.component.scss

@@ -0,0 +1,22 @@
+.sidebar {
+  &.show {
+    @apply min-w-[550px];
+  }
+}
+
+.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;
+}
+
+.p-drawer-footer{
+  --p-drawer-footer-padding: 0.75rem var(--p-overlay-modal-padding);
+}
+
+.p-drawer-content{
+  padding-top: var(--p-overlay-modal-padding) !important;
+}

package/src/lib/side-bar/side-bar.component.spec.ts

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

package/src/lib/side-bar/side-bar.component.ts

@@ -0,0 +1,33 @@
+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-side-bar",
+  standalone: true,
+  imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule],
+  templateUrl: "./side-bar.component.html",
+  styleUrl: "./side-bar.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class SideBarComponent {
+  @Input() show = false;
+  @Input() title: string;
+  @Input() closable = true;
+  @Input() dismissible = false;
+  @Input() closeOnEscape = false;
+  @Input() sidebarSize: "sm" | "md" | "lg" | "xl" = "sm";
+  @Input() styleClass = "";
+  @Output() hide = new EventEmitter<boolean>();
+  @Output() onShow = new EventEmitter<boolean>();
+  @Input() contentTemplate!: TemplateRef<unknown>;
+  @Input() footerTemplate!: TemplateRef<unknown>;
+  @Input() position  = 'left';
+
+  hideSidebar() {
+    this.show = false;
+    this.hide.emit(false);
+  }
+}

package/src/lib/side-bar-dynamic/data-injector.pipe.ts

@@ -0,0 +1,15 @@
+import {inject, Injector, Pipe, PipeTransform} from '@angular/core';
+import { createCustomInjector, SIDEBAR_DATA } from './side-bar-utils';
+
+@Pipe({
+  name: 'dataInjector',
+  standalone: true,
+  pure: true
+})
+export class DataInjectorPipe implements PipeTransform {
+  injector = inject(Injector);
+
+  transform(data: unknown): Injector {
+    return createCustomInjector(this.injector, SIDEBAR_DATA, data);
+  }
+}

package/src/lib/side-bar-dynamic/dynamic-sidebar.service.ts

@@ -0,0 +1,116 @@
+import { ApplicationRef, ComponentRef, createComponent, EmbeddedViewRef, EnvironmentInjector, Injectable, Type } from "@angular/core";
+import { AbstractControl } from "@angular/forms";
+import { BehaviorSubject, Subject } from "rxjs";
+import { SideBarDynamicComponent } from "./side-bar-dynamic.component";
+import { SidebarConfig, SidebarConfigDefaults } from "./sidebar-config";
+import { SidebarActionEvent, SidebarActionType } from "./side-bar-utils";
+
+@Injectable({
+  providedIn: "root"
+})
+export class DynamicSidebarService {
+  contentComponentRef: Type<any> | null = null;
+  contentComponentData: unknown;
+  sidebarConfig: SidebarConfig = this.getDefaultConfig();
+  activeForm: AbstractControl | null = null;
+  private componentRef: ComponentRef<SideBarDynamicComponent> | null = null;
+  private sidebarAction$ = new Subject<SidebarActionEvent>();
+  action$ = this.sidebarAction$.asObservable();
+  private sidebarSideEffectAction$ = new Subject<SidebarActionEvent>();
+  sideEffectAction$ = this.sidebarSideEffectAction$.asObservable();
+  private isOpen$ = new BehaviorSubject<boolean>(false);
+  isOpenObservable$ = this.isOpen$.asObservable();
+
+  constructor(private environmentInjector: EnvironmentInjector, private appRef: ApplicationRef) {}
+
+// Action notifications
+  notifyAction(type: SidebarActionType, payload?: any): void {
+    this.sidebarAction$.next({type, payload});
+  }
+
+  notifySideEffectAction(type: SidebarActionType, payload?: any): void {
+    this.sidebarSideEffectAction$.next({type, payload});
+  }
+
+  // Form management
+  setActiveForm(control: AbstractControl): void {
+    this.activeForm = control;
+  }
+
+  resetActiveForm(): void {
+    this.activeForm = null;
+  }
+
+  isButtonDisabled(): boolean {
+    if (!this.activeForm) {
+      return false;
+    }
+    return this.activeForm.invalid || this.activeForm.untouched;
+  }
+
+  open(component: unknown, config: SidebarConfig, data?: any): void {
+    // Close any existing sidebar before opening a new one
+    // TODO Need to Review
+    if (!component) {
+      return;
+    }
+
+    this.close();
+    this.contentComponentRef = component as Type<any>;
+    this.contentComponentData = data;
+    this.sidebarConfig = {...this.getDefaultConfig(), ...config};
+
+    this.componentRef = createComponent(SideBarDynamicComponent, {
+      environmentInjector: this.environmentInjector,
+    });
+    // Attach the component to the Angular application
+    this.appRef.attachView(this.componentRef.hostView);
+
+    // Append the component to the DOM
+    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+  }
+
+  /**
+   * Closes the currently open sidebar, if any.
+   */
+  close(): void {
+    if (this.componentRef) {
+      // Detach the view and destroy the component
+      this.appRef.detachView(this.componentRef.hostView);
+      this.componentRef.destroy();
+      this.componentRef = null;
+
+      // Reset content and configuration
+      this.contentComponentRef = null;
+      this.contentComponentData = null;
+      this.sidebarConfig = this.getDefaultConfig();
+      this.isOpen$.next(false);
+      this.resetActiveForm();
+      this.notifySideEffectAction(SidebarActionType.CLOSE);
+    }
+  }
+
+  cancel(): void {
+    this.notifyAction(SidebarActionType.CANCEL);
+  }
+
+  submit(flag: boolean = false): void {
+    const actionType = flag ? SidebarActionType.SaveMore : SidebarActionType.SAVE;
+    this.notifyAction(actionType, {withClose: flag});
+  }
+
+  /**
+   * Provides the default configuration for the sidebar.
+   * @returns The default SidebarConfig object.
+   */
+  private getDefaultConfig(): SidebarConfig {
+    return {
+      ...SidebarConfigDefaults,
+      show: false,
+      visible: false,
+      closable: false,
+      dismissible: true
+    };
+  }
+}

package/src/lib/side-bar-dynamic/side-bar-dynamic.component.html

@@ -0,0 +1,42 @@
+<p-drawer (onHide)="dynamicSidebarService.close()" [(visible)]="sidebarConfig.visible"
+  [closable]="sidebarConfig.closable" [closeOnEscape]="sidebarConfig.closeOnEscape"
+  [dismissible]="sidebarConfig.dismissible" [ngClass]="{ show: sidebarConfig.show }" [position]="'left'" appendTo="body"
+  id="main-drawer"
+  styleClass="p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}">
+  <ng-template pTemplate="header">{{ sidebarConfig.title }}</ng-template>
+  <ng-template pTemplate="content">
+    <ng-container [ngComponentOutletInjector]="dynamicSidebarService.contentComponentData | dataInjector"
+      [ngComponentOutlet]="dynamicSidebarService.contentComponentRef"></ng-container>
+  </ng-template>
+  @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {
+  <ng-template pTemplate="footer">
+    <section class="flex justify-between bg-gray-200 py-4" id="sidebar-footer">
+      <div class="flex gap-2">
+        @if (sidebarConfig.showSaveBtn) {
+        <app-button (clickEmitter)="dynamicSidebarService.submit(true)"
+          [disabled]="dynamicSidebarService.isButtonDisabled()"
+          [icon]="sidebarConfig!.actions!.save!.icon || 'font-icon-plus'"
+          [iconPos]="sidebarConfig!.actions!.save!.iconPos || 'right'"
+          [styleClass]="sidebarConfig!.actions!.save!.style || 'danger'"
+          [title]="sidebarConfig!.actions!.save!.title || ('actions.save' | translate)"
+          [variant]="sidebarConfig!.actions!.save!.variant" />
+        }
+        @if (sidebarConfig.showSaveAndMoreBtn) {
+        <app-button (clickEmitter)="dynamicSidebarService.submit()"
+          [disabled]="dynamicSidebarService.isButtonDisabled()"
+          [icon]="sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'"
+          [iconPos]="sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'"
+          [styleClass]="sidebarConfig!.actions!.saveAndMore!.style || 'danger'"
+          [title]="sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)"
+          [variant]="sidebarConfig!.actions!.saveAndMore!.variant" />
+
+        }
+      </div>
+      @if (sidebarConfig.showCancelBtn) {
+      <app-button (clickEmitter)="dynamicSidebarService.cancel()" [styleClass]="'secondary'"
+        [title]="'actions.cancel' | translate" />
+      }
+    </section>
+  </ng-template>
+  }
+</p-drawer>

package/src/lib/side-bar-dynamic/side-bar-dynamic.component.scss

@@ -0,0 +1,5 @@
+.sidebar {
+  &.show {
+    min-width: 550px;
+  }
+}

package/src/lib/side-bar-dynamic/side-bar-dynamic.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DynamicSideBarComponent } from 'libs/ui-components/src/lib/dynamic-side-bar/dynamic-side-bar.component';
+
+describe('SideBarComponent', () => {
+  let component: DynamicSideBarComponent;
+  let fixture: ComponentFixture<DynamicSideBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DynamicSideBarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DynamicSideBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/side-bar-dynamic/side-bar-dynamic.component.ts

@@ -0,0 +1,37 @@
+import {NgClass, NgComponentOutlet} from "@angular/common";
+import {Component, inject, Injector, OnDestroy, OnInit} from '@angular/core';
+import {PrimeTemplate} from "primeng/api";
+import {Drawer} from "primeng/drawer";
+import { Location } from '@angular/common';
+import {TranslatePipe} from "@ngx-translate/core";
+import { DataInjectorPipe } from "./data-injector.pipe";
+import { AppButtonComponent } from "../app-button";
+import { DynamicSidebarService } from "./dynamic-sidebar.service";
+import { createCustomInjector, SIDEBAR_DATA } from "./side-bar-utils";
+@Component({
+  selector: "app-side-bar-dynamic",
+  templateUrl: "./side-bar-dynamic.component.html",
+  styleUrls: ["./side-bar-dynamic.component.scss"],
+  standalone: true,
+  imports: [Drawer, NgClass, NgComponentOutlet, PrimeTemplate, DataInjectorPipe, AppButtonComponent, TranslatePipe]
+})
+export class SideBarDynamicComponent implements OnInit, OnDestroy {
+  dynamicSidebarService = inject(DynamicSidebarService);
+  parentInjector = inject(Injector);
+  location = inject(Location);
+  private popStateListener: any;
+  sidebarConfig = this.dynamicSidebarService.sidebarConfig;
+  ngOnInit() {
+    //To close a sidebar when the browser back button is pressed
+    this.popStateListener = this.location.subscribe(() => {
+      if (this.dynamicSidebarService.sidebarConfig.visible) {
+        this.dynamicSidebarService.close();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    // reset Sidebar token
+    createCustomInjector(this.parentInjector, SIDEBAR_DATA, null);
+  }
+}

package/src/lib/side-bar-dynamic/side-bar-utils.ts

@@ -0,0 +1,30 @@
+import {InjectionToken, Injector} from "@angular/core";
+
+export const SIDEBAR_DATA = new InjectionToken<any>('SIDEBAR_DATA');
+
+export function createCustomInjector(parentInjector: Injector, injectionToken: InjectionToken<unknown>, data: unknown): Injector {
+  return Injector.create({
+    parent: parentInjector,
+    providers: [
+      {
+        provide: injectionToken,
+        useValue: data ?? null
+      }
+    ]
+  })
+};
+
+
+export enum SidebarActionType {
+  SAVE = 'SAVE',
+  SaveMore = 'SaveMore',
+  CANCEL = 'CANCEL',
+  SUBMIT = 'SUBMIT',
+  CLOSE = 'CLOSE',
+  CloseWithData = 'CloseWithData',
+}
+
+export interface SidebarActionEvent {
+  type: SidebarActionType;
+  payload?: any;
+}

package/src/lib/side-bar-dynamic/sidebar-config.ts

@@ -0,0 +1,48 @@
+import { AppButtonIconPos, AppButtonSeverity, AppButtonSize, AppButtonVariant } from "../app-button";
+
+export interface SidebarActionConfig {
+  title?: string;
+  icon?: string;
+  size?: AppButtonSize;
+  style?: AppButtonSeverity;
+  iconPos?: AppButtonIconPos;
+  variant?: AppButtonVariant;
+}
+
+export interface SidebarConfig {
+  title: string;
+  show: boolean;
+  visible: boolean;
+  closable: boolean;
+  dismissible: boolean;
+  closeOnEscape: boolean;
+  sidebarSize: "sm" | "md" | "lg" | "xl";
+  styleClass?: string;
+  showCancelBtn: boolean;
+  showSaveBtn: boolean;
+  showSaveAndMoreBtn: boolean;
+  actions?: {
+    cancel?: SidebarActionConfig;
+    save?: SidebarActionConfig;
+    saveAndMore?: SidebarActionConfig;
+  };
+}
+
+export const SidebarConfigDefaults: SidebarConfig = {
+  title: "",
+  show: true,
+  visible: true,
+  closable: true,
+  dismissible: false,
+  closeOnEscape: false,
+  sidebarSize: "md",
+  showCancelBtn: false,
+  showSaveBtn: false,
+  showSaveAndMoreBtn: false,
+  actions: {
+    save: {},
+    saveAndMore: {
+      variant: "outlined"
+    }
+  }
+};

package/src/lib/user-autocomplete-card/user-autocomplete-card.component.html

@@ -0,0 +1,20 @@
+<div class="flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100">
+  <div class="flex gap-4 items-center">
+    <img [alt]="userData.name" [src]="userData.profileImage" class="rounded-full object-cover w-[48px] h-[48px]" />
+    <div class="flex flex-col justify-end">
+      <h4 class="font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr">
+        {{ userData.name }}
+      </h4>
+      <p class="text-[12px] text-gray-700">{{ explicitRole ? explicitRole : userData.position.name }}</p>
+    </div>
+  </div>
+  <div class="flex-1 flex flex-col items-end">
+    <p class="text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr">{{ userData.email }}</p>
+    <p class="text-[12px] text-gray-600 dir-ltr">{{ userData.contact.mobile }}</p>
+  </div>
+  @if (showDeleteAction){
+    <div class="flex gap-1 flex-nowrap">
+      <app-button (clickEmitter)="onDelete()" [rounded]="true" [size]="'large'" [text]="true" icon="font-icon-trash"/>
+    </div>
+  }
+</div>

package/src/lib/user-autocomplete-card/user-autocomplete-card.component.spec.ts

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

package/src/lib/user-autocomplete-card/user-autocomplete-card.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
+import { AppButtonComponent } from "../app-button";
+
+@Component({
+  selector: "app-user-autocomplete-card",
+  standalone: true,
+  imports: [AppButtonComponent],
+  templateUrl: "./user-autocomplete-card.component.html",
+  styleUrl: "./user-autocomplete-card.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UserAutocompleteCardComponent {
+  @Output() select = new EventEmitter<any>();
+  @Output() delete = new EventEmitter<any>();
+  @Input({ required: true }) userData: any;
+  @Input() explicitRole = "";
+  @Input() showDeleteAction = true;
+  onDelete() {
+    this.delete.emit(this.userData);
+  }
+}

package/src/lib/user-info/user-info.component.html

@@ -0,0 +1,10 @@
+<div class="flex items-center gap-2">
+  <img
+    [alt]="name"
+    [src]="profileImage"
+    class="rounded-full object-cover w-[24px] h-[24px]"
+    height="24"
+    width="24"
+  />
+  <p class="text-[14px]">{{ name }}</p>
+</div>

package/src/lib/user-info/user-info.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "user-info",
+  templateUrl: "./user-info.component.html",
+  standalone: true
+})
+export class UserInfoComponent {
+  @Input() profileImage: string;
+  @Input() name: string;
+}

package/src/public-api.ts

@@ -0,0 +1,26 @@
+
+export * from './lib/app-button';
+export * from './lib/app-tabs';
+export * from './lib/app-dropdown-menu';
+export * from './lib/side-bar/side-bar.component';
+export * from './lib/ico-moon-icon/ico-moon-icon.component';
+export * from './lib/user-info/user-info.component';
+export * from './lib/confirmation-dialog/confirmation-dialog.component';
+export * from './lib/read-more/read-more.component';
+export * from './lib/app-accordion/app-accordion.component';
+export * from './lib/dynamic-form/dynamic-form.interface';
+export * from './lib/dynamic-form/dynamic-form.component';
+export * from './lib/form-components';
+export * from './lib/user-autocomplete-card/user-autocomplete-card.component';
+export * from './lib/app-breadcrumb/app-breadcrumb.component';
+export * from './lib/app-breadcrumb/app-breadcrumb.interface';
+export * from './lib/side-bar-dynamic/dynamic-sidebar.service';
+export * from './lib/side-bar-dynamic/sidebar-config';
+export * from './lib/confirmation-dialog/confirmation-dialog.service';
+export * from './lib/confirmation-dialog/confirmation-dialog.interface';
+export * from './lib/bottom-sheet/bottom-sheet.component';
+export * from './lib/dynamic-side-bar-v2/dynamic-sidebar.service';
+export * from './lib/dynamic-side-bar-v2/dynamic-sidebar.config';
+export * from './lib/dual-calender/dual-calendar.component';
+
+

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}