valtech-components 2.0.293 → 2.0.295

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

@@ -0,0 +1,50 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../../services/content.service';
+import { LangService } from '../../../services/lang-provider/lang-provider.service';
+import { LangOption } from '../../../services/lang-provider/types';
+import { PopoverSelectorMetadata } from '../popover-selector/types';
+import { LanguageSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class LanguageSelectorComponent implements OnInit, OnDestroy {
+    private langService;
+    private contentService;
+    /**
+     * Language selector configuration object.
+     * @type {LanguageSelectorMetadata}
+     */
+    props: LanguageSelectorMetadata;
+    /**
+     * Event emitted when the language selection changes.
+     * Emits the selected language code.
+     */
+    languageChange: EventEmitter<string>;
+    /** Popover selector configuration */
+    popoverProps: PopoverSelectorMetadata;
+    /** Current language observable */
+    currentLanguage$: Observable<LangOption>;
+    /** Available languages observable */
+    availableLanguages$: Observable<LangOption[]>;
+    /** Label observable for reactive content */
+    label$: Observable<string>;
+    private subscriptions;
+    /** Default language display names */
+    private readonly defaultLanguageNames;
+    /** Default flag icons for languages */
+    private readonly defaultLanguageFlags;
+    constructor(langService: LangService, contentService: ContentService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initializeLanguageState;
+    private initializeLabel;
+    private initializePopoverProps;
+    private updatePopoverProps;
+    private getLanguageDisplayName;
+    /**
+     * Handle language selection change.
+     * @param selectedLanguage - The selected language code(s)
+     */
+    onLanguageChange(selectedLanguage: string | string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LanguageSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LanguageSelectorComponent, "val-language-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "languageChange": "languageChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,52 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-language-selector component.
+ * A specialized component for language selection.
+ *
+ * @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 {
+    /** Currently selected language code */
+    currentLanguage?: string;
+    /** Array of available language codes */
+    availableLanguages?: string[];
+    /** Whether to show the label */
+    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>;
+}

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import { PopoverSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PopoverSelectorComponent {
+    /**
+     * Popover selector configuration object.
+     * @type {PopoverSelectorMetadata}
+     */
+    props: PopoverSelectorMetadata;
+    /**
+     * Event emitted when the selection changes.
+     * Emits the selected value(s).
+     */
+    selectionChange: EventEmitter<string | string[]>;
+    constructor();
+    /**
+     * Handle selection change from the ion-select.
+     * @param event - The ion-select change event
+     */
+    onSelectionChange(event: any): void;
+    /**
+     * Get the display text for the trigger button.
+     * Shows the selected option's label or placeholder.
+     * @returns The display text
+     */
+    getDisplayText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverSelectorComponent, "val-popover-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/popover-selector/types.d.ts

@@ -0,0 +1,69 @@
+import { Color } from '@ionic/core';
+/**
+ * Option for the popover selector.
+ */
+export interface PopoverOption {
+    /** Option value */
+    value: string;
+    /** Option display label */
+    label: string;
+    /** Option icon (optional) */
+    icon?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for val-popover-selector component.
+ * A generic reusable popover selector component.
+ *
+ * @property options - Array of selectable options.
+ * @property selectedValue - Currently selected value.
+ * @property label - Display label for the selector.
+ * @property icon - Icon to display in the trigger button (optional).
+ * @property placeholder - Placeholder text when no option is selected.
+ * @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 interface - Popover interface style ('popover' | 'action-sheet' | 'alert').
+ * @property showCheckmark - Whether to show checkmarks for selected options.
+ * @property multiple - Whether multiple selection is allowed.
+ * @property cancelText - Text for cancel button.
+ * @property okText - Text for OK button.
+ */
+export interface PopoverSelectorMetadata {
+    /** Array of selectable options */
+    options: PopoverOption[];
+    /** Currently selected value(s) */
+    selectedValue?: string | string[];
+    /** Display label for the selector */
+    label?: string;
+    /** Icon to display in the trigger */
+    icon?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** 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;
+    /** Popover interface style */
+    interface?: 'popover' | 'action-sheet' | 'alert';
+    /** Whether to show checkmarks for selected options */
+    showCheckmark?: boolean;
+    /** Whether multiple selection is allowed */
+    multiple?: boolean;
+    /** Cancel button text */
+    cancelText?: string;
+    /** OK button text */
+    okText?: string;
+}

package/lib/examples/display-demo.component.d.ts

@@ -1,6 +1,7 @@
 import { OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { DisplayMetadata } from '../components/atoms/display/types';
+import { LanguageSelectorMetadata } from '../components/molecules/language-selector/types';
 import { ContentService } from '../services/content.service';
 import { LangService } from '../services/lang-provider/lang-provider.service';
 import * as i0 from "@angular/core";
@@ -29,6 +30,7 @@ export declare class DisplayDemoComponent implements OnInit {
     currentLanguage$: Observable<string>;
     availableLanguages$: Observable<string[]>;
     private counter;
+    languageSelectorProps: LanguageSelectorMetadata;
     smallStaticDisplay: DisplayMetadata;
     mediumStaticDisplay: DisplayMetadata;
     largeStaticDisplay: DisplayMetadata;
@@ -53,6 +55,7 @@ export declare class DisplayDemoComponent implements OnInit {
     private initializeContent;
     private initializeLanguageState;
     changeLanguage(language: string): void;
+    onLanguageChange(language: string): void;
     updateCounter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisplayDemoComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DisplayDemoComponent, "val-display-demo", never, {}, {}, never, never, true, never>;

package/lib/examples/selector-examples.component.d.ts

@@ -0,0 +1,20 @@
+import { LanguageSelectorMetadata } from '../components/molecules/language-selector/types';
+import { PopoverSelectorMetadata } from '../components/molecules/popover-selector/types';
+import * as i0 from "@angular/core";
+/**
+ * Ejemplo de uso de los componentes popover-selector y language-selector
+ */
+export declare class SelectorExamplesComponent {
+    categorySelector: PopoverSelectorMetadata;
+    prioritySelector: PopoverSelectorMetadata;
+    multipleSelector: PopoverSelectorMetadata;
+    basicLanguageSelector: LanguageSelectorMetadata;
+    flagLanguageSelector: LanguageSelectorMetadata;
+    customLanguageSelector: LanguageSelectorMetadata;
+    onCategoryChange(category: string | string[]): void;
+    onPriorityChange(priority: string | string[]): void;
+    onMultipleChange(notifications: string | string[]): void;
+    onLanguageChange(language: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectorExamplesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectorExamplesComponent, "app-selector-examples", never, {}, {}, never, never, true, never>;
+}

package/lib/services/lang-provider/components/display-demo.d.ts

@@ -0,0 +1,3 @@
+import { TextContent } from '../types';
+declare const _default: TextContent;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.293",
+  "version": "2.0.295",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/public-api.d.ts

@@ -37,6 +37,8 @@ export * from './lib/components/molecules/expandable-text/types';
 export * from './lib/components/molecules/file-input/file-input.component';
 export * from './lib/components/molecules/hint/hint.component';
 export * from './lib/components/molecules/hour-input/hour-input.component';
+export * from './lib/components/molecules/language-selector/language-selector.component';
+export * from './lib/components/molecules/language-selector/types';
 export * from './lib/components/molecules/layered-card/layered-card.component';
 export * from './lib/components/molecules/layered-card/types';
 export * from './lib/components/molecules/link/link.component';
@@ -48,6 +50,8 @@ export * from './lib/components/molecules/notes-box/types';
 export * from './lib/components/molecules/number-input/number-input.component';
 export * from './lib/components/molecules/password-input/password-input.component';
 export * from './lib/components/molecules/pin-input/pin-input.component';
+export * from './lib/components/molecules/popover-selector/popover-selector.component';
+export * from './lib/components/molecules/popover-selector/types';
 export * from './lib/components/molecules/progress-status/progress-status.component';
 export * from './lib/components/molecules/progress-status/types';
 export * from './lib/components/molecules/prompter/prompter.component';
@@ -85,6 +89,7 @@ export * from './lib/examples/display-demo.component';
 export * from './lib/examples/display-simple-example.component';
 export * from './lib/examples/link-processing-example.component';
 export * from './lib/examples/multi-language-demo.component';
+export * from './lib/examples/selector-examples.component';
 export * from './lib/services/content.service';
 export * from './lib/services/download.service';
 export * from './lib/services/icons.service';