valtech-components 2.0.687 → 2.0.689

package/scripts/update-apps.sh

@@ -0,0 +1,94 @@
+#!/bin/bash
+set -e
+
+# Colores para output
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Obtener directorio del script (absoluto)
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+VALTECH_COMPONENTS_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+FRONTEND_DIR="$(cd "$VALTECH_COMPONENTS_DIR/.." && pwd)"
+
+# Obtener la versión recién publicada
+VERSION=$(node -p "require('$VALTECH_COMPONENTS_DIR/package.json').version")
+echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"
+echo -e "${GREEN}  Actualizando apps frontend a valtech-components@${VERSION}${NC}"
+echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"
+
+# Esperar a que el paquete esté disponible en npm
+echo -e "\n${YELLOW}⏳ Esperando que valtech-components@${VERSION} esté disponible en npm...${NC}"
+MAX_ATTEMPTS=30
+ATTEMPT=1
+SLEEP_TIME=2
+
+while [ $ATTEMPT -le $MAX_ATTEMPTS ]; do
+  # Verificar si la versión está disponible en npm
+  NPM_VERSION=$(npm view valtech-components@${VERSION} version 2>/dev/null || echo "")
+
+  if [ "$NPM_VERSION" = "$VERSION" ]; then
+    echo -e "${GREEN}✓ Paquete disponible en npm${NC}"
+    break
+  fi
+
+  if [ $ATTEMPT -eq $MAX_ATTEMPTS ]; then
+    echo -e "${RED}✗ Timeout: El paquete no está disponible después de $((MAX_ATTEMPTS * SLEEP_TIME)) segundos${NC}"
+    echo -e "${YELLOW}  Puedes ejecutar este script manualmente más tarde.${NC}"
+    exit 1
+  fi
+
+  echo -e "   Intento ${ATTEMPT}/${MAX_ATTEMPTS} - esperando ${SLEEP_TIME}s..."
+  sleep $SLEEP_TIME
+  ATTEMPT=$((ATTEMPT + 1))
+done
+
+# Apps que usan valtech-components
+APPS=(
+  "app-template"
+  "components-showcase"
+  "showcase"
+  "ui-docs"
+)
+
+# Contador de apps actualizadas
+UPDATED=0
+SKIPPED=0
+
+# Actualizar cada app
+for APP in "${APPS[@]}"; do
+  APP_PATH="${FRONTEND_DIR}/${APP}"
+
+  if [ -d "$APP_PATH" ] && [ -f "$APP_PATH/package.json" ]; then
+    # Verificar si la app usa valtech-components
+    if grep -q '"valtech-components"' "$APP_PATH/package.json"; then
+      # Obtener versión actual
+      CURRENT_VERSION=$(node -p "require('$APP_PATH/package.json').dependencies['valtech-components']" 2>/dev/null || echo "unknown")
+
+      echo -e "\n${YELLOW}📦 ${APP}${NC}"
+      echo -e "   Versión actual: ${CURRENT_VERSION}"
+      echo -e "   Nueva versión:  ^${VERSION}"
+
+      # Actualizar versión en package.json
+      echo -e "   Actualizando package.json..."
+      (cd "$APP_PATH" && npm pkg set "dependencies.valtech-components=^${VERSION}")
+
+      # Ejecutar npm install
+      echo -e "   Ejecutando npm install..."
+      (cd "$APP_PATH" && npm install 2>&1 | tail -3)
+
+      echo -e "${GREEN}   ✓ ${APP} actualizado correctamente${NC}"
+      UPDATED=$((UPDATED + 1))
+    else
+      echo -e "\n${YELLOW}⏭ ${APP}${NC} - No usa valtech-components, saltando..."
+      SKIPPED=$((SKIPPED + 1))
+    fi
+  else
+    echo -e "\n${RED}✗ ${APP}${NC} - Directorio no encontrado: $APP_PATH"
+  fi
+done
+
+echo -e "\n${GREEN}══════════════════════════════════════════════════════════════${NC}"
+echo -e "${GREEN}  Resumen: ${UPDATED} apps actualizadas, ${SKIPPED} saltadas${NC}"
+echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"

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

@@ -0,0 +1,31 @@
+@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);
+}
+
+// Estilo Grayscale
+.grayscale {
+  img {
+    filter: grayscale(100%); // Aplica el filtro de blanco y negro a la imagen
+  }
+
+  &:hover img {
+    filter: grayscale(0%); // Al hacer hover, elimina el filtro volviendo al color original
+  }
+}

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

