angular-dumb-lib 0.0.6 → 0.0.8

package/src/lib/components/atoms/tags/tags.component.scss

@@ -1,58 +0,0 @@
-.tags-select-container {
-  display: flex;
-  flex-direction: column;
-}
-
-input[type="text"] {
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  width: 200px;
-  margin-bottom: 10px;
-}
-
-.tag-list {
-  list-style-type: none;
-  padding-left: 0;
-  margin: 0;
-  border: 1px solid #ccc;
-  max-height: 100px;
-  overflow-y: auto;
-}
-
-.tag-list li {
-  padding: 5px;
-  cursor: pointer;
-  border-bottom: 1px solid #ddd;
-}
-
-.tag-list li:hover {
-  background-color: #f1f1f1;
-}
-
-.selected-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.tag-button {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 20px;
-  padding: 5px 10px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.tag-button .remove-tag {
-  margin-left: 8px;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  font-weight: bold;
-  color: white;
-  cursor: pointer;
-}

package/src/lib/components/atoms/tags/tags.component.ts

@@ -1,62 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'app-tags',
-  standalone: true,
-  templateUrl: './tags.component.html',
-  styleUrls: ['./tags.component.scss'],
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => TagsComponent),
-    multi: true
-  }],
-  imports: [CommonModule, FormsModule]
-})
-export class TagsComponent implements ControlValueAccessor {
-  @Input() availableTags: string[] = ['abc', 'dce'];
-  filteredTags: string[] = [];
-  selectedTags: string[] = [];
-  searchText: string = '';
-
-  private onChange: any = () => {};
-  private onTouched: any = () => {};
-
-  ngOnInit() {
-    this.filteredTags = this.availableTags; // Initialize the filtered tags list
-  }
-
-  writeValue(value: string[]): void {
-    if (value) {
-      this.selectedTags = value;
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  onTagSelectionChange(tag: string) {
-    if (!this.selectedTags.includes(tag)) {
-      this.selectedTags = [...this.selectedTags, tag]; // Add the tag
-      this.onChange(this.selectedTags);
-    }
-  }
-
-  removeTag(tag: string) {
-    this.selectedTags = this.selectedTags.filter(t => t !== tag); // Remove the tag
-    this.onChange(this.selectedTags);
-  }
-
-  filterTags() {
-    this.filteredTags = this.availableTags.filter(tag =>
-      tag.toLowerCase().includes(this.searchText.toLowerCase()) &&
-      !this.selectedTags.includes(tag)
-    );
-  }
-}

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

@@ -1,12 +0,0 @@
-<div class="cards-content">
-  <ng-container *ngFor="let content of cardContents">
-    <div class="card {{content.name}}">
-      <app-content-design
-      [content] = "content">
-      </app-content-design>
-    </div>
-  </ng-container>
-</div>
-
-
-

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

@@ -1,14 +0,0 @@
-.cards-content {
-  display: flex;
-  flex-direction: row;
-}
-
-.content {
-  width: 33%;
-}
-
-.card {
-  ::ng-deep .content {
-    padding: 0 20px;
-  }
-}

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

@@ -1,19 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { IContentDesign } from '../../../shared/interfaces/interface';
-import { ContentDesignComponent } from 'angular-dumb-lib';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-cards',
-  standalone: true,
-  templateUrl: './cards.component.html',
-  styleUrls: ['./cards.component.scss'],
-  imports: [CommonModule, ContentDesignComponent]
-})
-export class CardsComponent implements OnInit {
-  @Input() cardContents: IContentDesign[] = [];
-  constructor() { }
-
-  ngOnInit() {
-  }
-}

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

@@ -1,14 +0,0 @@
-<div class="content-designer" [ngClass]="content.contentDirection">
-  <div *ngIf="content.coverImage" class="image">
-    <img [src]="content.coverImage" alt="Cover Image">
-  </div>
-
-  <div class="content">
-    <h2>{{ content.title }}</h2>
-    <p>{{ content.content }}</p>
-    <ng-container [ngTemplateOutlet]="content.template"></ng-container>
-    <app-button *ngIf="content.button" [config] = "content.button"
-    (clickEvent)="onButtonClick()">
-    </app-button>
-  </div>
-</div>

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;
-    }
-  }
-}