valtech-components 2.0.44 → 2.0.46

package/src/lib/components/molecules/card/card.component.ts

@@ -0,0 +1,218 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCheckbox,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { AvatarComponent } from '../../atoms/avatar/avatar.component';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { ImageComponent } from '../../atoms/image/image.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { ToolbarActionType } from '../../types';
+import { CardClickEvent, CardMetadata, CardSection, CardType } from './types';
+
+@Component({
+  selector: 'val-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    AvatarComponent,
+    ImageComponent,
+    TextComponent,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCheckbox,
+    IonButtons,
+    IonButton,
+    IonIcon,
+  ],
+  template: `
+    <ion-card *ngIf="props.type === types.native">
+      <img alt="image" [src]="props.image" />
+      <ion-card-header *ngIf="props.title || props.overtitle">
+        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
+
+      <val-button
+        *ngFor="let b of props.footerActions"
+        [props]="b"
+        (onClick)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+    </ion-card>
+
+    <ion-card
+      *ngIf="props.type === types.tappable"
+      (click)="clickHandler(sections.content, props.token)"
+      class="tapable"
+    >
+      <img alt="image" [src]="props.image" />
+      <ion-card-header *ngIf="props.title || props.overtitle">
+        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card
+      *ngIf="props.type === types.checker"
+      (click)="clickHandler(sections.content, props.token)"
+      class="tapable"
+    >
+      <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
+        <div>
+          <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+          <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+        </div>
+        <div>
+          <ion-checkbox [checked]="props.selected"></ion-checkbox>
+        </div>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card *ngIf="props.type === types.complex" class="complex">
+      <ion-card-header class="complex-header">
+        <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
+          <ng-container *ngFor="let action of props.leftActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerLeft, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+            <div *ngIf="props.headerText">
+              <val-text [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }" />
+            </div>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons style="display: flex; align-items: center" *ngIf="props.rightActions.length > 0">
+          <ng-container *ngFor="let action of props.rightActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerRight, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ion-card-header>
+
+      <div class="tapable" (click)="clickHandler(sections.content, props.token)">
+        <ion-card-header *ngIf="props.title || props.overtitle" class="complex-header">
+          <div>
+            <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+            <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+          </div>
+        </ion-card-header>
+
+        <img alt="image" [src]="props.image" />
+        <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
+      </div>
+      <val-button
+        *ngFor="let b of props.footerActions"
+        [props]="b"
+        (onClick)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+      <ion-buttons
+        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
+        *ngIf="props.footerComplexActions.length > 0"
+      >
+        <ng-container *ngFor="let action of props.footerComplexActions">
+          <ion-button
+            *ngIf="action.type === actionTypes.ICON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          >
+            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+          </ion-button>
+          <val-avatar
+            style="margin-right: 4px; cursor: pointer"
+            *ngIf="action.type === actionTypes.AVATAR"
+            [props]="{ size: 'small', image: action.description, default: '' }"
+            (onClick)="clickHandler(sections.footerExtra, action.token)"
+          ></val-avatar>
+          <val-image
+            *ngIf="action.type === actionTypes.IMAGE"
+            [props]="action.image"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          ></val-image>
+          <ion-button
+            *ngIf="action.type === actionTypes.BUTTON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+            color="dark"
+          >
+            {{ action.description }}
+          </ion-button>
+        </ng-container>
+      </ion-buttons>
+    </ion-card>
+  `,
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+  @Input() props: CardMetadata;
+
+  @Output()
+  onClick = new EventEmitter<CardClickEvent>();
+
+  types = CardType;
+  actionTypes = ToolbarActionType;
+  sections = CardSection;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickHandler(section: CardSection, token?: string) {
+    this.onClick.emit({ section, token });
+  }
+}

package/src/lib/components/molecules/card/types.ts

@@ -0,0 +1,36 @@
+import { ButtonMetadata, ToolbarAction } from '../../types';
+
+export enum CardType {
+  native = 'native',
+  checker = 'checker',
+  tappable = 'tappable',
+  complex = 'complex',
+}
+
+export interface CardClickEvent {
+  section: CardSection;
+  token?: string;
+}
+
+export enum CardSection {
+  headerLeft,
+  headerRight,
+  content,
+  footer,
+  footerExtra,
+}
+
+export interface CardMetadata {
+  token?: string;
+  type: CardType;
+  title?: string;
+  overtitle?: string;
+  content?: string;
+  image?: string;
+  footerActions: ButtonMetadata[];
+  footerComplexActions: ToolbarAction[];
+  leftActions: ToolbarAction[];
+  rightActions: ToolbarAction[];
+  selected: boolean;
+  headerText?: string;
+}

