valtech-components 2.0.26 → 2.0.28

package/src/lib/components/organisms/toolbar/toolbar.component.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { IonButton, IonButtons, IonIcon, IonText, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { AvatarComponent } from '../../atoms/avatar/avatar.component';
+import { ImageComponent } from '../../atoms/image/image.component';
+import { ToolbarAction, ToolbarActionType } from '../../types';
+import { ToolbarMetadata } from './types';
+
+@Component({
+  selector: 'val-toolbar',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonToolbar,
+    IonButtons,
+    IonButton,
+    IonIcon,
+    IonText,
+    IonTitle,
+    AvatarComponent,
+    ImageComponent,
+  ],
+  template: `
+    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
+      <ng-container *ngIf="props.withBack">
+        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
+          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
+            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
+            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
+          </ion-button>
+        </ion-buttons>
+      </ng-container>
+      <ng-container *ngIf="props.withActions">
+        <ion-buttons slot="end" *ngIf="someInRight()">
+          <ng-container *ngFor="let action of rightActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons slot="start" *ngIf="someInLeft()">
+          <ng-container *ngFor="let action of leftActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ng-container>
+      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
+      <!-- experimental -->
+      <ng-content select="[toolbar-bottom]"></ng-content>
+    </ion-toolbar>
+  `,
+  styleUrls: ['./toolbar.component.scss'],
+})
+export class ToolbarComponent implements OnInit {
+  @Input()
+  props: ToolbarMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  actionTypes = ToolbarActionType;
+
+  constructor(private navCtrl: NavController) {}
+
+  ngOnInit() {}
+
+  goBack(): void {
+    this.navCtrl.back();
+  }
+
+  rightActions(): ToolbarAction[] {
+    return this.props.actions.filter(x => x.position === 'right');
+  }
+
+  leftActions(): ToolbarAction[] {
+    return this.props.actions.filter(x => x.position === 'left');
+  }
+
+  someInRight(): boolean {
+    return !!this.props.actions.find(x => x.position === 'right');
+  }
+
+  someInLeft(): boolean {
+    return !!this.props.actions.find(x => x.position === 'left');
+  }
+
+  clickHandler(token?: string) {
+    this.onClick.emit(token);
+  }
+}

package/src/lib/components/organisms/toolbar/types.ts

@@ -0,0 +1,12 @@
+import { Color } from '@ionic/core';
+import { ToolbarAction } from '../../types';
+
+export type ToolbarMetadata = {
+  withBack: boolean;
+  backText?: string;
+  withActions: boolean;
+  color?: Color;
+  textColor?: Color;
+  title: string;
+  actions: ToolbarAction[];
+};

package/src/lib/components/organisms/wizard/types.ts

@@ -0,0 +1,24 @@
+import { ButtonMetadata, ComponentState } from '../../types';
+import { NoContentMetadata } from '../no-content/types';
+
+export type WizardMetadata = {
+  state: ComponentState;
+  current: number;
+  steps: Steps;
+  error: Step;
+};
+
+export type Step = {
+  titles: NoContentMetadata;
+  buttons: ButtonMetadata[];
+};
+
+export type Steps = {
+  [step: number]: Step;
+};
+
+export enum MOTION {
+  BACKWARD,
+  FORWARD,
+  RETRY,
+}

package/src/lib/components/organisms/wizard/wizard-footer/wizard-footer.component.ts

