@corp-products/ui-components 3.2.9 → 3.3.1

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

@@ -1,17 +0,0 @@
-import {Params} from "@angular/router";
-import {AppButtonIconPos} from "../app-button";
-
-export interface DropdownMenuItem {
-  title: string;
-  routerLink?: string;
-  queryParams?: Params;
-  callback?: () => void;
-  icon?: string;
-  show?: boolean;
-  // TODO: add type
-  permissionKey?: string;
-  permissionAction?: string;
-  iconPosition?: AppButtonIconPos;
-  textColor?: DropdownTextColor;
-}
-export type DropdownTextColor = 'white' | 'purple' | 'green';

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

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

package/src/lib/app-dropdown-menu/menu-popup.pipe.ts

@@ -1,18 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import {DropdownTextColor} from "./app-dropdown-menu";
-
-@Pipe({
-  name: 'popupTextColorClass',
-  standalone: true,
-  pure: true
-})
-export class MenuPopupTextColorPipe implements PipeTransform {
-  transform(color?: DropdownTextColor): string {
-    switch (color) {
-      case 'white': return 'text-white';
-      case 'purple': return 'text-purple-500';
-      case 'green': return 'text-green-500';
-      default: return 'text-white';
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-<div class="px-10 flex justify-between items-center bg-white shadow-md py-3 h-16">
-  <div class="d-flex md:hidden w-fit">
-    <!-- Burger Icon for Mobile -->
-    <app-button icon="font-icon-burger-icon text-[25px]" size="large" variant="text"
-                (clickEmitter)="toggleMenu.emit()"/>
-  </div>
-  <div class="d-flex items-center justify-content-between gap-1">
-    <app-button
-      *hasPermissions="[PermissionsActions.CREATE];key: UserPermissionsEnum.BOD"
-      iconPos="right" icon="font-icon-plus" (clickEmitter)="createButtonClicked.emit()"
-                [title]="'actions.create' | translate"/>
-  </div>
-
-  <div class="flex items-center gap-1">
-    @if (userInfo) {
-      <div class="flex flex-col items-end justify-center">
-        <p class="text-sm">{{ userInfo.userName }}</p>
-        <p class="text-gray-500 mb-0 text-[10px]">{{ userInfo.email }}</p>
-      </div>
-
-      <img src="assets/images/user-placeholder.jpg" class="w-9 h-9 object-cover rounded-full" alt=""/>
-    }
-    <p-menu #menu [model]="items" [popup]="true"></p-menu>
-    <button (click)="menu.toggle($event)" class="mb-2"><i class="font-icon-Vector text-[6px]"></i></button>
-  </div>
-</div>

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

@@ -1,43 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MenuItem } from 'primeng/api';
-import { Menu } from 'primeng/menu';
-import { AppButtonComponent } from '../app-button';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './app-header.component.html',
-  styleUrl: './app-header.component.scss',
-  standalone: true,
-  imports: [RouterModule, AppButtonComponent, Menu, TranslatePipe],
-  encapsulation: ViewEncapsulation.None,
-})
-export class AppHeaderComponent {
-  @Output() createButtonClicked = new EventEmitter();
-  @Output() toggleMenu = new EventEmitter<boolean>();
-  @Input() userInfo: any;
-  items: MenuItem[] | undefined = [
-    {
-      items: [
-        {
-          label: 'خــــروج',
-          command: () => this.logout(),
-        },
-      ],
-    },
-  ];
-  // UserPermissionsEnum = UserPermissionsEnum;
-  // PermissionsActions = PermissionsActions;
-
-  logout(): void {
-    // this.authService
-    //   .logoutFromSSO()
-    //   .pipe(
-    //     finalize(() => {
-    //       this.authService.clearAuth();
-    //     })
-    //   )
-    //   .subscribe();
-  }
-}

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

@@ -1,20 +0,0 @@
-<nav
-  [ngClass]="{ 'max-w-0 md:max-w-[500px]': !isOpen, 'max-w-[500px]': isOpen  }"
-  class="md:flex h-100 bg-primary flex text-white flex-col py-2 text-center gap-y-10 transition-all w-24 hover:md:w-48 duration-500">
-  <a [routerLink]="'/'"><i class="font-icon-STC-Logo text-[20px] pt-4 block px-4"></i></a>
-  <ul class="flex flex-col flex-grow">
-    @for (item of filteredMenu; track $index) {
-      <li>
-        <a
-          [routerLinkActive]="'bg-primary_dark border-secondary'"
-          [routerLink]="item.link"
-          class="flex flex-col py-3 px-4 border-r-2 border-primary transition-all hover:bg-primary_dark hover:border-secondary">
-          <i [class]="item.icon + ' text-[17px] mb-1'"></i>
-          <span class="text-[10px] truncate">{{ item.label }}</span>
-        </a>
-      </li>
-    }
-  </ul>
-
-  <a href="#"><i class="font-icon-setting text-[20px] pb-4 block px-4"></i></a>
-</nav>

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

