valtech-components 2.0.981 → 2.0.983

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.981';
+const VERSION = '2.0.983';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -42668,12 +42668,6 @@ class PreferencesViewComponent {
         this.langHint = computed(() => this.t('languageHint'));
         this.fontSizeTitle = computed(() => this.t('fontSizeTitle'));
         this.fontSizeHint = computed(() => this.t('fontSizeHint'));
-        this.themeLight = computed(() => this.t('themeLight'));
-        this.themeDark = computed(() => this.t('themeDark'));
-        this.themeAuto = computed(() => this.t('themeAuto'));
-        this.fontSizeSmall = computed(() => this.t('fontSizeSmall'));
-        this.fontSizeMedium = computed(() => this.t('fontSizeMedium'));
-        this.fontSizeLarge = computed(() => this.t('fontSizeLarge'));
         this.langProps = computed(() => ({
             currentLanguage: this.prefs.language(),
             availableLanguages: this.resolvedConfig().supportedLanguages,
@@ -42682,6 +42676,28 @@ class PreferencesViewComponent {
             expand: 'block',
             fill: 'outline',
         }));
+        this.themePickerProps = computed(() => ({
+            selectedValue: this.prefs.theme(),
+            disabled: this.saving(),
+            fill: 'outline',
+            interface: 'popover',
+            options: [
+                { value: 'light', label: this.t('themeLight') },
+                { value: 'dark', label: this.t('themeDark') },
+                { value: 'auto', label: this.t('themeAuto') },
+            ],
+        }));
+        this.fontSizePickerProps = computed(() => ({
+            selectedValue: this.prefs.fontSize(),
+            disabled: this.saving(),
+            fill: 'outline',
+            interface: 'popover',
+            options: [
+                { value: 'small', label: this.t('fontSizeSmall') },
+                { value: 'medium', label: this.t('fontSizeMedium') },
+                { value: 'large', label: this.t('fontSizeLarge') },
+            ],
+        }));
         // Auto-registro i18n — respeta override del consumer. El namespace puede
         // venir de @Input.config o del route data; lo resolvemos acá.
         const ns = this.ns;
@@ -42691,14 +42707,16 @@ class PreferencesViewComponent {
         this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
     }
     async onThemeChange(value) {
-        if (this.saving() || value === this.prefs.theme())
+        const v = Array.isArray(value) ? value[0] : value;
+        if (this.saving() || v === this.prefs.theme())
             return;
-        const theme = value;
+        const theme = v;
         await this.dispatch(() => this.prefs.setTheme(theme), () => this.resolvedConfig().onThemeChanged?.(theme));
     }
     async onFontSizeChange(value) {
-        const fontSize = value;
-        if (this.saving() || value === this.prefs.fontSize())
+        const v = Array.isArray(value) ? value[0] : value;
+        const fontSize = v;
+        if (this.saving() || v === this.prefs.fontSize())
             return;
         await this.dispatch(() => this.prefs.setFontSize(fontSize), () => this.resolvedConfig().onFontSizeChanged?.(fontSize));
     }
@@ -42765,18 +42783,7 @@ class PreferencesViewComponent {
                 content: themeHint(),
               }"
             />
-            <ion-select
-              [value]="prefs.theme()"
-              [disabled]="saving()"
-              fill="outline"
-              expand="block"
-              interface="popover"
-              (ionChange)="onThemeChange($event.detail.value)"
-            >
-              <ion-select-option value="light">{{ themeLight() }}</ion-select-option>
-              <ion-select-option value="dark">{{ themeDark() }}</ion-select-option>
-              <ion-select-option value="auto">{{ themeAuto() }}</ion-select-option>
-            </ion-select>
+            <val-popover-selector [props]="themePickerProps()" (selectionChange)="onThemeChange($event)" />
           </div>
         </section>
       }
@@ -42824,30 +42831,18 @@ class PreferencesViewComponent {
                 content: fontSizeHint(),
               }"
             />
-            <ion-select
-              [value]="prefs.fontSize()"
-              [disabled]="saving()"
-              fill="outline"
-              expand="block"
-              interface="popover"
-              (ionChange)="onFontSizeChange($event.detail.value)"
-            >
-              <ion-select-option value="small">{{ fontSizeSmall() }}</ion-select-option>
-              <ion-select-option value="medium">{{ fontSizeMedium() }}</ion-select-option>
-              <ion-select-option value="large">{{ fontSizeLarge() }}</ion-select-option>
-            </ion-select>
+            <val-popover-selector [props]="fontSizePickerProps()" (selectionChange)="onFontSizeChange($event)" />
           </div>
         </section>
       }
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "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: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PreferencesViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-preferences-view', standalone: true, imports: [
                         CommonModule,
