valtech-components 2.0.293 → 2.0.294

package/fesm2022/valtech-components.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, Pipe, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonSelect, IonSelectOption, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
+import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonSelect, IonSelectOption, IonItem, IonLabel, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonNote, IonContent } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, AsyncPipe, NgFor, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, chevronBackOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, chevronDown, language, globe, chevronBackOutline } from 'ionicons/icons';
 import { map, BehaviorSubject, distinctUntilChanged, Subscription, of } from 'rxjs';
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
+import { map as map$1 } from 'rxjs/operators';
 import * as i1$3 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
-import { map as map$1 } from 'rxjs/operators';
 
 /**
  * val-avatar
@@ -3771,6 +3771,378 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * 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
+ */
+class PopoverSelectorComponent {
+    constructor() {
+        /**
+         * Event emitted when the selection changes.
+         * Emits the selected value(s).
+         */
+        this.selectionChange = new EventEmitter();
+        // Register required icons
+        addIcons({ chevronDown });
+    }
+    /**
+     * Handle selection change from the ion-select.
+     * @param event - The ion-select change event
+     */
+    onSelectionChange(event) {
+        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() {
+        if (!this.props.selectedValue) {
+            return this.props.placeholder || 'Seleccionar...';
+        }
+        if (Array.isArray(this.props.selectedValue)) {
+            // Multiple selection
+            if (this.props.selectedValue.length === 0) {
+                return this.props.placeholder || 'Seleccionar...';
+            }
+            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} seleccionados`;
+        }
+        // Single selection
+        const selectedOption = this.props.options.find(opt => opt.value === this.props.selectedValue);
+        return selectedOption?.label || this.props.selectedValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopoverSelectorComponent, isStandalone: true, selector: "val-popover-selector", inputs: { props: "props" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
+    <ion-item [disabled]="props.disabled" lines="none">
+      <ion-label *ngIf="props.label" position="stacked">{{ props.label }}</ion-label>
+      <ion-select
+        [value]="props.selectedValue"
+        [placeholder]="props.placeholder || 'Seleccionar...'"
+        [interface]="props.interface || 'popover'"
+        [multiple]="props.multiple || false"
+        [disabled]="props.disabled || false"
+        [cancelText]="props.cancelText || 'Cancelar'"
+        [okText]="props.okText || 'Aceptar'"
+        (ionChange)="onSelectionChange($event)"
+        class="popover-selector-select"
+      >
+        <ion-button
+          slot="trigger"
+          [fill]="props.fill || 'outline'"
+          [size]="props.size || 'default'"
+          [shape]="props.shape"
+          [expand]="props.expand"
+          [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" 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>
+    </ion-item>
+  `, isInline: true, styles: [".popover-selector-select{width:100%}.popover-selector-select .selector-trigger{width:100%;justify-content:space-between;text-align:left}.popover-selector-select .selector-trigger .trigger-text{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-selector-select .selector-trigger .chevron-icon{margin-left:auto;transition:transform .2s ease}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg)}.option-content{display:flex;align-items:center;gap:8px}.option-content .option-icon{font-size:16px;width:16px;height:16px}.popover-selector-select.size-small .selector-trigger{--padding-start: 8px;--padding-end: 8px;font-size:14px}.popover-selector-select.size-large .selector-trigger{--padding-start: 16px;--padding-end: 16px;font-size:18px}ion-item[disabled]{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-popover-selector', standalone: true, imports: [CommonModule, IonButton, IonIcon, IonSelect, IonSelectOption, IonItem, IonLabel], template: `
+    <ion-item [disabled]="props.disabled" lines="none">
+      <ion-label *ngIf="props.label" position="stacked">{{ props.label }}</ion-label>
+      <ion-select
+        [value]="props.selectedValue"
+        [placeholder]="props.placeholder || 'Seleccionar...'"
+        [interface]="props.interface || 'popover'"
+        [multiple]="props.multiple || false"
+        [disabled]="props.disabled || false"
+        [cancelText]="props.cancelText || 'Cancelar'"
+        [okText]="props.okText || 'Aceptar'"
+        (ionChange)="onSelectionChange($event)"
+        class="popover-selector-select"
+      >
+        <ion-button
+          slot="trigger"
+          [fill]="props.fill || 'outline'"
+          [size]="props.size || 'default'"
+          [shape]="props.shape"
+          [expand]="props.expand"
+          [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" 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>
+    </ion-item>
+  `, styles: [".popover-selector-select{width:100%}.popover-selector-select .selector-trigger{width:100%;justify-content:space-between;text-align:left}.popover-selector-select .selector-trigger .trigger-text{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-selector-select .selector-trigger .chevron-icon{margin-left:auto;transition:transform .2s ease}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg)}.option-content{display:flex;align-items:center;gap:8px}.option-content .option-icon{font-size:16px;width:16px;height:16px}.popover-selector-select.size-small .selector-trigger{--padding-start: 8px;--padding-end: 8px;font-size:14px}.popover-selector-select.size-large .selector-trigger{--padding-start: 16px;--padding-end: 16px;font-size:18px}ion-item[disabled]{opacity:.6;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+/**
+ * val-language-selector
+ *
+ * A specialized language selector component that integrates with the LangService.
+ * Uses the popover-selector component internally and provides language-specific functionality.
+ *
+ * @example
+ * // Basic usage (auto-detects languages from LangService)
+ * <val-language-selector
+ *   [props]="{ showLabel: true, showFlags: true }">
+ * </val-language-selector>
+ *
+ * @example
+ * // Custom configuration
+ * const languageProps: LanguageSelectorMetadata = {
+ *   showLabel: true,
+ *   label: 'Choose Language',
+ *   showFlags: true,
+ *   color: 'primary',
+ *   size: 'large',
+ *   fill: 'outline',
+ *   customLanguageNames: {
+ *     'es': 'Español',
+ *     'en': 'English',
+ *     'fr': 'Français'
+ *   }
+ * };
+ *
+ * @example
+ * // With reactive content
+ * const languageProps: LanguageSelectorMetadata = {
+ *   showLabel: true,
+ *   labelConfig: {
+ *     className: 'myComponent',
+ *     key: 'languageLabel',
+ *     fallback: 'Language'
+ *   },
+ *   color: 'tertiary'
+ * };
+ *
+ * @input props: LanguageSelectorMetadata - Configuration for the language selector
+ * @output languageChange: EventEmitter<string> - Emitted when language changes
+ */
+class LanguageSelectorComponent {
+    constructor(langService, contentService) {
+        this.langService = langService;
+        this.contentService = contentService;
+        /**
+         * Language selector configuration object.
+         * @type {LanguageSelectorMetadata}
+         */
+        this.props = {};
+        /**
+         * Event emitted when the language selection changes.
+         * Emits the selected language code.
+         */
+        this.languageChange = new EventEmitter();
+        this.subscriptions = new Subscription();
+        /** Default language display names */
+        this.defaultLanguageNames = {
+            es: 'Español',
+            en: 'English',
+            fr: 'Français',
+            de: 'Deutsch',
+            pt: 'Português',
+            it: 'Italiano',
+            zh: '中文',
+            ja: '日本語',
+            ko: '한국어',
+            ru: 'Русский',
+            ar: 'العربية',
+        };
+        /** Default flag icons for languages */
+        this.defaultLanguageFlags = {
+            es: '🇪🇸',
+            en: '🇺🇸',
+            fr: '🇫🇷',
+            de: '🇩🇪',
+            pt: '🇵🇹',
+            it: '🇮🇹',
+            zh: '🇨🇳',
+            ja: '🇯🇵',
+            ko: '🇰🇷',
+            ru: '🇷🇺',
+            ar: '🇸🇦',
+        };
+        // Register required icons
+        addIcons({ language, globe });
+    }
+    ngOnInit() {
+        this.initializeLanguageState();
+        this.initializeLabel();
+        this.initializePopoverProps();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    initializeLanguageState() {
+        // Get current language and available languages from LangService
+        this.currentLanguage$ = this.langService.currentLang$;
+        this.availableLanguages$ = this.currentLanguage$.pipe(map$1(() => this.props.availableLanguages || this.langService.availableLangs));
+    }
+    initializeLabel() {
+        // Initialize label observable based on configuration
+        if (this.props.label !== undefined) {
+            // Static label
+            this.label$ = of(this.props.label);
+        }
+        else if (this.props.labelConfig) {
+            // Reactive label
+            this.label$ = this.contentService.fromContent({
+                className: this.props.labelConfig.className || '_global',
+                key: this.props.labelConfig.key,
+                fallback: this.props.labelConfig.fallback || 'Language',
+                interpolation: this.props.labelConfig.interpolation,
+            });
+        }
+        else {
+            // Default label from global content
+            this.label$ = this.contentService.fromContent({
+                className: '_global',
+                key: 'language',
+                fallback: 'Idioma',
+            });
+        }
+    }
+    initializePopoverProps() {
+        // Subscribe to language state changes to update popover props
+        const languageSubscription = this.availableLanguages$.subscribe(availableLanguages => {
+            const currentLanguageSubscription = this.currentLanguage$.subscribe(currentLanguage => {
+                this.updatePopoverProps(availableLanguages, currentLanguage);
+            });
+            this.subscriptions.add(currentLanguageSubscription);
+        });
+        this.subscriptions.add(languageSubscription);
+        // Subscribe to label changes
+        const labelSubscription = this.label$.subscribe(label => {
+            if (this.popoverProps) {
+                this.popoverProps = {
+                    ...this.popoverProps,
+                    label: this.props.showLabel !== false ? label : undefined,
+                };
+            }
+        });
+        this.subscriptions.add(labelSubscription);
+    }
+    updatePopoverProps(availableLanguages, currentLanguage) {
+        // Convert language codes to popover options
+        const options = availableLanguages.map(lang => ({
+            value: lang,
+            label: this.getLanguageDisplayName(lang),
+            icon: this.props.showFlags ? undefined : undefined, // We'll use text flags instead
+        }));
+        // Create popover configuration
+        this.popoverProps = {
+            options,
+            selectedValue: currentLanguage,
+            label: this.props.showLabel !== false ? '' : undefined, // Will be set by label subscription
+            icon: 'language',
+            placeholder: 'Seleccionar idioma...',
+            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: 'Cancelar',
+            okText: 'Aceptar',
+        };
+    }
+    getLanguageDisplayName(languageCode) {
+        // Use custom names if provided, otherwise use defaults, otherwise use the code itself
+        const customName = this.props.customLanguageNames?.[languageCode];
+        const defaultName = this.defaultLanguageNames[languageCode];
+        const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
+        const displayName = customName || defaultName || languageCode.toUpperCase();
+        return flag ? `${flag} ${displayName}` : displayName;
+    }
+    /**
+     * Handle language selection change.
+     * @param selectedLanguage - The selected language code(s)
+     */
+    onLanguageChange(selectedLanguage) {
+        if (typeof selectedLanguage === 'string') {
+            // Update the language service
+            this.langService.setLang(selectedLanguage);
+            // Emit the change event
+            this.languageChange.emit(selectedLanguage);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: LangService }, { token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LanguageSelectorComponent, isStandalone: true, selector: "val-language-selector", inputs: { props: "props" }, outputs: { languageChange: "languageChange" }, ngImport: i0, template: `
+    <val-popover-selector [props]="popoverProps" (selectionChange)="onLanguageChange($event)"> </val-popover-selector>
+  `, isInline: true, styles: [":host{display:block}val-popover-selector .selector-trigger .trigger-text{display:flex;align-items:center;gap:8px}.language-flag{font-size:1.2em;margin-right:4px}@media (max-width: 768px){val-popover-selector .selector-trigger{--padding-start: 8px;--padding-end: 8px}val-popover-selector .selector-trigger .trigger-text{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-language-selector', standalone: true, imports: [CommonModule, PopoverSelectorComponent], template: `
+    <val-popover-selector [props]="popoverProps" (selectionChange)="onLanguageChange($event)"> </val-popover-selector>
+  `, styles: [":host{display:block}val-popover-selector .selector-trigger .trigger-text{display:flex;align-items:center;gap:8px}.language-flag{font-size:1.2em;margin-right:4px}@media (max-width: 768px){val-popover-selector .selector-trigger{--padding-start: 8px;--padding-end: 8px}val-popover-selector .selector-trigger .trigger-text{font-size:14px}}\n"] }]
+        }], ctorParameters: () => [{ type: LangService }, { type: ContentService }], propDecorators: { props: [{
+                type: Input
+            }], languageChange: [{
+                type: Output
+            }] } });
+
 /**
  * Service for managing application themes (light, dark, auto).
  * Handles user preferences, system theme detection, and theme toggling.
@@ -7314,6 +7686,19 @@ class DisplayDemoComponent {
         this.langService = langService;
         // Contador para ejemplos dinámicos
         this.counter = 0;
+        // Configuración del selector de idioma
+        this.languageSelectorProps = {
+            showLabel: true,
+            labelConfig: {
+                className: '_global',
+                key: 'language',
+                fallback: 'Idioma',
+            },
+            showFlags: true,
+            color: 'primary',
+            size: 'default',
+            fill: 'outline',
+        };
         // Configuraciones de ejemplo - ESTÁTICAS
         this.smallStaticDisplay = {
             content: 'Texto pequeño estático',
@@ -7365,7 +7750,7 @@ class DisplayDemoComponent {
         this.welcomeDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'welcome.title',
+                key: 'welcomeTitle',
                 fallback: 'Bienvenido a la aplicación',
             },
             color: 'primary',
@@ -7374,7 +7759,7 @@ class DisplayDemoComponent {
         this.descriptionDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'welcome.description',
+                key: 'welcomeDescription',
                 fallback: 'Esta es una descripción de ejemplo',
             },
             color: 'medium',
@@ -7383,7 +7768,7 @@ class DisplayDemoComponent {
         this.statusDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'status.online',
+                key: 'statusOnline',
                 fallback: 'En línea',
             },
             color: 'success',
@@ -7393,7 +7778,7 @@ class DisplayDemoComponent {
         this.userWelcomeDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'welcome.user',
+                key: 'welcomeUser',
                 fallback: 'Hola, {{userName}}!',
                 interpolation: {
                     userName: 'Juan Pérez',
@@ -7405,7 +7790,7 @@ class DisplayDemoComponent {
         this.counterDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'counter.current',
+                key: 'counterCurrent',
                 fallback: 'Contador: {{count}}',
                 interpolation: {
                     count: this.counter,
@@ -7442,7 +7827,7 @@ class DisplayDemoComponent {
         this.reactiveMixedDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'mixed.reactive',
+                key: 'mixedReactive',
                 fallback: 'Este contenido sí cambia con el idioma',
             },
             color: 'primary',
@@ -7452,7 +7837,7 @@ class DisplayDemoComponent {
         this.dynamicCounterDisplay = {
             contentConfig: {
                 className: 'displayDemo',
-                key: 'dynamic.counter',
+                key: 'dynamicContent',
                 fallback: 'Clics: {{count}}',
                 interpolation: {
                     count: this.counter,
@@ -7470,7 +7855,7 @@ class DisplayDemoComponent {
         // Contenido de la página
         this.demoTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'page.title',
+            key: 'pageTitle',
             fallback: 'Demostración del Componente Display',
         });
         this.languageLabel$ = this.contentService.fromContent({
@@ -7480,67 +7865,67 @@ class DisplayDemoComponent {
         });
         this.staticSectionTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'sections.static',
+            key: 'sectionsStatic',
             fallback: 'Ejemplos Estáticos',
         });
         this.reactiveSectionTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'sections.reactive',
+            key: 'sectionsReactive',
             fallback: 'Ejemplos Reactivos',
         });
         this.mixedSectionTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'sections.mixed',
+            key: 'sectionsMixed',
             fallback: 'Ejemplos Mixtos',
         });
         this.dynamicSectionTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'sections.dynamic',
+            key: 'sectionsDynamic',
             fallback: 'Ejemplos Dinámicos',
         });
         this.analysisTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'sections.analysis',
+            key: 'sectionsAnalysis',
             fallback: 'Análisis de Idioma',
         });
         this.reactiveContentTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'subsections.reactiveContent',
+            key: 'subsectionsReactiveContent',
             fallback: 'Contenido reactivo básico:',
         });
         this.interpolationTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'subsections.interpolation',
+            key: 'subsectionsInterpolation',
             fallback: 'Contenido con interpolación:',
         });
         this.fallbackTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'subsections.fallback',
+            key: 'subsectionsFallback',
             fallback: 'Demostración de fallbacks:',
         });
         this.mixedContentTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'subsections.mixedContent',
+            key: 'subsectionsMixedContent',
             fallback: 'Contenido estático vs reactivo:',
         });
         this.dynamicContentTitle$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'subsections.dynamicContent',
+            key: 'subsectionsDynamicContent',
             fallback: 'Contenido que se actualiza dinámicamente:',
         });
         this.updateButtonText$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'buttons.updateCounter',
+            key: 'buttonsUpdateCounter',
             fallback: 'Actualizar Contador',
         });
         this.currentLangLabel$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'analysis.currentLanguage',
+            key: 'analysisCurrentLanguage',
             fallback: 'Idioma actual',
         });
         this.availableLangsLabel$ = this.contentService.fromContent({
             className: 'displayDemo',
-            key: 'analysis.availableLanguages',
+            key: 'analysisAvailableLanguages',
             fallback: 'Idiomas disponibles',
         });
     }
@@ -7551,6 +7936,11 @@ class DisplayDemoComponent {
     changeLanguage(language) {
         this.langService.setLang(language);
     }
+    onLanguageChange(language) {
+        console.log('Language changed to:', language);
+        // El language selector ya maneja el cambio de idioma internamente
+        // pero podemos agregar lógica adicional aquí si es necesario
+    }
     updateCounter() {
         this.counter++;
         // Actualizar los displays que usan el contador
@@ -7583,18 +7973,10 @@ class DisplayDemoComponent {
 
         <ion-card-content>
           <!-- Selector de idioma -->
-          <ion-item>
-            <ion-label>{{ languageLabel$ | async }}</ion-label>
-            <ion-select
-              interface="popover"
-              [value]="currentLanguage$ | async"
-              (ionChange)="changeLanguage($event.detail.value)"
-            >
-              <ion-select-option *ngFor="let lang of availableLanguages$ | async" [value]="lang">
-                {{ lang | uppercase }}
-              </ion-select-option>
-            </ion-select>
-          </ion-item>
+          <div class="language-selector-container">
+            <val-language-selector [props]="languageSelectorProps" (languageChange)="onLanguageChange($event)">
+            </val-language-selector>
+          </div>
 
           <!-- Ejemplos estáticos -->
           <div class="section">
@@ -7684,7 +8066,7 @@ class DisplayDemoComponent {
         </ion-card-content>
       </ion-card>
     </div>
-  `, isInline: true, styles: [".display-demo{padding:16px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".display-demo{padding:16px}.language-selector-container{margin:16px 0;padding:12px;background:var(--ion-color-step-50);border-radius:8px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayDemoComponent, decorators: [{
             type: Component,
@@ -7694,12 +8076,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IonCardContent,
                         IonCardHeader,
                         IonCardTitle,
-                        IonSelect,
-                        IonSelectOption,
-                        IonItem,
-                        IonLabel,
                         IonButton,
                         DisplayComponent,
+                        LanguageSelectorComponent,
                     ], template: `
     <div class="display-demo">
       <ion-card>
@@ -7709,18 +8088,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
         <ion-card-content>
           <!-- Selector de idioma -->
-          <ion-item>
-            <ion-label>{{ languageLabel$ | async }}</ion-label>
-            <ion-select
-              interface="popover"
-              [value]="currentLanguage$ | async"
-              (ionChange)="changeLanguage($event.detail.value)"
-            >
-              <ion-select-option *ngFor="let lang of availableLanguages$ | async" [value]="lang">
-                {{ lang | uppercase }}
-              </ion-select-option>
-            </ion-select>
-          </ion-item>
+          <div class="language-selector-container">
+            <val-language-selector [props]="languageSelectorProps" (languageChange)="onLanguageChange($event)">
+            </val-language-selector>
+          </div>
 
           <!-- Ejemplos estáticos -->
           <div class="section">
@@ -7810,7 +8181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         </ion-card-content>
       </ion-card>
     </div>
-  `, styles: [".display-demo{padding:16px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"] }]
+  `, styles: [".display-demo{padding:16px}.language-selector-container{margin:16px 0;padding:12px;background:var(--ion-color-step-50);border-radius:8px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"] }]
         }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
 
 /**
@@ -8537,6 +8908,210 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
   `, styles: [".multi-lang-demo{padding:20px;max-width:800px}.language-info,.content-examples,.warning-info,.component-analysis{margin:20px 0;padding:15px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}.button-group{display:flex;gap:10px;flex-wrap:wrap}.button-group button{padding:8px 16px;border:1px solid var(--ion-color-primary, #3880ff);background:#fff;color:var(--ion-color-primary, #3880ff);border-radius:4px;cursor:pointer;transition:all .2s}.button-group button:hover{background:var(--ion-color-primary-tint, #4992ff);color:#fff}.button-group button.active{background:var(--ion-color-primary, #3880ff);color:#fff}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}.analysis-results{margin-top:10px;padding:10px;background:#fff;border-radius:4px}h2{color:var(--ion-color-primary, #3880ff)}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px}\n"] }]
         }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
 
+/**
+ * Ejemplo de uso de los componentes popover-selector y language-selector
+ */
+class SelectorExamplesComponent {
+    constructor() {
+        // ✅ Ejemplos de Popover Selector Genérico
+        this.categorySelector = {
+            options: [
+                { value: 'work', label: 'Trabajo', icon: 'briefcase' },
+                { value: 'personal', label: 'Personal', icon: 'person' },
+                { value: 'travel', label: 'Viajes', icon: 'airplane' },
+                { value: 'health', label: 'Salud', icon: 'fitness' },
+            ],
+            selectedValue: 'work',
+            label: 'Categoría',
+            icon: 'folder',
+            color: 'primary',
+            size: 'default',
+            fill: 'outline',
+        };
+        this.prioritySelector = {
+            options: [
+                { value: 'low', label: 'Baja', icon: 'arrow-down', disabled: false },
+                { value: 'medium', label: 'Media', icon: 'remove' },
+                { value: 'high', label: 'Alta', icon: 'arrow-up' },
+                { value: 'urgent', label: 'Urgente', icon: 'warning' },
+            ],
+            selectedValue: 'medium',
+            label: 'Prioridad',
+            icon: 'flag',
+            color: 'warning',
+            size: 'large',
+            fill: 'solid',
+            shape: 'round',
+        };
+        this.multipleSelector = {
+            options: [
+                { value: 'email', label: 'Email', icon: 'mail' },
+                { value: 'sms', label: 'SMS', icon: 'chatbox' },
+                { value: 'push', label: 'Push', icon: 'notifications' },
+                { value: 'in-app', label: 'In-App', icon: 'apps' },
+            ],
+            selectedValue: ['email', 'push'],
+            label: 'Notificaciones',
+            icon: 'notifications-circle',
+            multiple: true,
+            color: 'tertiary',
+            size: 'default',
+            fill: 'outline',
+            showCheckmark: true,
+        };
+        // ✅ Ejemplos de Language Selector
+        this.basicLanguageSelector = {
+            showLabel: true,
+            label: 'Idioma',
+            color: 'medium',
+            size: 'default',
+            fill: 'outline',
+        };
+        this.flagLanguageSelector = {
+            showLabel: true,
+            label: 'Language / Idioma',
+            showFlags: true,
+            color: 'primary',
+            size: 'large',
+            fill: 'solid',
+        };
+        this.customLanguageSelector = {
+            showLabel: true,
+            labelConfig: {
+                className: '_global',
+                key: 'language',
+                fallback: 'Idioma',
+            },
+            showFlags: true,
+            color: 'secondary',
+            size: 'default',
+            fill: 'outline',
+            shape: 'round',
+            customLanguageNames: {
+                es: 'Español (España)',
+                en: 'English (US)',
+                fr: 'Français',
+                de: 'Deutsch',
+            },
+        };
+    }
+    // ✅ Event Handlers
+    onCategoryChange(category) {
+        console.log('Category changed:', category);
+    }
+    onPriorityChange(priority) {
+        console.log('Priority changed:', priority);
+    }
+    onMultipleChange(notifications) {
+        console.log('Notifications changed:', notifications);
+    }
+    onLanguageChange(language) {
+        console.log('Language changed:', language);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectorExamplesComponent, isStandalone: true, selector: "app-selector-examples", ngImport: i0, template: `
+    <div class="selector-examples">
+      <h2>Ejemplos de Selectores</h2>
+
+      <!-- Popover Selector Genérico -->
+      <div class="section">
+        <h3>Popover Selector Genérico</h3>
+
+        <div class="example-group">
+          <h4>Selector de Categorías:</h4>
+          <val-popover-selector [props]="categorySelector" (selectionChange)="onCategoryChange($event)">
+          </val-popover-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector de Prioridad:</h4>
+          <val-popover-selector [props]="prioritySelector" (selectionChange)="onPriorityChange($event)">
+          </val-popover-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector Múltiple:</h4>
+          <val-popover-selector [props]="multipleSelector" (selectionChange)="onMultipleChange($event)">
+          </val-popover-selector>
+        </div>
+      </div>
+
+      <!-- Language Selector -->
+      <div class="section">
+        <h3>Selector de Idioma</h3>
+
+        <div class="example-group">
+          <h4>Selector Básico:</h4>
+          <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector con Banderas:</h4>
+          <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector Personalizado:</h4>
+          <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
+          </val-language-selector>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".selector-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 20px;color:var(--ion-color-primary)}.example-group{margin:20px 0;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.example-group h4{margin:0 0 15px;color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorExamplesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selector-examples', standalone: true, imports: [PopoverSelectorComponent, LanguageSelectorComponent], template: `
+    <div class="selector-examples">
+      <h2>Ejemplos de Selectores</h2>
+
+      <!-- Popover Selector Genérico -->
+      <div class="section">
+        <h3>Popover Selector Genérico</h3>
+
+        <div class="example-group">
+          <h4>Selector de Categorías:</h4>
+          <val-popover-selector [props]="categorySelector" (selectionChange)="onCategoryChange($event)">
+          </val-popover-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector de Prioridad:</h4>
+          <val-popover-selector [props]="prioritySelector" (selectionChange)="onPriorityChange($event)">
+          </val-popover-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector Múltiple:</h4>
+          <val-popover-selector [props]="multipleSelector" (selectionChange)="onMultipleChange($event)">
+          </val-popover-selector>
+        </div>
+      </div>
+
+      <!-- Language Selector -->
+      <div class="section">
+        <h3>Selector de Idioma</h3>
+
+        <div class="example-group">
+          <h4>Selector Básico:</h4>
+          <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector con Banderas:</h4>
+          <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
+        </div>
+
+        <div class="example-group">
+          <h4>Selector Personalizado:</h4>
+          <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
+          </val-language-selector>
+        </div>
+      </div>
+    </div>
+  `, styles: [".selector-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 20px;color:var(--ion-color-primary)}.example-group{margin:20px 0;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.example-group h4{margin:0 0 15px;color:var(--ion-color-medium)}\n"] }]
+        }] });
+
 const text = {
     es: {
         spanish: 'Español',
@@ -8717,5 +9292,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ComprehensiveLinkTestComponent, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DisplayDemoComponent, DisplayExampleComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, MultiLanguageDemoComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ComprehensiveLinkTestComponent, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DisplayDemoComponent, DisplayExampleComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, MultiLanguageDemoComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SelectorExamplesComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
 //# sourceMappingURL=valtech-components.mjs.map