valtech-components 2.0.298 → 2.0.299

package/fesm2022/valtech-components.mjs

@@ -5,7 +5,7 @@ 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, chevronDown, language, globe, chevronBackOutline } from 'ionicons/icons';
-import { map, BehaviorSubject, distinctUntilChanged, Subscription, of } from 'rxjs';
+import { map, BehaviorSubject, distinctUntilChanged, Subscription, of, combineLatest } from 'rxjs';
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
@@ -911,7 +911,7 @@ class LangService {
                 console.warn(`LangService: Content "${className}.${key}" not available in "${lang}".`, `Using "${result.actualLang}" instead. Available languages:`, this.availableLanguages);
             }
             return result.content || fallback || `[${className}.${key}]`;
-        }), distinctUntilChanged());
+        }), distinctUntilChanged((prev, curr) => prev === curr));
     }
     /**
      * Get reactive content for multiple keys at once.
@@ -3883,7 +3883,7 @@ class PopoverSelectorComponent {
         </ion-select-option>
       </ion-select>
     </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.popover-selector-container{display:inline-block;width:auto}.popover-selector-container .selector-label{display:block;margin-bottom:8px;font-weight:600;color:var(--ion-color-dark, #1a1a1a)}.popover-selector-select{display:inline-block;width:auto}.popover-selector-select .selector-trigger{--background: transparent;--background-hover: transparent;--background-activated: transparent;--background-focused: transparent;--box-shadow: none;--border-radius: 24px;display:inline-flex;align-items:center;min-width:auto;width:auto;height:auto;min-height:40px;padding:10px 16px;margin:0;background:var(--ion-color-light, #f8f9fa);border:none;border-radius:24px;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.popover-selector-select .selector-trigger:hover:not([disabled]){background:var(--ion-color-light-shade, #e9ecef);transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.popover-selector-select .selector-trigger:active{transform:translateY(0);box-shadow:0 2px 6px #00000026}.popover-selector-select .selector-trigger:focus-visible{outline:2px solid var(--ion-color-primary, #3880ff);outline-offset:2px}.popover-selector-select .selector-trigger .trigger-text{display:inline-block;margin:0 8px 0 0;font-weight:600;font-size:14px;color:var(--ion-color-dark, #1a1a1a);white-space:nowrap;line-height:1.4}.popover-selector-select .selector-trigger .chevron-icon{font-size:16px;color:var(--ion-color-medium, #92949c);transition:transform .2s ease;margin-left:4px}.popover-selector-select .selector-trigger ion-icon[slot=start]{margin-right:8px;font-size:16px;color:var(--ion-color-medium-shade, #808289)}.popover-selector-select .selector-trigger.select-expanded{background:var(--ion-color-light-shade, #e9ecef)}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg);color:var(--ion-color-primary, #3880ff)}.popover-selector-select .selector-trigger[disabled]{opacity:.6;pointer-events:none;background:var(--ion-color-light-tint, #f4f5f8);box-shadow:none;transform:none}.option-content{display:flex;align-items:center;gap:12px;padding:6px 0}.option-content .option-icon{font-size:18px;width:18px;height:18px;opacity:.8;color:var(--ion-color-medium-shade, #808289)}.option-content span{font-weight:500;color:var(--ion-color-dark, #1a1a1a);line-height:1.4}.popover-selector-container.size-small .selector-trigger{min-height:32px;padding:6px 12px;border-radius:18px}.popover-selector-container.size-small .selector-trigger .trigger-text{font-size:12px}.popover-selector-container.size-small .selector-trigger .chevron-icon,.popover-selector-container.size-small .selector-trigger ion-icon[slot=start]{font-size:14px}.popover-selector-container.size-large .selector-trigger{min-height:48px;padding:14px 20px;border-radius:28px}.popover-selector-container.size-large .selector-trigger .trigger-text{font-size:16px}.popover-selector-container.size-large .selector-trigger .chevron-icon,.popover-selector-container.size-large .selector-trigger ion-icon[slot=start]{font-size:18px}@media (max-width: 768px){.popover-selector-container .selector-trigger{min-height:38px;padding:9px 14px}.popover-selector-container .selector-trigger .trigger-text{font-size:13px}}@media (prefers-color-scheme: dark){.popover-selector-container .selector-label{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger{background:var(--ion-color-dark-tint, #383a3e)}.popover-selector-container .selector-trigger:hover:not([disabled]){background:var(--ion-color-dark-shade, #2f2f2f)}.popover-selector-container .selector-trigger .trigger-text{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger .chevron-icon,.popover-selector-container .selector-trigger ion-icon[slot=start]{color:var(--ion-color-light-shade, #d7d8da)}.popover-selector-container .selector-trigger.select-expanded{background:var(--ion-color-dark-shade, #2f2f2f)}}ion-select{border-radius:8px;padding:4px;border:.125rem solid var(--ion-color-light)!important}\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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.popover-selector-container{display:inline-block;width:auto}.popover-selector-container .selector-label{display:block;margin-bottom:8px;font-weight:600;color:var(--ion-color-dark, #1a1a1a)}.popover-selector-select{display:inline-block;width:auto}.popover-selector-select .selector-trigger{--background: transparent;--background-hover: transparent;--background-activated: transparent;--background-focused: transparent;--box-shadow: none;--border-radius: 24px;display:inline-flex;align-items:center;min-width:auto;width:auto;height:auto;min-height:40px;padding:10px 16px;margin:0;background:var(--ion-color-light, #f8f9fa);border:none;border-radius:24px;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.popover-selector-select .selector-trigger:hover:not([disabled]){background:var(--ion-color-light-shade, #e9ecef);transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.popover-selector-select .selector-trigger:active{transform:translateY(0);box-shadow:0 2px 6px #00000026}.popover-selector-select .selector-trigger:focus-visible{outline:2px solid var(--ion-color-primary, #3880ff);outline-offset:2px}.popover-selector-select .selector-trigger .trigger-text{display:inline-block;margin:0 8px 0 0;font-weight:600;font-size:14px;color:var(--ion-color-dark, #1a1a1a);white-space:nowrap;line-height:1.4}.popover-selector-select .selector-trigger .chevron-icon{font-size:16px;color:var(--ion-color-medium, #92949c);transition:transform .2s ease;margin-left:4px}.popover-selector-select .selector-trigger ion-icon[slot=start]{margin-right:8px;font-size:16px;color:var(--ion-color-medium-shade, #808289)}.popover-selector-select .selector-trigger.select-expanded{background:var(--ion-color-light-shade, #e9ecef)}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg);color:var(--ion-color-primary, #3880ff)}.popover-selector-select .selector-trigger[disabled]{opacity:.6;pointer-events:none;background:var(--ion-color-light-tint, #f4f5f8);box-shadow:none;transform:none}.option-content{display:flex;align-items:center;gap:12px;padding:6px 0}.option-content .option-icon{font-size:18px;width:18px;height:18px;opacity:.8;color:var(--ion-color-medium-shade, #808289)}.option-content span{font-weight:500;color:var(--ion-color-dark, #1a1a1a);line-height:1.4}.popover-selector-container.size-small .selector-trigger{min-height:32px;padding:6px 12px;border-radius:18px}.popover-selector-container.size-small .selector-trigger .trigger-text{font-size:12px}.popover-selector-container.size-small .selector-trigger .chevron-icon,.popover-selector-container.size-small .selector-trigger ion-icon[slot=start]{font-size:14px}.popover-selector-container.size-large .selector-trigger{min-height:48px;padding:14px 20px;border-radius:28px}.popover-selector-container.size-large .selector-trigger .trigger-text{font-size:16px}.popover-selector-container.size-large .selector-trigger .chevron-icon,.popover-selector-container.size-large .selector-trigger ion-icon[slot=start]{font-size:18px}@media (max-width: 768px){.popover-selector-container .selector-trigger{min-height:38px;padding:9px 14px}.popover-selector-container .selector-trigger .trigger-text{font-size:13px}}@media (prefers-color-scheme: dark){.popover-selector-container .selector-label{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger{background:var(--ion-color-dark-tint, #383a3e)}.popover-selector-container .selector-trigger:hover:not([disabled]){background:var(--ion-color-dark-shade, #2f2f2f)}.popover-selector-container .selector-trigger .trigger-text{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger .chevron-icon,.popover-selector-container .selector-trigger ion-icon[slot=start]{color:var(--ion-color-light-shade, #d7d8da)}.popover-selector-container .selector-trigger.select-expanded{background:var(--ion-color-dark-shade, #2f2f2f)}}ion-select{border-radius:8px;padding:.625rem;border:.125rem solid var(--ion-color-light)!important}\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: 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,
@@ -3925,7 +3925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         </ion-select-option>
       </ion-select>
     </div>
-  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.popover-selector-container{display:inline-block;width:auto}.popover-selector-container .selector-label{display:block;margin-bottom:8px;font-weight:600;color:var(--ion-color-dark, #1a1a1a)}.popover-selector-select{display:inline-block;width:auto}.popover-selector-select .selector-trigger{--background: transparent;--background-hover: transparent;--background-activated: transparent;--background-focused: transparent;--box-shadow: none;--border-radius: 24px;display:inline-flex;align-items:center;min-width:auto;width:auto;height:auto;min-height:40px;padding:10px 16px;margin:0;background:var(--ion-color-light, #f8f9fa);border:none;border-radius:24px;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.popover-selector-select .selector-trigger:hover:not([disabled]){background:var(--ion-color-light-shade, #e9ecef);transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.popover-selector-select .selector-trigger:active{transform:translateY(0);box-shadow:0 2px 6px #00000026}.popover-selector-select .selector-trigger:focus-visible{outline:2px solid var(--ion-color-primary, #3880ff);outline-offset:2px}.popover-selector-select .selector-trigger .trigger-text{display:inline-block;margin:0 8px 0 0;font-weight:600;font-size:14px;color:var(--ion-color-dark, #1a1a1a);white-space:nowrap;line-height:1.4}.popover-selector-select .selector-trigger .chevron-icon{font-size:16px;color:var(--ion-color-medium, #92949c);transition:transform .2s ease;margin-left:4px}.popover-selector-select .selector-trigger ion-icon[slot=start]{margin-right:8px;font-size:16px;color:var(--ion-color-medium-shade, #808289)}.popover-selector-select .selector-trigger.select-expanded{background:var(--ion-color-light-shade, #e9ecef)}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg);color:var(--ion-color-primary, #3880ff)}.popover-selector-select .selector-trigger[disabled]{opacity:.6;pointer-events:none;background:var(--ion-color-light-tint, #f4f5f8);box-shadow:none;transform:none}.option-content{display:flex;align-items:center;gap:12px;padding:6px 0}.option-content .option-icon{font-size:18px;width:18px;height:18px;opacity:.8;color:var(--ion-color-medium-shade, #808289)}.option-content span{font-weight:500;color:var(--ion-color-dark, #1a1a1a);line-height:1.4}.popover-selector-container.size-small .selector-trigger{min-height:32px;padding:6px 12px;border-radius:18px}.popover-selector-container.size-small .selector-trigger .trigger-text{font-size:12px}.popover-selector-container.size-small .selector-trigger .chevron-icon,.popover-selector-container.size-small .selector-trigger ion-icon[slot=start]{font-size:14px}.popover-selector-container.size-large .selector-trigger{min-height:48px;padding:14px 20px;border-radius:28px}.popover-selector-container.size-large .selector-trigger .trigger-text{font-size:16px}.popover-selector-container.size-large .selector-trigger .chevron-icon,.popover-selector-container.size-large .selector-trigger ion-icon[slot=start]{font-size:18px}@media (max-width: 768px){.popover-selector-container .selector-trigger{min-height:38px;padding:9px 14px}.popover-selector-container .selector-trigger .trigger-text{font-size:13px}}@media (prefers-color-scheme: dark){.popover-selector-container .selector-label{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger{background:var(--ion-color-dark-tint, #383a3e)}.popover-selector-container .selector-trigger:hover:not([disabled]){background:var(--ion-color-dark-shade, #2f2f2f)}.popover-selector-container .selector-trigger .trigger-text{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger .chevron-icon,.popover-selector-container .selector-trigger ion-icon[slot=start]{color:var(--ion-color-light-shade, #d7d8da)}.popover-selector-container .selector-trigger.select-expanded{background:var(--ion-color-dark-shade, #2f2f2f)}}ion-select{border-radius:8px;padding:4px;border:.125rem solid var(--ion-color-light)!important}\n"] }]
+  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.popover-selector-container{display:inline-block;width:auto}.popover-selector-container .selector-label{display:block;margin-bottom:8px;font-weight:600;color:var(--ion-color-dark, #1a1a1a)}.popover-selector-select{display:inline-block;width:auto}.popover-selector-select .selector-trigger{--background: transparent;--background-hover: transparent;--background-activated: transparent;--background-focused: transparent;--box-shadow: none;--border-radius: 24px;display:inline-flex;align-items:center;min-width:auto;width:auto;height:auto;min-height:40px;padding:10px 16px;margin:0;background:var(--ion-color-light, #f8f9fa);border:none;border-radius:24px;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.popover-selector-select .selector-trigger:hover:not([disabled]){background:var(--ion-color-light-shade, #e9ecef);transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.popover-selector-select .selector-trigger:active{transform:translateY(0);box-shadow:0 2px 6px #00000026}.popover-selector-select .selector-trigger:focus-visible{outline:2px solid var(--ion-color-primary, #3880ff);outline-offset:2px}.popover-selector-select .selector-trigger .trigger-text{display:inline-block;margin:0 8px 0 0;font-weight:600;font-size:14px;color:var(--ion-color-dark, #1a1a1a);white-space:nowrap;line-height:1.4}.popover-selector-select .selector-trigger .chevron-icon{font-size:16px;color:var(--ion-color-medium, #92949c);transition:transform .2s ease;margin-left:4px}.popover-selector-select .selector-trigger ion-icon[slot=start]{margin-right:8px;font-size:16px;color:var(--ion-color-medium-shade, #808289)}.popover-selector-select .selector-trigger.select-expanded{background:var(--ion-color-light-shade, #e9ecef)}.popover-selector-select .selector-trigger.select-expanded .chevron-icon{transform:rotate(180deg);color:var(--ion-color-primary, #3880ff)}.popover-selector-select .selector-trigger[disabled]{opacity:.6;pointer-events:none;background:var(--ion-color-light-tint, #f4f5f8);box-shadow:none;transform:none}.option-content{display:flex;align-items:center;gap:12px;padding:6px 0}.option-content .option-icon{font-size:18px;width:18px;height:18px;opacity:.8;color:var(--ion-color-medium-shade, #808289)}.option-content span{font-weight:500;color:var(--ion-color-dark, #1a1a1a);line-height:1.4}.popover-selector-container.size-small .selector-trigger{min-height:32px;padding:6px 12px;border-radius:18px}.popover-selector-container.size-small .selector-trigger .trigger-text{font-size:12px}.popover-selector-container.size-small .selector-trigger .chevron-icon,.popover-selector-container.size-small .selector-trigger ion-icon[slot=start]{font-size:14px}.popover-selector-container.size-large .selector-trigger{min-height:48px;padding:14px 20px;border-radius:28px}.popover-selector-container.size-large .selector-trigger .trigger-text{font-size:16px}.popover-selector-container.size-large .selector-trigger .chevron-icon,.popover-selector-container.size-large .selector-trigger ion-icon[slot=start]{font-size:18px}@media (max-width: 768px){.popover-selector-container .selector-trigger{min-height:38px;padding:9px 14px}.popover-selector-container .selector-trigger .trigger-text{font-size:13px}}@media (prefers-color-scheme: dark){.popover-selector-container .selector-label{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger{background:var(--ion-color-dark-tint, #383a3e)}.popover-selector-container .selector-trigger:hover:not([disabled]){background:var(--ion-color-dark-shade, #2f2f2f)}.popover-selector-container .selector-trigger .trigger-text{color:var(--ion-color-light, #f4f5f8)}.popover-selector-container .selector-trigger .chevron-icon,.popover-selector-container .selector-trigger ion-icon[slot=start]{color:var(--ion-color-light-shade, #d7d8da)}.popover-selector-container .selector-trigger.select-expanded{background:var(--ion-color-dark-shade, #2f2f2f)}}ion-select{border-radius:8px;padding:.625rem;border:.125rem solid var(--ion-color-light)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], selectionChange: [{
@@ -4059,12 +4059,13 @@ class LanguageSelectorComponent {
         }
     }
     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);
+        // Subscribe to language state changes and content changes to update popover props
+        const languageSubscription = combineLatest([
+            this.availableLanguages$,
+            this.currentLanguage$,
+            this.langService.currentLang$, // This will trigger updates when language changes
+        ]).subscribe(([availableLanguages, currentLanguage]) => {
+            this.updatePopoverProps(availableLanguages, currentLanguage);
         });
         this.subscriptions.add(languageSubscription);
         // Subscribe to label changes
@@ -4106,12 +4107,22 @@ class LanguageSelectorComponent {
         };
     }
     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];
+        // 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 reactive content for translated language names
+        // Note: This will use the current language since getLanguageDisplayName is called during subscription updates
+        const translatedName = this.langService.getText('_global', `languageName_${languageCode}`);
         const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
-        const displayName = customName || defaultName || languageCode.toUpperCase();
-        return flag ? `${flag} ${displayName}` : displayName;
+        if (translatedName && translatedName !== `languageName_${languageCode}`) {
+            return flag ? `${flag} ${translatedName}` : translatedName;
+        }
+        // Fallback to default names, then to code
+        const defaultName = this.defaultLanguageNames[languageCode] || languageCode.toUpperCase();
+        return flag ? `${flag} ${defaultName}` : defaultName;
     }
     /**
      * Handle language selection change.
@@ -8906,6 +8917,492 @@ 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 }] });
 
+/**
+ * Simple demo component showcasing reactive content patterns
+ * for buttons and alert boxes.
+ *
+ * Demonstrates:
+ * - Button components with reactive text
+ * - Alert boxes with reactive content
+ * - Language switching
+ * - Static vs reactive content patterns
+ */
+class ReactiveComponentsDemoComponent {
+    constructor(contentService, langService) {
+        this.contentService = contentService;
+        this.langService = langService;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.initializeContent();
+        this.initializeComponents();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    initializeContent() {
+        // Page-level content
+        this.pageTitle$ = this.contentService.fromContent({
+            className: 'reactiveDemo',
+            key: 'title',
+            fallback: 'Reactive Components Demo',
+        });
+        this.languageLabel$ = this.contentService.fromContent({
+            className: '_global',
+            key: 'language',
+            fallback: 'Language',
+        });
+        this.buttonSectionTitle$ = this.contentService.fromContent({
+            className: 'reactiveDemo',
+            key: 'buttons.title',
+            fallback: 'Reactive Buttons',
+        });
+        this.alertSectionTitle$ = this.contentService.fromContent({
+            className: 'reactiveDemo',
+            key: 'alerts.title',
+            fallback: 'Reactive Alerts',
+        });
+        // Language state
+        this.currentLanguage$ = this.langService.currentLang$;
+        this.availableLanguages$ = this.langService.currentLang$.pipe(map(() => this.langService.availableLangs));
+    }
+    initializeComponents() {
+        // Reactive buttons with common actions
+        this.saveButton = {
+            color: 'primary',
+            fill: 'solid',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+            textConfig: {
+                className: '_global',
+                key: 'save',
+                fallback: 'Save',
+            },
+            handler: () => this.handleSave(),
+        };
+        this.cancelButton = {
+            color: 'medium',
+            fill: 'outline',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+            textConfig: {
+                className: '_global',
+                key: 'cancel',
+                fallback: 'Cancel',
+            },
+            handler: () => this.handleCancel(),
+        };
+        // Static button for comparison
+        this.staticButton = {
+            color: 'tertiary',
+            fill: 'outline',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+            text: 'Static Button', // Static text
+            handler: () => this.handleStatic(),
+        };
+        // Reactive alert boxes
+        this.warningAlert = {
+            box: {
+                color: 'warning',
+                rounded: true,
+                bordered: false,
+                icon: 'warning',
+            },
+            icon: {
+                name: 'warning',
+                color: 'warning',
+                size: 'medium',
+            },
+            textConfig: {
+                className: 'reactiveDemo',
+                key: 'alerts.warning',
+                fallback: 'This is a warning message',
+            },
+            textStyle: {
+                size: 'medium',
+                bold: false,
+            },
+        };
+        this.successAlert = {
+            box: {
+                color: 'success',
+                rounded: true,
+                bordered: false,
+                icon: 'checkmark-circle',
+            },
+            icon: {
+                name: 'checkmark-circle',
+                color: 'success',
+                size: 'medium',
+            },
+            textConfig: {
+                className: 'reactiveDemo',
+                key: 'alerts.success',
+                fallback: 'Operation completed successfully!',
+            },
+            textStyle: {
+                size: 'medium',
+                bold: true,
+            },
+        };
+        // Static alert for comparison
+        this.staticAlert = {
+            box: {
+                color: 'dark',
+                rounded: true,
+                bordered: false,
+                icon: 'information-circle',
+            },
+            icon: {
+                name: 'information-circle',
+                color: 'dark',
+                size: 'medium',
+            },
+            text: 'This is a static alert message', // Static text
+            textStyle: {
+                size: 'medium',
+                bold: false,
+            },
+        };
+    }
+    // Event handlers
+    changeLanguage(language) {
+        this.langService.setLang(language);
+    }
+    handleSave() {
+        console.log('Save button clicked');
+    }
+    handleCancel() {
+        console.log('Cancel button clicked');
+    }
+    handleStatic() {
+        console.log('Static button clicked');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveComponentsDemoComponent, deps: [{ token: ContentService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveComponentsDemoComponent, isStandalone: true, selector: "val-reactive-components-demo", ngImport: i0, template: `
+    <div class="reactive-components-demo">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>{{ pageTitle$ | async }}</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          <!-- Language Selector -->
+          <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>
+
+          <!-- Reactive Buttons Demo -->
+          <div class="section">
+            <h3>{{ buttonSectionTitle$ | async }}</h3>
+
+            <!-- Common action buttons with reactive text -->
+            <div class="button-grid">
+              <val-button [props]="saveButton"></val-button>
+              <val-button [props]="cancelButton"></val-button>
+              <val-button [props]="staticButton"></val-button>
+            </div>
+          </div>
+
+          <!-- Reactive Alert Boxes Demo -->
+          <div class="section">
+            <h3>{{ alertSectionTitle$ | async }}</h3>
+
+            <!-- Alert with reactive content -->
+            <val-alert-box [props]="warningAlert"></val-alert-box>
+            <val-alert-box [props]="successAlert"></val-alert-box>
+            <val-alert-box [props]="staticAlert"></val-alert-box>
+          </div>
+
+          <!-- Analysis -->
+          <div class="section">
+            <h3>Analysis</h3>
+            <div class="analysis-info">
+              <p><strong>Current Language:</strong> {{ currentLanguage$ | async | uppercase }}</p>
+              <p><strong>Available Languages:</strong> {{ (availableLanguages$ | async)?.join(', ') | uppercase }}</p>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  `, isInline: true, styles: [".reactive-components-demo{padding:16px}.section{margin:24px 0}.button-grid{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.analysis-info{background:var(--ion-color-light);padding:16px;border-radius:8px}\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: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AlertBoxComponent, selector: "val-alert-box", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveComponentsDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-reactive-components-demo', standalone: true, imports: [
+                        CommonModule,
+                        IonCard,
+                        IonCardContent,
+                        IonCardHeader,
+                        IonCardTitle,
+                        IonSelect,
+                        IonSelectOption,
+                        IonItem,
+                        IonLabel,
+                        ButtonComponent,
+                        AlertBoxComponent,
+                    ], template: `
+    <div class="reactive-components-demo">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>{{ pageTitle$ | async }}</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          <!-- Language Selector -->
+          <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>
+
+          <!-- Reactive Buttons Demo -->
+          <div class="section">
+            <h3>{{ buttonSectionTitle$ | async }}</h3>
+
+            <!-- Common action buttons with reactive text -->
+            <div class="button-grid">
+              <val-button [props]="saveButton"></val-button>
+              <val-button [props]="cancelButton"></val-button>
+              <val-button [props]="staticButton"></val-button>
+            </div>
+          </div>
+
+          <!-- Reactive Alert Boxes Demo -->
+          <div class="section">
+            <h3>{{ alertSectionTitle$ | async }}</h3>
+
+            <!-- Alert with reactive content -->
+            <val-alert-box [props]="warningAlert"></val-alert-box>
+            <val-alert-box [props]="successAlert"></val-alert-box>
+            <val-alert-box [props]="staticAlert"></val-alert-box>
+          </div>
+
+          <!-- Analysis -->
+          <div class="section">
+            <h3>Analysis</h3>
+            <div class="analysis-info">
+              <p><strong>Current Language:</strong> {{ currentLanguage$ | async | uppercase }}</p>
+              <p><strong>Available Languages:</strong> {{ (availableLanguages$ | async)?.join(', ') | uppercase }}</p>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  `, styles: [".reactive-components-demo{padding:16px}.section{margin:24px 0}.button-grid{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.analysis-info{background:var(--ion-color-light);padding:16px;border-radius:8px}\n"] }]
+        }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
+
+/**
+ * Test component to diagnose reactive content behavior.
+ * Compares fromContent vs fromMultipleContent reactivity.
+ */
+class ReactivityTestComponent {
+    constructor() {
+        this.contentService = inject(ContentService);
+        this.langService = inject(LangService);
+        // Observable for current language
+        this.currentLang$ = this.langService.currentLang$;
+        // Single key content observables (using fromContent)
+        this.singleWelcome$ = this.contentService.fromContent({
+            className: 'testReactivity',
+            key: 'welcomeMessage',
+            fallback: 'Welcome',
+        });
+        this.singleSave$ = this.contentService.fromContent({
+            className: 'testReactivity',
+            key: 'saveButton',
+            fallback: 'Save',
+        });
+        this.singleCancel$ = this.contentService.fromContent({
+            className: 'testReactivity',
+            key: 'cancelButton',
+            fallback: 'Cancel',
+        });
+        // Multiple keys content observable (using fromMultipleContent)
+        this.multipleContent$ = this.contentService.fromMultipleContent('testReactivity', [
+            'welcomeMessage',
+            'saveButton',
+            'cancelButton',
+        ]);
+        // Direct LangService tests
+        this.directSingle$ = this.langService.getContent('testReactivity', 'welcomeMessage', 'Welcome');
+        this.directMultiple$ = this.langService.getMultipleContent('testReactivity', ['welcomeMessage']);
+        // Update counters
+        this.singleUpdateCount = 0;
+        this.multipleUpdateCount = 0;
+        this.directSingleUpdateCount = 0;
+        this.directMultipleUpdateCount = 0;
+    }
+    ngOnInit() {
+        // Subscribe to observables to count updates
+        this.singleWelcome$.subscribe(() => {
+            this.singleUpdateCount++;
+            console.log('Single key updated:', this.singleUpdateCount);
+        });
+        this.multipleContent$.subscribe(() => {
+            this.multipleUpdateCount++;
+            console.log('Multiple keys updated:', this.multipleUpdateCount);
+        });
+        this.directSingle$.subscribe(() => {
+            this.directSingleUpdateCount++;
+            console.log('Direct single updated:', this.directSingleUpdateCount);
+        });
+        this.directMultiple$.subscribe(() => {
+            this.directMultipleUpdateCount++;
+            console.log('Direct multiple updated:', this.directMultipleUpdateCount);
+        });
+    }
+    switchToSpanish() {
+        this.langService.setLang('es');
+    }
+    switchToEnglish() {
+        this.langService.setLang('en');
+    }
+    switchToFrench() {
+        this.langService.setLang('fr');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactivityTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactivityTestComponent, isStandalone: true, selector: "val-reactivity-test", ngImport: i0, template: `
+    <div style="padding: 20px; border: 1px solid #ccc; margin: 10px;">
+      <h3>Reactivity Test Component</h3>
+
+      <!-- Current Language -->
+      <div style="margin-bottom: 20px;"><strong>Current Language:</strong> {{ currentLang$ | async }}</div>
+
+      <!-- Language Switch Buttons -->
+      <div style="margin-bottom: 20px;">
+        <button (click)="switchToSpanish()" style="margin-right: 10px;">Switch to ES</button>
+        <button (click)="switchToEnglish()" style="margin-right: 10px;">Switch to EN</button>
+        <button (click)="switchToFrench()">Switch to FR</button>
+      </div>
+
+      <!-- Single Key Tests -->
+      <div style="margin-bottom: 20px;">
+        <h4>Single Key Tests (fromContent)</h4>
+        <div><strong>welcomeMessage (fromContent):</strong> {{ singleWelcome$ | async }}</div>
+        <div><strong>saveButton (fromContent):</strong> {{ singleSave$ | async }}</div>
+        <div><strong>cancelButton (fromContent):</strong> {{ singleCancel$ | async }}</div>
+      </div>
+
+      <!-- Multiple Keys Test -->
+      <div style="margin-bottom: 20px;">
+        <h4>Multiple Keys Test (fromMultipleContent)</h4>
+        <div>
+          <strong>welcomeMessage (multiple):</strong>
+          {{ (multipleContent$ | async)?.['welcomeMessage'] || 'Loading...' }}
+        </div>
+        <div>
+          <strong>saveButton (multiple):</strong> {{ (multipleContent$ | async)?.['saveButton'] || 'Loading...' }}
+        </div>
+        <div>
+          <strong>cancelButton (multiple):</strong> {{ (multipleContent$ | async)?.['cancelButton'] || 'Loading...' }}
+        </div>
+      </div>
+
+      <!-- Direct LangService Tests -->
+      <div style="margin-bottom: 20px;">
+        <h4>Direct LangService Tests</h4>
+        <div><strong>welcomeMessage (direct single):</strong> {{ directSingle$ | async }}</div>
+        <div>
+          <strong>welcomeMessage (direct multiple):</strong>
+          {{ (directMultiple$ | async)?.['welcomeMessage'] || 'Loading...' }}
+        </div>
+      </div>
+
+      <!-- Update Counter -->
+      <div>
+        <h4>Update Counters</h4>
+        <div><strong>Single key updates:</strong> {{ singleUpdateCount }}</div>
+        <div><strong>Multiple keys updates:</strong> {{ multipleUpdateCount }}</div>
+        <div><strong>Direct single updates:</strong> {{ directSingleUpdateCount }}</div>
+        <div><strong>Direct multiple updates:</strong> {{ directMultipleUpdateCount }}</div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactivityTestComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'val-reactivity-test',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div style="padding: 20px; border: 1px solid #ccc; margin: 10px;">
+      <h3>Reactivity Test Component</h3>
+
+      <!-- Current Language -->
+      <div style="margin-bottom: 20px;"><strong>Current Language:</strong> {{ currentLang$ | async }}</div>
+
+      <!-- Language Switch Buttons -->
+      <div style="margin-bottom: 20px;">
+        <button (click)="switchToSpanish()" style="margin-right: 10px;">Switch to ES</button>
+        <button (click)="switchToEnglish()" style="margin-right: 10px;">Switch to EN</button>
+        <button (click)="switchToFrench()">Switch to FR</button>
+      </div>
+
+      <!-- Single Key Tests -->
+      <div style="margin-bottom: 20px;">
+        <h4>Single Key Tests (fromContent)</h4>
+        <div><strong>welcomeMessage (fromContent):</strong> {{ singleWelcome$ | async }}</div>
+        <div><strong>saveButton (fromContent):</strong> {{ singleSave$ | async }}</div>
+        <div><strong>cancelButton (fromContent):</strong> {{ singleCancel$ | async }}</div>
+      </div>
+
+      <!-- Multiple Keys Test -->
+      <div style="margin-bottom: 20px;">
+        <h4>Multiple Keys Test (fromMultipleContent)</h4>
+        <div>
+          <strong>welcomeMessage (multiple):</strong>
+          {{ (multipleContent$ | async)?.['welcomeMessage'] || 'Loading...' }}
+        </div>
+        <div>
+          <strong>saveButton (multiple):</strong> {{ (multipleContent$ | async)?.['saveButton'] || 'Loading...' }}
+        </div>
+        <div>
+          <strong>cancelButton (multiple):</strong> {{ (multipleContent$ | async)?.['cancelButton'] || 'Loading...' }}
+        </div>
+      </div>
+
+      <!-- Direct LangService Tests -->
+      <div style="margin-bottom: 20px;">
+        <h4>Direct LangService Tests</h4>
+        <div><strong>welcomeMessage (direct single):</strong> {{ directSingle$ | async }}</div>
+        <div>
+          <strong>welcomeMessage (direct multiple):</strong>
+          {{ (directMultiple$ | async)?.['welcomeMessage'] || 'Loading...' }}
+        </div>
+      </div>
+
+      <!-- Update Counter -->
+      <div>
+        <h4>Update Counters</h4>
+        <div><strong>Single key updates:</strong> {{ singleUpdateCount }}</div>
+        <div><strong>Multiple keys updates:</strong> {{ multipleUpdateCount }}</div>
+        <div><strong>Direct single updates:</strong> {{ directSingleUpdateCount }}</div>
+        <div><strong>Direct multiple updates:</strong> {{ directMultipleUpdateCount }}</div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
 /**
  * Ejemplo de uso de los componentes popover-selector y language-selector
  */
@@ -8957,7 +9454,9 @@ class SelectorExamplesComponent {
             fill: 'outline',
             showCheckmark: true,
         };
-        // ✅ Ejemplos de Language Selector
+        // ✅ Ejemplos de Language Selector (con soporte multiidioma)
+        // Los nombres de idiomas se obtienen automáticamente del sistema de contenido
+        // y se muestran traducidos según el idioma actual de la aplicación
         this.basicLanguageSelector = {
             showLabel: true,
             label: 'Idioma',
@@ -8965,6 +9464,7 @@ class SelectorExamplesComponent {
             size: 'default',
             fill: 'outline',
         };
+        // Con banderas y nombres traducidos automáticamente
         this.flagLanguageSelector = {
             showLabel: true,
             label: 'Language / Idioma',
@@ -8973,6 +9473,7 @@ class SelectorExamplesComponent {
             size: 'large',
             fill: 'solid',
         };
+        // Con nombres personalizados (sobrescribe las traducciones automáticas)
         this.customLanguageSelector = {
             showLabel: true,
             labelConfig: {
@@ -8992,6 +9493,14 @@ class SelectorExamplesComponent {
                 de: 'Deutsch',
             },
         };
+        // Compacto sin etiqueta, solo banderas y nombres traducidos
+        this.compactLanguageSelector = {
+            showLabel: false,
+            showFlags: true,
+            color: 'tertiary',
+            size: 'small',
+            fill: 'clear',
+        };
     }
     // ✅ Event Handlers
     onCategoryChange(category) {
@@ -9004,7 +9513,9 @@ class SelectorExamplesComponent {
         console.log('Notifications changed:', notifications);
     }
     onLanguageChange(language) {
-        console.log('Language changed:', language);
+        console.log('Language changed to:', language);
+        // La aplicación automáticamente actualizará todos los nombres de idiomas
+        // según la nueva configuración de idioma seleccionada
     }
     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: `
@@ -9036,23 +9547,29 @@ class SelectorExamplesComponent {
 
       <!-- Language Selector -->
       <div class="section">
-        <h3>Selector de Idioma</h3>
+        <h3>Selector de Idioma (Multiidioma)</h3>
+        <p>Los nombres de idiomas se muestran traducidos según el idioma actual:</p>
 
         <div class="example-group">
-          <h4>Selector Básico:</h4>
+          <h4>Selector Básico (nombres traducidos):</h4>
           <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
         </div>
 
         <div class="example-group">
-          <h4>Selector con Banderas:</h4>
+          <h4>Selector con Banderas (nombres traducidos):</h4>
           <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
         </div>
 
         <div class="example-group">
-          <h4>Selector Personalizado:</h4>
+          <h4>Selector Personalizado (nombres propios):</h4>
           <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
           </val-language-selector>
         </div>
+
+        <div class="example-group">
+          <h4>Selector Compacto:</h4>
+          <val-language-selector [props]="compactLanguageSelector"> </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"] }] }); }
@@ -9088,23 +9605,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
       <!-- Language Selector -->
       <div class="section">
-        <h3>Selector de Idioma</h3>
+        <h3>Selector de Idioma (Multiidioma)</h3>
+        <p>Los nombres de idiomas se muestran traducidos según el idioma actual:</p>
 
         <div class="example-group">
-          <h4>Selector Básico:</h4>
+          <h4>Selector Básico (nombres traducidos):</h4>
           <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
         </div>
 
         <div class="example-group">
-          <h4>Selector con Banderas:</h4>
+          <h4>Selector con Banderas (nombres traducidos):</h4>
           <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
         </div>
 
         <div class="example-group">
-          <h4>Selector Personalizado:</h4>
+          <h4>Selector Personalizado (nombres propios):</h4>
           <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
           </val-language-selector>
         </div>
+
+        <div class="example-group">
+          <h4>Selector Compacto:</h4>
+          <val-language-selector [props]="compactLanguageSelector"> </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"] }]
@@ -9161,6 +9684,18 @@ const globalContentData = {
         language: 'Idioma',
         // Common confirmations
         areYouSure: '¿Estás seguro?',
+        // Language names (translated) - flat keys for type compatibility
+        languageName_es: 'Español',
+        languageName_en: 'Inglés',
+        languageName_fr: 'Francés',
+        languageName_de: 'Alemán',
+        languageName_pt: 'Portugués',
+        languageName_it: 'Italiano',
+        languageName_zh: 'Chino',
+        languageName_ja: 'Japonés',
+        languageName_ko: 'Coreano',
+        languageName_ru: 'Ruso',
+        languageName_ar: 'Árabe',
         deleteConfirmation: '¿Estás seguro de que deseas eliminar {itemName}?',
         unsavedChanges: 'Tienes cambios sin guardar. ¿Deseas continuar?',
         // Common placeholders
@@ -9193,8 +9728,21 @@ const globalContentData = {
         success: 'Success',
         warning: 'Warning',
         info: 'Information',
+        language: 'Language',
         // Common confirmations
         areYouSure: 'Are you sure?',
+        // Language names (translated) - flat keys for type compatibility
+        languageName_es: 'Spanish',
+        languageName_en: 'English',
+        languageName_fr: 'French',
+        languageName_de: 'German',
+        languageName_pt: 'Portuguese',
+        languageName_it: 'Italian',
+        languageName_zh: 'Chinese',
+        languageName_ja: 'Japanese',
+        languageName_ko: 'Korean',
+        languageName_ru: 'Russian',
+        languageName_ar: 'Arabic',
         deleteConfirmation: 'Are you sure you want to delete {itemName}?',
         unsavedChanges: 'You have unsaved changes. Do you want to continue?',
         // Common placeholders
@@ -9215,6 +9763,19 @@ const globalContentData = {
         success: 'Succès',
         // Common confirmations
         areYouSure: 'Êtes-vous sûr?',
+        // Language names (translated) - flat keys for type compatibility
+        languageName_es: 'Espagnol',
+        languageName_en: 'Anglais',
+        languageName_fr: 'Français',
+        languageName_de: 'Allemand',
+        languageName_pt: 'Portugais',
+        languageName_it: 'Italien',
+        languageName_zh: 'Chinois',
+        languageName_ja: 'Japonais',
+        languageName_ko: 'Coréen',
+        languageName_ru: 'Russe',
+        languageName_ar: 'Arabe',
+        language: 'Langue',
     },
     de: {
         // Common buttons - Another example of partial translation
@@ -9227,12 +9788,42 @@ const globalContentData = {
         error: 'Fehler',
         // Common confirmations
         areYouSure: 'Sind Sie sicher?',
+        // Language names (translated) - flat keys for type compatibility
+        languageName_es: 'Spanisch',
+        languageName_en: 'Englisch',
+        languageName_fr: 'Französisch',
+        languageName_de: 'Deutsch',
+        languageName_pt: 'Portugiesisch',
+        languageName_it: 'Italienisch',
+        languageName_zh: 'Chinesisch',
+        languageName_ja: 'Japanisch',
+        languageName_ko: 'Koreanisch',
+        languageName_ru: 'Russisch',
+        languageName_ar: 'Arabisch',
+        language: 'Sprache',
     },
 };
 const GlobalContent = new TextContent(globalContentData);
 const content = {
     _global: GlobalContent,
     LangSettings,
+    testReactivity: new TextContent({
+        es: {
+            welcomeMessage: '¡Bienvenido!',
+            saveButton: 'Guardar',
+            cancelButton: 'Cancelar',
+        },
+        en: {
+            welcomeMessage: 'Welcome!',
+            saveButton: 'Save',
+            cancelButton: 'Cancel',
+        },
+        fr: {
+            welcomeMessage: 'Bienvenue!',
+            saveButton: 'Enregistrer',
+            cancelButton: 'Annuler',
+        },
+    }),
 };
 
 /**
@@ -9290,5 +9881,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, 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 };
+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, ReactiveComponentsDemoComponent, ReactivityTestComponent, 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