angular-dumb-lib 0.0.5 → 0.0.8

package/src/lib/components/molecules/paginator/paginator.component.ts

@@ -1,126 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IButtonConfig, IDropdownOption, IInputConfig, IPaginator } from '../../../shared/interfaces/interface';
-import { ButtonType, InputDirection } from '../../../shared/enums/enum';
-import { ButtonComponent, InputComponent } from 'angular-dumb-lib';
-import { SelectionComponent } from '../../atoms/selection/selection.component';
-
-@Component({
-  selector: 'app-paginator',
-  standalone: true,
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.scss'],
-  imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent]
-})
-export class PaginatorComponent implements OnInit {
-  itemsPerPageList: IDropdownOption[] = [];
-  inputConfig: IInputConfig = {
-    label: 'Go to page',
-    direction: InputDirection.horizontal,
-    name: 'inputConfig',
-    required: false
-  }
-  previousButtonConfig: IButtonConfig = {
-    iconValue: 'chevron_left',
-    type: ButtonType.button,
-    isDisabled: true
-  }
-  nextButtonConfig: IButtonConfig = {
-    iconValue: 'chevron_right',
-    type: ButtonType.button,
-    isDisabled: false
-  }
-  numberOfPage: number = 0;
-  itemsPerPage: number = 0;
-  selectedPage: number = 0;
-  buttonType!: ButtonType;
-  inputDirection!: InputDirection;
-
-  @Input() totalRecords: number = 0;
-
-  @Output() paginator = new EventEmitter<IPaginator>();
-
-  constructor() {}
-
-  get pageNumbers(): number[] {
-    return Array.from({ length: this.numberOfPage }, (_, i) => i + 1);
-  }
-
-  ngOnInit() {
-    this.itemsPerPageList = [
-      {
-        label: "3",
-        value: 1
-      },
-      {
-        label: "5",
-        value: 2
-      },
-      {
-        label: "20",
-        value: 3
-      }
-    ];
-    this.selectedPage = 1;
-    this.buttonType = ButtonType.button;
-    this.inputDirection = InputDirection.horizontal;
-    this.itemsPerPage = parseInt(this.itemsPerPageList[0].label);
-    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
-    this.updateButtonConfigs();
-    this.emitPaging();
-  }
-
-  ngOnChanges(): void {
-    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
-  }
-
-  selectPage(i: number) {
-    this.selectedPage = i;
-    this.updateButtonConfigs();
-    this.emitPaging();
-  }
-
-  onChangeNumberOfPage(itemsPerPageId: string) {
-    this.selectedPage = 1;
-    this.itemsPerPage = parseInt(this.itemsPerPageList.find(i=> i.value === parseInt(itemsPerPageId))?.label??
-                                this.itemsPerPage.toString());
-
-    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
-    this.updateButtonConfigs();
-    this.emitPaging();
-  }
-
-  private emitPaging() {
-    let paging: IPaginator = {
-      itemsPerPage: this.itemsPerPage,
-      selectedPage: this.selectedPage
-    }
-    this.paginator.emit(paging);
-  }
-
-  private calculateNumberOfPage (totalRecords: number, itemsPerPage: number): number {
-    return this.numberOfPage = Math.ceil(totalRecords/itemsPerPage);
-  }
-
-  private updateButtonConfigs() {
-    // Re-assign the button configuration to trigger change detection
-    this.previousButtonConfig = {
-      ...this.previousButtonConfig,
-      isDisabled: this.selectedPage <= 1
-    };
-    this.nextButtonConfig = {
-      ...this.nextButtonConfig,
-      isDisabled: this.selectedPage >= this.numberOfPage
-    };
-  }
-
-  // Method to return config for page number buttons
-  getPageButtonConfig(page: number): IButtonConfig {
-    return {
-      label: page.toString(),
-      type: ButtonType.button,
-      isActive: page === this.selectedPage, // Set active state based on selectedPage
-      isDisabled: false // Page buttons are never disabled
-    };
-  }
-}

package/src/lib/components/molecules/table/table.component.html

