valtech-components 2.0.691 → 2.0.692

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

@@ -1,204 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,84 +0,0 @@
-@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);
-
-  @media (prefers-color-scheme: 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 {
-    @media (prefers-color-scheme: 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 {
-    @media (prefers-color-scheme: dark) {
-      opacity: 0.2;
-      filter: invert(1);
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-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);
-  }
-}