angular-dumb-lib 0.0.1 → 0.0.4

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-dumb-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-dumb-lib",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0"
@@ -8,18 +8,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/angular-dumb-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/angular-dumb-lib.mjs",
-      "esm": "./esm2022/angular-dumb-lib.mjs",
-      "default": "./fesm2022/angular-dumb-lib.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/angular-dumb-lib.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AngularDumbLibComponent } from './angular-dumb-lib.component';
+
+describe('AngularDumbLibComponent', () => {
+  let component: AngularDumbLibComponent;
+  let fixture: ComponentFixture<AngularDumbLibComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AngularDumbLibComponent]
+    });
+    fixture = TestBed.createComponent(AngularDumbLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/angular-dumb-lib.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-angular-dumb-lib',
+  template: `
+    <p>
+      angular-dumb-lib works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class AngularDumbLibComponent {
+
+}

package/src/lib/angular-dumb-lib.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { AngularDumbLibComponent } from './angular-dumb-lib.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    AngularDumbLibComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    AngularDumbLibComponent,
+  ]
+})
+export class AngularDumbLibModule { }

package/src/lib/angular-dumb-lib.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AngularDumbLibService } from './angular-dumb-lib.service';
+
+describe('AngularDumbLibService', () => {
+  let service: AngularDumbLibService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AngularDumbLibService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/angular-dumb-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AngularDumbLibService {
+
+  constructor() { }
+}

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

@@ -0,0 +1,15 @@
+<button
+  type="{{config.type}}"
+  class="btn btn-primary"
+  [disabled]="config.isDisabled"
+  [ngClass]="{'active': config.isActive,
+            'normal': config.designType === 'normal',
+            'contrast': config.designType === 'contrast'}"
+  (click)="onButtonClick()">
+    <div class="button-content">
+      <ng-container *ngIf="config.iconValue">
+      <i class="material-icons" data-toggle="tooltip" title="Delete">{{config.iconValue}}</i>
+    </ng-container>
+    <span>{{ config.label }}</span>
+    </div>
+</button>

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

@@ -0,0 +1,76 @@
+// Normal Button Variables
+$normal-bg-color: #007BFF;                 // Primary blue for normal button background
+$normal-text-color: #FFFFFF;               // White text for normal button
+$normal-border-color: #007BFF;             // Same as background for border
+$normal-hover-bg-color: #0056D2;           // Slightly darker blue for hover state
+$normal-hover-text-color: #FFFFFF;         // Keeping white text for hover state
+
+// Contrast Button Variables
+$contrast-bg-color: #F9F9F9;               // Off-white for contrast button background
+$contrast-text-color: #007BFF;             // Dark gray for contrast button text
+$contrast-border-color: #4A90E2;           // Dark blue for contrast button border
+$contrast-hover-bg-color: #E6F0FA;         // Light blue-gray for hover background
+$contrast-hover-text-color: #1A1A1A;       // Dark gray for hover text color
+
+$disabled-bg-color: #cccccc;
+$disabled-text-color: #666666;
+
+$active-bg-color: #003d99;
+
+// Base Button Styles
+button.btn.btn-primary {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  height: 3rem;
+
+  // Button Content Alignment
+  .button-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  // Disabled State (Shared between normal and contrast)
+  &:disabled {
+    background-color: $disabled-bg-color !important;
+    color: $disabled-text-color !important;
+    cursor: not-allowed !important;
+    border-color: $disabled-text-color !important; // You can remove this if not needed for normal design
+  }
+
+  // Normal Design
+  &.normal {
+    background-color: $normal-bg-color;
+    color: $normal-text-color;
+
+    &:hover:not(:disabled) {
+      background-color: $normal-hover-bg-color;
+    }
+  }
+
+  // Contrast Design
+  &.contrast {
+    color: $contrast-text-color;
+    border: 1px solid $contrast-border-color;
+
+    &:hover:not(:disabled) {
+      background-color: $contrast-hover-bg-color;
+      color: $contrast-hover-text-color;
+    }
+  }
+
+  // Active State (Applies to both designs)
+  &.active {
+    background-color: $active-bg-color;
+    color: $normal-text-color;
+
+    &:hover:not(:disabled) {
+      background-color: $normal-hover-bg-color;
+      color: $normal-text-color;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ButtonType, DesignType } from '../../../shared/enums/enum';
+import { IButtonConfig } from '../../../shared/interfaces/interface';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  imports: [CommonModule]
+})
+export class ButtonComponent implements OnInit {
+  @Input() config!: IButtonConfig;
+
+  @Output() clickEvent = new EventEmitter<void>();
+
+  constructor() { }
+
+  ngOnInit() {
+    this.config = {
+      isDisabled: false,
+      isActive: false,
+      designType: DesignType.normal,
+      type: ButtonType.submit,
+      ...this.config,
+    }
+  }
+
+  onButtonClick() {
+    this.clickEvent.emit();
+  }
+}

package/src/lib/components/atoms/datetime-picker/datetime-picker.component.html

@@ -0,0 +1,7 @@
+<div class="datetime-picker-container">
+  <label for="date">Datetime:</label>
+  <div class="inputs-container">
+    <input id="date" type="date" [(ngModel)]="selectedDate" (ngModelChange)="onDateChange($event)" (blur)="onTouched()">
+    <input id="time" type="time" [(ngModel)]="selectedTime" (ngModelChange)="onTimeChange($event)" (blur)="onTouched()">
+  </div>
+</div>

package/src/lib/components/atoms/datetime-picker/datetime-picker.component.scss

@@ -0,0 +1,24 @@
+.datetime-picker-container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.datetime-picker-container label {
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+.inputs-container {
+  display: flex;
+  gap: 1rem;
+}
+
+.inputs-container input[type="date"],
+.inputs-container input[type="time"] {
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 150px;
+}

package/src/lib/components/atoms/datetime-picker/datetime-picker.component.ts

@@ -0,0 +1,59 @@
+import { Component, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-datetime-picker',
+  standalone: true,
+  templateUrl: './datetime-picker.component.html',
+  styleUrls: ['./datetime-picker.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatetimePickerComponent),
+    multi: true
+  }],
+  imports: [FormsModule]
+})
+export class DatetimePickerComponent implements ControlValueAccessor {
+  selectedDate: string | null = null;
+  selectedTime: string | null = null;
+
+  public onChange: any = () => {};
+  public onTouched: any = () => {};
+
+  writeValue(value: any): void {
+    if (value) {
+      const date = new Date(value);
+      this.selectedDate = date.toISOString().split('T')[0]; // Extract the date part (YYYY-MM-DD)
+      this.selectedTime = date.toTimeString().split(' ')[0]; // Extract the time part (HH:mm:ss)
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Handle disabled state
+  }
+
+  onDateChange(event: any) {
+    this.selectedDate = event.target.value;
+    this.emitChange();
+  }
+
+  onTimeChange(event: any) {
+    this.selectedTime = event.target.value;
+    this.emitChange();
+  }
+
+  private emitChange() {
+    if (this.selectedDate && this.selectedTime) {
+      const dateTime = `${this.selectedDate}T${this.selectedTime}`;
+      this.onChange(new Date(dateTime));
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="file-selector">
+  <label *ngIf="label">{{ label }}</label>
+  <input
+  id="fileInput"
+  type="file"
+  (change)="onFileSelected($event)"
+  accept="image/*"
+  class="hidden-file-input">
+  <div class="file-selection">
+    <!-- Custom button to trigger file input -->
+    <app-button [config]="config"
+    class="custom-file-button"
+    (clickEvent)="triggerFileInput()">
+      Select Image
+    </app-button>
+    <div *ngIf="fileName" class="file-name">
+      {{ fileName }}
+    </div>
+  </div>
+
+  <div *ngIf="imageUrl">
+    <img [src]="imageUrl" alt="Selected Image" class="preview-image"/>
+  </div>
+</div>

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

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

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

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

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

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

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

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

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