valtech-components 2.0.794 → 2.0.795

package/src/lib/components/molecules/plain-code-box/plain-code-box.stories.ts

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { PlainCodeBoxComponent } from './plain-code-box.component';
+import { PlainCodeBoxMetadata } from './types';
+
+const createPlainCodeBoxProps = (overrides: Partial<PlainCodeBoxMetadata> = {}) => ({
+  lines: [
+    { text: 'npm install @valtech/components', type: 'command' as const },
+  ],
+  showCopyButton: true,
+  language: 'bash',
+  ...overrides,
+} as PlainCodeBoxMetadata);
+
+const defaultProps = createPlainCodeBoxProps();
+
+const bashCommandsProps = createPlainCodeBoxProps({
+  lines: [
+    { text: '$ npm install', type: 'command' as const },
+    { text: 'added 150 packages in 12s', type: 'success' as const },
+    { text: '$ npm run build', type: 'command' as const },
+    { text: 'Build completed successfully', type: 'success' as const },
+  ],
+  language: 'bash',
+});
+
+const withErrorsProps = createPlainCodeBoxProps({
+  lines: [
+    { text: '$ npm run test', type: 'command' as const },
+    { text: 'Running tests...', type: 'normal' as const },
+    { text: 'FAIL: test/app.spec.ts', type: 'error' as const },
+    { text: '  Expected true to be false', type: 'error' as const },
+    { text: '1 test failed, 24 tests passed', type: 'normal' as const },
+  ],
+  language: 'bash',
+});
+
+const typescriptProps = createPlainCodeBoxProps({
+  lines: [
+    { text: 'interface User {', type: 'normal' as const },
+    { text: '  id: string;', type: 'normal' as const },
+    { text: '  name: string;', type: 'normal' as const },
+    { text: '  email: string;', type: 'normal' as const },
+    { text: '}', type: 'normal' as const },
+    { text: '', type: 'normal' as const },
+    { text: 'const getUser = async (id: string): Promise<User> => {', type: 'normal' as const },
+    { text: '  const response = await fetch(`/api/users/${id}`);', type: 'normal' as const },
+    { text: '  return response.json();', type: 'normal' as const },
+    { text: '};', type: 'normal' as const },
+  ],
+  language: 'typescript',
+});
+
+const htmlProps = createPlainCodeBoxProps({
+  lines: [
+    { text: '<div class="container">', type: 'normal' as const },
+    { text: '  <val-button [props]="buttonProps">', type: 'normal' as const },
+    { text: '    Click Me', type: 'normal' as const },
+    { text: '  </val-button>', type: 'normal' as const },
+    { text: '</div>', type: 'normal' as const },
+  ],
+  language: 'markup',
+});
+
+const noCopyButtonProps = createPlainCodeBoxProps({
+  lines: [
+    { text: 'console.log("Hello, World!");', type: 'normal' as const },
+  ],
+  showCopyButton: false,
+  language: 'javascript',
+});
+
+const showcaseInstallProps = createPlainCodeBoxProps({
+  lines: [
+    { text: '# Install the package', type: 'normal' as const },
+    { text: '$ npm install @valtech/components', type: 'command' as const },
+    { text: '', type: 'normal' as const },
+    { text: '# Or with yarn', type: 'normal' as const },
+    { text: '$ yarn add @valtech/components', type: 'command' as const },
+  ],
+  language: 'bash',
+});
+
+const showcaseUsageProps = createPlainCodeBoxProps({
+  lines: [
+    { text: "import { ButtonComponent } from '@valtech/components';", type: 'normal' as const },
+    { text: '', type: 'normal' as const },
+    { text: '@Component({', type: 'normal' as const },
+    { text: "  selector: 'app-root',", type: 'normal' as const },
+    { text: '  standalone: true,', type: 'normal' as const },
+    { text: '  imports: [ButtonComponent],', type: 'normal' as const },
+    { text: "  template: '<val-button [props]=\"props\">Click</val-button>'", type: 'normal' as const },
+    { text: '})', type: 'normal' as const },
+    { text: 'export class AppComponent {}', type: 'normal' as const },
+  ],
+  language: 'typescript',
+});
+
+const meta: Meta<PlainCodeBoxComponent> = {
+  title: 'Molecules/PlainCodeBox',
+  component: PlainCodeBoxComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the plain code box',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PlainCodeBoxComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const BashCommands: Story = {
+  render: () => ({
+    props: { props: bashCommandsProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const WithErrors: Story = {
+  render: () => ({
+    props: { props: withErrorsProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const TypeScript: Story = {
+  render: () => ({
+    props: { props: typescriptProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const HTML: Story = {
+  render: () => ({
+    props: { props: htmlProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const NoCopyButton: Story = {
+  render: () => ({
+    props: { props: noCopyButtonProps },
+    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      installProps: showcaseInstallProps,
+      usageProps: showcaseUsageProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 700px;">
+        <div>
+          <h4 style="margin-bottom: 12px;">Installation</h4>
+          <val-plain-code-box [props]="installProps"></val-plain-code-box>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 12px;">Usage Example</h4>
+          <val-plain-code-box [props]="usageProps"></val-plain-code-box>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/plain-code-box/types.ts

@@ -0,0 +1,12 @@
+export type CodeLineType = 'normal' | 'command' | 'success' | 'error';
+
+export type CodeLine = {
+  text: string;
+  type?: CodeLineType;
+};
+
+export type PlainCodeBoxMetadata = {
+  lines: CodeLine[];
+  showCopyButton?: boolean;
+  language?: string;
+};

package/src/lib/components/molecules/popover-selector/popover-selector.component.scss

@@ -0,0 +1,224 @@
+@import '../../styles/mixins.scss';
+// Contenedor principal que se adapta al contenido
+.popover-selector-container {
+  display: inline-block;
+  width: auto;
+
+  .selector-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: var(--ion-color-dark, #1a1a1a);
+  }
+}
+
+// Selector principal con estilo píldora
+.popover-selector-select {
+  display: inline-block;
+  width: auto;
+
+  .selector-trigger {
+    // Resetear estilos de Ionic
+    --background: transparent;
+    --background-hover: transparent;
+    --background-activated: transparent;
+    --background-focused: transparent;
+    --box-shadow: none;
+    --border-radius: 24px;
+
+    // Estilos de píldora modernos
+    display: inline-flex;
+    align-items: center;
+    min-width: auto;
+    width: auto;
+    height: auto;
+    min-height: 40px;
+    padding: 10px 16px;
+    margin: 0;
+
+    // Apariencia de píldora
+    background: var(--ion-color-light, #f8f9fa);
+    border: none;
+    border-radius: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+    // Transiciones suaves
+    transition: all 0.2s ease;
+
+    // Efectos hover
+    &:hover:not([disabled]) {
+      background: var(--ion-color-light-shade, #e9ecef);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+
+    // Estado activo
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    }
+
+    // Focus visible
+    &:focus-visible {
+      outline: 2px solid var(--ion-color-primary, #3880ff);
+      outline-offset: 2px;
+    }
+
+    // Contenido del botón
+    .trigger-text {
+      display: inline-block;
+      margin: 0 8px 0 0;
+      font-weight: 600;
+      font-size: 14px;
+      color: var(--ion-color-dark, #1a1a1a);
+      white-space: nowrap;
+      line-height: 1.4;
+    }
+
+    .chevron-icon {
+      font-size: 16px;
+      color: var(--ion-color-medium, #92949c);
+      transition: transform 0.2s ease;
+      margin-left: 4px;
+    }
+
+    // Icono inicial (si existe)
+    ion-icon[slot='start'] {
+      margin-right: 8px;
+      font-size: 16px;
+      color: var(--ion-color-medium-shade, #808289);
+    }
+
+    // Estado expandido
+    &.select-expanded {
+      background: var(--ion-color-light-shade, #e9ecef);
+
+      .chevron-icon {
+        transform: rotate(180deg);
+        color: var(--ion-color-primary, #3880ff);
+      }
+    }
+
+    // Estado deshabilitado
+    &[disabled] {
+      opacity: 0.6;
+      pointer-events: none;
+      background: var(--ion-color-light-tint, #f4f5f8);
+      box-shadow: none;
+      transform: none;
+    }
+  }
+}
+
+// Opciones del popover
+.option-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0;
+
+  .option-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    opacity: 0.8;
+    color: var(--ion-color-medium-shade, #808289);
+  }
+
+  span {
+    font-weight: 500;
+    color: var(--ion-color-dark, #1a1a1a);
+    line-height: 1.4;
+  }
+}
+
+// Variaciones de tamaño para píldoras
+.popover-selector-container {
+  &.size-small {
+    .selector-trigger {
+      min-height: 32px;
+      padding: 6px 12px;
+      border-radius: 18px;
+
+      .trigger-text {
+        font-size: 12px;
+      }
+
+      .chevron-icon,
+      ion-icon[slot='start'] {
+        font-size: 14px;
+      }
+    }
+  }
+
+  &.size-large {
+    .selector-trigger {
+      min-height: 48px;
+      padding: 14px 20px;
+      border-radius: 28px;
+
+      .trigger-text {
+        font-size: 16px;
+      }
+
+      .chevron-icon,
+      ion-icon[slot='start'] {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .popover-selector-container {
+    .selector-trigger {
+      min-height: 38px;
+      padding: 9px 14px;
+
+      .trigger-text {
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+// Dark mode — class-based ONLY (Ionic body.dark / html.ion-palette-dark)
+:host-context(.dark),
+:host-context(.ion-palette-dark),
+:host-context(html.ion-palette-dark),
+:host-context(body.dark),
+:host-context([data-theme='dark']) {
+  .popover-selector-container {
+    .selector-label {
+      color: var(--ion-color-light, #f4f5f8);
+    }
+
+    .selector-trigger {
+      background: var(--ion-color-dark-tint, #383a3e);
+
+      &:hover:not([disabled]) {
+        background: var(--ion-color-dark-shade, #2f2f2f);
+      }
+
+      .trigger-text {
+        color: var(--ion-color-light, #f4f5f8);
+      }
+
+      .chevron-icon,
+      ion-icon[slot='start'] {
+        color: var(--ion-color-light-shade, #d7d8da);
+      }
+
+      &.select-expanded {
+        background: var(--ion-color-dark-shade, #2f2f2f);
+      }
+    }
+  }
+}
+
+ion-select {
+  border-radius: 8px;
+  padding: pxToRem(10);
+  border: pxToRem(2) solid var(--ion-color-light) !important;
+}

package/src/lib/components/molecules/popover-selector/popover-selector.component.ts

@@ -0,0 +1,163 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { IonButton, IonIcon, IonLabel, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronDown } from 'ionicons/icons';
+import { I18nService } from '../../../services/i18n';
+import { PopoverSelectorMetadata } from './types';
+
+@Component({
+  selector: 'val-popover-selector',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon, IonSelect, IonSelectOption, IonLabel],
+  template: `
+    <div class="popover-selector-container">
+      <ion-label *ngIf="props.label" class="selector-label">{{ props.label }}</ion-label>
+      <ion-select
+        [value]="props.selectedValue"
+        [placeholder]="getPlaceholderText()"
+        [interface]="props.interface || 'popover'"
+        [multiple]="props.multiple || false"
+        [disabled]="props.disabled || false"
+        [cancelText]="getCancelText()"
+        [okText]="getOkText()"
+        (ionChange)="onSelectionChange($event)"
+        class="popover-selector-select"
+      >
+        <ion-button
+          slot="trigger"
+          [fill]="props.fill || 'clear'"
+          [size]="props.size || 'default'"
+          [shape]="'round'"
+          [color]="props.color || 'medium'"
+          [disabled]="props.disabled || false"
+          class="selector-trigger"
+        >
+          <ion-icon *ngIf="props.icon" [name]="props.icon" slot="start"> </ion-icon>
+
+          <span class="trigger-text">{{ getDisplayText() }}</span>
+
+          <ion-icon name="chevron-down-outline" slot="end" class="chevron-icon"> </ion-icon>
+        </ion-button>
+
+        <ion-select-option *ngFor="let option of props.options" [value]="option.value" [disabled]="option.disabled">
+          <div class="option-content">
+            <ion-icon *ngIf="option.icon" [name]="option.icon" class="option-icon"> </ion-icon>
+            <span>{{ option.label }}</span>
+          </div>
+        </ion-select-option>
+      </ion-select>
+    </div>
+  `,
+  styleUrls: ['./popover-selector.component.scss'],
+})
+/**
+ * val-popover-selector
+ *
+ * A generic reusable popover selector component that can be used for any type of selection.
+ * Provides a button trigger that opens a popover with selectable options.
+ *
+ * @example
+ * // Basic usage
+ * <val-popover-selector
+ *   [props]="selectorProps"
+ *   (selectionChange)="onSelectionChange($event)">
+ * </val-popover-selector>
+ *
+ * @example
+ * // With icon and custom styling
+ * const selectorProps: PopoverSelectorMetadata = {
+ *   options: [
+ *     { value: 'option1', label: 'Option 1', icon: 'star' },
+ *     { value: 'option2', label: 'Option 2', icon: 'heart' }
+ *   ],
+ *   selectedValue: 'option1',
+ *   label: 'Choose option',
+ *   icon: 'settings',
+ *   color: 'primary',
+ *   size: 'large',
+ *   fill: 'solid'
+ * };
+ *
+ * @input props: PopoverSelectorMetadata - Configuration for the selector
+ * @output selectionChange: EventEmitter<string | string[]> - Emitted when selection changes
+ */
+export class PopoverSelectorComponent {
+  /**
+   * Popover selector configuration object.
+   * @type {PopoverSelectorMetadata}
+   */
+  @Input()
+  props: PopoverSelectorMetadata;
+
+  /**
+   * Event emitted when the selection changes.
+   * Emits the selected value(s).
+   */
+  @Output()
+  selectionChange = new EventEmitter<string | string[]>();
+
+  private i18n = inject(I18nService);
+
+  constructor() {
+    // Register required icons
+    addIcons({ chevronDown });
+  }
+
+  /**
+   * Get placeholder text.
+   */
+  getPlaceholderText(): string {
+    return this.props.placeholder || this.i18n.t('selectPlaceholder');
+  }
+
+  /**
+   * Get cancel text.
+   */
+  getCancelText(): string {
+    return this.props.cancelText || this.i18n.t('cancel');
+  }
+
+  /**
+   * Get ok text.
+   */
+  getOkText(): string {
+    return this.props.okText || this.i18n.t('ok');
+  }
+
+  /**
+   * Handle selection change from the ion-select.
+   * @param event - The ion-select change event
+   */
+  onSelectionChange(event: any) {
+    const selectedValue = event.detail.value;
+    this.selectionChange.emit(selectedValue);
+  }
+
+  /**
+   * Get the display text for the trigger button.
+   * Shows the selected option's label or placeholder.
+   * @returns The display text
+   */
+  getDisplayText(): string {
+    if (!this.props.selectedValue) {
+      return this.getPlaceholderText();
+    }
+
+    if (Array.isArray(this.props.selectedValue)) {
+      // Multiple selection
+      if (this.props.selectedValue.length === 0) {
+        return this.getPlaceholderText();
+      }
+      if (this.props.selectedValue.length === 1) {
+        const option = this.props.options.find(opt => opt.value === this.props.selectedValue[0]);
+        return option?.label || this.props.selectedValue[0];
+      }
+      return `${this.props.selectedValue.length} ${this.i18n.t('selected')}`;
+    }
+
+    // Single selection
+    const selectedOption = this.props.options.find(opt => opt.value === this.props.selectedValue);
+    return selectedOption?.label || this.props.selectedValue;
+  }
+}