@@ -1,28 +0,0 @@
-import { Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { SideMenuItem } from "./side-menu";
-import { BASE_SIDE_MENU_ITEMS } from "./side-menu-items";
-import { NgClass } from "@angular/common";
-@Component({
-  selector: "app-side-menu",
-  standalone: true,
-  imports: [RouterModule, NgClass],
-  templateUrl: "./app-side-menu.component.html",
-  encapsulation: ViewEncapsulation.None
-})
-export class AppSideMenuComponent implements OnInit {
-  @Input() isOpen!: boolean;
-  menuItems: SideMenuItem[] = BASE_SIDE_MENU_ITEMS;
-  //permissionsService = inject(PermissionsService);
-  filteredMenu: SideMenuItem[];
-
-  ngOnInit(): void {
-    this.filteredMenu = this.menuItems.filter((item) => {
-      if (!item.permissionKey) {
-        return true;
-      }
-      //  return this.permissionsService.checkKeyHasPermission(item.permissionKey as UserPermissionsEnum, PermissionsActions.VIEW);
-      return;
-    });
-  }
-}

package/src/lib/app-side-menu/routes-names.ts

@@ -1,28 +0,0 @@
-import { RouteNameItem } from "./side-menu";
-
-export const ROUTES_NAME: RouteNameItem = {
-  board: {
-    name: '/board-page',
-  },
-  users: {
-    name: '/users',
-  },
-  // reports: {
-  //   name: '/reports',
-  // },
-  meetings: {
-    name: '/meeting-page',
-  },
-  // tasks: {
-  //   name: '/tasks',
-  // },
-  // imported: {
-  //   name: '/imported',
-  // },
-  // exported: {
-  //   name: '/exported',
-  // },
-  // board: {
-  //   name: '/board',
-  // },
-};

package/src/lib/app-side-menu/side-menu-items.ts

@@ -1,45 +0,0 @@
-import { ROUTES_NAME } from './routes-names';
-import { SideMenuItem } from './side-menu';
-
-export const BASE_SIDE_MENU_ITEMS: SideMenuItem[] = [
-  {
-    label: 'الإجتماعات',
-    icon: 'font-icon-menu-board',
-    link: ROUTES_NAME['meetings'].name
-  },
-  {
-    label: 'اللجان و المجالس',
-    icon: 'font-icon-people',
-    link: ROUTES_NAME['board'].name
-  },
-  // {
-  //   label: 'المستخدمين',
-  //   icon: 'font-icon-profile-2user',
-  //   link: ROUTES_NAME['users'].name,
-  // },
-  // {
-  //   label: 'الإجتماعات',
-  //   icon: 'font-icon-menu-board',
-  //   link: ROUTES_NAME['meetings'].name,
-  // },
-  // {
-  //   label: 'مهامي',
-  //   icon: 'font-icon-task-square',
-  //   link: ROUTES_NAME['tasks'].name,
-  // },
-  // {
-  //   label: 'الوارد',
-  //   icon: 'font-icon-directbox-receive',
-  //   link: ROUTES_NAME['imported'].name,
-  // },
-  // {
-  //   label: 'الصادر',
-  //   icon: 'font-icon-directbox-send',
-  //   link: ROUTES_NAME['exported'].name,
-  // },
-  // {
-  //   label: 'التقارير',
-  //   icon: 'font-icon-status-up',
-  //   link: ROUTES_NAME['reports'].name,
-  // },
-];

package/src/lib/app-side-menu/side-menu.ts

@@ -1,12 +0,0 @@
-export interface SideMenuItem {
-  label: string;
-  icon: string;
-  link: string;
-  permissionKey?: string;
-}
-
-export interface RouteNameItem {
-  [key: string]: {
-    name: string;
-  };
-}

package/src/lib/app-tabs/app-tab.interface.ts

@@ -1,27 +0,0 @@
-import { TemplateRef } from "@angular/core";
-
-interface Tab {
-  title: string;
-  iconName?: string;
-  iconPathCount?: number;
-  disabled?: boolean;
-  count?: number;
-  permissionKey?: string;
-}
-
-export interface RoutedTab extends Tab {
-  link: string;
-}
-export interface TemplateTab<T = unknown> extends Tab {
-  contentTemplate: TemplateRef<unknown>;
-  queryParamValue?: T;
-}
-
-
-export type AppTabs = ({
-  isRouted: true;
-  items: RoutedTab[];
-} | {
-  isRouted: false;
-  items: TemplateTab[];
-})

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

@@ -1,37 +0,0 @@
-@if (tabs && tabs.items.length) {
-<div [class]="tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'">
-  <p-tabs [value]="selectedTabIndex() || activeTabIndex" scrollable>
-    <p-tablist>
-
-      @for (tab of tabs.items; let i = $index; track i) {
-      <p-tab [value]="i" [routerLink]="tabs.isRouted ? $any(tab).link : null" [disabled]="tab.disabled"
-        (click)="onTabChange(i)">
-        @if (tab.iconName) {
-        <app-ico-moon-card [iconClass]="'text-[17px]'" [iconName]="tab.iconName"
-          [iconPathCount]="tab.iconPathCount || 0" />
-        }
-        <span>{{ tab.title | translate }}
-          @if (tab.count || tab.count === 0) {
-          <p-badge [value]="getTabCount(tab.count)" severity="secondary" />
-          }
-        </span>
-      </p-tab>
-      }
-
-    </p-tablist>
-
-    <p-tabpanels>
-      @if (tabs.isRouted) {
-      <router-outlet></router-outlet>
-      } @else {
-      @for (tab of tabs.items; let i = $index; track i) {
-      <p-tabpanel [value]="i">
-        <ng-container [ngTemplateOutlet]="tab.contentTemplate"></ng-container>
-      </p-tabpanel>
-      }
-      }
-
-    </p-tabpanels>
-  </p-tabs>
-</div>
-}

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

@@ -1,103 +0,0 @@
-.tabs-container {
-  &.full-width {
-    .p-tabs .p-tablist-tab-list .p-tab {
-      @apply flex-grow flex justify-center max-w-[50%];
-    }
-  }
-
-  .p-tabs {
-    .p-tablist-tab-list {
-      @apply relative;
-
-      &:after {
-        @apply content-[''] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];
-      }
-
-      .p-tab {
-        @apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];
-
-        &:not(.p-tab-active) {
-          app-ico-moon-card {
-            @apply grayscale;
-          }
-
-        }
-      }
-    }
-
-    .p-tablist-active-bar {
-      @apply hidden;
-    }
-
-    .p-tabpanels.p-component {
-      @apply mt-5 rounded-lg;
-    }
-  }
-
-  &.basic {
-    .p-tabs {
-      .p-tablist-tab-list {
-        @apply bg-transparent;
-
-        .p-tab {
-          &.p-tab-active {
-            @apply text-primary border-primary;
-          }
-        }
-      }
-    }
-  }
-
-  &.primary_light {
-    .p-tabs {
-      .p-tablist-tab-list {
-        .p-tab {
-          @apply rounded-t-lg text-[14px];
-
-          &.p-tab-active {
-            @apply bg-purple-800/5 font-semibold text-primary border-primary;
-          }
-        }
-      }
-    }
-  }
-
-  &.primary {
-    .p-tabs {
-      .p-tablist-tab-list {
-        &:after {
-          @apply bg-purple-800/5;
-        }
-
-        .p-tab {
-          @apply rounded-t-lg text-[14px];
-
-          &.p-tab-active {
-            @apply bg-primary font-semibold text-white border-secondary;
-          }
-        }
-      }
-    }
-  }
-}
-
-[dir='rtl'] {
-  .p-tabs .p-tablist{
-    .p-iconwrapper {
-      @apply rotate-180deg;
-    }
-
-    .p-tablist-next-button {
-      @apply right-auto left-0;
-    }
-
-    .p-tablist-prev-button {
-      @apply right-0 left-auto;
-    }
-  }
-}
-
-// TODO : CHECK
-// .p-tabpanels.p-component {
-//   @apply mt-5 rounded-[1.5rem];
-// }

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

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

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

