gentera-rdnd 0.2.3 → 0.2.4

package/ng-package.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/gentera-rdnd",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "LICENSE",
+    "README.md"
+  ]
+
+}

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "gentera-rdnd",
-  "version": "0.2.3",
+  "version": "0.2.4",
+  "license": "MIT",
+  "description": "Librería Angular para componentes reutilizables en Gentera",
+  "author": "Ruben Redondo Barroso",
   "peerDependencies": {
     "@angular/common": "^20.2.1",
     "@angular/core": "^20.2.1",
@@ -9,16 +12,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/gentera-rdnd.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/gentera-rdnd.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/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/src/lib/components/button/button.component.scss

@@ -0,0 +1,41 @@
+button {
+  height: 36px;
+  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/src/lib/components/button/button.component.ts

@@ -0,0 +1,82 @@
+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";
+import {ButtonService, ButtonServiceType} from "../../hooks/button.service";
+// @ts-ignore
+
+
+
+@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/src/lib/components/input/Readme.md

@@ -0,0 +1,33 @@
+# 📥 Componente: `rdnd-input`
+
+Este componente representa un campo de entrada (`input`) reutilizable con soporte para validaciones, tipos de entrada (`text`, `password`, `number`), íconos de error, y control de visibilidad de contraseñas.
+
+---
+
+## ✅ Uso básico
+
+```html
+<rdnd-input
+  [id]="'usuario'"
+  [name]="'usuario'"
+  [type]="'text'"
+  [placeholder]="'Ingresa tu usuario'"
+  [value]="usuario"
+  [validators]="[Validators.required]"
+  (valueChange)="usuario = $event"
+></rdnd-input>
+```
+
+
+## ✅ Ejemplo de uso avanzado
+```html
+<rdnd-input
+  id="input-login-username"
+  name="login-username"
+  type="text"
+  placeholder="Contraseña"
+  [value]="clave"
+  [validators]="[Validators.required, Validators.minLength(6)]"
+  (valueChange)="clave = $event"
+  (onBlur)="validarClave($event)"
+></rdnd-input>

package/src/lib/components/input/input.component.html

@@ -0,0 +1,50 @@
+<div [ngClass]="{ 'disabled': disabled }" class="input-container">
+  <!-- Ícono de error que aparece por encima del campo si hay error -->
+  <span *ngIf="hasError()" class="error-icon" (click)="toggleErrorDisplay()">&#9432;</span>
+
+  <!-- Botón de mostrar/ocultar contraseña centrado verticalmente -->
+  <button *ngIf="type === 'password'" type="button" (click)="handleTogglePassword()" class="toggle-button">
+    <fa-icon [icon]="faEyeSlash" class="icon" [class.active]="showPassword"></fa-icon>
+  </button>
+
+  @if (showLabel) {
+    <label class="text-small dark-gray">{{ placeholder }}</label>
+  }
+
+
+  <!-- Input compatible con FormControl o signals -->
+  <input
+    *ngIf="control; else signalInput"
+    [type]="type === 'password' && showPassword ? 'text' : type"
+    [formControl]="control"
+    [placeholder]="showLabel ? '' : placeholder"
+    [disabled]="disabled"
+    (keydown)="handleKeyDown($event)"
+    (paste)="handlePaste($event)"
+    (focus)="handleFocus($event)"
+    (blur)="handleBlur($event)"
+    [ngClass]="{ 'error-border': hasError() }"
+  />
+
+  <!-- Input para signals -->
+  <ng-template #signalInput>
+    <input
+      [type]="type === 'password' && showPassword ? 'text' : type"
+      [value]="value"
+      [placeholder]="showLabel ? '' : placeholder"
+      [disabled]="disabled"
+      (input)="handleChange($event)"
+      (keydown)="handleKeyDown($event)"
+      (paste)="handlePaste($event)"
+      (focus)="handleFocus($event)"
+      (blur)="handleBlur($event)"
+      [ngClass]="{ 'error-border': false }"
+    />
+  </ng-template>
+
+
+  <!-- Mensaje de error que aparece solo cuando se clickea en el ícono de error -->
+  <div *ngIf="control?.invalid && control?.dirty && showError" class="error-message">
+    {{ getErrorMessage() }}
+  </div>
+</div>

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

@@ -0,0 +1,86 @@
+.input-container {
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+}
+
+input {
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+  padding: 7px 35px 7px 8px;
+  border-radius: 3px;
+  font-family: 'Poppins', sans-serif;
+  height: 36px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  background-color: white !important;
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+
+  &:-webkit-autofill {
+    background-color: white !important;
+  }
+
+  &.error-border {
+    border-color: red;
+  }
+}
+
+input:focus {
+  border: 1px solid blue;
+}
+
+.error-icon {
+  position: absolute;
+  right: 8px;
+  top: 1px;
+  bottom: 1px;
+  font-size: 24px;
+  color: red;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  background-color: white;
+}
+
+.error-message {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  //background-color: #ffdddd;
+  color: red;
+  padding: 0 0 0 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: sans-serif;
+  white-space: nowrap;
+}
+
+.toggle-button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.icon {
+  transition: opacity 0.3s ease;
+}
+
+.icon.active {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,133 @@
+import {Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges} from '@angular/core';
+import {FormControl, ReactiveFormsModule, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
+import {faEyeSlash} from '@fortawesome/free-solid-svg-icons';
+import {NgClass, NgIf} from '@angular/common';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {InputService} from "../../hooks/input.service";
+
+
+@Component({
+  selector: 'rdnd-input',
+  templateUrl: './input.component.html',
+  standalone: true,
+  imports: [
+    NgIf,
+    NgClass,
+    FontAwesomeModule,
+    ReactiveFormsModule
+  ],
+  styleUrls: ['./input.component.scss']
+})
+export class RdndInput implements OnInit, OnChanges {
+  @Input() id!: string;
+  @Input() name!: string;
+  @Input() type: 'text' | 'password' | 'number' = 'text';
+  @Input() placeholder: string = '';
+  @Input() showLabel: boolean = false;
+  @Input() control?: FormControl;
+  @Input() value: string = '';
+  @Input() validators: ValidatorFn[] = [];
+  @Input() disabled: boolean = false;
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() onKeyDown = new EventEmitter<KeyboardEvent>();
+  @Output() onPaste = new EventEmitter<ClipboardEvent>();
+  @Output() onFocus = new EventEmitter<FocusEvent>();
+  @Output() onBlur = new EventEmitter<FocusEvent>();
+
+  faEyeSlash = faEyeSlash;
+  showPassword: boolean = false;
+  showError: boolean = false;
+
+  constructor(private inputService: InputService) {
+  }
+
+
+  ngOnInit() {
+    if (this.control) {
+      this.control.addValidators(this.validators);
+      this.control.valueChanges.subscribe((value) => {
+        this.valueChange.emit(value);
+        this.inputService.updateInputState(this.control!, this.id);
+      });
+    } else {
+      this.control = new FormControl(this.value, this.validators);
+      this.control.valueChanges.subscribe((value) => {
+        this.valueChange.emit(value);
+        this.inputService.updateInputState(this.control!, this.id);
+      });
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.control) {
+      this.control.addValidators(this.validators);
+      this.control.valueChanges.subscribe((value) => {
+        this.valueChange.emit(value);
+        this.inputService.updateInputState(this.control!, this.id);
+      });
+    } else {
+      this.control = new FormControl(this.value, this.validators);
+      this.control.valueChanges.subscribe((value) => {
+        this.valueChange.emit(value);
+        this.inputService.updateInputState(this.control!, this.id);
+      });
+    }
+  }
+
+
+
+  getErrorMessage(): string | null {
+    if (this.control && this.control.errors) {
+      const errorKeys = Object.keys(this.control.errors);
+      if (errorKeys.length > 0) {
+        const firstErrorKey = errorKeys[0];
+        return (this.control.errors as ValidationErrors)[firstErrorKey];
+      }
+    }
+    return null;
+  }
+
+  toggleErrorDisplay() {
+    this.showError = !this.showError;
+  }
+
+  hasError(): boolean {
+    return !!this.control && this.control.invalid && (this.control.dirty || this.control.touched);
+  }
+
+  handleTogglePassword(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  handleChange(event: Event) {
+    const e = event.target as HTMLInputElement
+    this.valueChange.emit(e.value);
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    const allowRegex = /^[a-zA-Z!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/
+
+    if (
+      this.type === 'number' && !(
+        ['Backspace', 'Shift', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)
+      ) && !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+    ) {
+      event.key.match(allowRegex) ? event.preventDefault() : this.onKeyDown.emit(event);
+    } else {
+      this.onKeyDown.emit(event);
+    }
+  }
+
+  handlePaste(event: ClipboardEvent): void {
+    this.onPaste.emit(event);
+  }
+
+  handleFocus(event: FocusEvent): void {
+    this.onFocus.emit(event);
+  }
+
+  handleBlur(event: FocusEvent): void {
+    this.onBlur.emit(event);
+  }
+}

package/src/lib/components/modal/modal.component.html

@@ -0,0 +1,51 @@
+<div class="modal-wrapper">
+
+  <div class="container" (click)="$event.stopPropagation()">
+
+    <div class="content">
+
+      @if (icon != undefined) {
+        <fa-icon [icon]="icon" class="icon" [style.color]="theme.default"
+        />
+      }
+
+      <span class="subtitle align-center">{{ title }}</span>
+
+      <div class="text align-center" [innerHTML]="content">
+      </div>
+
+
+      @if (type !== 'question') {
+        <rdnd-button
+          [id]="'btn-modal'"
+          [type]="'button'"
+          (callback)="closeModal(true)"
+          [text]="'Aceptar'"
+          [theme]="theme"
+          [size]="'full'"
+        />
+      } @else {
+        <rdnd-button
+          [id]="'btn-modal-accept'"
+          [type]="'button'"
+          (callback)="closeModal(true)"
+          [text]="confirmText"
+          [theme]="theme"
+          [size]="'full'"
+        />
+        <rdnd-button
+          [id]="'btn-modal-cancel'"
+          [type]="'button'"
+          (callback)="closeModal(false)"
+          [text]="cancelText"
+          [theme]="themes.borderedMagenta"
+          [size]="'full'"
+        />
+      }
+
+    </div>
+
+
+  </div>
+</div>
+

package/src/lib/components/modal/modal.component.scss

@@ -0,0 +1,50 @@
+@use "../../styles/z_indexes";
+@use "../../styles/sizes";
+@use "../../styles/fonts";
+@use "../../styles/colors";
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: z_indexes.$z-index-modal;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
+.modal-wrapper .container {
+  width: 100%;
+  max-width: sizes.$screen-max-width-small;
+  background-color: white;
+  padding: 32px 16px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.modal-wrapper .container .content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: 380px;
+  margin: auto;
+
+  .icon {
+    margin: auto;
+    font-size: 40px;
+    line-height: normal;
+  }
+
+  p {
+    margin: 14px 0;
+  }
+
+
+
+}

package/src/lib/components/modal/modal.component.ts

@@ -0,0 +1,41 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {themes} from "../../styles/themes";
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {RdndButton} from "../button/button.component";
+import {RdndScreenTitle} from "../screen-title/screen-title.component";
+
+@Component({
+  selector: 'rdnd-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FontAwesomeModule,
+    RdndButton,
+    RdndScreenTitle,
+  ],
+  templateUrl: './modal.component.html',
+  styleUrl: './modal.component.scss'
+})
+export class RdndModal {
+  @Input() title: string = '';
+  @Input() type: 'success' | 'error' | 'question' | 'warning' | 'info' = 'success';
+  @Input() theme: any = themes.magenta;
+  @Input() confirmText: string = '';
+  @Input() cancelText: string = '';
+  @Output() close = new EventEmitter<boolean>();
+
+  protected readonly themes = themes;
+
+  icon?: IconDefinition;
+  content: string = '';
+
+  closeModal(result: boolean) {
+    this.close.emit(result);
+  }
+
+  constructor() {
+  }
+
+}

package/src/lib/components/rdnd-active-indicator/rdnd-active-indicator.component.css

@@ -0,0 +1,24 @@
+.rdnd-active-indicator-wrapper {
+  width: 70px;
+  height: 24px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  place-content: center;
+  place-items: center;
+  box-sizing: border-box;
+  &.active {
+    background-color: #19C496;
+    color: #156a29;
+  }
+  &.inactive {
+    background-color: #f16683;
+    color: #77113a;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+}

package/src/lib/components/rdnd-active-indicator/rdnd-active-indicator.component.html

@@ -0,0 +1,12 @@
+<div class="rdnd-active-indicator-wrapper" [ngClass]="{
+  active: isActive,
+  inactive: !isActive
+}">
+  <span>
+    @if (isActive) {
+      {{ activeDisplay }}
+    } @else {
+      {{ inactiveDisplay }}
+    }
+  </span>
+</div>

package/src/lib/components/rdnd-active-indicator/rdnd-active-indicator.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {NgClass} from "@angular/common";
+
+@Component({
+  selector: 'rdnd-active-indicator',
+  standalone: true,
+  imports: [
+    NgClass
+  ],
+  templateUrl: './rdnd-active-indicator.component.html',
+  styleUrl: './rdnd-active-indicator.component.css'
+})
+export class RdndActiveIndicator {
+  @Input() isActive: boolean = false;
+  @Input() activeDisplay?: string = "Activo";
+  @Input() inactiveDisplay?: string = "Inactivo";
+
+}