valtech-components 2.0.61 → 2.0.62

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/valtech-components",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib/assets/fonts"]
+  },
+  "assets": ["src/lib/components/styles", "src/lib/assets/fonts", "./styles"],
+  "allowedNonPeerDependencies": ["ng-otp-input", "@capacitor/browser"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.61",
+  "version": "2.0.62",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -14,17 +14,19 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/valtech-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/valtech-components.mjs",
-      "esm": "./esm2022/valtech-components.mjs",
-      "default": "./fesm2022/valtech-components.mjs"
-    }
+  "devDependencies": {
+    "@ionic/angular": "^8.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "ionicons": "^7.2.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "prettier": "prettier --write src/**/*",
+    "build-prod": "ng build --configuration production",
+    "release": "bash release.sh"
   }
 }

package/release.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+
+# Version
+if npm version patch; then
+  echo "Version npm aumentada"
+else
+  echo "Error al aumentar version."
+  exit 1
+fi
+
+# Obtener la versión actual del package.json
+VERSION=$(node -pe "require('./package.json').version")
+
+# Crear el tag con el nombre de la versión
+if git tag $VERSION; then
+  echo "Tag creado: $VERSION"
+else
+  echo "Error al crear el tag."
+  exit 1
+fi
+
+# Build
+if npm run build-prod; then
+  echo "Compilación exitosa"
+else
+  echo "Error al compilar."
+  exit 1
+fi
+
+# Stage
+if git add package.json package-lock.json; then
+  echo "Cambios agregados"
+else
+  echo "Error al agregar archivos nuevos."
+  exit 1
+fi
+
+# Commit
+if git commit --amend --no-edit --allow-empty --no-verify; then
+  echo "Cambios persistidos"
+else
+  echo "Error al guardar archivos nuevos."
+  exit 1
+fi
+
+# Dist
+if git push && cd ../../dist/valtech-components; then
+  echo "En directorio dist"
+else
+  echo "Error al intentar cambiar de directorio."
+  exit 1
+fi
+
+# Publish
+if npm publish; then
+  echo "Paquete publicado"
+else
+  echo "Error al publicar paquete."
+  exit 1
+fi
+
+# Empujar el tag al repositorio remoto
+if git push origin $VERSION; then
+  echo "Tag empujado al repositorio remoto: $VERSION"
+else
+  echo "Error al empujar el tag al repositorio remoto."
+  exit 1
+fi
+
+# Empujar cambios repositorio remoto
+if git push; then
+  echo "Cambios enviados remoto"
+else
+  echo "Error al empujar cambios al repositorio remoto."
+  exit 1
+fi

package/src/lib/components/atoms/avatar/avatar.component.scss

@@ -0,0 +1,20 @@
+@import '../../styles/mixins.scss';
+
+.box {
+  --border-radius: pxToRem(4);
+}
+
+.small {
+  width: pxToRem(28);
+  height: pxToRem(28);
+}
+
+.medium {
+  width: pxToRem(38);
+  height: pxToRem(38);
+}
+
+.large {
+  width: pxToRem(48);
+  height: pxToRem(48);
+}