@@ -1,67 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input, model, OnInit, ViewEncapsulation } from '@angular/core';
-import { TabsModule } from 'primeng/tabs';
-import { AppTabs } from './app-tab.interface';
-import { IcoMoonIconComponent } from '../ico-moon-icon/ico-moon-icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
-import { filter } from 'rxjs';
-import { BadgeModule } from 'primeng/badge';
-
-@Component({
-  selector: 'app-tabs',
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  imports: [
-    CommonModule,
-    TabsModule,
-    RouterLink,
-    RouterOutlet,
-    IcoMoonIconComponent,
-    TranslateModule,
-    BadgeModule,
-  ],
-  templateUrl: './app-tabs.component.html',
-  styleUrl: './app-tabs.component.scss',
-})
-export class AppTabsComponent implements OnInit {
-  @Input() tabs: AppTabs;
-  @Input() tabsStyle: 'basic' | 'primary_light' | 'primary' = 'basic';
-  @Input() responsive = false;
-  @Input() twoDigitCount: boolean;
-  selectedTabIndex = model<number>(0);
-  activeTabIndex = 0;
-  private router = inject(Router);
-  private route = inject(ActivatedRoute);
-
-  ngOnInit(): void {
-    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-      this.updateActiveTab();
-    });
-    // to be refactor
-    this.updateActiveTab();
-  }
-
-  // Updates the active tab index based on the current route
-  private updateActiveTab(): void {
-    if (!this.tabs.isRouted) return;
-    const currentUrl = this.router.url;
-    const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
-    this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
-  }
-
-  onTabChange(index: number): void {
-    this.selectedTabIndex.set(index);
-
-    if (!this.tabs.isRouted) return;
-    const selectedTab = this.tabs.items[index];
-    if (selectedTab && !selectedTab.disabled) {
-      this.router.navigate([selectedTab.link], { relativeTo: this.route });
-    }
-  }
-
-  getTabCount(count: number): string {
-    if (!count) return '0';
-    return this.twoDigitCount && count > 99 ? '99+' : count.toString();
-  }
-}

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

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