@@ -1,45 +0,0 @@
-<div class="container-xl table-wrapper">
-  <div class="table-title">
-      <h2><b>{{tableName }}</b></h2>
-  </div>
-  <div class="loading-wrapper">
-    <ng-container *ngIf="!(loadingState | async); else loading; then table">
-    </ng-container>
-  </div>
-  <app-paginator [totalRecords] = "totalRecords" (paginator)="changePaginator($event)"></app-paginator>
-</div>
-
-<ng-template #loading>
-  <div class="loading-wrapper">
-    <app-loading></app-loading>
-  </div>
-</ng-template>
-
-<ng-template #table>
-  <ng-container *ngIf="totalRecords == 0; then emptyContent; else tableContent">
-  </ng-container>
-</ng-template>
-
-<ng-template #tableContent>
-  <p-table [value]="items" class="table table-striped table-hover">
-    <ng-template pTemplate="header">
-      <tr>
-        <th>
-          <ng-content select="[selectAllCheckbox]"></ng-content>
-        </th>
-        <ng-container *ngFor=" let col of columns">
-          <th>{{col.name }}</th>
-        </ng-container>
-      </tr>
-    </ng-template>
-    <ng-template pTemplate="body" let-item>
-      <ng-container [ngTemplateOutlet]="bodyTemplate" [ngTemplateOutletContext]="{item:item}"></ng-container>
-    </ng-template>
-  </p-table>
-</ng-template>
-
-<ng-template #emptyContent>
-  <div class="no-record-message">
-    <div>No records</div>
-  </div>
-</ng-template>

package/src/lib/components/molecules/table/table.component.scss