@@ -0,0 +1,90 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProgressBarComponent } from '../../../atoms/progress-bar/progress-bar.component';
+import { ButtonGroupComponent } from '../../../molecules/button-group/button-group.component';
+import { ButtonMetadata, ComponentStates } from '../../../types';
+import { FooterComponent } from '../../footer/footer.component';
+import { MOTION, Step, WizardMetadata } from '../types';
+
+@Component({
+  selector: 'val-wizard-footer',
+  standalone: true,
+  imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent],
+  template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-progress-bar
+        extra
+        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
+      ></val-progress-bar>
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'left', columned: false }"
+        position="spaced"
+        (onClick)="clickHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  `,
+  styleUrls: ['./wizard-footer.component.scss'],
+})
+export class WizardFooterComponent implements OnInit {
+  @Input()
+  props: WizardMetadata;
+
+  @Output()
+  onClick = new EventEmitter<{ current: number; motion: MOTION }>();
+
+  wrapperId = 'wizard-wrapper';
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickHandler(token?: string) {
+    if (!token) {
+      return;
+    }
+    if (token.includes('right')) {
+      this.tryToStep(MOTION.FORWARD);
+    }
+    if (token.includes('left')) {
+      this.tryToStep(MOTION.BACKWARD);
+    }
+  }
+
+  get Current(): Step {
+    return this.props.steps[this.props.current];
+  }
+
+  get Progress(): number {
+    if (this.props.steps && this.props.current) {
+      return this.props.current / Object.keys(this.props.steps).length;
+    }
+    return 0;
+  }
+
+  get actions(): ButtonMetadata[] {
+    if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
+      this.Current.buttons[1].state = ComponentStates.DISABLED;
+    }
+
+    if (this.props.current === 1 && this.Current.buttons.length > 1) {
+      return [this.Current.buttons[1]];
+    }
+    return this.Current.buttons;
+  }
+
+  tryToStep(motion: MOTION): void {
+    this.onClick.emit({ current: this.props.current, motion });
+  }
+}

package/src/lib/components/organisms/wizard/wizard.component.scss

