valtech-components 2.0.28 → 2.0.29

package/src/lib/components/molecules/links-cake/links-cake.component.scss

@@ -1,9 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.title {
-  margin: pxToRem(16) 0;
-}
-
-.link {
-  margin-bottom: pxToRem(8);
-}

package/src/lib/components/molecules/links-cake/links-cake.component.ts

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { HrefComponent } from '../../atoms/href/href.component';
-import { TitleComponent } from '../../atoms/title/title.component';
-import { LinkCakeMetadata } from './types';
-
-@Component({
-  selector: 'val-links-cake',
-  standalone: true,
-  imports: [CommonModule, TitleComponent, HrefComponent],
-  template: `
-    <div>
-      <div class="title">
-        <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
-      </div>
-      <div class="link" *ngFor="let l of props.links">
-        <val-href [props]="l"></val-href>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./links-cake.component.scss'],
-})
-export class LinksCakeComponent implements OnInit {
-  @Input()
-  props: LinkCakeMetadata;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

package/src/lib/components/molecules/notes-box/notes-box.component.scss

@@ -1,5 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.content-container {
-  display: inline-grid;
-}

package/src/lib/components/molecules/notes-box/notes-box.component.ts

@@ -1,28 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { BoxComponent } from '../../atoms/box/box.component';
-import { TextComponent } from '../../atoms/text/text.component';
-import { NotesBoxMetadata } from './types';
-
-@Component({
-  selector: 'val-notes-box',
-  standalone: true,
-  imports: [CommonModule, BoxComponent, TextComponent],
-  template: `
-    <val-box [props]="{ icon: '', bordered: false, color: props.color, leftBorder: true }">
-      <div [ngClass]="['content-container', props.size]" body>
-        <val-text [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"></val-text>
-        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
-      </div>
-    </val-box>
-  `,
-  styleUrls: ['./notes-box.component.scss'],
-})
-export class NotesBoxComponent implements OnInit {
-  @Input()
-  props: NotesBoxMetadata;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

package/src/lib/components/molecules/notes-box/types.ts

@@ -1,9 +0,0 @@
-import { Color } from '@ionic/core';
-
-export interface NotesBoxMetadata {
-  color: Color;
-  textColor: Color;
-  prefix: string;
-  text: string;
-  size: 'small' | 'medium' | 'large' | 'xlarge';
-}

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

@@ -1,19 +0,0 @@
-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-number-input',
-  standalone: true,
-  imports: [ReactiveFormsModule, IonInput],
-  template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `,
-  styleUrls: ['./number-input.component.scss'],
-})
-export class NumberInputComponent implements OnInit {
-  @Input() props: InputMetadata;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,7 +0,0 @@
-@import '../../organisms/form/form.component.scss';
-
-.input-container {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}

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

@@ -1,33 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IonButton, IonIcon, IonInput } from '@ionic/angular/standalone';
-import { InputMetadata } from '../../types';
-
-@Component({
-  selector: 'val-password-input',
-  standalone: true,
-  imports: [ReactiveFormsModule, IonInput, IonButton, IonIcon],
-  template: `
-    <div class="input-container">
-      <ion-input
-        class="sign-in__input-password"
-        [formControl]="props.control"
-        [type]="hidePassword ? 'password' : 'text'"
-        [placeholder]="props.placeholder"
-      ></ion-input>
-      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
-        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
-      </ion-button>
-    </div>
-  `,
-  styleUrls: ['./password-input.component.scss'],
-})
-export class PasswordInputComponent implements OnInit {
-  @Input() props: InputMetadata;
-
-  hidePassword = true;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,13 +0,0 @@
-@import '../../organisms/form/form.component.scss';
-
-.otp {
-  text-align: center;
-  margin-top: pxToRem(4);
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.otp-input-box {
-  &:focus {
-    border-color: aqua;
-  }
-}

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

@@ -1,42 +0,0 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { NgOtpInputComponent, NgOtpInputConfig, NgOtpInputModule } from 'ng-otp-input';
-import { InputMetadata } from '../../types';
-
-@Component({
-  selector: 'val-pin-input',
-  standalone: true,
-  imports: [NgOtpInputModule],
-  template: `
-    <div class="otp">
-      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
-    </div>
-  `,
-  styleUrls: ['./pin-input.component.scss'],
-})
-export class PinInputComponent implements OnInit {
-  @ViewChild(NgOtpInputComponent, { static: false }) pinCode: NgOtpInputComponent | undefined;
-
-  @Input() props: InputMetadata;
-
-  codeLength = 5;
-  otpInputConfig: NgOtpInputConfig = {
-    inputStyles: {
-      'font-size': '36px',
-      width: '55px',
-      height: '55px',
-    },
-    inputClass: 'otp-input-box',
-    length: this.codeLength,
-    allowNumbersOnly: true,
-  };
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  reset() {
-    if (this.pinCode) {
-      this.pinCode.setValue('');
-    }
-  }
-}

package/src/lib/components/molecules/progress-status/progress-status.component.scss

@@ -1,41 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.status-container {
-  min-height: pxToRem(100);
-  margin: pxToRem(16) pxToRem(8);
-}
-
-.progress-bar-container {
-  max-width: 60%;
-  margin: 0 auto;
-}
-
-.title-container {
-  margin-bottom: pxToRem(8);
-}
-
-.subtitle-container {
-  width: 100%;
-  display: flex;
-}
-
-.subtitle {
-  padding: pxToRem(16);
-  margin: 0 auto;
-  height: pxToRem(16);
-}
-
-.blink {
-  animation: blink 1s infinite alternate ease-in;
-}
-
-@keyframes blink {
-  0% {
-    opacity: 0;
-    margin-top: 6px;
-  }
-  100% {
-    opacity: 1;
-    margin-top: 0;
-  }
-}

package/src/lib/components/molecules/progress-status/progress-status.component.ts

@@ -1,70 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ProgressBarComponent } from '../../atoms/progress-bar/progress-bar.component';
-import { TextComponent } from '../../atoms/text/text.component';
-import { TitleBlockComponent } from '../title-block/title-block.component';
-import { ProgressStatusMetadata } from './types';
-
-@Component({
-  selector: 'val-progress-status',
-  standalone: true,
-  imports: [TitleBlockComponent, ProgressBarComponent, TextComponent],
-  template: `
-    <div class="status-container">
-      <div class="title-container">
-        <val-title-block
-          [props]="{
-            position: 'center',
-            aboveTitle: props.titles.aboveTitle,
-            title: props.titles.title,
-            bellowTitle: props.titles.bellowTitle,
-          }"
-        ></val-title-block>
-      </div>
-      <div class="progress-bar-container">
-        <val-progress-bar
-          [props]="{
-            progress: props.progress,
-            size: 'xlarge',
-            color: props.color,
-            rounded: true,
-            type: 'determinate',
-            buffer: 1,
-          }"
-        ></val-progress-bar>
-      </div>
-      <div class="subtitle-container">
-        <div class="subtitle" [class.blink]="blinking">
-          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
-        </div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./progress-status.component.scss'],
-})
-export class ProgressStatusComponent implements OnInit {
-  @Input()
-  props: ProgressStatusMetadata;
-
-  currentIndex = 0;
-  blinking = false;
-
-  constructor() {}
-
-  ngOnInit() {
-    setInterval(() => {
-      this.blinking = !this.blinking;
-    }, 1000);
-
-    setInterval(() => {
-      this.getNextMessage();
-    }, 9000);
-  }
-
-  get Content(): string {
-    return this.props.messages[this.currentIndex];
-  }
-
-  getNextMessage(): void {
-    this.currentIndex = (this.currentIndex + 1) % this.props.messages.length;
-  }
-}

package/src/lib/components/molecules/progress-status/types.ts

@@ -1,11 +0,0 @@
-import { Color } from '@ionic/core';
-import { TitleBlockMetada } from '../title-block/types';
-
-export type ProgressStatusMetadata = {
-  progress: number;
-  titles: TitleBlockMetada;
-  color: Color;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  type?: 'determinate' | 'indeterminate';
-  messages: string[];
-};

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

@@ -1,34 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.teleprompter-container {
-  overflow: hidden;
-  width: 100%;
-}
-
-.teleprompter-content {
-  white-space: nowrap;
-  animation: scroll-left 15s linear infinite;
-}
-
-@keyframes scroll-left {
-  0% {
-    transform: translateX(
-      100%
-    ); /* Inicia la animación con el contenido desplazado completamente a la derecha */
-  }
-  100% {
-    transform: translateX(
-      -100%
-    ); /* Termina la animación con el contenido desplazado completamente a la izquierda */
-  }
-}
-
-.link {
-  margin: 0 pxToRem(4);
-}

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

@@ -1,58 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { BoxComponent } from '../../atoms/box/box.component';
-import { HrefComponent } from '../../atoms/href/href.component';
-import { TextComponent } from '../../atoms/text/text.component';
-import { ButtonGroupComponent } from '../button-group/button-group.component';
-import { PrompterMetadata } from './types';
-
-@Component({
-  selector: 'val-prompter',
-  standalone: true,
-  imports: [CommonModule, BoxComponent, ButtonGroupComponent, TextComponent, HrefComponent],
-  template: `
-    <val-box
-      class="teleprompter-container"
-      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false }"
-    >
-      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
-        <div>
-          <val-text
-            [props]="{
-              content: props.content,
-              color: '',
-              bold: true,
-              size: 'large',
-            }"
-          ></val-text>
-        </div>
-        <div *ngIf="props.buttons">
-          <val-button-group
-            class="buttons-container"
-            [props]="{ buttons: props.buttons, position: 'left', columned: false }"
-            (onClick)="clickHandler($event)"
-          ></val-button-group>
-        </div>
-        <div *ngIf="props.hrefs">
-          <val-href class="link" *ngFor="let l of props.hrefs" [props]="l" (onClick)="clickHandler($event)"></val-href>
-        </div>
-      </div>
-    </val-box>
-  `,
-  styleUrls: ['./prompter.component.scss'],
-})
-export class PrompterComponent implements OnInit {
-  @Input()
-  props: PrompterMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-}

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

@@ -1,27 +0,0 @@
-import { NgFor } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
-import { InputMetadata } from '../../types';
-
-@Component({
-  selector: 'val-radio-input',
-  standalone: true,
-  imports: [NgFor, ReactiveFormsModule, IonRadioGroup, IonRadio],
-  template: `
-    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
-      <ng-container *ngFor="let o of props.options">
-        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
-        <br />
-      </ng-container>
-    </ion-radio-group>
-  `,
-  styleUrls: ['./radio-input.component.scss'],
-})
-export class RadioInputComponent implements OnInit {
-  @Input() props: InputMetadata;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,9 +0,0 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
-
-ion-searchbar {
-  --cancel-button-color: var(--ion-color-dark);
-  --background: var(--ion-color-light);
-
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}

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

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { IonSearchbar } from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'app-searchbar',
-  standalone: true,
-  imports: [IonSearchbar],
-  template: `
-    <ion-searchbar
-      mode="ios"
-      debounce="500"
-      placeholder="Búsqueda"
-      [disabled]="disabled"
-      showCancelButton="focus"
-      cancelButtonText="Cancelar"
-      (ionInput)="onSearch($event)"
-      (ionBlur)="onBlur()"
-      (ionFocus)="onFocus()"
-    >
-    </ion-searchbar>
-  `,
-  styleUrls: ['./searchbar.component.scss'],
-})
-export class SearchbarComponent {
-  @Input() disabled: boolean;
-
-  @Output() focusEvent = new EventEmitter<void>();
-
-  @Output() blurEvent = new EventEmitter<void>();
-
-  @Output() filterEvent = new EventEmitter<string>();
-
-  constructor() {}
-
-  onSearch($event: any) {
-    const searchTerm = $event.detail.value;
-    this.filterEvent.emit(searchTerm);
-  }
-
-  onFocus() {
-    this.focusEvent.emit();
-  }
-
-  onBlur() {
-    this.blurEvent.emit();
-  }
-}

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

@@ -1 +0,0 @@
-@import '../../organisms/form/form.component.scss';

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

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

package/src/lib/components/molecules/title-block/title-block.component.scss

@@ -1,36 +0,0 @@
-@import '../../styles/mixins.scss';
-
-val-button,
-val-title,
-val-display {
-  display: inline-block;
-}
-
-.titles-container {
-  width: 100%;
-  padding: pxToRem(4);
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-
-  &.left {
-    align-content: flex-start;
-    align-items: start;
-  }
-
-  &.center {
-    align-content: center;
-    align-items: center;
-    text-align: center;
-  }
-
-  &.right {
-    align-content: flex-end;
-    align-items: end;
-    text-align: end;
-  }
-
-  @include media-medium {
-    padding: pxToRem(8);
-  }
-}

package/src/lib/components/molecules/title-block/title-block.component.ts

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { DisplayComponent } from '../../atoms/display/display.component';
-import { TitleComponent } from '../../atoms/title/title.component';
-import { TitleBlockMetada } from './types';
-
-@Component({
-  selector: 'val-title-block',
-  standalone: true,
-  imports: [CommonModule, TitleComponent, DisplayComponent],
-  template: `
-    <div [ngClass]="['titles-container', props.position]">
-      <val-title
-        *ngIf="props.aboveTitle"
-        [props]="{
-          content: props.aboveTitle.text | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.text,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.text,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-        }"
-      ></val-title>
-    </div>
-  `,
-  styleUrls: ['./title-block.component.scss'],
-})
-export class TitleBlockComponent implements OnInit {
-  @Input()
-  props: TitleBlockMetada;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

package/src/lib/components/molecules/title-block/types.ts

@@ -1,14 +0,0 @@
-import { Color } from '@ionic/core';
-
-export type TitleMetada = {
-  text: string;
-  color: Color;
-  size: 'small' | 'medium' | 'large' | 'xlarge';
-};
-
-export type TitleBlockMetada = {
-  position: 'center' | 'left' | 'right';
-  title?: TitleMetada;
-  aboveTitle?: TitleMetada;
-  bellowTitle?: TitleMetada;
-};