valtech-components 2.0.26 → 2.0.28

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

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

@@ -0,0 +1,30 @@
+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/{lib/components/molecules/links-cake/types.d.ts → src/lib/components/molecules/links-cake/types.ts}

@@ -1,6 +1,7 @@
 import { HrefMetadata } from '../../atoms/href/types';
+
 export interface LinkCakeMetadata {
-    title: string;
-    links: HrefMetadata[];
-    size: 'small' | 'medium' | 'large';
+  title: string;
+  links: HrefMetadata[];
+  size: 'small' | 'medium' | 'large';
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+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/{lib/components/molecules/prompter/types.d.ts → src/lib/components/molecules/prompter/types.ts}

@@ -1,11 +1,12 @@
 import { Color } from '@ionic/core';
 import { HrefMetadata } from '../../atoms/href/types';
 import { ButtonMetadata } from '../../types';
+
 export type PrompterMetadata = {
-    teleprompter: boolean;
-    bordered: boolean;
-    color?: Color;
-    content: string;
-    buttons?: ButtonMetadata[];
-    hrefs?: HrefMetadata[];
+  teleprompter: boolean;
+  bordered: boolean;
+  color?: Color;
+  content: string;
+  buttons?: ButtonMetadata[];
+  hrefs?: HrefMetadata[];
 };

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

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

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

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

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

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

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

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

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

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