valtech-components 2.0.46 → 2.0.47

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

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

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

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

@@ -1,75 +0,0 @@
-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/src/lib/components/types.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-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');
-  }
-}