package/src/lib/components/molecules/check-input/check-input.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'val-check-input',
+  standalone: true,
+  imports: [CommonModule, IonCheckbox],
+  template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> `,
+  styleUrls: ['./check-input.component.scss'],
+})
+export class CheckInputComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/comment-input/comment-input.component.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonCheckbox, IonTextarea } from '@ionic/angular/standalone';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-comment-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonCheckbox, IonTextarea],
+  template: `
+    <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
+  `,
+  styleUrls: ['./comment-input.component.scss'],
+})
+export class CommentInputComponent implements OnInit {
+  @Input() props: InputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/content-loader/content-loader.component.scss

@@ -0,0 +1,42 @@
+@import '../../styles/mixins.scss';
+
+.small {
+  width: pxToRem(24);
+  height: pxToRem(24);
+}
+
+.medium {
+  width: pxToRem(38);
+  height: pxToRem(38);
+}
+
+.large {
+  width: pxToRem(48);
+  height: pxToRem(48);
+}
+
+.spinner-wrapper {
+  width: 100%;
+  text-align: center;
+
+  &.small {
+    height: pxToRem(72);
+    padding-top: pxToRem(24);
+
+    @include body-small;
+  }
+
+  &.medium {
+    height: pxToRem(98);
+    padding-top: pxToRem(32);
+
+    @include body-medium;
+  }
+
+  &.large {
+    height: pxToRem(108);
+    padding-top: pxToRem(42);
+
+    @include body-large;
+  }
+}

package/src/lib/components/molecules/content-loader/content-loader.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonSpinner, IonText } from '@ionic/angular/standalone';
+import { ContentLoaderMetadata } from './types';
+
+@Component({
+  selector: 'val-content-loader',
+  standalone: true,
+  imports: [CommonModule, IonSpinner, IonText],
+  template: `
+    <div [ngClass]="['spinner-wrapper', props.size]">
+      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
+      <ion-text [color]="props.color">
+        <p>{{ props.text }}</p>
+      </ion-text>
+    </div>
+  `,
+  styleUrls: ['./content-loader.component.scss'],
+})
+export class ContentLoaderComponent implements OnInit {
+  @Input()
+  props: ContentLoaderMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/content-loader/types.ts

@@ -0,0 +1,8 @@
+import { Color } from '@ionic/core';
+
+export interface ContentLoaderMetadata {
+  color: Color;
+  size: 'small' | 'medium' | 'large';
+  name: 'circular' | 'crescent' | 'dots' | 'lines-sharp';
+  text: string;
+}

package/src/lib/components/molecules/date-input/date-input.component.scss

@@ -0,0 +1,11 @@
+@import '../../organisms/form/form.component.scss';
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action {
+  margin-top: pxToRem(4);
+}

package/src/lib/components/molecules/date-input/date-input.component.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-date-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonDatetime, IonDatetimeButton, IonModal],
+  template: `
+    <div class="button-container">
+      <ion-datetime-button class="action" datetime="datetime"></ion-datetime-button>
+    </div>
+    <ion-modal [keepContentsMounted]="true">
+      <ng-template>
+        <ion-datetime
+          [formControl]="props.control"
+          id="datetime"
+          presentation="date"
+          locale="es-ES"
+          [firstDayOfWeek]="1"
+          [showDefaultButtons]="true"
+          doneText="Aceptar"
+          cancelText="Cancelar"
+          formatOptions="{
+            date: { weekday: 'short', month: 'long', day: '2-digit' },
+            time: {
+              hour: '2-digit',
+              minute: '2-digit',
+            },
+          }"
+        >
+          <span slot="title">{{ props.hint }}</span>
+        </ion-datetime>
+      </ng-template>
+    </ion-modal>
+  `,
+  styleUrls: ['./date-input.component.scss'],
+})
+export class DateInputComponent implements OnInit {
+  @Input() props: InputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/email-input/email-input.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonInput } from '@ionic/angular/standalone';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-email-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonInput],
+  template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `,
+  styleUrls: ['./email-input.component.scss'],
+})
+export class EmailInputComponent implements OnInit {
+  @Input() props: InputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/expandable-text/expandable-text.component.ts

@@ -0,0 +1,89 @@
+import { Component, Input } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { ExpandableTextInput } from './types';
+import { resolveColor } from '../../../shared/utils/styles';
+
+@Component({
+  selector: 'val-expandable-text',
+  standalone: true,
+  imports: [IonText],
+  template: `
+    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
+      <ion-text>
+        <p class="description">
+          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
+          @if (!expanded && isTruncated) {
+            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+              {{ props.expandText || 'ver más' }}
+            </span>
+          }
+        </p>
+      </ion-text>
+    </div>
+  `,
+  styles: [
+    `
+      .description-container {
+        position: relative;
+        overflow: hidden;
+        max-height: 10rem; /* Altura para texto truncado */
+        transition: max-height 0.3s ease-in-out;
+      }
+
+      .description-container.expanded {
+        max-height: none; /* Sin límite de altura al expandir */
+      }
+
+      .description {
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .description-container:not(.expanded) .description::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3.5rem; /* Altura del gradiente */
+        background: linear-gradient(to top, var(--ion-background-color), rgba(255, 255, 255, 0));
+        pointer-events: none; /* Ignorar interacciones en el gradiente */
+      }
+
+      .description-container:not(.has-gradient) .description::after {
+        background: transparent; /* Fondo transparente si no hay gradiente */
+      }
+
+      .see-more {
+        position: relative;
+        font-weight: bold;
+        cursor: pointer;
+        z-index: 1;
+        margin-left: 0.3rem;
+      }
+    `,
+  ],
+})
+export class ExpandableTextComponent {
+  @Input() props: ExpandableTextInput;
+  expanded = false;
+  defaultColor = 'primary';
+
+  get truncatedText(): string {
+    const maxLength = this.props.limit || 100; // Longitud por defecto
+    return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
+  }
+
+  get isTruncated(): boolean {
+    return this.props.content?.length > (this.props.limit || 100);
+  }
+
+  toggleExpand() {
+    this.expanded = !this.expanded;
+  }
+
+  color() {
+    return resolveColor(this.props.color || this.defaultColor);
+  }
+}

package/src/lib/components/molecules/expandable-text/types.ts

@@ -0,0 +1,6 @@
+export interface ExpandableTextInput {
+  limit: number; // Máxima longitud del texto antes de truncar
+  content: string; // Contenido a mostrar
+  color?: string; // Color del texto "ver más"
+  expandText?: string; // Texto para "ver más" o equivalente
+}

package/src/lib/components/molecules/file-input/file-input.component.scss

@@ -0,0 +1,11 @@
+@import '../../organisms/form/form.component.scss';
+
+.file-container {
+  margin-top: pxToRem(4);
+}
+
+.name-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}

