angular-dumb-lib 0.0.6 → 0.0.9

package/src/lib/components/molecules/content-design/content-design.component.scss

@@ -1,68 +0,0 @@
-.content-designer {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  text-align: center;
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .content {
-    p {
-      text-align: justify;
-    }
-  }
-
-  // Common styles for left and right layouts
-  &.left,
-  &.right {
-    flex-direction: row;
-    .image,
-    .content {
-      flex: 1;
-      width: 50%;
-      padding: 0 20px;
-    }
-    .content {
-      text-align: justify;
-    }
-    .image {
-      display: flex;
-    }
-  }
-
-  // Specific override for left layout
-  &.left {
-    flex-direction: row-reverse;
-    .image {
-      justify-content: end;
-    }
-  }
-
-  &.right {
-    .image {
-      justify-content: start;
-    }
-  }
-
-
-  // Common styles for up and down layouts
-  &.up,
-  &.down {
-    flex-direction: column;
-
-    .image {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-
-  // Specific override for up layout
-  &.up {
-    flex-direction: column-reverse;
-  }
-}

package/src/lib/components/molecules/content-design/content-design.component.ts

@@ -1,32 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IContentDesign } from '../../../shared/interfaces/interface';
-import { ContentDirection } from '../../../shared/enums/enum';
-import { ButtonComponent } from '../../atoms/button/button.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-content-design',
-  standalone: true,
-  templateUrl: './content-design.component.html',
-  styleUrls: ['./content-design.component.scss'],
-  imports: [CommonModule, ButtonComponent]
-})
-export class ContentDesignComponent implements OnInit {
-  @Input() content!: IContentDesign;
-
-  @Output() clickEvent = new EventEmitter<void>();
-
-  constructor(
-  ) { }
-
-  ngOnInit() {
-    this.content = {
-      contentDirection: ContentDirection.left,
-      ...this.content,
-    }
-  }
-
-  onButtonClick() {
-    this.clickEvent.emit();
-  }
-}

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

@@ -1,22 +0,0 @@
-<form (ngSubmit)="onSubmit()" #form="ngForm" [formGroup]="formGroup">
-  <ng-container *ngFor="let inputConfig of inputConfigs">
-    <app-input *ngIf="checkFormConfigType(inputConfig.type) === 'textual'"
-    [formControlName]="inputConfig.name"
-    [config]="inputConfig"
-    [required]="inputConfig.required"></app-input>
-
-    <app-selection *ngIf="checkFormConfigType(inputConfig.type) === 'selection'"
-    [formControlName]="inputConfig.name"
-    [label]="inputConfig.label?? ''"
-    [options]= "inputConfig.options">
-    </app-selection>
-
-    <app-file-selection
-    [formControlName]="inputConfig.name"
-    *ngIf="checkFormConfigType(inputConfig.type) === 'file'"
-    [label]="inputConfig.name ">
-    </app-file-selection>
-  </ng-container>
-
-  <app-button [config]="buttonConfig"></app-button>
-</form>

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

@@ -1,17 +0,0 @@
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-input, textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 0.25rem;
-}

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

@@ -1,64 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { InputGroupType, InputType } from '../../../shared/enums/enum';
-import { selectionInputTypes, textualInputTypes } from '../../../shared/constants/constant';
-import { CommonModule } from '@angular/common';
-import { ButtonComponent, InputComponent } from 'angular-dumb-lib';
-import { SelectionComponent } from '../../atoms/selection/selection.component';
-import { FileSelectionComponent } from '../../atoms/file-selection/file-selection.component';
-import { IInputConfig } from '../../../shared/interfaces/interface';
-import { IButtonConfig } from 'dist/angular-dumb-lib/lib/shared/interfaces/interface';
-
-
-@Component({
-  selector: 'app-form',
-  standalone: true,
-  templateUrl: './form.component.html',
-  styleUrls: ['./form.component.scss'],
-  imports: [CommonModule, InputComponent, SelectionComponent,
-    FileSelectionComponent, ButtonComponent, FormsModule, ReactiveFormsModule]
-})
-export class FormComponent {
-  @Input() formGroup!: FormGroup;
-  @Input() inputConfigs!: Array<IInputConfig>;
-  @Input() buttonConfig: IButtonConfig = {
-    label: "Submit"
-  }
-  @Input() validationMessages!: { [key: string]: string };
-
-  @Output() formSubmit = new EventEmitter<any>();
-  @Output() formChange = new EventEmitter<{ controlName: string; value: any }>();
-
-  // Define the editor configuration
-
-  onSubmit() {
-    if (this.formGroup.valid) {
-      this.formSubmit.emit(this.formGroup.value);
-    }
-    else {
-      console.log('Form not valid');
-    }
-  }
-
-  onValueChange(controlName: string, value: any) {
-    this.formChange.emit({ controlName, value });
-  }
-
-  checkFormConfigType(inputType: InputType | undefined): InputGroupType {
-    if(inputType) {
-      if(textualInputTypes.includes(inputType)) {
-        return InputGroupType.textual;
-      }
-      if(selectionInputTypes.includes(inputType)) {
-        return InputGroupType.selection;
-      }
-      if(inputType === InputType.file) {
-        return InputGroupType.file;
-      }
-      if(inputType === InputType.datetime) {
-        return InputGroupType.datetime;
-      }
-    }
-    return InputGroupType.textual;
-  }
-}

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

