angular-dumb-lib 0.0.6 → 0.0.9

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>

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>