valtech-components 2.0.794 → 2.0.795

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

@@ -0,0 +1,204 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { IonButton, IonIcon, IonPopover, IonList, IonItem, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { language, globeOutline, checkmark } from 'ionicons/icons';
+import { I18nService, I18nLang } from '../../../services/i18n';
+import { PopoverSelectorComponent } from '../popover-selector/popover-selector.component';
+import { PopoverOption, PopoverSelectorMetadata } from '../popover-selector/types';
+import { LanguageSelectorMetadata } from './types';
+
+@Component({
+  selector: 'val-language-selector',
+  standalone: true,
+  imports: [CommonModule, PopoverSelectorComponent, IonButton, IonIcon, IonPopover, IonList, IonItem, IonLabel],
+  template: `
+    <!-- Default mode: use popover-selector -->
+    @if (props.mode !== 'icon') {
+      <val-popover-selector [props]="popoverProps" (selectionChange)="onLanguageChange($event)"> </val-popover-selector>
+    }
+
+    <!-- Icon mode: compact globe button with popover -->
+    @if (props.mode === 'icon') {
+      <ion-button
+        [id]="popoverId"
+        [color]="props.color || 'medium'"
+        [fill]="props.fill || 'clear'"
+        [size]="props.size || 'default'"
+        [disabled]="props.disabled"
+        class="icon-mode-button"
+      >
+        <ion-icon slot="icon-only" [name]="props.icon || 'globe-outline'"></ion-icon>
+      </ion-button>
+
+      <ion-popover [trigger]="popoverId" [dismissOnSelect]="true">
+        <ng-template>
+          <ion-list>
+            @for (lang of availableLanguages; track lang) {
+              <ion-item
+                [button]="true"
+                [detail]="false"
+                (click)="onLanguageChange(lang)"
+                [class.selected]="lang === currentLanguage"
+              >
+                <ion-label>{{ getLanguageDisplayName(lang) }}</ion-label>
+                @if (lang === currentLanguage) {
+                  <ion-icon slot="end" name="checkmark" color="primary"></ion-icon>
+                }
+              </ion-item>
+            }
+          </ion-list>
+        </ng-template>
+      </ion-popover>
+    }
+  `,
+  styleUrls: ['./language-selector.component.scss'],
+})
+/**
+ * val-language-selector
+ *
+ * A language selector component that uses I18nService.
+ * By default, language changes are reactive (no page reload).
+ * Set forceReload: true in props to reload on change.
+ *
+ * @example Default mode (dropdown, no label):
+ * <val-language-selector [props]="{ showFlags: true }">
+ * </val-language-selector>
+ *
+ * @example With label (if needed):
+ * <val-language-selector [props]="{ showLabel: true }">
+ * </val-language-selector>
+ *
+ * @example Icon mode (compact for headers/toolbars):
+ * <val-language-selector [props]="{ mode: 'icon', color: 'primary' }">
+ * </val-language-selector>
+ *
+ * @input props: LanguageSelectorMetadata - Configuration for the language selector
+ * @output languageChange: EventEmitter<string> - Emitted when language changes
+ */
+export class LanguageSelectorComponent implements OnInit {
+  /**
+   * Language selector configuration object.
+   */
+  @Input()
+  props: LanguageSelectorMetadata = {};
+
+  /**
+   * Event emitted when the language selection changes.
+   * Emits the selected language code.
+   */
+  @Output()
+  languageChange = new EventEmitter<string>();
+
+  /** Popover selector configuration (for default mode) */
+  popoverProps: PopoverSelectorMetadata;
+
+  /** Unique ID for the icon mode popover trigger */
+  popoverId = `lang-selector-${Math.random().toString(36).substring(2, 9)}`;
+
+  /** Available languages (exposed for icon mode template) */
+  availableLanguages: string[] = [];
+
+  /** Current language (exposed for icon mode template) */
+  currentLanguage: string = '';
+
+  private i18n = inject(I18nService);
+
+  /** Default language display names */
+  readonly defaultLanguageNames: Record<string, string> = {
+    es: 'Español',
+    en: 'English',
+    pt: 'Português',
+    fr: 'Français',
+    de: 'Deutsch',
+  };
+
+  /** Default flag icons for languages */
+  readonly defaultLanguageFlags: Record<string, string> = {
+    es: '🇪🇸',
+    en: '🇺🇸',
+    pt: '🇧🇷',
+    fr: '🇫🇷',
+    de: '🇩🇪',
+  };
+
+  constructor() {
+    addIcons({ language, globeOutline, checkmark });
+  }
+
+  ngOnInit() {
+    this.currentLanguage = this.i18n.lang();
+    this.availableLanguages = this.props.availableLanguages || this.i18n.supportedLanguages();
+    this.initializePopoverProps();
+  }
+
+  private initializePopoverProps() {
+    const currentLanguage = this.i18n.lang();
+    const availableLanguages = this.props.availableLanguages || this.i18n.supportedLanguages();
+
+    // Convert language codes to popover options
+    const options: PopoverOption[] = availableLanguages.map(lang => ({
+      value: lang,
+      label: this.getLanguageDisplayName(lang),
+    }));
+
+    // Create popover configuration
+    this.popoverProps = {
+      options,
+      selectedValue: currentLanguage,
+      label: this.props.showLabel === true ? (this.props.label || this.i18n.t('language')) : undefined,
+      icon: 'language',
+      placeholder: this.i18n.t('selectLanguage'),
+      color: this.props.color || 'medium',
+      size: this.props.size || 'default',
+      fill: this.props.fill || 'outline',
+      shape: this.props.shape,
+      expand: this.props.expand,
+      disabled: this.props.disabled || false,
+      interface: 'popover',
+      showCheckmark: true,
+      multiple: false,
+      cancelText: this.i18n.t('cancel'),
+      okText: this.i18n.t('ok'),
+    };
+  }
+
+  /** Get display name for a language code (public for template access) */
+  getLanguageDisplayName(languageCode: string): string {
+    // Use custom names if provided
+    if (this.props.customLanguageNames?.[languageCode]) {
+      const customName = this.props.customLanguageNames[languageCode];
+      const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
+      return flag ? `${flag} ${customName}` : customName;
+    }
+
+    // Use default names
+    const defaultName = this.defaultLanguageNames[languageCode] || languageCode.toUpperCase();
+    const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
+    return flag ? `${flag} ${defaultName}` : defaultName;
+  }
+
+  /**
+   * Handle language selection change.
+   * @param selectedLanguage - The selected language code(s)
+   */
+  onLanguageChange(selectedLanguage: string | string[]) {
+    if (typeof selectedLanguage === 'string') {
+      const newLang = selectedLanguage as I18nLang;
+
+      // Update current language for icon mode
+      this.currentLanguage = newLang;
+
+      // Emit the change event
+      this.languageChange.emit(selectedLanguage);
+
+      // Set the new language (reactive by default, reload if forceReload is true)
+      this.i18n.setLanguage(newLang, this.props.forceReload);
+
+      // Update popover selected value for reactive UI (default mode)
+      if (this.popoverProps) {
+        this.popoverProps = { ...this.popoverProps, selectedValue: newLang };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { LanguageSelectorComponent } from './language-selector.component';
+import { LanguageSelectorMetadata } from './types';
+
+const createLanguageSelectorProps = (overrides: Partial<LanguageSelectorMetadata> = {}): LanguageSelectorMetadata => ({
+  showLabel: true,
+  showFlags: true,
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createLanguageSelectorProps();
+
+const withFlagsProps = createLanguageSelectorProps({
+  showFlags: true,
+  showLabel: true,
+  color: 'primary',
+});
+
+const noFlagsProps = createLanguageSelectorProps({
+  showFlags: false,
+  showLabel: true,
+  label: 'Language',
+});
+
+const customLanguagesProps = createLanguageSelectorProps({
+  availableLanguages: ['en', 'es', 'fr', 'de'],
+  showFlags: true,
+  color: 'tertiary',
+});
+
+const customNamesProps = createLanguageSelectorProps({
+  customLanguageNames: {
+    en: 'English (US)',
+    es: 'Spanish',
+    fr: 'French',
+  },
+  showFlags: true,
+});
+
+const primaryColorProps = createLanguageSelectorProps({
+  color: 'primary',
+  fill: 'solid',
+  showFlags: true,
+});
+
+const outlineStyleProps = createLanguageSelectorProps({
+  color: 'medium',
+  fill: 'outline',
+  showFlags: true,
+  showLabel: true,
+  label: 'Select Language',
+});
+
+const largeProps = createLanguageSelectorProps({
+  size: 'large',
+  color: 'success',
+  fill: 'solid',
+  showFlags: true,
+});
+
+const smallProps = createLanguageSelectorProps({
+  size: 'small',
+  color: 'warning',
+  fill: 'outline',
+  showFlags: true,
+});
+
+const disabledProps = createLanguageSelectorProps({
+  disabled: true,
+  showFlags: true,
+  label: 'Disabled',
+});
+
+const meta: Meta<LanguageSelectorComponent> = {
+  title: 'Molecules/LanguageSelector',
+  component: LanguageSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, LanguageSelectorComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Language selector configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'LanguageSelectorMetadata',
+          detail: `{
+  currentLanguage?: string;
+  availableLanguages?: string[];
+  showLabel?: boolean;
+  label?: string;
+  showFlags?: boolean;
+  color?: Color;
+  size?: 'small' | 'default' | 'large';
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  disabled?: boolean;
+  customLanguageNames?: Record<string, string>;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-language-selector
+
+A language selector component for switching application locale.
+
+### Features
+
+- **Configurable Languages**: Define available languages via props
+- **Flag Icons**: Optional emoji flags for each language
+- **Custom Names**: Override default language display names
+- **LocaleService Integration**: Works with LocaleService for locale management
+- **Styling Options**: Various colors, sizes, and fill styles
+
+### Usage
+
+\`\`\`html
+<val-language-selector
+  [props]="{
+    showLabel: true,
+    showFlags: true,
+    color: 'primary'
+  }"
+  (languageChange)="onLanguageChange($event)"
+></val-language-selector>
+\`\`\`
+
+### Default Language Names
+
+The component includes default display names and flags for common languages:
+- English, Spanish, French, German, Portuguese
+- Italian, Chinese, Japanese, Korean, Russian, Arabic
+
+### Events
+
+- **languageChange**: Emits the selected language code when changed
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<LanguageSelectorComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: defaultProps },
+  }),
+};
+
+export const WithFlags: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: withFlagsProps },
+  }),
+};
+
+export const NoFlags: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: noFlagsProps },
+  }),
+};
+
+export const CustomLanguages: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: customLanguagesProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Language selector with a custom set of available languages.',
+      },
+    },
+  },
+};
+
+export const CustomNames: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: customNamesProps },
+  }),
+};
+
+export const PrimaryColor: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: primaryColorProps },
+  }),
+};
+
+export const OutlineStyle: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: outlineStyleProps },
+  }),
+};
+
+export const LargeSize: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: largeProps },
+  }),
+};
+
+export const SmallSize: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: smallProps },
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-language-selector [props]="selectorProps"></val-language-selector></div>`,
+    props: { selectorProps: disabledProps },
+  }),
+};
+
+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;">Language Selectors</h3>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; color: #666;">Default with flags</p>
+          <val-language-selector [props]="withFlags"></val-language-selector>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; color: #666;">Primary solid</p>
+          <val-language-selector [props]="primary"></val-language-selector>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; color: #666;">Outline style</p>
+          <val-language-selector [props]="outline"></val-language-selector>
+        </div>
+      </div>
+    `,
+    props: {
+      withFlags: withFlagsProps,
+      primary: primaryColorProps,
+      outline: outlineStyleProps,
+    },
+  }),
+};

package/src/lib/components/molecules/language-selector/types.ts

@@ -0,0 +1,84 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Display mode for the language selector.
+ * - 'default': Shows button with label and/or current language
+ * - 'icon': Compact mode showing only a globe icon (ideal for headers)
+ */
+export type LanguageSelectorMode = 'default' | 'icon';
+
+/**
+ * Props for val-language-selector component.
+ * A specialized component for language selection.
+ *
+ * @property mode - Display mode: 'default' or 'icon' (compact for headers).
+ * @property icon - Custom icon name for icon mode (default: 'globe-outline').
+ * @property currentLanguage - Currently selected language code.
+ * @property availableLanguages - Array of available language codes.
+ * @property showLabel - Whether to show the label.
+ * @property label - Custom label text (static).
+ * @property labelConfig - Reactive content configuration for label.
+ * @property showFlags - Whether to show flag icons for languages.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property customLanguageNames - Custom display names for languages.
+ */
+export interface LanguageSelectorMetadata {
+  /**
+   * Display mode for the selector.
+   * - 'default': Full button with label/dropdown
+   * - 'icon': Compact globe icon only (ideal for headers/toolbars)
+   * @default 'default'
+   */
+  mode?: LanguageSelectorMode;
+  /**
+   * Icon name for icon mode.
+   * @default 'globe-outline'
+   */
+  icon?: string;
+  /** Currently selected language code */
+  currentLanguage?: string;
+  /** Array of available language codes */
+  availableLanguages?: string[];
+  /**
+   * Whether to show the "Language" label above the selector.
+   * @default false
+   */
+  showLabel?: boolean;
+  /** Static label text (takes precedence over labelConfig) */
+  label?: string;
+  /** Reactive content configuration for label */
+  labelConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  /** Whether to show flag icons for languages */
+  showFlags?: boolean;
+  /** Button color */
+  color?: Color;
+  /** Button size */
+  size?: 'small' | 'default' | 'large';
+  /** Button fill style */
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  /** Button shape */
+  shape?: 'round';
+  /** Button expansion */
+  expand?: 'full' | 'block';
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Custom display names for languages */
+  customLanguageNames?: Record<string, string>;
+  /**
+   * Force page reload on language change.
+   * By default (false), language changes are reactive without reload.
+   * Set to true for legacy behavior or if reactive updates don't work.
+   * @default false
+   */
+  forceReload?: boolean;
+}

package/src/lib/components/molecules/layered-card/layered-card.component.scss

@@ -0,0 +1,93 @@
+@import '../../styles/mixins.scss';
+
+.fun-card {
+  z-index: 0;
+  position: relative;
+  cursor: pointer;
+  background: var(
+    --ion-card-background,
+    var(--ion-item-background, var(--ion-background-color, #fff))
+  );
+  display: flex;
+  border-radius: pxToRem(24);
+  align-items: start;
+  padding: pxToRem(16);
+
+  body.dark &,
+  html.ion-palette-dark &,
+  body.ion-palette-dark &,
+  body[data-theme='dark'] & {
+    border: pxToRem(1) solid var(--ion-color-medium);
+  }
+
+  &.layered {
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &.poster {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  &.hoverable {
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+
+    &:hover {
+      transform: scale(1.01);
+      @include box-shadow-medium;
+    }
+  }
+
+  @include box-shadow-small;
+
+  &.big-space {
+    padding: pxToRem(42);
+  }
+}
+
+.layer-image {
+  z-index: -1;
+  right: 3%;
+  bottom: 2%;
+  position: absolute;
+  max-height: 100%;
+  max-width: 40%;
+  padding: pxToRem(8);
+
+  &.with-opacity {
+    opacity: 0.1;
+  }
+
+  &.dark {
+    body.dark &,
+    html.ion-palette-dark &,
+    body.ion-palette-dark &,
+    body[data-theme='dark'] & {
+      opacity: 0.2;
+      filter: invert(1);
+    }
+  }
+}
+
+.poster-image {
+  max-height: 100%;
+  max-width: pxToRem(80);
+  margin-right: pxToRem(16);
+
+  &.with-opacity {
+    opacity: 0.1;
+  }
+
+  &.dark {
+    body.dark &,
+    html.ion-palette-dark &,
+    body.ion-palette-dark &,
+    body[data-theme='dark'] & {
+      opacity: 0.2;
+      filter: invert(1);
+    }
+  }
+}

package/src/lib/components/molecules/layered-card/layered-card.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input } from '@angular/core';
+import { ThemeService } from '../../../services/theme.service';
+import { resolveColor } from '../../../shared/utils/styles';
+import { ButtonGroupComponent } from '../button-group/button-group.component';
+import { TitleBlockComponent } from '../title-block/title-block.component';
+import { LayeredCardMetadata } from './types';
+
+@Component({
+  selector: 'layered-card',
+  standalone: true,
+  imports: [CommonModule, ButtonGroupComponent, TitleBlockComponent],
+  template: `
+    <div
+      class="fun-card"
+      [class.big-space]="props.bigSpace"
+      [class.hoverable]="props.hoverable"
+      [class.layered]="props.mode === 'layered'"
+      [class.poster]="props.mode === 'poster'"
+      [ngStyle]="{
+        background: theme.IsDark ? 'var(--ion-background-color)' : color(props.background),
+        minHeight: props.withMin ? '340px' : 'auto',
+      }"
+    >
+      @if (props.mode === 'poster') {
+        <img
+          class="poster-image"
+          [class.dark]="props.dark"
+          [class.with-opacity]="props.withOpacity"
+          alt="image"
+          [src]="props.image"
+        />
+      }
+      @if (props.mode === 'layered') {
+        <img
+          class="layer-image"
+          [class.dark]="props.dark"
+          [class.with-opacity]="props.withOpacity"
+          alt="image"
+          [src]="props.image"
+        />
+      }
+
+      <section>
+        <val-title-block [props]="props.content" />
+        @if (props.actions) {
+          <val-button-group style="display:block; margin-top: 16px;" [props]="props.actions" />
+        }
+      </section>
+    </div>
+  `,
+  styleUrl: './layered-card.component.scss',
+})
+export class LayeredCardComponent {
+  theme = inject(ThemeService);
+
+  @Input()
+  props: LayeredCardMetadata;
+
+  color(background) {
+    if (!background) {
+      return '';
+    }
+    return resolveColor(background);
+  }
+}