gentera-rdnd 0.0.6 → 0.0.9

package/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/package.json

@@ -1,29 +1,16 @@
-{
-  "name": "gentera-rdnd",
-  "version": "0.0.6",
-  "peerDependencies": {
-    "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.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"
-  },
-  "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",
-      "esm2022": "./esm2022/gentera-rdnd.mjs",
-      "esm": "./esm2022/gentera-rdnd.mjs",
-      "default": "./fesm2022/gentera-rdnd.mjs"
-    }
-  }
-}
+{
+  "name": "gentera-rdnd",
+  "version": "0.0.9",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.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"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "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: 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/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/input.component.html

@@ -0,0 +1,27 @@
+<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>
+
+  <!-- Input que cambia de borde si tiene error -->
+  <input
+    [type]="type === 'password' && showPassword ? 'text' : type"
+    [formControl]="control"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    (keydown)="handleKeyDown($event)"
+    (paste)="handlePaste($event)"
+    (focus)="handleFocus($event)"
+    (blur)="handleBlur($event)"
+    [ngClass]="{ 'error-border': hasError() }"
+  />
+
+  <!-- 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: 40px;
+  font-size: 16px;
+  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,105 @@
+import {Component, Input, Output, EventEmitter, OnInit} 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 {
+  @Input() id!: string;
+  @Input() name!: string;
+  @Input() type: 'text' | 'password' | 'number' = 'text';
+  @Input() placeholder: string = '';
+  @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>();
+
+  control!: FormControl;
+  faEyeSlash = faEyeSlash;
+  showPassword: boolean = false;
+  showError: boolean = false;
+
+  constructor(private inputService: InputService) {
+  }
+
+  ngOnInit() {
+    this.control = new FormControl(this.value, this.validators);
+
+    this.valueChange.emit(this.value);
+    this.inputService.updateInputState(this.control, this.id);
+
+    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.invalid && (this.control.dirty || this.control.touched);
+  }
+
+  handleTogglePassword(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  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) {
+        <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.bordered"
+          [size]="'full'"
+        />
+      }
+
+    </div>
+
+
+  </div>
+</div>
+

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

@@ -0,0 +1,50 @@
+@import "../../styles/z_indexes";
+@import "../../styles/sizes";
+@import "../../styles/fonts";
+@import "../../styles/colors";
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $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: $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/screen-title/screen-title.component.html

@@ -0,0 +1,3 @@
+<h1 [class]=" 'align-' + align ">
+  {{ title }}
+</h1>

package/src/lib/components/screen-title/screen-title.component.scss

@@ -0,0 +1,16 @@
+h1 {
+  font-size: 24px;
+  font-family: 'Poppins', sans-serif;
+  color: #910677;
+  font-weight: normal;
+  width: 100%;
+
+  &.align-LEFT {
+    text-align: left;
+  }
+
+  &.align-CENTER {
+    text-align: center;
+  }
+
+}

package/src/lib/components/screen-title/screen-title.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {NgClass} from "@angular/common";
+
+@Component({
+  selector: 'rdnd-screen-title',
+  standalone: true,
+  imports: [
+    NgClass
+  ],
+  templateUrl: './screen-title.component.html',
+  styleUrl: './screen-title.component.scss'
+})
+export class RdndScreenTitle {
+  @Input() title!: string;
+  @Input() align: 'LEFT' | 'CENTER' = 'CENTER';
+}

package/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/src/lib/gentera-rdnd.service.ts

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

package/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),
+    };
+  }
+}