gentera-rdnd 0.0.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,27 @@
+# GenteraRdnd
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "gentera-rdnd": {
+      "projectType": "library",
+      "root": "projects/gentera-rdnd",
+      "sourceRoot": "projects/gentera-rdnd/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/gentera-rdnd/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/gentera-rdnd/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/gentera-rdnd/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/gentera-rdnd/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "gentera-rdnd",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^18.1.0",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
+    "@fortawesome/angular-fontawesome": "^0.15.0",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "axios": "^1.9.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.2.19",
+    "@angular/cli": "^18.1.4",
+    "@angular/compiler-cli": "^18.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^18.2.0",
+    "typescript": "~5.5.2"
+  }
+}

package/projects/gentera-rdnd/README.md

@@ -0,0 +1,24 @@
+# GenteraRdnd
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project gentera-rdnd` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gentera-rdnd`.
+> Note: Don't forget to add `--project gentera-rdnd` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build gentera-rdnd` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build gentera-rdnd`, go to the dist folder `cd dist/gentera-rdnd` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test gentera-rdnd` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/gentera-rdnd/ng-package.json

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

package/projects/gentera-rdnd/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "gentera-rdnd",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/gentera-rdnd/src/lib/components/button/button.component.html

@@ -0,0 +1,21 @@
+<button
+  [ngClass]="{
+    'full': size === 'full',
+    'contained': size === 'contained',
+    'bordered': borders,
+    'disabled': disabled
+  }"
+  [style.background]="disabled ? themes.disabled.default : theme.default"
+  [style.color]="theme.fontColor"
+  [style.border]="borders ? '1px solid ' + theme.border : 'none'"
+  [style.cursor]="disabled ? 'not-allowed' : 'pointer'"
+  [attr.type]="type"
+  [disabled]="disabled"
+
+  (mouseleave)="onMouseLeave()"
+  (click)="handleClick($event)"
+  (mouseenter)="onMouseEnter()"
+>
+  <fa-icon *ngIf="icon" [icon]="icon" class="icon"></fa-icon>
+  {{ text }}
+</button>

package/projects/gentera-rdnd/src/lib/components/button/button.component.scss

@@ -0,0 +1,41 @@
+button {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+
+  &.full {
+    width: 100%;
+  }
+
+  &.contained {
+    width: fit-content;
+  }
+
+  &.bordered {
+    border-radius: 5px;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    background-color: #ddd;
+    border-color: transparent !important;
+    color: #9E9E9E !important;
+  }
+
+  .icon {
+    transition: all 0.3s ease;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+  &:active {
+    transform: scale(0.99);
+  }
+
+}

package/projects/gentera-rdnd/src/lib/components/button/button.component.ts

@@ -0,0 +1,81 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {Observable, Subscription} from 'rxjs';
+import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import {NgClass, NgIf} from "@angular/common";
+// @ts-ignore
+import {themes} from '@styles/themes';
+// @ts-ignore
+import {ButtonService, ButtonServiceType} from "@hooks/button.service";
+
+
+@Component({
+  selector: 'rdnd-button',
+  templateUrl: './button.component.html',
+  standalone: true,
+  imports: [
+    FaIconComponent,
+    NgIf,
+    NgClass
+  ],
+  styleUrls: ['./button.component.scss']
+})
+export class RdndButton implements OnInit, OnDestroy {
+  @Input() id!: string;
+  @Input() icon?: IconDefinition;
+  @Input() text: string = 'Enviar';
+  @Input() theme: any = themes.magenta;
+  @Input() size: 'contained' | 'full' = 'full';
+  @Input() type: 'button' | 'submit' | 'reset' = 'submit';
+  @Input() borders: boolean = true;
+  @Input() disabled: boolean = false;
+
+  @Output() callback: EventEmitter<void> = new EventEmitter<void>();
+
+  protected readonly themes = themes;
+  private subscription!: Subscription;
+  hoverBackgroundColor: string = this.theme.default;
+
+  buttonControl!: ButtonServiceType ;
+
+  constructor(private buttonService: ButtonService) {
+  }
+
+  ngOnInit(): void {
+    this.buttonControl = this.buttonService.useButton(this.id);
+
+    this.subscription = new Subscription( () =>
+      this.buttonControl.disabled$.subscribe((isDisabled: boolean) => {
+        this.disabled = isDisabled;
+      })
+    )
+
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
+  }
+
+  handleClick(event: MouseEvent): void {
+    event.stopPropagation();
+    if (!this.disabled && this.type !== 'submit') {
+      this.callback.emit();
+    }
+  }
+
+  onMouseEnter() {
+    if (!this.disabled) {
+      this.hoverBackgroundColor = this.theme.hover;
+    }
+  }
+
+  onMouseLeave() {
+    if (!this.disabled) {
+      this.hoverBackgroundColor = this.theme.default;
+    }
+  }
+
+  protected readonly event = event;
+}

package/projects/gentera-rdnd/src/lib/gentera-rdnd.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-gentera-rdnd',
+  standalone: true,
+  imports: [],
+  template: `
+    <p>
+      gentera-rdnd works!
+    </p>
+  `,
+  styles: ``
+})
+export class GenteraRdndComponent {
+
+}

