valtech-components 2.0.687 → 2.0.689

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

@@ -0,0 +1,220 @@
+@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 support
+@media (prefers-color-scheme: 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;
+  }
+}

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

@@ -0,0 +1,324 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { PopoverSelectorComponent } from './popover-selector.component';
+import { PopoverSelectorMetadata, PopoverOption } from './types';
+
+const createOption = (overrides: Partial<PopoverOption> = {}): PopoverOption => ({
+  value: 'option',
+  label: 'Option',
+  ...overrides,
+});
+
+const createPopoverSelectorProps = (overrides: Partial<PopoverSelectorMetadata> = {}): PopoverSelectorMetadata => ({
+  options: [
+    createOption({ value: 'option1', label: 'Option 1' }),
+    createOption({ value: 'option2', label: 'Option 2' }),
+    createOption({ value: 'option3', label: 'Option 3' }),
+  ],
+  placeholder: 'Select an option...',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createPopoverSelectorProps();
+
+const withSelectedProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'small', label: 'Small' }),
+    createOption({ value: 'medium', label: 'Medium' }),
+    createOption({ value: 'large', label: 'Large' }),
+  ],
+  selectedValue: 'medium',
+  label: 'Size',
+});
+
+const withIconsProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'home', label: 'Home', icon: 'home' }),
+    createOption({ value: 'settings', label: 'Settings', icon: 'settings' }),
+    createOption({ value: 'profile', label: 'Profile', icon: 'person' }),
+  ],
+  icon: 'menu',
+  placeholder: 'Navigate to...',
+});
+
+const withLabelProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'asc', label: 'Ascending' }),
+    createOption({ value: 'desc', label: 'Descending' }),
+    createOption({ value: 'recent', label: 'Most Recent' }),
+  ],
+  label: 'Sort By',
+  selectedValue: 'recent',
+  color: 'primary',
+});
+
+const primaryColorProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'draft', label: 'Draft' }),
+    createOption({ value: 'published', label: 'Published' }),
+    createOption({ value: 'archived', label: 'Archived' }),
+  ],
+  selectedValue: 'published',
+  color: 'primary',
+  fill: 'solid',
+});
+
+const outlineStyleProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'today', label: 'Today' }),
+    createOption({ value: 'week', label: 'This Week' }),
+    createOption({ value: 'month', label: 'This Month' }),
+    createOption({ value: 'year', label: 'This Year' }),
+  ],
+  selectedValue: 'week',
+  color: 'tertiary',
+  fill: 'outline',
+  label: 'Time Range',
+});
+
+const multipleProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'js', label: 'JavaScript' }),
+    createOption({ value: 'ts', label: 'TypeScript' }),
+    createOption({ value: 'py', label: 'Python' }),
+    createOption({ value: 'go', label: 'Go' }),
+    createOption({ value: 'rust', label: 'Rust' }),
+  ],
+  multiple: true,
+  placeholder: 'Select languages...',
+  label: 'Languages',
+});
+
+const disabledOptionsProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'free', label: 'Free Plan' }),
+    createOption({ value: 'pro', label: 'Pro Plan' }),
+    createOption({ value: 'enterprise', label: 'Enterprise', disabled: true }),
+  ],
+  selectedValue: 'free',
+  label: 'Subscription',
+});
+
+const disabledSelectorProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'option1', label: 'Option 1' }),
+    createOption({ value: 'option2', label: 'Option 2' }),
+  ],
+  disabled: true,
+  placeholder: 'Selector disabled',
+});
+
+const largeProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'cat', label: 'Category A' }),
+    createOption({ value: 'cat2', label: 'Category B' }),
+    createOption({ value: 'cat3', label: 'Category C' }),
+  ],
+  size: 'large',
+  color: 'success',
+  fill: 'solid',
+  placeholder: 'Select category',
+});
+
+// Showcase props
+const showcaseSortProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'name', label: 'Name', icon: 'text' }),
+    createOption({ value: 'date', label: 'Date', icon: 'calendar' }),
+    createOption({ value: 'size', label: 'Size', icon: 'resize' }),
+  ],
+  selectedValue: 'date',
+  label: 'Sort By',
+  color: 'primary',
+  fill: 'outline',
+});
+
+const showcaseFilterProps = createPopoverSelectorProps({
+  options: [
+    createOption({ value: 'all', label: 'All Items' }),
+    createOption({ value: 'active', label: 'Active' }),
+    createOption({ value: 'completed', label: 'Completed' }),
+    createOption({ value: 'pending', label: 'Pending' }),
+  ],
+  selectedValue: 'all',
+  label: 'Filter',
+  icon: 'filter',
+  color: 'medium',
+});
+
+const meta: Meta<PopoverSelectorComponent> = {
+  title: 'Molecules/PopoverSelector',
+  component: PopoverSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, PopoverSelectorComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Popover selector configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'PopoverSelectorMetadata',
+          detail: `{
+  options: PopoverOption[];
+  selectedValue?: string | string[];
+  label?: string;
+  icon?: string;
+  placeholder?: string;
+  color?: Color;
+  size?: 'small' | 'default' | 'large';
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  disabled?: boolean;
+  interface?: 'popover' | 'action-sheet' | 'alert';
+  multiple?: boolean;
+  cancelText?: string;
+  okText?: string;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-popover-selector
+
+A generic popover selector component with button trigger.
+
+### Features
+
+- **Multiple Interfaces**: Popover, action-sheet, or alert style
+- **Single/Multiple Selection**: Support for both modes
+- **Icons**: Optional icons for options and trigger
+- **Styling**: Various colors, sizes, and fill styles
+- **Labels**: Optional label above selector
+- **Disabled States**: For selector and individual options
+
+### Usage
+
+\`\`\`html
+<val-popover-selector
+  [props]="{
+    options: [
+      { value: 'opt1', label: 'Option 1' },
+      { value: 'opt2', label: 'Option 2' }
+    ],
+    selectedValue: 'opt1',
+    label: 'Choose Option',
+    color: 'primary'
+  }"
+  (selectionChange)="onSelect($event)"
+></val-popover-selector>
+\`\`\`
+
+### Events
+
+- **selectionChange**: Emits selected value(s) when selection changes
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PopoverSelectorComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: defaultProps },
+  }),
+};
+
+export const WithSelected: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: withSelectedProps },
+  }),
+};
+
+export const WithIcons: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: withIconsProps },
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: withLabelProps },
+  }),
+};
+
+export const PrimaryColor: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: primaryColorProps },
+  }),
+};
+
+export const OutlineStyle: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: outlineStyleProps },
+  }),
+};
+
+export const MultipleSelection: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: multipleProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover selector with multiple selection enabled.',
+      },
+    },
+  },
+};
+
+export const DisabledOptions: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: disabledOptionsProps },
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: disabledSelectorProps },
+  }),
+};
+
+export const LargeSize: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-popover-selector [props]="selectorProps"></val-popover-selector></div>`,
+    props: { selectorProps: largeProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 300px;">
+        <h3 style="margin: 0; font-family: system-ui;">Popover Selectors</h3>
+
+        <val-popover-selector [props]="sort"></val-popover-selector>
+        <val-popover-selector [props]="filter"></val-popover-selector>
+      </div>
+    `,
+    props: {
+      sort: showcaseSortProps,
+      filter: showcaseFilterProps,
+    },
+  }),
+};