@@ -1,169 +0,0 @@
-:host {
-  width: 100%;
-}
-
-body {
-	color: #566787;
-	background: #f5f5f5;
-	font-family: 'Varela Round', sans-serif;
-	font-size: 13px;
-}
-
-.table-responsive {
-    margin: 30px 0;
-}
-
-.table-wrapper {
-	background: #fff;
-	border-radius: 3px;
-	min-width: 1000px;
-	box-shadow: 0 1px 1px rgba(0,0,0,.05);
-}
-
-.table-title {
-	background: #435d7d;
-	color: #fff;
-	border-radius: 3px 3px 0 0;
-  padding: 0px 12px;
-  display: flex;
-  .table-name {
-    width: 70%;
-  };
-  .table-add {
-    width: 30%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    a {
-      cursor: pointer;
-    }
-  }
-  h2 {
-	font-size: 24px;
-  }
-  .btn-group {
-    float: right;
-  }
-  .btn {
-    color: #fff;
-    float: right;
-    font-size: 13px;
-    border: none;
-    min-width: 50px;
-    border-radius: 2px;
-    border: none;
-    outline: none !important;
-    margin-left: 10px;
-    i {
-      float: left;
-      font-size: 21px;
-      margin-right: 5px;
-    }
-    span {
-      float: left;
-      margin-top: 2px;
-    }
-  }
-}
-
-::ng-deep .table tr th, ::ng-deep .table tr td {
-	border-color: #e9e9e9;
-	padding: 12px 15px;
-	vertical-align: middle;
-}
-
-::ng-deep .table tr th:first-child {
-	width: 60px;
-  display: flex;
-}
-
-::ng-deep .table tr th:last-child {
-	width: 150px;
-}
-
-table.table-striped tbody tr:nth-of-type(odd) {
-	background-color: #fcfcfc;
-}
-
-table.table-striped.table-hover tbody tr:hover {
-	background: #f5f5f5;
-}
-
-::ng-deep .table th {
-  text-align: left;
-  i {
-    font-size: 13px;
-    margin: 0 5px;
-    cursor: pointer;
-  }
-}
-
-
-::ng-deep .table td:last-child i {
-	opacity: 0.9;
-	font-size: 22px;
-	margin: 0 5px;
-}
-
-::ng-deep .table td a {
-	font-weight: bold;
-	color: #566787;
-	display: inline-block;
-	text-decoration: none;
-	outline: none !important;
-}
-
-.hint-text {
-	float: left;
-	margin-top: 10px;
-	font-size: 13px;
-}
-
-.no-record-message {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-}
-
-.excel {
-  display: flex;
-  a {
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-.loading-wrapper {
-  height: calc(100vh - 220px);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow-y: auto; /* Scroll vertically when content overflows */
-  overflow-x: hidden; /* Hide horizontal scrollbar */
-
-  /* Custom Scrollbar for WebKit-based Browsers */
-  &::-webkit-scrollbar {
-    width: 12px; /* Adjusted width for a more standard look */
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #f1f1f1; /* Light gray background for the track */
-    border-radius: 10px; /* Rounded corners for the track */
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a polished look */
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #888; /* Neutral gray color for the thumb */
-    border-radius: 10px; /* Rounded corners for the thumb */
-    border: 3px solid #f1f1f1; /* Creates a gap between the thumb and track */
-    transition: background 0.3s; /* Smooth transition for hover effect */
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #555; /* Darker gray for the thumb on hover */
-  }
-}
-

package/src/lib/components/molecules/table/table.component.ts

@@ -1,40 +0,0 @@
-import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
-import { IDataColumnConfig, IPaginator } from '../../../shared/interfaces/interface';
-import { CommonModule } from '@angular/common';
-import { TableModule} from 'primeng/table';
-import { LoadingComponent } from '../../atoms/loading/loading.component';
-import { PaginatorComponent } from '../paginator/paginator.component';
-
-@Component({
-  selector: 'app-table',
-  standalone: true,
-  templateUrl: './table.component.html',
-  styleUrls: ['./table.component.scss'],
-  imports: [CommonModule, TableModule, LoadingComponent, PaginatorComponent]
-})
-export class TableComponent<T> implements OnInit {
-  @Input() items: T[] = [];
-  @Input() columns: IDataColumnConfig[] = [];
-  @Input() totalRecords: number = 0;
-  @Input() tableName: string = '';
-  @Input() loadingState!: Observable<boolean>;
-
-  @Output() paginator = new EventEmitter<IPaginator>()
-
-  @ContentChild('bodyTemplate') bodyTemplate!: TemplateRef<any>;
-
-  allSelected = false;
-
-  constructor(private cdRef: ChangeDetectorRef) { }
-
-  ngOnInit() {
-    this.loadingState.subscribe(() => {
-      this.cdRef.detectChanges();  // Explicitly mark for change detection
-    });
-  }
-
-  changePaginator(paging: IPaginator) {
-    this.paginator.emit(paging);
-  }
-}

package/src/lib/components/pages/footer/footer.component.html

@@ -1,32 +0,0 @@
-<footer class="footer">
-  <div class="footer-container">
-    <div class="footer-section">
-      <h3>About Us</h3>
-      <p>We are a company dedicated to providing excellent services and products to our customers.</p>
-    </div>
-
-    <div class="footer-section">
-      <h3>Quick Links</h3>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Services</a></li>
-        <li><a href="#">Contact</a></li>
-        <li><a href="#">Privacy Policy</a></li>
-      </ul>
-    </div>
-
-    <div class="footer-section">
-      <h3>Follow Us</h3>
-      <div class="social-icons">
-        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
-      </div>
-    </div>
-  </div>
-
-  <div class="footer-bottom">
-    <p>&copy; 2024 Your Company. All Rights Reserved.</p>
-  </div>
-</footer>

package/src/lib/components/pages/footer/footer.component.scss

@@ -1,69 +0,0 @@
-.footer {
-  background-color: #333;
-  color: #fff;
-  padding: 20px 0;
-  text-align: center;
-  font-family: 'Roboto', sans-serif;
-}
-
-.footer-container {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.footer-section {
-  flex: 1;
-  margin: 15px;
-  min-width: 200px;
-}
-
-.footer-section h3 {
-  margin-bottom: 15px;
-  font-size: 18px;
-}
-
-.footer-section p,
-.footer-section ul,
-.footer-section a {
-  font-size: 14px;
-  color: #ccc;
-  text-decoration: none;
-}
-
-.footer-section ul {
-  list-style: none;
-  padding: 0;
-}
-
-.footer-section ul li {
-  margin: 5px 0;
-}
-
-.footer-section ul li a:hover {
-  color: #fff;
-}
-
-.social-icons {
-  margin-top: 10px;
-}
-
-.social-icons a {
-  display: inline-block;
-  color: #ccc;
-  margin: 0 10px;
-  font-size: 20px;
-}
-
-.social-icons a:hover {
-  color: #fff;
-}
-
-.footer-bottom {
-  margin-top: 20px;
-  border-top: 1px solid #444;
-  padding-top: 10px;
-  font-size: 12px;
-}

package/src/lib/components/pages/footer/footer.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-footer',
-  standalone: true,
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
-})
-export class FooterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

package/src/lib/components/pages/login/login.component.html

@@ -1,10 +0,0 @@
-<div class="login-page">
-    <div class="icon-area">
-      <div class="icon">
-        <span>innocons</span>
-      </div>
-    </div>
-    <div class="login-button" id="buttonDiv">
-      <ng-template #buttonContainer></ng-template>
-    </div>
-</div>

package/src/lib/components/pages/login/login.component.scss

@@ -1,32 +0,0 @@
-.login-button {
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-}
-
-.login-page {
-  height: 100%;
-  width: 100%;
-  flex-direction: row;
-  display: flex;
-}
-
-.icon-area {
-  width: 38%;
-  background-color: #2a76d7;
-  height: 100%;
-  display: flex;;
-}
-
-.icon {
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  span {
-    color: white;
-    font-size: xxx-large;
-    font-family: fantasy;
-  }
-}

package/src/lib/components/pages/login/login.component.ts

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-
-@Component({
-  selector: 'app-login',
-  standalone: true,
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss'],
-  imports: [CommonModule]
-})
-export class LoginComponent implements OnInit {
- // Input property to accept a TemplateRef from the parent component
- @Input() buttonTemplate!: TemplateRef<any>;
- @ViewChild('buttonContainer', { read: ViewContainerRef }) buttonContainer!: ViewContainerRef;
-
- constructor() {
- }
-
- ngOnInit(): void {
- }
-
- // After the view initializes, we render the button
- ngAfterViewInit(): void {
-   // Clear any existing content in the container
-   this.buttonContainer.clear();
-
-   // Render the provided button template inside the container
-   if (this.buttonTemplate) {
-     this.buttonContainer.createEmbeddedView(this.buttonTemplate);
-   }
- }
-}

package/src/lib/components/pages/menu/menu.component.html

@@ -1,18 +0,0 @@
-<nav class="menu" [ngClass]="{'vertical': isVertical, 'horizontal': !isVertical}">
-  <div class="logo">
-    <img src="{{logoUrl}}" alt="Logo" />
-  </div>
-  <ul>
-    <li *ngFor="let item of menuItems">
-      <a [href]="item.route">{{ item.label }}</a>
-    </li>
-  </ul>
-  <div class="actions">
-    <div class="language">
-      <span class="material-icons" aria-hidden="true">language</span>
-    </div>
-    <div class="login">
-      <span class="material-icons" aria-hidden="true">person</span>
-    </div>
-  </div>
-</nav>

package/src/lib/components/pages/menu/menu.component.scss

@@ -1,87 +0,0 @@
-:host {
-  display: flex;
-}
-
-.menu {
-  background-color: #f8f9fa;
-  padding: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-
-  &.vertical {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    width: 200px;
-
-    ul {
-      list-style-type: none;
-      padding: 0;
-      height: 100%;
-
-      li {
-        padding: 8px 0;
-
-        &:hover {
-          background-color: #e9ecef;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      align-items: baseline;
-    }
-  }
-
-  &.horizontal {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 80px;
-
-    ul {
-      display: flex;
-      list-style-type: none;
-      padding: 0;
-      margin: 0;
-      flex-grow: 1;
-      align-items: center;
-
-      li {
-        padding: 8px 16px; /* Adjust for horizontal spacing */
-
-        &:hover {
-          background-color: #e9ecef;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  .logo {
-    img {
-      width: 100%;
-      height: 100%; /* Maintain aspect ratio */
-    }
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-
-    .language,
-    .login {
-      margin-left: 10px;
-    }
-  }
-}
-
-a {
-  text-decoration: none; // Remove the underline from links
-  color: inherit; // Inherit color from parent element
-  display: block; // Make the link block-level so it fills the entire list item
-  padding: 10px; // Add some padding for clickable area
-  transition: background-color 0.3s ease; // Optional: smooth background color transition
-}