@corp-products/ui-components 3.2.9 → 3.3.0

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

@@ -1,22 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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

@@ -1,33 +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-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

@@ -1,15 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,42 +0,0 @@
-<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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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

@@ -1,26 +0,0 @@
-
-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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,14 +0,0 @@
-/* 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"
-  ]
-}