@corp-products/ui-components 3.5.9 → 3.6.1

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,29 @@
+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';
+export * from './lib/dual-calender/utils/date-i18n.utils';
+export * from './lib/alert-dialog/alert-dialog.component';
+export * from './lib/alert-dialog/alert-dialog.service';
+export * from './lib/alert-dialog/alert-dialog.interface';
+export * from './lib/form-components/components/date-picker/date-picker.validator';
+export * from './lib/form-components/@utils/validations/numbers-only.validator';

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"
+  ]
+}