valtech-components 2.0.28 → 2.0.29

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

@@ -1,45 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.content-container {
-  display: flex;
-  justify-content: space-between;
-
-  &.center {
-    flex-direction: column;
-  }
-
-  &.column {
-    flex-direction: row;
-  }
-
-  &.row {
-    flex-direction: column;
-  }
-
-  &.middle {
-    align-items: center;
-  }
-
-  &.top {
-    align-items: flex-start;
-  }
-
-  &.bottom {
-    align-items: flex-end;
-  }
-
-  &.hybrid {
-    flex-direction: column;
-    align-items: flex-start;
-
-    @include media-medium {
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-}
-
-.buttons-container {
-  align-items: center;
-  display: flex;
-}

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

@@ -1,57 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { BoxComponent } from '../../atoms/box/box.component';
-import { ButtonGroupComponent } from '../../molecules/button-group/button-group.component';
-import { TitleBlockComponent } from '../../molecules/title-block/title-block.component';
-import { BannerMetadata } from './types';
-
-@Component({
-  selector: 'val-banner',
-  standalone: true,
-  imports: [CommonModule, BoxComponent, TitleBlockComponent, ButtonGroupComponent],
-  template: `
-    <val-box
-      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '' }"
-      (onClick)="closeHandler()"
-    >
-      <div [ngClass]="['content-container', props.mode, props.alignment]" body>
-        <val-title-block
-          [props]="{
-            position: props.mode === 'center' ? 'center' : 'left',
-            aboveTitle: props.content.aboveTitle,
-            title: props.content.title,
-            bellowTitle: props.content.bellowTitle,
-          }"
-        ></val-title-block>
-        <val-button-group
-          class="buttons-container"
-          [props]="{ position: props.mode === 'center' ? 'center' : 'left', buttons: props.actions, columned: false }"
-          (onClick)="clickHandler($event)"
-        ></val-button-group>
-      </div>
-    </val-box>
-  `,
-  styleUrls: ['./banner.component.scss'],
-})
-export class BannerComponent implements OnInit {
-  @Input()
-  props: BannerMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  @Output()
-  onClose = new EventEmitter();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-
-  closeHandler() {
-    this.onClose.emit();
-  }
-}

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

@@ -1,13 +0,0 @@
-import { Color } from '@ionic/core';
-import { TitleBlockMetada } from '../../molecules/title-block/types';
-import { ButtonMetadata } from '../../types';
-
-export type BannerMetadata = {
-  color: Color;
-  bordered: boolean;
-  closable: boolean;
-  mode: 'row' | 'column' | 'hybrid' | 'center';
-  alignment: 'center' | 'middle' | 'bottom';
-  actions: ButtonMetadata[];
-  content: TitleBlockMetada;
-};

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

@@ -1,3 +0,0 @@
-.background {
-  background: var(--ion-background-color);
-}

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

@@ -1,40 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FooterMetadata } from './types';
-import { IonFooter } from '@ionic/angular/standalone';
-import { ToolbarComponent } from '../toolbar/toolbar.component';
-
-@Component({
-  selector: 'val-footer',
-  standalone: true,
-  imports: [IonFooter, ToolbarComponent],
-  template: `
-    <ion-footer
-      [class.ion-no-border]="!props.bordered"
-      [translucent]="props.translucent"
-      [class.background]="props.toolbar.color === 'background'"
-    >
-      <val-toolbar
-        *ngIf="props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack"
-        [props]="props.toolbar"
-        (onClick)="clickHandler($event)"
-      ></val-toolbar>
-      <ng-content select="[extra]"></ng-content>
-    </ion-footer>
-  `,
-  styleUrls: ['./footer.component.scss'],
-})
-export class FooterComponent implements OnInit {
-  @Input()
-  props: FooterMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-}

package/src/lib/components/organisms/form/factory.ts

@@ -1,11 +0,0 @@
-import { ValidatorFn, Validators } from '@angular/forms';
-
-export const maxLength = (
-  field: string,
-  max: number
-): { validator: ValidatorFn; error: string } => {
-  return {
-    validator: Validators.maxLength(max),
-    error: `El campo ${field} no debe superar los ${max} caracteres.`,
-  };
-};

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

@@ -1,63 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { ButtonGroupComponent } from '../../../molecules/button-group/button-group.component';
-import { ButtonMetadata, ComponentStates, FormSubmit } from '../../../types';
-import { FooterComponent } from '../../footer/footer.component';
-
-@Component({
-  selector: 'val-form-footer',
-  standalone: true,
-  imports: [FooterComponent, ButtonGroupComponent],
-  template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'center', columned: false }"
-        (onClick)="submitHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  `,
-  styleUrls: ['./form-footer.component.scss'],
-})
-export class FormFooterComponent implements OnInit {
-  @Input()
-  form: FormGroup;
-
-  @Input()
-  action: ButtonMetadata;
-
-  @Output()
-  onSubmit = new EventEmitter<FormSubmit>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  async submitHandler(token?: string) {
-    this.onSubmit.emit({ fields: this.form.value, token });
-  }
-
-  get actions(): ButtonMetadata[] {
-    if (!this.form) {
-      return [];
-    }
-
-    if (this.form.valid) {
-      this.action.state = ComponentStates.ENABLED;
-    }
-
-    return [this.action];
-  }
-}

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

