valtech-components 2.0.44 → 2.0.46

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.bottomContent.content.bellowTitle.text = error;
+    this.props.state = ComponentStates.ERROR;
+    goToTop(this.wrapperId);
+  }
+
+  reset() {
+    this.props.error.titles.bottomContent.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;
+  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.ts

@@ -0,0 +1,75 @@
+import { NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonContent, IonHeader, IonText, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { DividerComponent } from '../../atoms/divider/divider.component';
+import { ExpandableTextComponent } from '../../molecules/expandable-text/expandable-text.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,
+    HeaderComponent,
+    LayoutComponent,
+    DividerComponent,
+    LinkComponent,
+    ExpandableTextComponent,
+  ],
+  template: `
+    <val-header [props]="props.header" />
+
+    <ion-content [fullscreen]="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      @if (props.pageDescription) {
+        <div class="description-container">
+          <val-expandable-text
+            [props]="{
+              limit: 180,
+              content: props.pageDescription,
+              color: 'primary',
+              expandText: 'Ver más',
+            }"
+          />
+        </div>
+      }
+      @if (props.link) {
+        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
+      }
+      @if (props.withDivider) {
+        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      }
+      <val-layout>
+        <ng-content></ng-content>
+      </val-layout>
+    </ion-content>
+  `,
+  styles: `
+    .description-container {
+      padding: 0px 16px;
+    }
+  `,
+})
+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');
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+/* eslint-disable no-underscore-dangle */
+
+import { Injectable } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  addCircleOutline,
+  addOutline,
+  alertCircleOutline,
+  alertOutline,
+  arrowBackOutline,
+  arrowDownOutline,
+  arrowForwardOutline,
+  checkmarkCircleOutline,
+  ellipsisHorizontalOutline,
+  notificationsOutline,
+} from 'ionicons/icons';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IconService {
+  constructor() {
+    addIcons({
+      addOutline,
+      addCircleOutline,
+      alertOutline,
+      alertCircleOutline,
+      arrowBackOutline,
+      arrowForwardOutline,
+      arrowDownOutline,
+      checkmarkCircleOutline,
+      ellipsisHorizontalOutline,
+      notificationsOutline,
+    });
+  }
+}

package/src/lib/services/in-app-browser.service.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-underscore-dangle */
+
+import { Injectable } from '@angular/core';
+import { Browser, OpenOptions } from '@capacitor/browser';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InAppBrowserService {
+  options: OpenOptions = {
+    presentationStyle: 'popover',
+    url: '',
+  };
+  constructor() {}
+
+  async openWithInAppBrowser(url: string) {
+    await Browser.open({ ...this.options, url });
+  }
+}

package/src/lib/services/lang-provider/components/lang-settings.ts

@@ -0,0 +1,14 @@
+import { LanguagesContent, TextContent } from '../types';
+
+const text: LanguagesContent = {
+  es: {
+    spanish: 'Español',
+    english: 'Inglés',
+  },
+  en: {
+    spanish: 'Spanish',
+    english: 'English',
+  },
+};
+
+export default new TextContent(text);

package/src/lib/services/lang-provider/components/theme-settings.ts

@@ -0,0 +1,16 @@
+import { LanguagesContent, TextContent } from '../types';
+
+const text: LanguagesContent = {
+  es: {
+    light: 'Siempre claro',
+    dark: 'Siempre oscuro',
+    auto: 'Automático',
+  },
+  en: {
+    light: 'Always light',
+    dark: 'Always dark',
+    auto: 'System settings',
+  },
+};
+
+export default new TextContent(text);

package/src/lib/services/lang-provider/content.ts

@@ -0,0 +1,14 @@
+import LangSettings from './components/lang-settings';
+import ThemeSettings from './components/theme-settings';
+import { TextContent } from './types';
+
+export interface Provider {
+  [x: string]: TextContent;
+}
+
+const content: Provider = {
+  LangSettings,
+  ThemeSettings,
+};
+
+export default content;

package/src/lib/services/lang-provider/lang-provider.service.ts

@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Provider } from './content';
+import { LangOption, LanguageText } from './types';
+import { LocalStorageService } from '../local-storage.service';
+import { LANG } from '../../shared/constants/storage';
+import { ValtechConfig, ValtechConfigService } from '../types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LangService {
+  content: Provider;
+  default = LangOption.ES;
+  selectedLang: BehaviorSubject<LangOption>;
+  config: ValtechConfig;
+
+  constructor(@Inject(ValtechConfigService) config: ValtechConfig) {
+    console.log('injected config: ', config);
+    this.content = config.content;
+    this.config = config;
+    const current = LocalStorageService.get<LangOption>(LANG);
+    this.selectedLang = new BehaviorSubject<LangOption>(current || this.default);
+  }
+
+  Text(className: string): LanguageText {
+    return this.content[className].Content[this.selectedLang.value];
+  }
+
+  get Lang(): LangOption {
+    return this.selectedLang.value;
+  }
+
+  set Lang(lang: LangOption) {
+    this.selectedLang.next(lang);
+    LocalStorageService.set<LangOption>(LANG, lang);
+  }
+}

package/src/lib/services/lang-provider/types.ts

@@ -0,0 +1,25 @@
+import { Provider } from './content';
+
+export type LanguageText = {
+  [key: string]: string;
+};
+
+export type LanguagesContent = {
+  [key: string]: LanguageText;
+};
+
+export class TextContent {
+  text: LanguagesContent;
+  constructor(text: LanguagesContent) {
+    this.text = text;
+  }
+
+  get Content(): LanguagesContent {
+    return this.text;
+  }
+}
+
+export enum LangOption {
+  ES = 'es',
+  EN = 'en',
+}

package/src/lib/services/local-storage.service.ts

@@ -0,0 +1,18 @@
+export class LocalStorageService {
+  static set<T>(reference: string, value: T): void {
+    localStorage.setItem(reference, JSON.stringify(value));
+  }
+
+  static get<T>(reference: string): T {
+    const value = localStorage.getItem(reference);
+    return JSON.parse(value) as T;
+  }
+
+  static remove(reference: string): void {
+    localStorage.removeItem(reference);
+  }
+
+  static clear() {
+    localStorage.clear();
+  }
+}

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

@@ -0,0 +1,39 @@
+import { inject, Injectable } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { InAppBrowserService } from './in-app-browser.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavigationService {
+  data: any;
+  router = inject(Router);
+  inAppBrowser = inject(InAppBrowserService);
+
+  constructor() {}
+
+  navigateInApp(url: string) {
+    this.inAppBrowser.openWithInAppBrowser(url);
+  }
+
+  navigateWithData(route: string, dataTransfer: any) {
+    const navigationExtras: NavigationExtras = {
+      state: {
+        data: dataTransfer,
+      },
+    };
+
+    this.router.navigate([route], navigationExtras);
+  }
+
+  navigateByUrl(url: string) {
+    this.router
+      .navigateByUrl(url)
+      .then(response => {})
+      .catch(error => {});
+  }
+
+  openInNewTab(url: string): void {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+}