@@ -0,0 +1,15 @@
+@import '../../styles/mixins.scss';
+
+.wrapper {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.step {
+  min-height: pxToRem(150);
+  margin: 16px 0;
+  text-align: center;
+}

package/src/lib/components/organisms/wizard/wizard.component.ts

@@ -0,0 +1,99 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { goToTop } from '../../../shared/utils/dom';
+import { ContentLoaderComponent } from '../../molecules/content-loader/content-loader.component';
+import { ComponentStates } from '../../types';
+import { NoContentComponent } from '../no-content/no-content.component';
+import { MOTION, Step, WizardMetadata } from './types';
+
+@Component({
+  selector: 'val-wizard',
+  standalone: true,
+  imports: [CommonModule, NoContentComponent, ContentLoaderComponent],
+  template: `
+    <div [id]="wrapperId" class="wrapper">
+      <ng-container *ngIf="props.state !== 'ERROR'">
+        <val-no-content [props]="Current.titles"></val-no-content>
+        <div class="step">
+          <div *ngIf="props.state === 'WORKING'">
+            <val-content-loader color="dark" size="large" text="Por favor espere..."></val-content-loader>
+          </div>
+          <ng-content select="[step]"></ng-content>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="props.state === 'ERROR'">
+        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
+      </ng-container>
+    </div>
+  `,
+  styleUrls: ['./wizard.component.scss'],
+})
+export class WizardComponent implements OnInit {
+  @Input()
+  props: WizardMetadata;
+
+  @Output()
+  onClick = new EventEmitter<{ current: number; motion: MOTION }>();
+
+  wrapperId = 'wizard-wrapper';
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  working() {
+    this.props.state = ComponentStates.WORKING;
+    this.Current.buttons.map(x => {
+      x.state = ComponentStates.DISABLED;
+    });
+  }
+
+  done() {
+    if (this.props.state === ComponentStates.ENABLED) {
+      return;
+    }
+
+    this.props.state = ComponentStates.ENABLED;
+    this.Current.buttons.map(x => {
+      x.state = ComponentStates.ENABLED;
+    });
+  }
+
+  get Current(): Step {
+    return this.props.steps[this.props.current];
+  }
+
+  setCurrent(newStep: number) {
+    if (newStep === this.props.current) {
+      return;
+    }
+    this.props.current = newStep;
+    goToTop(this.wrapperId);
+  }
+
+  setError(error: string) {
+    if (this.props.state === ComponentStates.ERROR) {
+      return;
+    }
+
+    this.props.error.titles.content.content.bellowTitle.text = error;
+    this.props.state = ComponentStates.ERROR;
+    goToTop(this.wrapperId);
+  }
+
+  reset() {
+    this.props.error.titles.content.content.bellowTitle.text = '';
+    this.done();
+  }
+
+  clickHandler(token?: string) {
+    if (!token) {
+      return;
+    }
+    if (token.includes('retry')) {
+      this.reset();
+    }
+
+    this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
+  }
+}

package/src/lib/components/templates/layout/layout.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/mixins.scss';
+
+.layout-container {
+  margin: 0 auto;
+  padding: 0 pxToRem(16);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: pxToRem(16);
+
+  @include max-media-medium {
+    max-width: 100%;
+  }
+
+  @include media-medium {
+    max-width: pxToRem($container-max-large);
+    margin-bottom: pxToRem(24);
+  }
+
+  @include media-xlarge {
+    max-width: pxToRem($container-max-xlarge);
+  }
+}

package/src/lib/components/templates/layout/layout.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'val-layout',
+  standalone: true,
+  imports: [],
+  template: `
+    <div class="layout-container">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrl: './layout.component.scss',
+})
+export class LayoutComponent {}

package/src/lib/components/templates/simple/simple.component.scss

@@ -0,0 +1,30 @@
+@import '../../styles/mixins.scss';
+
+.layout-container {
+  margin: 0 auto;
+  padding: 0 pxToRem(16);
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: pxToRem(16);
+
+  @include max-media-medium {
+    max-width: 100%;
+  }
+
+  @include media-medium {
+    max-width: pxToRem($container-max-large);
+    margin-bottom: pxToRem(24);
+  }
+
+  @include media-xlarge {
+    max-width: pxToRem($container-max-xlarge);
+  }
+}
+
+.description-container {
+  padding-left: pxToRem(8);
+}
+
+.description {
+  padding-left: pxToRem(16);
+}

package/src/lib/components/templates/simple/simple.component.ts

@@ -0,0 +1,60 @@
+import { NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonContent, IonHeader, IonText, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { DividerComponent } from '../../atoms/divider/divider.component';
+import { LinkComponent } from '../../molecules/link/link.component';
+import { HeaderComponent } from '../../organisms/header/header.component';
+import { LayoutComponent } from '../layout/layout.component';
+import { SimpleMetadata } from './types';
+
+@Component({
+  selector: 'val-simple',
+  standalone: true,
+  imports: [
+    NgIf,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonText,
+    IonContent,
+    ButtonComponent,
+    HeaderComponent,
+    LayoutComponent,
+    DividerComponent,
+    LinkComponent,
+  ],
+  template: `
+    <val-header [props]="props.header" />
+
+    <ion-content [fullscreen]="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <div class="description-container" *ngIf="props.pageDescription">
+        <ion-text>
+          <p class="description">{{ props.pageDescription }}</p>
+        </ion-text>
+        <val-link *ngIf="props.link" [props]="props.link" (onClick)="onClickHandler($event)" )></val-link>
+      </div>
+      <val-divider *ngIf="props.withDivider" [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      <val-layout>
+        <ng-content></ng-content>
+      </val-layout>
+    </ion-content>
+  `,
+  styleUrl: './simple.component.scss',
+})
+export class SimpleComponent {
+  @Input()
+  props: SimpleMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  onClickHandler(token?: string) {
+    this.onClick.emit(token);
+  }
+}

package/{lib/components/templates/simple/types.d.ts → src/lib/components/templates/simple/types.ts}

@@ -1,9 +1,10 @@
 import { LinkMetadata } from '../../molecules/link/types';
 import { HeaderMetadata } from '../../organisms/header/types';
+
 export interface SimpleMetadata {
-    header: HeaderMetadata;
-    pageTitle: string;
-    pageDescription: string;
-    withDivider: boolean;
-    link?: LinkMetadata;
+  header: HeaderMetadata;
+  pageTitle: string;
+  pageDescription: string;
+  withDivider: boolean;
+  link?: LinkMetadata;
 }

package/src/lib/components/types.ts

@@ -0,0 +1,122 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { ImageMetadata } from './atoms/image/types';
+import { Color } from '@ionic/core';
+
+export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING' | 'ERROR';
+const ENABLED: ComponentState = 'ENABLED';
+const DISABLED: ComponentState = 'DISABLED';
+const WORKING: ComponentState = 'WORKING';
+const ERROR: ComponentState = 'ERROR';
+export const ComponentStates = { ENABLED, DISABLED, WORKING, ERROR };
+
+export enum ActionType {
+  BROWSER_NEW_TAB,
+  BROWSER_DOWNLOAD,
+  NATIVE_DOWNLOAD,
+  APP_NAVIGATION,
+  BROWSER_NAVIGATION,
+}
+
+export type Action = {
+  description: string;
+  type: ActionType;
+  source: string;
+};
+
+export enum InputType {
+  TEXT,
+  EMAIL,
+  PASSWORD,
+  COMMENT,
+  NUMBER,
+  PIN_CODE,
+  DATE,
+  HOUR,
+  CHECK,
+  RADIO,
+  SELECT,
+  FILE,
+}
+
+export type InputOption = {
+  id: string;
+  name: string;
+  selected?: boolean;
+  order: number;
+};
+
+export type InputMetadata = {
+  control: FormControl;
+  token: string;
+  label: string;
+  name: string;
+  hint: string;
+  placeholder: string;
+  type: InputType;
+  order: number;
+  validators: ValidatorFn[];
+  options?: InputOption[];
+  range?: {
+    min: number;
+    max: number;
+  };
+  errors: {
+    [key: string]: string;
+  };
+  value?: string;
+};
+
+export type FormSection = {
+  name: string;
+  order: number;
+  fields: InputMetadata[];
+};
+
+export type FormSubmit = {
+  fields: { key: string; value: string }[];
+  token?: string;
+};
+
+export type FormMetadata = {
+  name: string;
+  sections: FormSection[];
+  actions: ButtonMetadata;
+  state: ComponentState;
+};
+
+export enum ToolbarActionType {
+  AVATAR = 'AVATAR',
+  ICON = 'ICON',
+  IMAGE = 'IMAGE',
+  BUTTON = 'BUTTON',
+}
+
+export type ToolbarAction = {
+  type: 'AVATAR' | 'ICON' | 'IMAGE' | 'BUTTON';
+  token?: string;
+  position: 'left' | 'right' | 'center';
+  description?: string;
+  image?: ImageMetadata;
+};
+
+export interface IconMetada {
+  name: string;
+  slot: 'start' | 'end';
+}
+
+export interface ButtonMetadata {
+  actionType?: ActionType;
+  expand?: 'full' | 'block';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  download?: string;
+  color: Color;
+  state: ComponentState;
+  text: string;
+  icon?: IconMetada;
+  shape?: 'round';
+  size?: 'small' | 'default' | 'large';
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  type: 'button' | 'submit' | 'reset';
+  token?: string;
+}

package/src/lib/services/download.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DownloadService {
+  getFileNameFromUrl(url: string): string {
+    try {
+      const pathSegments = url.split('/');
+      const lastSegment = pathSegments[pathSegments.length - 1];
+      const fileName = decodeURIComponent(lastSegment);
+      return fileName;
+    } catch (error) {
+      console.error('Error al obtener nombre de archivo: ', JSON.stringify(error));
+      return 'filename';
+    }
+  }
+
+  openNewTab(url: string): void {
+    if (url) {
+      const fileName = this.getFileNameFromUrl(url);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.target = '_blank';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else {
+      console.error('La URL no está definida');
+    }
+  }
+
+  downloadLinkFromBrowser(url: string): void {
+    console.log('trying to download file from url');
+    if (url) {
+      fetch(url)
+        .then(response => response.blob())
+        .then(blob => {
+          const url = window.URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+
+          const fileName = this.getFileNameFromUrl(url);
+          link.download = `${+new Date()}-${fileName}`;
+          link.target = '_self';
+          link.click();
+
+          window.URL.revokeObjectURL(url);
+        })
+        .catch(error => {
+          console.error('Error al descargar el archivo:', JSON.stringify(error));
+        });
+    } else {
+      console.error('La URL no está definida');
+    }
+  }
+}