package/src/lib/bottom-sheet/bottom-sheet.component.html

@@ -1,18 +0,0 @@
-<p-drawer
-  (onHide)="hideBottomSheet()"
-  (onShow)="onShow.emit($event)"
-  [(visible)]="show"
-  [closable]="false"
-  [ngClass]="{ show: show }"
-  [position]="'bottom'"
-  appendTo="body"
-  >
-  <ng-template pTemplate="header">
-    <div class="band"></div>
-  </ng-template>
-  @if (contentTemplate) {
-    <ng-template pTemplate="content">
-      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-    </ng-template>
-  }
-</p-drawer>

package/src/lib/bottom-sheet/bottom-sheet.component.scss

@@ -1,31 +0,0 @@
-.sidebar {
-  &.show {
-    @apply min-w-[550px];
-  }
-}
-
-.band{
-  background-color: #DFE0E6;
-  width: 40px;
-  height: 4px;
-  border-radius: 24px;
-  display: block;
-}
-.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;
-  justify-content: center;
-  color: #090D0F;
-  font-size: 20px;
-  flex-direction: column;
-
-}
-
-.p-drawer-content{
-  padding: 0px !important;
-  margin: 0px !important;
-}

package/src/lib/bottom-sheet/bottom-sheet.component.ts

@@ -1,26 +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-bottom-sheet",
-  standalone: true,
-  imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule],
-  templateUrl: "./bottom-sheet.component.html",
-  styleUrl: "./bottom-sheet.component.scss",
-  encapsulation: ViewEncapsulation.None
-})
-export class BottomSheetComponent {
-  @Input() show = false;
-  @Input() contentTemplate!: TemplateRef<unknown>;
-
-  @Output() onHide = new EventEmitter<boolean>();
-  @Output() onShow = new EventEmitter<boolean>();
-
-  hideBottomSheet() {
-    this.show = false;
-    this.onHide.emit(false);
-  }
-}

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

@@ -1,37 +0,0 @@
-@if (dynamicDialogConfig.data) {
-<div class="confirmation-dialog">
-  <div class="dialog-wrapper">
-    @if (dynamicDialogConfig.data) {
-    <div class="confirmation-dialog__content my-4">
-      @if (dynamicDialogConfig.data.dialogIcon) {
-      <em [class]="dynamicDialogConfig.data.dialogIcon"></em>
-      }
-      <p class="confirmation-dialog__message text-xl mb-2">
-        {{ dynamicDialogConfig.data.message }}
-      </p>
-      @if (dynamicDialogConfig.data.hint) {
-      <p class="confirmation-dialog__hint font-normal text-base">
-        {{ dynamicDialogConfig.data.hint }}
-      </p>
-      }
-      @if (dynamicDialogConfig.data.inputForm) {
-      <app-dynamic-form [dynamicFormData]="dialogFormData"></app-dynamic-form>
-      }
-    </div>
-    }
-    <div class="confirmation-dialog__actions flex gap-2 mt-4">
-      <app-button [title]="dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)"
-        [disabled]="!!(dialogFormData && dialogFormData.formGroup?.invalid)" [severity]="'primary'"
-        [id]="dynamicDialogConfig.data.confirmBtnId" [icon]="dynamicDialogConfig.data.confirmBtnIcon || ''"
-        [label]="dynamicDialogConfig.data.confirmBtnLabel"
-        [iconPos]="dynamicDialogConfig.data.confirmBtnPosition || 'left'" [styleClass]="'confirmation-btn'"
-        (click)="submit()" />
-      <app-button [title]="dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)"
-        [severity]="'primary'" variant="outlined" [label]="dynamicDialogConfig.data.cancelBtnLabel"
-        [id]="dynamicDialogConfig.data.cancelBtnId" [styleClass]="'cancel-btn confirmation-btn cancel-btn'"
-        (click)="close()" />
-    </div>
-  </div>
-
-</div>
-}

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

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