@@ -1,16 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.container {
-}
-
-.section {
-  margin-top: pxToRem(16);
-}
-
-.input {
-  margin: pxToRem(8) 0;
-
-  @include media-medium {
-    margin: pxToRem(12) 0;
-  }
-}

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

@@ -1,183 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { isAtEnd } from '../../../shared/utils/dom';
-import { DisplayComponent } from '../../atoms/display/display.component';
-import { DividerComponent } from '../../atoms/divider/divider.component';
-import { TitleComponent } from '../../atoms/title/title.component';
-import { ButtonGroupComponent } from '../../molecules/button-group/button-group.component';
-import { CheckInputComponent } from '../../molecules/check-input/check-input.component';
-import { CommentInputComponent } from '../../molecules/comment-input/comment-input.component';
-import { DateInputComponent } from '../../molecules/date-input/date-input.component';
-import { EmailInputComponent } from '../../molecules/email-input/email-input.component';
-import { FileInputComponent } from '../../molecules/file-input/file-input.component';
-import { HintComponent } from '../../molecules/hint/hint.component';
-import { HourInputComponent } from '../../molecules/hour-input/hour-input.component';
-import { NumberInputComponent } from '../../molecules/number-input/number-input.component';
-import { PasswordInputComponent } from '../../molecules/password-input/password-input.component';
-import { PinInputComponent } from '../../molecules/pin-input/pin-input.component';
-import { RadioInputComponent } from '../../molecules/radio-input/radio-input.component';
-import { TextInputComponent } from '../../molecules/text-input/text-input.component';
-import { ButtonMetadata, ComponentStates, FormMetadata, FormSubmit, InputMetadata, InputType } from '../../types';
-
-@Component({
-  selector: 'val-form',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    DisplayComponent,
-    TitleComponent,
-    TextInputComponent,
-    CheckInputComponent,
-    ButtonGroupComponent,
-    DividerComponent,
-    HintComponent,
-    CommentInputComponent,
-    DateInputComponent,
-    FileInputComponent,
-    HourInputComponent,
-    EmailInputComponent,
-    NumberInputComponent,
-    RadioInputComponent,
-    PasswordInputComponent,
-    PinInputComponent,
-  ],
-  template: `
-    <div class="container">
-      <form [formGroup]="form">
-        <val-display
-          [props]="{
-            content: props.name,
-            color: 'dark',
-            size: 'large',
-          }"
-        ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
-          <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
-          <div class="input" *ngFor="let f of s.fields">
-            <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
-            <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="getFieldProp(f)"></val-text-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.CHECK">
-              <val-check-input></val-check-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.SELECT">
-              <!-- <val-select-input></val-select-input> -->
-            </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
-          </div>
-          <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
-        </div>
-        <val-button-group
-          [props]="{ buttons: actions, position: 'center', columned: false }"
-          (onClick)="submitHandler($event)"
-        ></val-button-group>
-      </form>
-    </div>
-  `,
-  styleUrls: ['./form.component.scss'],
-})
-export class FormComponent implements OnInit {
-  @Input()
-  props: FormMetadata;
-
-  @Output()
-  onSubmit = new EventEmitter<FormSubmit>();
-
-  @Output()
-  onInvalid = new EventEmitter();
-
-  form: FormGroup;
-  types = InputType;
-
-  constructor(
-    private fb: FormBuilder,
-    private elementRef: ElementRef
-  ) {}
-
-  ngOnInit() {
-    const formControls = {};
-    this.props.sections.forEach(section => {
-      section.fields.forEach(field => {
-        formControls[field.name] = [undefined, field.validators || []];
-      });
-    });
-    this.form = this.fb.group(formControls);
-  }
-
-  async submitHandler(token?: string) {
-    this.onSubmit.emit({ fields: this.form.value, token });
-  }
-
-  getControl(field: string): FormControl {
-    return this.Form.get(field) as FormControl;
-  }
-
-  getFieldProp(field: InputMetadata): InputMetadata {
-    return {
-      ...field,
-      control: this.getControl(field.name),
-    };
-  }
-
-  get isAtEndOfForm(): boolean {
-    return isAtEnd(this.elementRef);
-  }
-
-  get Form(): FormGroup {
-    return this.form;
-  }
-
-  get actions(): ButtonMetadata[] {
-    if (!this.form) {
-      return [];
-    }
-
-    if (this.form.valid) {
-      this.props.actions.state = ComponentStates.ENABLED;
-    }
-
-    if (this.props.state === ComponentStates.WORKING) {
-      this.props.actions.state = ComponentStates.WORKING;
-    }
-
-    if (this.props.state === ComponentStates.ENABLED) {
-      this.props.actions.state = ComponentStates.ENABLED;
-    }
-
-    if (this.props.state === ComponentStates.DISABLED) {
-      this.props.actions.state = ComponentStates.DISABLED;
-    }
-
-    return [this.props.actions];
-  }
-}

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

