angular-dumb-lib 0.0.2 → 0.0.5

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

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LoadingSize } from '../../../shared/enums/enum';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-loading',
+  standalone: true,
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+  imports: [CommonModule]
+})
+export class LoadingComponent implements OnInit {
+  @Input() size: LoadingSize = LoadingSize.Medium;
+
+	@Input() imageSrc: string = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

package/src/lib/components/atoms/selection/selection.component.html

@@ -0,0 +1,38 @@
+<div class="dropdown" *ngIf="displayType === 'dropdown'">
+  <label *ngIf="label">{{ label }}</label>
+  <select
+  (change)="onSelectChange($event)"
+  [multiple]="isMultiSelect"
+  [(ngModel)]="value">
+    <option *ngFor="let option of options"
+    [value]="option.value"
+    [selected]="isSelected(option.value)">
+      {{ option.label }}
+    </option>
+  </select>
+</div>
+
+<div class="radio-group" *ngIf="displayType === 'radio'">
+  <label *ngIf="label">{{ label }}</label>
+  <div *ngFor="let option of options">
+    <input
+      type="radio"
+      [value]="option.value"
+      [checked]="option.value === selectedValue"
+      (change)="onSelectChange($event)"
+      name="radioGroup"/>
+    <label>{{ option.label }}</label>
+  </div>
+</div>
+
+<div class="checkbox-group" *ngIf="displayType === 'checkbox'">
+  <label *ngIf="label">{{ label }}</label>
+  <div *ngFor="let option of options">
+    <input
+      type="checkbox"
+      [value]="option.value"
+      [checked]="isSelected(option.value)"
+      (change)="onMultiSelectChange($event)"/>
+    <label>{{ option.label }}</label>
+  </div>
+</div>

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

@@ -0,0 +1,65 @@
+/* Dropdown styles */
+.dropdown, .radio-group, .checkbox-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%; // Adjust this as needed
+  min-width: 150px;
+
+  label {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+}
+
+/* Select (Dropdown) styles */
+.dropdown select {
+  width: 100%;
+  padding: 9px 8px; // Compact padding
+  font-size: 12px;
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  appearance: none; // Hide default dropdown arrow in some browsers
+  cursor: pointer;
+  transition: border-color 0.3s, box-shadow 0.3s;
+
+  &:hover {
+    border-color: #888;
+  }
+
+  &:focus {
+    border-color: #03A9F4;
+    box-shadow: 0 0 5px rgba(3, 169, 244, 0.5);
+    outline: none;
+  }
+}
+
+/* Radio button styles */
+.radio-group div, .checkbox-group div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px; // Space between options
+}
+
+.radio-group input[type="radio"],
+.checkbox-group input[type="checkbox"] {
+  margin-right: 8px; // Space between input and label
+  cursor: pointer;
+}
+
+/* Radio/Checkbox label styles */
+.radio-group label, .checkbox-group label {
+  font-size: 12px;
+  color: #333;
+  cursor: pointer; // Ensures clicking the label checks the input
+}
+
+/* Focus state for radio and checkbox */
+.radio-group input[type="radio"]:focus,
+.checkbox-group input[type="checkbox"]:focus {
+  outline: 2px solid #03A9F4; // Focus indicator
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,84 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectionType } from '../../../shared/enums/enum';
+import { IDropdownOption } from '../../../shared/interfaces/interface';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-selection',
+  templateUrl: './selection.component.html',
+  styleUrls: ['./selection.component.scss'],
+  standalone: true,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectionComponent),
+    multi: true
+  }],
+  imports: [CommonModule, FormsModule]
+})
+export class SelectionComponent implements OnInit, ControlValueAccessor {
+  @Input() label: string = '';  // Label for the dropdown
+  @Input() options: IDropdownOption[] | undefined = [];  // Array of options
+  @Input() selectedValue: any;  // Pre-selected value (single selection)
+  @Input() selectedValues: any[] = [];  // Pre-selected values (multi-selection)
+  @Input() isMultiSelect: boolean = false;  // Enable multi-selection for dropdown
+  @Input() displayType: SelectionType = SelectionType.dropdown;  // Control the display type (dropdown, radio, or checkbox)
+
+  @Output() selectedChange: EventEmitter<any> = new EventEmitter<any>();  // Event emitter for value changes
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  get value() {
+    return this.selectedValue;
+  }
+
+  set value(value: any) {
+    this.selectedValue = (this.isMultiSelect === false &&  Array.isArray(value))? value[0] : value;
+
+    this.onChange(this.selectedValue);
+    this.onTouched();
+  }
+
+  ngOnInit(): void {
+    if (this.options && this.options.length > 0 && !this.isMultiSelect) {
+      this.selectedValue = this.options[0].value;
+      this.onChange(this.selectedValue);
+    }
+  }
+
+  onSelectChange(event: Event) {
+    this.selectedChange.emit(this.selectedValue);
+  }
+
+  onMultiSelectChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    if (target.checked) {
+      this.selectedValues.push(value);
+    } else {
+      this.selectedValues = this.selectedValues.filter(v => v !== value);
+    }
+
+    this.selectedChange.emit(this.selectedValues);
+  }
+
+  isSelected(value: any): boolean {
+    return this.isMultiSelect ? this.selectedValues.includes(value) : value === this.selectedValue;
+  }
+
+  writeValue(value: any): void {
+    this.selectedValue = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Implement if you need to handle disabled state
+  }
+}

