valtech-components 2.0.46 → 2.0.47

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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