package/src/lib/components/atoms/avatar/avatar.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+import { AvatarMetadata } from './types';
+
+@Component({
+  selector: 'val-avatar',
+  standalone: true,
+  imports: [IonAvatar],
+  template: `
+    <ion-avatar aria-hidden="true" [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
+      <img alt="profile image" [src]="props.image || props.default" />
+    </ion-avatar>
+  `,
+  styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+  @Input() props: AvatarMetadata;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickHandler() {
+    this.onClick.emit();
+  }
+}

package/src/lib/components/atoms/avatar/types.ts

@@ -0,0 +1,6 @@
+export interface AvatarMetadata {
+  image: string;
+  default: string;
+  size: 'small' | 'medium' | 'large';
+  box?: boolean;
+}

package/src/lib/components/atoms/box/box.component.scss

@@ -0,0 +1,57 @@
+@import '../../styles/mixins.scss';
+
+.bordered {
+  border: pxToRem(1) solid var(--ion-color-medium);
+}
+
+.box {
+  width: 100%;
+  margin: pxToRem(0);
+  border-radius: pxToRem(0);
+  box-shadow: none;
+  padding: pxToRem(4);
+
+  @include media-medium {
+    padding: pxToRem(8);
+  }
+}
+
+.icon {
+  cursor: pointer;
+  margin: pxToRem(0);
+  padding: pxToRem(0);
+  position: absolute;
+  right: pxToRem(4);
+  top: pxToRem(4);
+  font-size: pxToRem(24);
+
+  @include media-medium {
+    right: pxToRem(8);
+    top: pxToRem(8);
+    font-size: pxToRem(32);
+  }
+}
+
+.left-border {
+  border-left: pxToRem(3) solid $color-default-border;
+
+  &.small {
+    border-width: pxToRem(3);
+  }
+
+  &.medium {
+    border-width: pxToRem(6);
+  }
+
+  &.large {
+    border-width: pxToRem(7);
+  }
+
+  &.xlarge {
+    border-width: pxToRem(8);
+  }
+}
+
+.transparent {
+  --background: transparent;
+}

package/src/lib/components/atoms/box/box.component.ts

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonCard, IonIcon } from '@ionic/angular/standalone';
+import { BoxMetadata } from './types';
+import { IconService } from '../../../services/icons.service';
+
+@Component({
+  selector: 'val-box',
+  standalone: true,
+  imports: [CommonModule, IonCard, IonIcon],
+  template: `
+    <ion-card
+      class="box"
+      [color]="props.color"
+      [class.bordered]="props.bordered"
+      [class.transparent]="!props.color"
+      [class.left-border]="props.leftBorder"
+    >
+      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+      <div style="margin-right: 24px;">
+        <ng-content select="[body]"></ng-content>
+      </div>
+    </ion-card>
+  `,
+  styleUrls: ['./box.component.scss'],
+})
+export class BoxComponent implements OnInit {
+  @Input()
+  props: BoxMetadata;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor(icon: IconService) {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    this.onClick.emit();
+  }
+}

package/src/lib/components/atoms/box/types.ts

@@ -0,0 +1,8 @@
+import { Color } from '@ionic/core';
+
+export interface BoxMetadata {
+  color: Color;
+  icon: string;
+  bordered?: boolean;
+  leftBorder?: boolean;
+}

package/src/lib/components/atoms/button/button.component.scss

@@ -0,0 +1,6 @@
+@import '../../styles/variables.scss';
+
+ion-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+  min-width: pxToRem(100);
+}

package/src/lib/components/atoms/button/button.component.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonButton, IonIcon, IonSpinner, IonText } from '@ionic/angular/standalone';
+import { DownloadService } from '../../../services/download.service';
+import { ButtonMetadata, ComponentStates } from '../../types';
+import { IconService } from '../../../services/icons.service';
+
+@Component({
+  selector: 'val-button',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon, IonSpinner, IonText],
+  template: `
+    <ion-button
+      [type]="props.type"
+      [color]="props.color"
+      [expand]="props.expand"
+      [fill]="props.fill"
+      [size]="props.size"
+      [href]="props.href"
+      [target]="props.target"
+      [shape]="props.shape"
+      (click)="clickHandler()"
+      [disabled]="props.state === states.DISABLED"
+    >
+      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
+      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-text *ngIf="props.state !== states.WORKING">{{ props.text }}</ion-text>
+    </ion-button>
+  `,
+  styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent {
+  states = ComponentStates;
+
+  @Input()
+  props!: ButtonMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  constructor(private download: DownloadService, icon: IconService) {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    if (this.props.download) {
+      this.download.downloadLinkFromBrowser(this.props.download);
+    }
+    if (this.props.state === this.states.DISABLED) {
+      return;
+    }
+    this.onClick.emit(this.props.token);
+  }
+}