angular-dumb-lib 0.0.6 → 0.0.9

package/lib/shared/enums/enum.d.ts

@@ -0,0 +1,59 @@
+export declare enum DesignType {
+    normal = "normal",
+    contrast = "contrast"
+}
+export declare enum ButtonType {
+    submit = "submit",
+    button = "button"
+}
+export declare enum InputGroupType {
+    textual = "textual",
+    datetime = "datetime",
+    selection = "selection",
+    file = "file"
+}
+export declare enum InputDirection {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
+export declare enum InputType {
+    image = "image",
+    text = "text",
+    richText = "richText",
+    password = "password",
+    email = "email",
+    url = "url",
+    tel = "tel",
+    search = "search",
+    number = "number",
+    range = "range",
+    hidden = "hidden",
+    textarea = "textarea",
+    datetime = "datetime",
+    checkbox = "checkbox",
+    radio = "radio",
+    select = "select",
+    file = "file"
+}
+export declare enum ContentDirection {
+    left = "left",
+    right = "right",
+    up = "up",
+    down = "down"
+}
+export declare enum SelectionType {
+    dropdown = "dropdown",
+    radio = "radio",
+    checkbox = "checkbox"
+}
+export declare enum LoadingSize {
+    Xbig = "xbig",
+    Big = "big",
+    Medium = "medium",
+    Small = "small",
+    Xsmall = "xsmall"
+}
+export declare enum MenuDirection {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}

package/lib/shared/interfaces/interface.d.ts

@@ -0,0 +1,58 @@
+import { TemplateRef } from "@angular/core";
+import { ButtonType, ContentDirection, DesignType, InputDirection, InputType } from "../enums/enum";
+export interface IButtonConfig {
+    isDisabled?: boolean;
+    isActive?: boolean;
+    designType?: DesignType;
+    label?: string;
+    iconValue?: string;
+    type?: ButtonType;
+    action?: string;
+}
+export interface IInputConfig {
+    required: boolean;
+    label?: string;
+    name: string;
+    placeholder?: string;
+    type?: InputType;
+    direction?: InputDirection;
+    isValid?: boolean;
+    options?: IDropdownOption[];
+}
+export interface IContentDesign {
+    name?: string;
+    coverImage?: string;
+    issuedDate?: string;
+    title?: string;
+    contentDirection?: ContentDirection;
+    content?: string;
+    template: TemplateRef<unknown> | null;
+    button?: IButtonConfig;
+}
+export interface IDropdownOption {
+    label: string;
+    value: any;
+}
+export interface IMenuItem {
+    label: string;
+    route: string;
+}
+export interface IModalEvent {
+    isDialog: boolean;
+    isModalVisible: boolean;
+    template: TemplateRef<unknown> | null;
+    title: string;
+    params?: {
+        [key: string]: any;
+    };
+    onOk?: () => void;
+    onCancel?: () => void;
+}
+export interface IPaginator {
+    itemsPerPage: number;
+    selectedPage: number;
+}
+export interface IDataColumnConfig {
+    field: string;
+    name: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-dumb-lib",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0"
@@ -8,5 +8,18 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
-}
+  "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"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,21 @@
+export * from './lib/angular-dumb-lib.service';
+export * from './lib/angular-dumb-lib.component';
+export * from './lib/angular-dumb-lib.module';
+export * from './lib/components/atoms/button/button.component';
+export * from './lib/components/atoms/datetime-picker/datetime-picker.component';
+export * from './lib/components/atoms/file-selection/file-selection.component';
+export * from './lib/components/atoms/input/input.component';
+export * from './lib/components/atoms/loading/loading.component';
+export * from './lib/components/atoms/selection/selection.component';
+export * from './lib/components/atoms/slider/slider.component';
+export * from './lib/components/atoms/tags/tags.component';
+export * from './lib/components/molecules/cards/cards.component';
+export * from './lib/components/molecules/content-design/content-design.component';
+export * from './lib/components/molecules/form/form.component';
+export * from './lib/components/molecules/modal/modal.component';
+export * from './lib/components/molecules/paginator/paginator.component';
+export * from './lib/components/molecules/table/table.component';
+export * from './lib/components/pages/footer/footer.component';
+export * from './lib/components/pages/login/login.component';
+export * from './lib/components/pages/menu/menu.component';
+export * from './lib/components/pages/version/version.component';

package/ng-package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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>