-                        IonSelect,
-                        IonSelectOption,
+                        PopoverSelectorComponent,
                         LanguageSelectorComponent,
                         DisplayComponent,
                         TitleComponent,
@@ -42885,18 +42880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 content: themeHint(),
               }"
             />
-            <ion-select
-              [value]="prefs.theme()"
-              [disabled]="saving()"
-              fill="outline"
-              expand="block"
-              interface="popover"
-              (ionChange)="onThemeChange($event.detail.value)"
-            >
-              <ion-select-option value="light">{{ themeLight() }}</ion-select-option>
-              <ion-select-option value="dark">{{ themeDark() }}</ion-select-option>
-              <ion-select-option value="auto">{{ themeAuto() }}</ion-select-option>
-            </ion-select>
+            <val-popover-selector [props]="themePickerProps()" (selectionChange)="onThemeChange($event)" />
           </div>
         </section>
       }
@@ -42944,18 +42928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 content: fontSizeHint(),
               }"
             />
-            <ion-select
-              [value]="prefs.fontSize()"
-              [disabled]="saving()"
-              fill="outline"
-              expand="block"
-              interface="popover"
-              (ionChange)="onFontSizeChange($event.detail.value)"
-            >
-              <ion-select-option value="small">{{ fontSizeSmall() }}</ion-select-option>
-              <ion-select-option value="medium">{{ fontSizeMedium() }}</ion-select-option>
-              <ion-select-option value="large">{{ fontSizeLarge() }}</ion-select-option>
-            </ion-select>
+            <val-popover-selector [props]="fontSizePickerProps()" (selectionChange)="onFontSizeChange($event)" />
           </div>
         </section>
       }
@@ -43708,6 +43681,7 @@ function makeTable(rows) {
  */
 class FaqComponent {
     constructor() {
+        this.i18n = inject(I18nService);
         this.props_ = signal({ categories: [] });
         /** Término de búsqueda actual. */
         this.query = signal('');
@@ -43717,10 +43691,11 @@ class FaqComponent {
          * Keyed por id de item (los ids son únicos en toda la FAQ).
          */
         this.parsedAnswers = computed(() => {
+            const locale = (this.i18n.lang() ?? 'es');
             const map = new Map();
             for (const cat of this.props_().categories ?? []) {
                 for (const item of cat.items) {
-                    map.set(item.id, parseMarkdownArticle(item.answer));
+                    map.set(item.id, parseMarkdownArticle(item.answer, { locale }));
                 }
             }
             return map;
@@ -45532,8 +45507,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * `markdown-article-parser.ts` and is also usable from Node scripts (build-time generation).
  */
 class MarkdownArticleParserService {
-    parse(markdown, config) {
-        return parseMarkdownArticle(markdown, config);
+    parse(markdown, config, locale) {
+        return parseMarkdownArticle(markdown, { ...config, locale });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MarkdownArticleParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MarkdownArticleParserService, providedIn: 'root' }); }
@@ -49728,7 +49703,8 @@ class ContentService {
      * @param config - Override parcial de la `ArticleMetadata` resultante.
      */
     toArticle(doc, config) {
-        return this.parser.parse(doc.body, config);
+        const locale = (doc.locale ?? 'es');
+        return this.parser.parse(doc.body, config, locale);
     }
     /** Limpia la cache de fuentes estáticas. Llamar al cambiar de locale en runtime. */
     invalidate() {