@@ -1,32 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IonHeader } from '@ionic/angular/standalone';
-import { ToolbarComponent } from '../toolbar/toolbar.component';
-import { HeaderMetadata } from './types';
-
-@Component({
-  selector: 'val-header',
-  standalone: true,
-  imports: [NgClass, IonHeader, ToolbarComponent],
-  template: `
-    <ion-header [class.ion-no-border]="!props.bordered" [translucent]="props.translucent">
-      <val-toolbar [props]="props.toolbar" (onClick)="clickHandler($event)"></val-toolbar>
-    </ion-header>
-  `,
-  styleUrls: ['./header.component.scss'],
-})
-export class HeaderComponent implements OnInit {
-  @Input()
-  props: HeaderMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-}

package/src/lib/components/organisms/no-content/no-content.component.scss

@@ -1,11 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.image-container {
-  display: flex;
-  justify-content: center;
-  margin-bottom: pxToRem(16);
-}
-
-val-image .image {
-  margin: 0 auto;
-}

package/src/lib/components/organisms/no-content/no-content.component.ts

@@ -1,32 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { BannerComponent } from '../banner/banner.component';
-import { NoContentMetadata } from './types';
-
-@Component({
-  selector: 'val-no-content',
-  standalone: true,
-  imports: [ImageComponent, BannerComponent],
-  template: `
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.content" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `,
-  styleUrls: ['./no-content.component.scss'],
-})
-export class NoContentComponent implements OnInit {
-  @Input()
-  props: NoContentMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  onClickHandler(token: string) {
-    this.onClick.emit(token);
-  }
-}

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

@@ -1,13 +0,0 @@
-@import '../../styles/mixins.scss';
-
-ion-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.left-buttons {
-  margin-left: pxToRem(-16);
-}
-
-.background {
-  background: var(--ion-background-color);
-}

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

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

@@ -1,12 +0,0 @@
-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[];
-};