@@ -0,0 +1,95 @@
+import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { AvatarMetadata } from './types';
+
+@Component({
+  selector: 'val-avatar',
+  standalone: true,
+  imports: [IonAvatar],
+  template: `
+    <ion-avatar
+      aria-hidden="true"
+      [class]="resolvedProps.size"
+      [class.box]="resolvedProps.box"
+      [class.grayscale]="resolvedProps.grayscale"
+      (click)="onClickHandler()"
+    >
+      <img alt="profile image" [src]="resolvedProps.image || resolvedProps.default" />
+    </ion-avatar>
+  `,
+  styleUrls: ['./avatar.component.scss'],
+})
+/**
+ * val-avatar
+ *
+ * Displays a user or profile image, optionally with a box style and different sizes.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-avatar preset="profile" [props]="{ image: 'url' }" (onClick)="handler()"></val-avatar>
+ *
+ * @example Static (backwards compatible):
+ * <val-avatar [props]="{ image: 'url', size: 'medium', box: true }" (onClick)="handler()"></val-avatar>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: AvatarMetadata - Configuration for the avatar (image, size, box, default image)
+ * @output onClick - Emits when the avatar is clicked
+ */
+export class AvatarComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable avatar configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-avatar preset="profile" [props]="{ image: 'url' }"></val-avatar>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Avatar configuration object. Values here override preset values.
+   */
+  @Input() props: Partial<AvatarMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: AvatarMetadata = {} as AvatarMetadata;
+
+  /**
+   * Event emitted when the avatar is clicked.
+   */
+  @Output()
+  onClick = new EventEmitter();
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('avatar', this.preset) as Partial<AvatarMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as AvatarMetadata;
+  }
+
+  onClickHandler() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { AvatarComponent } from './avatar.component';
+
+// Sample avatar images
+const SAMPLE_AVATARS = {
+  user1: 'https://i.pravatar.cc/150?img=1',
+  user2: 'https://i.pravatar.cc/150?img=2',
+  user3: 'https://i.pravatar.cc/150?img=3',
+  user4: 'https://i.pravatar.cc/150?img=4',
+  user5: 'https://i.pravatar.cc/150?img=5',
+  default: 'https://i.pravatar.cc/150?img=0',
+};
+
+const meta: Meta<AvatarComponent> = {
+  title: 'Atoms/Avatar',
+  component: AvatarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, AvatarComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Avatar configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Event emitted when the avatar is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-avatar
+
+Displays a user or profile image with configurable size, styles, and click interaction.
+
+### Usage
+
+\`\`\`html
+<val-avatar
+  [props]="{
+    image: 'user-photo.jpg',
+    default: 'default-avatar.jpg',
+    size: 'medium',
+    box: true
+  }"
+  (onClick)="handleClick()"
+></val-avatar>
+\`\`\`
+
+### Sizes
+
+- \`small\`: Compact avatar for lists
+- \`medium\`: Standard size for profiles
+- \`large\`: Prominent display
+
+### Styles
+
+- \`box\`: Adds a box/shadow effect
+- \`grayscale\`: Displays the image in grayscale
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AvatarComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user1,
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user2,
+      default: SAMPLE_AVATARS.default,
+      size: 'small',
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user3,
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user4,
+      default: SAMPLE_AVATARS.default,
+      size: 'large',
+    },
+  },
+};
+
+export const WithBox: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user5,
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+      box: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar with box/shadow effect enabled.',
+      },
+    },
+  },
+};
+
+export const Grayscale: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user1,
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+      grayscale: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar displayed in grayscale. Useful for inactive or disabled states.',
+      },
+    },
+  },
+};
+
+export const FallbackImage: Story = {
+  args: {
+    props: {
+      image: '', // Empty image to show fallback
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When `image` is empty or fails to load, the `default` image is shown.',
+      },
+    },
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    props: {
+      image: SAMPLE_AVATARS.user2,
+      default: SAMPLE_AVATARS.default,
+      size: 'medium',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Click the avatar to trigger the `onClick` event. Check the Actions panel.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Sizes</h3>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user1}', default: '${SAMPLE_AVATARS.default}', size: 'small' }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Small</p>
+          </div>
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user2}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Medium</p>
+          </div>
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user3}', default: '${SAMPLE_AVATARS.default}', size: 'large' }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Large</p>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Styles</h3>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user4}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Normal</p>
+          </div>
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user4}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">With Box</p>
+          </div>
+          <div style="text-align: center;">
+            <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user4}', default: '${SAMPLE_AVATARS.default}', size: 'medium', grayscale: true }"></val-avatar>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Grayscale</p>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">User Gallery</h3>
+        <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+          <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user1}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+          <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user2}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+          <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user3}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+          <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user4}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+          <val-avatar [props]="{ image: '${SAMPLE_AVATARS.user5}', default: '${SAMPLE_AVATARS.default}', size: 'medium' }"></val-avatar>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Stacked Avatars (overlap effect)</h3>
+        <div style="display: flex; align-items: center;">
+          <val-avatar style="margin-right: -12px; z-index: 5;" [props]="{ image: '${SAMPLE_AVATARS.user1}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+          <val-avatar style="margin-right: -12px; z-index: 4;" [props]="{ image: '${SAMPLE_AVATARS.user2}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+          <val-avatar style="margin-right: -12px; z-index: 3;" [props]="{ image: '${SAMPLE_AVATARS.user3}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+          <val-avatar style="margin-right: -12px; z-index: 2;" [props]="{ image: '${SAMPLE_AVATARS.user4}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+          <val-avatar style="z-index: 1;" [props]="{ image: '${SAMPLE_AVATARS.user5}', default: '${SAMPLE_AVATARS.default}', size: 'medium', box: true }"></val-avatar>
+          <span style="margin-left: 8px; font-family: system-ui; font-size: 14px; color: #666;">+12 more</span>
+        </div>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,15 @@
+/**
+ * Props for val-avatar component.
+ *
+ * @property image - The image URL to display.
+ * @property default - The fallback image URL if image is not provided.
+ * @property size - The size of the avatar ('small' | 'medium' | 'large').
+ * @property box - Whether to display the avatar with a box style (optional).
+ */
+export interface AvatarMetadata {
+  image: string;
+  default: string;
+  size: 'small' | 'medium' | 'large';
+  box?: boolean;
+  grayscale?: 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(0);
+
+  &.rounded {
+    border-radius: pxToRem(18);
+  }
+}
+
+.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,77 @@
+import { CommonModule, NgStyle } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonCard, IonIcon } from '@ionic/angular/standalone';
+import { IconService } from '../../../services/icons.service';
+import { BoxMetadata } from './types';
+
+@Component({
+  selector: 'val-box',
+  standalone: true,
+  imports: [CommonModule, IonCard, IonIcon, NgStyle],
+  template: `
+    <ion-card
+      class="box"
+      [color]="props.color"
+      [class.rounded]="props.rounded"
+      [class.bordered]="props.bordered"
+      [class.transparent]="!props.color"
+      [class.left-border]="props.leftBorder"
+      [ngStyle]="{
+        padding: props.padding ? props.padding : '0px',
+      }"
+    >
+      @if (props.icon) {
+        <ion-icon class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+      }
+      <div
+        [ngStyle]="{
+          'margin-right': props.icon ? '24px' : '0px',
+        }"
+      >
+        <ng-content select="[body]"></ng-content>
+      </div>
+    </ion-card>
+  `,
+  styleUrls: ['./box.component.scss'],
+})
+/**
+ * val-box
+ *
+ * A stylized card container for grouping content, with optional icon, color, border, and click event.
+ *
+ * @example
+ * <val-box [props]="{ color: 'primary', rounded: true, icon: 'star' }" (onClick)="handler()">
+ *   <div body>Content here</div>
+ * </val-box>
+ *
+ * @input props: BoxMetadata - Configuration for the box (color, icon, border, etc.)
+ * @output onClick - Emits when the box or its icon is clicked
+ */
+export class BoxComponent implements OnInit {
+  /**
+   * Box configuration object.
+   * @type {BoxMetadata}
+   * @property color - The color of the box (Ionic color string).
+   * @property icon - The name of the icon to display (optional).
+   * @property bordered - Whether the box has a border (optional).
+   * @property leftBorder - Whether the box has a left border (optional).
+   * @property rounded - Whether the box has rounded corners (optional).
+   * @property padding - Custom padding for the box (optional).
+   */
+  @Input()
+  props: BoxMetadata;
+
+  /**
+   * Event emitted when the box or its icon is clicked.
+   */
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor(icon: IconService) {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    this.onClick.emit();
+  }
+}