valtech-components 2.0.46 → 2.0.47

package/src/lib/components/molecules/title-block/title-block.component.ts

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { DisplayComponent } from '../../atoms/display/display.component';
-import { TitleComponent } from '../../atoms/title/title.component';
-import { TitleBlockMetada } from './types';
-
-@Component({
-  selector: 'val-title-block',
-  standalone: true,
-  imports: [CommonModule, TitleComponent, DisplayComponent],
-  template: `
-    <div [ngClass]="['titles-container', props.position]">
-      <val-title
-        *ngIf="props.aboveTitle"
-        [props]="{
-          content: props.aboveTitle.text | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.text,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.text,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-        }"
-      ></val-title>
-    </div>
-  `,
-  styleUrls: ['./title-block.component.scss'],
-})
-export class TitleBlockComponent implements OnInit {
-  @Input()
-  props: TitleBlockMetada;
-
-  constructor() {}
-
-  ngOnInit() {}
-}

package/src/lib/components/molecules/title-block/types.ts

@@ -1,14 +0,0 @@
-import { Color } from '@ionic/core';
-
-export type TitleMetada = {
-  text: string;
-  color: Color;
-  size: 'small' | 'medium' | 'large' | 'xlarge';
-};
-
-export type TitleBlockMetada = {
-  position: 'center' | 'left' | 'right';
-  title?: TitleMetada;
-  aboveTitle?: TitleMetada;
-  bellowTitle?: TitleMetada;
-};

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,31 +0,0 @@
-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: [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/item-list/item-list.component.scss

@@ -1,41 +0,0 @@
-@import '../../styles/mixins.scss';
-
-ion-label {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-ion-note {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-  font-weight: 400;
-}
-
-ion-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.shadowed {
-  @include box-shadow-medium;
-}
-
-.bordered {
-  border: 1px solid;
-}
-
-.unread-indicator {
-  background: var(--ion-color-primary);
-
-  width: pxToRem(10);
-  height: pxToRem(10);
-
-  border-radius: 100%;
-
-  position: absolute;
-
-  inset-inline-start: pxToRem(12);
-  top: pxToRem(12);
-}
-
-.action-spinner {
-  width: pxToRem(50);
-  height: pxToRem(16);
-}