@@ -1,16 +0,0 @@
-<div class="modal-overlay" (click)="handleOverlayClick($event)" *ngIf="modalEvent?.isModalVisible">
-  <div class="modal-content" (click)="handleContentClick($event)">
-    <div class="modal-header">
-      <h2>{{modalEvent.title }}</h2>
-      <button class="close-btn" (click)="closeModal()">
-        <i class="material-icons">close</i>
-      </button>
-    </div>
-    <div *ngIf="modalEvent.params && modalEvent.params['content']">{{modalEvent.params['content'] | translate}}</div>
-    <ng-container *ngTemplateOutlet="modalEvent.template; context: modalEvent.params"></ng-container>
-    <div *ngIf="!modalEvent?.isDialog" class="buttons">
-      <app-button [config]="okConfig" (clickEvent)="ok()"></app-button>
-      <app-button [config]="cancelConfig" (clickEvent)="cancel()"></app-button>
-    </div>
-  </div>
-</div>

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

@@ -1,83 +0,0 @@
-.modal-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 50;
-}
-
-.modal-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  background-color: #fff;
-  color: #000;
-  border-radius: 0.5rem;
-  padding: 2rem;
-  max-width: 600px;
-  width: 100%;
-  max-height: calc(100vh - 7rem); /* Full height */
-  overflow-y: auto; /* Scroll if content is longer than modal */
-
-  &.dark-mode {
-    background-color: #27272a; // dark:bg-zinc-800
-    color: #d1d5db; // dark:text-zinc-300
-  }
-
-  .modal-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-
-h2 {
-  font-size: 2rem;
-  font-weight: bold;
-  margin: unset;
-}
-
-p {
-  color: #4b5563; // text-zinc-600
-  margin-bottom: 1.5rem;
-
-  &.dark-mode {
-    color: #d1d5db; // dark:text-zinc-300
-  }
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.close-btn {
-  background-color: transparent;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-.close-btn i.material-icons {
-  font-size: 24px;
-  color: #888;
-}
-
-.close-btn:hover i.material-icons {
-  color: #444;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: end;
-  gap: 15px;
-}

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

@@ -1,48 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { IButtonConfig, IModalEvent } from '../../../shared/interfaces/interface';
-import { CommonModule } from '@angular/common';
-import { ButtonComponent } from 'angular-dumb-lib';
-
-@Component({
-  selector: 'app-modal',
-  standalone: true,
-  templateUrl: './modal.component.html',
-  styleUrls: ['./modal.component.scss'],
-  imports: [CommonModule, ButtonComponent]
-})
-export class ModalComponent implements OnInit {
-  @Input() modalEvent!: IModalEvent;
-  okConfig: IButtonConfig = {
-    label: "Ok"
-  }
-  cancelConfig: IButtonConfig = {
-    label: "Cancel"
-  }
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  closeModal() {
-    this.modalEvent.isModalVisible = false;
-  }
-
-  handleOverlayClick(event: MouseEvent) {
-    this.closeModal();
-  }
-
-  handleContentClick(event: MouseEvent) {
-    event.stopPropagation();
-  }
-
-  ok() {
-    if (this.modalEvent && this.modalEvent.onOk) {
-      this.modalEvent.onOk();
-      this.closeModal();
-    }
-  }
-
-  cancel() {
-    this.closeModal();
-  }
-}

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

@@ -1,25 +0,0 @@
-<div class="table-footer">
-  <div class="number-of-page">
-    <app-selection [options] = "itemsPerPageList"
-                  [selectedValue]="this.itemsPerPage"
-                  (selectedChange) = "onChangeNumberOfPage($event)">
-    </app-selection>
-    <app-input [config]="inputConfig"></app-input>
-  </div>
-  <div class="paginator">
-    <app-button (clickEvent)="selectPage(selectedPage - 1)"
-                [config]="previousButtonConfig"/>
-
-    <!-- Page Numbers -->
-    <ng-container *ngFor="let page of pageNumbers">
-      <app-button
-        (clickEvent)="selectPage(page)"
-        [config]="getPageButtonConfig(page)">
-      </app-button>
-    </ng-container>
-
-    <!-- Next Button -->
-    <app-button (clickEvent)="selectPage(selectedPage + 1)"
-                [config]="nextButtonConfig"/>
-  </div>
-</div>

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

@@ -1,27 +0,0 @@
-body {
-  color: #566787;
-  background: #f5f5f5;
-  font-family: 'Varela Round', sans-serif;
-  font-size: 13px;
-}
-
-.table-footer {
-  display: flex;
-
-  .number-of-page {
-    width: 70%;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .paginator {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-
-    app-button {
-      margin: 0 2px;
-    }
-  }
-}

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>