package/src/lib/components/molecules/file-input/file-input.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { PrimarySolidDefaultRoundButton } from '../../atoms/button/factory';
+import { TextComponent } from '../../atoms/text/text.component';
+import { ButtonMetadata, InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-file-input',
+  standalone: true,
+  imports: [IonIcon, TextComponent, ButtonComponent],
+  template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: selectedFile ? selectedFile.name : 'No has seleccionado archivo',
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `,
+  styleUrls: ['./file-input.component.scss'],
+})
+export class FileInputComponent implements OnInit {
+  @ViewChild('fileInput') fileInput;
+
+  @Input() props: InputMetadata;
+
+  contrastButton: ButtonMetadata = {
+    ...PrimarySolidDefaultRoundButton('Subir archivo'),
+    color: 'light',
+  };
+  selectedFile: File;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onFileSelected(event): void {
+    this.selectedFile = event.target.files[0];
+    this.props.control.setValue(this.selectedFile);
+  }
+
+  reset(): void {
+    this.selectedFile = null;
+    this.fileInput.nativeElement.value = '';
+  }
+}

package/src/lib/components/molecules/hint/hint.component.scss

@@ -0,0 +1,5 @@
+@import '../../organisms/form/form.component.scss';
+
+.hint-container {
+  margin-top: pxToRem(4);
+}

package/src/lib/components/molecules/hint/hint.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { TextComponent } from '../../atoms/text/text.component';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-hint',
+  standalone: true,
+  imports: [CommonModule, TextComponent],
+  template: `
+    <div class="hint-container" *ngIf="props.control.invalid && (props.control.touched || props.control.dirty)">
+      <val-text
+        *ngFor="let e of Errors"
+        [props]="{
+          content: e,
+          color: 'danger',
+          bold: false,
+          size: 'small',
+        }"
+      ></val-text>
+    </div>
+  `,
+  styleUrls: ['./hint.component.scss'],
+})
+export class HintComponent implements OnInit {
+  @Input() props: InputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  get Errors(): string[] {
+    const keys = Object.keys(this.props.errors);
+    const errors = [];
+    keys.map((e: string) => {
+      if (this.props.control.hasError(e)) {
+        errors.push(this.props.errors[e]);
+      }
+    });
+    return errors;
+  }
+}