valtech-components 2.0.26 → 2.0.28

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { ToolbarMetadata } from '../toolbar/types';
+
 export type FooterMetadata = {
-    translucent?: boolean;
-    bordered?: boolean;
-    toolbar: ToolbarMetadata;
+  translucent?: boolean;
+  bordered?: boolean;
+  toolbar: ToolbarMetadata;
 };

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { ToolbarMetadata } from '../toolbar/types';
+
 export type HeaderMetadata = {
-    translucent?: boolean;
-    bordered?: boolean;
-    toolbar: ToolbarMetadata;
+  translucent?: boolean;
+  bordered?: boolean;
+  toolbar: ToolbarMetadata;
 };

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

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

@@ -0,0 +1,32 @@
+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/{lib/components/organisms/no-content/types.d.ts → src/lib/components/organisms/no-content/types.ts}

@@ -1,6 +1,7 @@
 import { ImageMetadata } from '../../atoms/image/types';
 import { BannerMetadata } from '../../organisms/banner/types';
+
 export type NoContentMetadata = {
-    image: ImageMetadata;
-    content: BannerMetadata;
+  image: ImageMetadata;
+  content: BannerMetadata;
 };

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

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