angular-dumb-lib 0.0.6 → 0.0.8

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

@@ -1,35 +0,0 @@
-.file-selector {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 8px;
-    font-weight: bold;
-  }
-
-  input[type="file"] {
-    margin-bottom: 16px;
-  }
-
-  .preview-image {
-    max-width: 150px;  // Adjust the image preview size as needed
-    max-height: 150px;
-    border: 1px solid #ccc;
-    margin-top: 8px;
-  }
-
-  .hidden-file-input {
-    opacity: 0;
-    position: absolute;
-    z-index: -1; /* Keeps it off the screen, but functional */
-  }
-
-  .file-selection {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}

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

@@ -1,86 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ButtonComponent } from 'angular-dumb-lib';
-import { IButtonConfig } from 'dist/angular-dumb-lib/lib/shared/interfaces/interface';
-import { ButtonType } from '../../../shared/enums/enum';
-
-@Component({
-  selector: 'app-file-selection',
-  standalone: true,
-  templateUrl: './file-selection.component.html',
-  styleUrls: ['./file-selection.component.scss'],
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => FileSelectionComponent),
-    multi: true
-  }],
-  imports: [CommonModule, ButtonComponent]
-})
-export class FileSelectionComponent implements OnInit, ControlValueAccessor {
-  @Input() label!: string;  // Label for the file selector
-  @Input() chooseFileLabel!: string;
-  @Input() imageUrl: string | ArrayBuffer | null = null;  // Allow imageUrl to be passed externally
-  @Input() fileName: string | null = null;  // Allow fileName to be passed externally
-
-  config!: IButtonConfig;
-
-  onChange: any = () => {};
-  onTouched: any = () => {};
-  private _value: any = undefined;
-
-  get value() {
-    return this._value;
-  }
-
-  set value(value: any) {
-    this._value = value;
-    this.onChange(this._value);
-    this.onTouched();
-  }
-
-  ngOnInit(): void {
-    this.config = {
-      type: ButtonType.button,
-      label: this.chooseFileLabel
-    }
-  }
-
-  onFileSelected(event: Event) {
-    const input = event.target as HTMLInputElement;
-
-    if (input.files && input.files.length > 0) {
-      const file = input.files[0];
-
-      // Store the file name to display it in the UI
-      this.fileName = file.name;
-      this.value = file;
-
-      // Generate image preview URL if it's an image
-      const reader = new FileReader();
-      reader.onload = (e: any) => {
-        this.imageUrl = e.target.result;  // Set image URL for preview
-      };
-      reader.readAsDataURL(file);
-    }
-  }
-
-  triggerFileInput() {
-    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-    fileInput.click();  // Programmatically click the hidden file input
-  }
-
-  writeValue(value: any): void {
-    this._value = 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/input/input.component.html

@@ -1,28 +0,0 @@
-<div class="input-item" [ngClass]="config.direction">
-  <label *ngIf="config.label">
-    {{ config.label }}
-    <span *ngIf="config.required" class="required-indicator">*</span>
-  </label>
-
-  <div class="input-container">
-    <input *ngIf="config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'"
-      [type]="config.type"
-      [name]="config.name"
-      [required]="config.required"
-      [(ngModel)]="value"
-      [placeholder] = "config.placeholder"
-      [ngClass]="{'input-error': !config.isValid}">
-    <textarea *ngIf="config.type === 'textarea'"
-        [name]="config.name"
-        [required]="config.required"
-        [(ngModel)]="value"
-        [placeholder] = "config.placeholder"
-        [ngClass]="{'input-error': !config.isValid}">
-    </textarea>
-    <i *ngIf="!config.isValid" class="material-icons warning-icon">error</i>
-  </div>
-
-  <div *ngIf="config.type === 'image'">
-    <img *ngIf="value" [src]="value" alt="Selected Image" class="preview-image"/>
-  </div>
-</div>

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

@@ -1,64 +0,0 @@
-.input-item {
-  display: flex;
-  width: 100%;
-  gap: 10px;
-
-  .input-container {
-    display: flex;
-    width: inherit; // Maintain the width of the input container
-    .input-error {
-      border-color: red;
-    }
-  }
-
-  label {
-    display: flex;
-    align-items: center;
-  }
-
-  &.horizontal {
-    flex-direction: row;
-
-    label {
-      width: 30%; // Adjust label width for horizontal layout
-    }
-  }
-
-  &.vertical {
-    flex-direction: column;
-  }
-
-  .preview-image {
-    max-width: 150px; // Adjust the image preview size as needed
-    max-height: 150px;
-    border: 1px solid #ccc;
-    margin-top: 8px;
-  }
-
-  .required-indicator, .warning-icon {
-    display: flex;
-    align-items: center;
-    color: red; // Change this color as needed
-    margin-left: 4px; // Space between label and asterisk
-  }
-
-  .warning-icon {
-    font-weight: bold;
-  }
-
-  input,
-  textarea {
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 0.25rem;
-    width: -webkit-fill-available; // Ensure input takes full available width
-  }
-
-  quill-editor {
-    width: 100%;
-  }
-}
-
-
-
-

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

@@ -1,57 +0,0 @@
-import { Component, Input, OnInit, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { InputDirection, InputType } from '../../../shared/enums/enum';
-import { IInputConfig } from '../../../shared/interfaces/interface';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-input',
-  standalone: true,
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss'],
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => InputComponent),
-    multi: true
-  }],
-  imports: [CommonModule, FormsModule]
-})
-export class InputComponent implements OnInit, ControlValueAccessor {
-  @Input() config!: IInputConfig;
-
-  private _value: any = '';
-
-  get value() {
-    return this._value;
-  }
-
-  set value(value: any) {
-    this._value = value;
-    this.onChange(this._value);
-    this.onTouched();
-  }
-
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  constructor() { }
-
-  writeValue(value: any): void {
-    this._value = value;
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn
-  }
-
-  ngOnInit() {
-    this.config = {
-      type: InputType.text,
-      direction: InputDirection.vertical,
-      isValid: true,
-      ...this.config,
-    };
-  }
-}

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

@@ -1,3 +0,0 @@
-<div [ngClass]="size" class="loading-content">
-  <img [src]="imageSrc" />
-</div>

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

@@ -1,36 +0,0 @@
-:host {
-	width: 100%;
-	height: 100%;
-	display: table;
-	text-align: center;
-}
-
-.loading-content {
-	display: table-cell;
-	vertical-align: middle;
-}
-
-.xbig img {
-	width: 256px;
-	height: 256px;
-}
-
-.big img {
-	width: 128px;
-	height: 128px;
-}
-
-.medium img {
-	width: 64px;
-	height: 64px;
-}
-
-.small img {
-	width: 32px;
-	height: 32px;
-}
-
-.xsmall img {
-	width: 16px;
-	height: 16px;
-}

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

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

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

@@ -1,65 +0,0 @@
-/* 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

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

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

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

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

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