package/src/lib/components/atoms/slider/slider.component.html

@@ -0,0 +1,14 @@
+<div class="slider-container">
+  <div class="slider-wrapper">
+    <div
+      class="slide"
+      *ngFor="let image of images; let i = index"
+      [class.active]="i === currentIndex"
+      [ngStyle]="{'background-image': 'url(' + image + ')'}">
+    </div>
+  </div>
+
+  <!-- Navigation Buttons -->
+  <button class="prev" (click)="prevSlide()">&#10094;</button>
+  <button class="next" (click)="nextSlide()">&#10095;</button>
+</div>

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

@@ -0,0 +1,50 @@
+.slider-container {
+  position: relative;
+  width: 100%;
+  margin: auto;
+  overflow: hidden;
+}
+
+.slider-wrapper {
+  position: relative;
+  width: 100%;
+  height: 400px;
+}
+
+.slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slide.active {
+  opacity: 1;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.prev {
+  left: 10px;
+}
+
+.next {
+  right: 10px;
+}
+
+.prev:hover, .next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}

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

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slider',
+  standalone: true,
+  templateUrl: './slider.component.html',
+  styleUrls: ['./slider.component.scss'],
+  imports: [CommonModule]
+})
+export class SliderComponent implements OnInit {
+  @Input() images: string[] = [];
+  @Input() autoSlide: boolean = false;
+  @Input() slideInterval: number = 3000;  // Time interval for auto slide
+
+  currentIndex: number = 0;
+
+  ngOnInit(): void {
+    if (this.autoSlide) {
+      this.startAutoSlide();
+    }
+  }
+
+  startAutoSlide(): void {
+    setInterval(() => {
+      this.nextSlide();
+    }, this.slideInterval);
+  }
+
+  prevSlide(): void {
+    this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
+  }
+
+  nextSlide(): void {
+    this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
+  }
+}

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

@@ -0,0 +1,25 @@
+<div class="tags-select-container">
+  <label for="searchTags">Search and Select Tags:</label>
+  <input
+    id="searchTags"
+    type="text"
+    [(ngModel)]="searchText"
+    (input)="filterTags()"
+    placeholder="Search tags..."
+  />
+
+  <div *ngIf="filteredTags.length > 0">
+    <ul class="tag-list">
+      <li *ngFor="let tag of filteredTags" (click)="onTagSelectionChange(tag)">
+        {{ tag }}
+      </li>
+    </ul>
+  </div>
+
+  <div class="selected-tags">
+    <button *ngFor="let tag of selectedTags" class="tag-button">
+      {{ tag }}
+      <span class="remove-tag" (click)="removeTag(tag)">x</span>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+.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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,68 @@
+.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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,17 @@
+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;
+}