package/projects/gentera-rdnd/src/lib/gentera-rdnd.service.ts

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

package/projects/gentera-rdnd/src/lib/hooks/button.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface ButtonServiceType {
+  enable: () => void;
+  disable: () => void;
+  disabled$: Observable<boolean>
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ButtonService {
+  private buttonsState: { [id: string]: BehaviorSubject<boolean> } = {};
+
+  private ensureButtonExists(id: string): void {
+    if (!this.buttonsState[id]) {
+      this.buttonsState[id] = new BehaviorSubject<boolean>(false);
+    }
+  }
+
+  useButton(id: string): ButtonServiceType {
+    this.ensureButtonExists(id);
+
+    return {
+      disabled$: this.buttonsState[id].asObservable(),
+      enable: () => this.buttonsState[id].next(false),
+      disable: () => this.buttonsState[id].next(true),
+    };
+  }
+}

package/projects/gentera-rdnd/src/lib/hooks/input.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import { FormControl, ValidationErrors } from '@angular/forms';
+
+export type InputStateType = {
+  isValid: boolean;
+  valid: Observable<boolean>;
+  errorMessage: Observable<string | null>;
+  setValid: (isValid: boolean) => void;
+  setErrorMessage: (message: string | null) => void;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InputService {
+
+  private inputState: {
+    [id: string]: {
+      valid$: BehaviorSubject<boolean>;
+      errorMessage$: BehaviorSubject<string | null>;
+    };
+  } = {};
+
+  private ensureInputExists(id: string): void {
+    if (!this.inputState[id]) {
+      this.inputState[id] = {
+        valid$: new BehaviorSubject<boolean>(false),
+        errorMessage$: new BehaviorSubject<string | null>(null),
+      };
+    }
+  }
+
+  useInput(id: string): InputStateType {
+    this.ensureInputExists(id);
+
+    return {
+      isValid: this.inputState[id].valid$.value,
+      valid: this.inputState[id].valid$.asObservable(),
+      errorMessage: this.inputState[id].errorMessage$.asObservable(),
+      setValid: (isValid: boolean) => this.inputState[id].valid$.next(isValid),
+      setErrorMessage: (message: string | null) =>
+        this.inputState[id].errorMessage$.next(message),
+    };
+  }
+
+  updateInputState(control: FormControl, id: string): void {
+    this.ensureInputExists(id);
+
+    const errors: ValidationErrors | null = control.errors;
+
+    if (control.valid) {
+      this.inputState[id].valid$.next(true);
+      this.inputState[id].errorMessage$.next(null);
+    } else {
+      this.inputState[id].valid$.next(false);
+      this.inputState[id].errorMessage$.next(this.getErrorMessage(errors));
+    }
+  }
+
+  private getErrorMessage(errors: ValidationErrors | null): string | null {
+    if (!errors) return null;
+
+    if (errors['required']) return 'Este campo es obligatorio';
+    if (errors['minlength'])
+      return `Mínimo ${errors['minlength'].requiredLength} caracteres requeridos`;
+    if (errors['maxlength'])
+      return `Máximo ${errors['maxlength'].requiredLength} caracteres permitidos`;
+    if (errors['email']) return 'Formato de correo inválido';
+
+    return null;
+  }
+}

package/projects/gentera-rdnd/src/lib/hooks/modal.service.ts

@@ -0,0 +1,88 @@
+import {Injectable, ComponentRef} from '@angular/core';
+import {ApplicationRef, ComponentFactoryResolver, Injector} from '@angular/core';
+import {ModalComponent} from '../components/modal/modal.component';
+import {faCircleCheck, faCircleQuestion, faCircleXmark, IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import {themes} from "../styles/themes";
+import {faQuestion} from "@fortawesome/free-solid-svg-icons/faQuestion";
+import {faTable} from "@fortawesome/free-solid-svg-icons/faTable";
+
+
+@Injectable({providedIn: 'root'})
+export class ModalService {
+  private modalRef: ComponentRef<ModalComponent> | null = null;
+
+  constructor(
+    private appRef: ApplicationRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector
+  ) {
+  }
+
+  openModal(title: string, content: string, type: 'success' | 'error' | 'question' | 'warning' | 'info' = 'success', confirmText = 'Continuar', cancelText = 'Cancelar'): Promise<boolean> {
+    if (this.modalRef) return Promise.resolve(false);
+
+    const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+    this.modalRef = factory.create(this.injector);
+
+    this.modalRef.instance.title = title;
+    this.modalRef.instance.type = type;
+    this.modalRef.instance.theme = this.getStyleTheme(type);
+    this.modalRef.instance.content = content;
+    this.modalRef.instance.icon = this.getIcon(type);
+    this.modalRef.instance.confirmText = confirmText;
+    this.modalRef.instance.cancelText = cancelText;
+
+    const result = new Promise<boolean>((resolve) => {
+      this.modalRef!.instance.close.subscribe((res: boolean) => {
+        this.closeModal();
+        resolve(res);
+      });
+    });
+
+    this.appRef.attachView(this.modalRef.hostView);
+    const domElem = (this.modalRef.hostView as any).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+
+    return result;
+  }
+
+  getStyleTheme = (theme: 'success' | 'error' | 'question' | 'warning' | 'info') => {
+    switch (theme) {
+      case "success":
+        return themes.green;
+      case 'error':
+        return themes.magentaNormal;
+      case 'question':
+        return themes.purple
+      case 'warning':
+        return themes.yellow
+      case 'info':
+        return themes.purple
+    }
+  }
+
+  closeModal(): void {
+    if (this.modalRef) {
+      this.appRef.detachView(this.modalRef.hostView);
+      this.modalRef.destroy();
+      this.modalRef = null;
+    }
+  }
+
+  getIcon(theme: 'success' | 'error' | 'question' | 'warning' | 'info'): IconDefinition {
+    switch (theme) {
+      case 'error':
+        return faTriangleExclamation;
+      case 'question':
+        return faCircleQuestion
+      case "success":
+        return faCircleCheck
+      case "warning":
+        return faTriangleExclamation;
+      case "info":
+        return faTable;
+    }
+
+  }
+}

package/projects/gentera-rdnd/src/lib/styles/colors.ts

@@ -0,0 +1,55 @@
+export const colors = {
+  black: '#171717',
+  'black-light': '#343434',
+  'black-dark': '#000000',
+  'black-navy': '#191a21',
+
+  'xs-dark-gray': '#5A5A5A',
+  'dark-gray': '#9E9E9E',
+  'medium-gray': '#AFAFAF',
+  gray: '#C4C4C4',
+  'light-gray': '#C6C6C6',
+  'xs-light-gray': '#DFDFDF',
+  'xxs-light-gray': '#F2F2F2',
+  'soft-white': '#EEEEEE',
+
+  green: '#28a746',
+  'green-medium': '#208B6A',
+  'green-dark': '#156a29',
+  'green-xs-dark': 'rgb(33, 97, 90)',
+  'green-1': '#009F74',
+  'green-2': '#00B987',
+  'green-3': '#19C496',
+  'green-light': '#84ce94',
+  'green-4': '#50D8B3',
+  'green-5': '#83E6B8',
+
+  "blue-info": '#7390EC',
+  blue: '#3360fa',
+  'blue-dark': '#1a389e',
+  'blue-light': '#3390fa',
+  'blue-gray-soft': '#E5EAEDFF',
+  'blue-gray-light': 'rgb(244,247,250)',
+
+  orange: '#F77C00',
+  'orange-light': '#F7B500',
+
+  yellow: '#F09D00',
+  "yellow-normal": '#FFBC57',
+  'yellow-light': '#FFC400',
+
+  purple: '#6459be',
+  'purple-light': 'rgb(149, 138, 242)',
+
+  red: '#E60018',
+  'red-light': '#e74364',
+  'red-medium': '#c51628',
+
+  "white": "#FFFFFF",
+  "magentaStart": "#C2185B",
+  "magentaEnd": "#7E0083",
+  'magenta-normal': '#B41364',
+
+  disabled: '#C6C6C6',
+  "disabledText": "#9E9E9E",
+};

package/projects/gentera-rdnd/src/lib/styles/themes.ts

@@ -0,0 +1,98 @@
+import {colors} from './colors';
+
+export const themes = {
+  disabled: {
+    default: colors.disabled,
+    hover: colors.disabled,
+    border: 'transparent',
+    active: colors.disabled,
+    fontColor: colors.disabledText,
+  },
+  magenta: {
+    default: `linear-gradient(to right, ${colors.magentaStart}, ${colors.magentaEnd})`,
+    hover: `linear-gradient(to right, ${colors.magentaEnd}, ${colors.magentaStart})`,
+    //default: `${colors.magentaStart}`,
+    border: 'transparent',
+    active: colors.magentaStart,  // Color al hacer clic
+    fontColor: colors.white,      // Texto en blanco
+  },
+  magentaSolid: {
+    default: `${colors.magentaStart}`,
+    hover: `${colors.magentaEnd}`,
+    border: 'transparent',
+    active: colors.magentaStart,  // Color al hacer clic
+    fontColor: colors.white,      // Texto en blanco
+  },
+  magentaNormal: {
+    default: `${colors["magenta-normal"]}`,
+    hover: `${colors.magentaEnd}`,
+    border: 'transparent',
+    active: colors["magenta-normal"],  // Color al hacer clic
+    fontColor: colors.white,      // Texto en blanco
+  },
+  gray: {
+    default: `${colors["light-gray"]}`,
+    hover: `linear-gradient(to right, ${colors.magentaEnd}, ${colors.magentaStart})`,
+    //default: `${colors.magentaStart}`,
+    border: 'transparent',
+    active: colors.magentaStart,  // Color al hacer clic
+    fontColor: colors.white,      // Texto en blanco
+  },
+  green: {
+    default: `${colors["green-medium"]}`,
+    hover: colors.green,
+    border: 'transparent',
+    active: colors["green-xs-dark"],
+    fontColor: colors.white,
+  },
+  red: {
+    default: `${colors["red-medium"]}`,
+    hover: colors.red,
+    border: 'transparent',
+    active: colors["red"],
+    fontColor: colors.white,
+  },
+  bordered: {
+    default: 'transparent',
+    hover: 'transparent',
+    border: colors.magentaStart,
+    active: 'transparent',
+    fontColor: colors.magentaStart
+  },
+  borderedWhite: {
+    default: 'white',
+    hover: 'white',
+    border: colors.magentaStart,
+    active: 'white',
+    fontColor: colors.magentaStart
+  },
+  transparent: {
+    default: 'transparent',
+    hover: 'transparent',
+    border: 'transparent',
+    active: 'transparent',
+    fontColor: colors.magentaStart
+  },
+  purple: {
+    default: `${colors['blue-info']}`,
+    hover: colors["purple-light"],
+    border: 'transparent',
+    active: colors.purple,
+    fontColor: colors.white,
+  },
+  yellow: {
+    default: `${colors['yellow-normal']}`,
+    hover: colors["yellow"],
+    border: 'transparent',
+    active: colors["yellow-light"],
+    fontColor: colors.white,
+  },
+  blue: {
+    default: `${colors['yellow-normal']}`,
+    hover: colors["yellow"],
+    border: 'transparent',
+    active: colors["yellow-light"],
+    fontColor: colors.white,
+  }
+
+};

package/projects/gentera-rdnd/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of gentera-rdnd
+ */
+
+export * from './lib/components/button/button.component'

package/projects/gentera-rdnd/tsconfig.lib.json

@@ -0,0 +1,28 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "paths": {
+      "@components/*": ["src/lib/components/*"],
+      "@assets/*": ["src/lib/assets/*"],
+      "@services/*": ["src/lib/services/*"],
+      "@types/*": ["src/lib/interfaces/*"],
+      "@hooks/*": ["src/lib/hooks/*"],
+      "@styles/*": ["src/lib/styles/*"],
+      "@utils/*": ["src/lib/utils/*"]
+    }
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/gentera-rdnd/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/gentera-rdnd/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "paths": {
+      "gentera-rdnd": [
+        "./dist/gentera-rdnd"
+      ]
+    },
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}