gentera-rdnd 0.2.2 → 0.2.3

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-<div class="modal-wrapper">
-
-  <div class="container" (click)="$event.stopPropagation()">
-
-    <div class="content">
-
-      @if (icon) {
-        <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

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

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

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

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

@@ -1,18 +0,0 @@
-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";
-
-}