valtech-components 2.0.536 → 2.0.538

package/fesm2022/valtech-components.mjs

@@ -4243,6 +4243,7 @@ class CountdownComponent {
     constructor() {
         this.complete = new EventEmitter();
         this.tick = new EventEmitter();
+        this.i18n = inject(I18nService);
         this.time = {
             days: 0,
             hours: 0,
@@ -4375,7 +4376,7 @@ class CountdownComponent {
         return labels[unit] || unit;
     }
     getExpiredMessage() {
-        return this.props.expiredMessage || 'Tiempo agotado';
+        return this.props.expiredMessage || this.i18n.t('timeExpired');
     }
     getColor() {
         if (this.props.color) {
@@ -5905,7 +5906,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: InputMetadata - Configuration for the input (form control, errors, etc.)
  */
 class HintComponent {
-    constructor() { }
+    constructor() {
+        this.i18n = inject(I18nService);
+    }
     ngOnInit() { }
     get shouldShowErrors() {
         if (this.props.control) {
@@ -5930,8 +5933,8 @@ class HintComponent {
             }
             else if (this.props.fromControl && this.props.toControl) {
                 // NUMBER_FROM_TO field - check both controls
-                const fromLabel = this.props.fromLabel || 'Inicial';
-                const toLabel = this.props.toLabel || 'Final';
+                const fromLabel = this.props.fromLabel || this.i18n.t('from');
+                const toLabel = this.props.toLabel || this.i18n.t('to');
                 if (this.props.fromControl.hasError(e)) {
                     errors.push(`${fromLabel}: ${this.props.errors[e]}`);
                 }
@@ -7079,7 +7082,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: NumberFromToMetadata - Configuration for the number range input.
  */
 class NumberFromToComponent {
-    constructor() { }
+    /** Get from label with i18n fallback */
+    getFromLabel() {
+        return this.props.fromLabel || this.i18n.t('from');
+    }
+    /** Get to label with i18n fallback */
+    getToLabel() {
+        return this.props.toLabel || this.i18n.t('to');
+    }
+    constructor() {
+        this.i18n = inject(I18nService);
+    }
     ngOnInit() {
         // Apply default values if configured
         if (this.props?.withDefault || this.props?.value) {
@@ -7140,7 +7153,7 @@ class NumberFromToComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFromToComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumberFromToComponent, isStandalone: true, selector: "val-number-from-to", inputs: { props: "props" }, ngImport: i0, template: `
     <div class="number-from-to-container">
-      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
+      <ion-label position="stacked">{{ getFromLabel() }}</ion-label>
       <ion-input
         [formControl]="fromControl"
         type="number"
@@ -7151,7 +7164,7 @@ class NumberFromToComponent {
       >
       </ion-input>
 
-      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
+      <ion-label position="stacked">{{ getToLabel() }}</ion-label>
       <ion-input
         [formControl]="toControl"
         type="number"
@@ -7168,7 +7181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'val-number-from-to', standalone: true, imports: [ReactiveFormsModule, IonInput, IonLabel], template: `
     <div class="number-from-to-container">
-      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
+      <ion-label position="stacked">{{ getFromLabel() }}</ion-label>
       <ion-input
         [formControl]="fromControl"
         type="number"
@@ -7179,7 +7192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       >
       </ion-input>
 
-      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
+      <ion-label position="stacked">{{ getToLabel() }}</ion-label>
       <ion-input
         [formControl]="toControl"
         type="number"
@@ -12605,8 +12618,17 @@ class NumberStepperComponent {
     constructor() {
         this.valueChange = new EventEmitter();
         this.states = ComponentStates;
+        this.i18n = inject(I18nService);
         this.valueSubscription = null;
     }
+    /** Get decrement button aria-label with i18n fallback */
+    getDecrementLabel() {
+        return this.props.decrementLabel || this.i18n.t('decrease');
+    }
+    /** Get increment button aria-label with i18n fallback */
+    getIncrementLabel() {
+        return this.props.incrementLabel || this.i18n.t('increase');
+    }
     ngOnInit() {
         // Ensure initial value is within bounds
         this.clampValue();
@@ -12747,7 +12769,7 @@ class NumberStepperComponent {
           [shape]="props.buttonShape || 'round'"
           [disabled]="isAtMin || props.state === states.DISABLED"
           (click)="decrement()"
-          [attr.aria-label]="props.decrementLabel || 'Disminuir'"
+          [attr.aria-label]="getDecrementLabel()"
         >
           <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
         </ion-button>
@@ -12780,7 +12802,7 @@ class NumberStepperComponent {
           [shape]="props.buttonShape || 'round'"
           [disabled]="isAtMax || props.state === states.DISABLED"
           (click)="increment()"
-          [attr.aria-label]="props.incrementLabel || 'Aumentar'"
+          [attr.aria-label]="getIncrementLabel()"
         >
           <ion-icon slot="icon-only" name="add-outline"></ion-icon>
         </ion-button>
@@ -12847,7 +12869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [shape]="props.buttonShape || 'round'"
           [disabled]="isAtMin || props.state === states.DISABLED"
           (click)="decrement()"
-          [attr.aria-label]="props.decrementLabel || 'Disminuir'"
+          [attr.aria-label]="getDecrementLabel()"
         >
           <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
         </ion-button>
@@ -12880,7 +12902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [shape]="props.buttonShape || 'round'"
           [disabled]="isAtMax || props.state === states.DISABLED"
           (click)="increment()"
-          [attr.aria-label]="props.incrementLabel || 'Aumentar'"
+          [attr.aria-label]="getIncrementLabel()"
         >
           <ion-icon slot="icon-only" name="add-outline"></ion-icon>
         </ion-button>
@@ -32777,8 +32799,9 @@ class DocsTocComponent {
         // Reactive state
         this.activeId = signal('');
         this.flatItems = signal([]);
-        this.observer = null;
         this.headingElements = [];
+        this.scrollHandler = null;
+        this.rafId = null;
     }
     ngOnInit() {
         this.updateFlatItems();
@@ -32868,34 +32891,57 @@ class DocsTocComponent {
             .filter((el) => el !== null);
         if (this.headingElements.length === 0)
             return;
-        const offsetTop = this.props.offsetTop ?? 100;
-        // Use IntersectionObserver for scroll spy
+        // Set initial active item
+        this.updateActiveHeading();
+        // Use scroll event with requestAnimationFrame for performance
         this.ngZone.runOutsideAngular(() => {
-            this.observer = new IntersectionObserver(entries => {
-                // Find the first visible heading
-                const visibleEntries = entries
-                    .filter(entry => entry.isIntersecting)
-                    .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
-                if (visibleEntries.length > 0) {
-                    const activeEntry = visibleEntries[0];
-                    this.ngZone.run(() => {
-                        this.activeId.set(activeEntry.target.id);
-                        this.sectionChange.emit(activeEntry.target.id);
-                    });
+            this.scrollHandler = () => {
+                if (this.rafId) {
+                    cancelAnimationFrame(this.rafId);
                 }
-            }, {
-                rootMargin: `-${offsetTop}px 0px -70% 0px`,
-                threshold: 0,
-            });
-            this.headingElements.forEach(el => {
-                this.observer?.observe(el);
-            });
+                this.rafId = requestAnimationFrame(() => {
+                    this.updateActiveHeading();
+                });
+            };
+            window.addEventListener('scroll', this.scrollHandler, { passive: true });
         });
     }
+    updateActiveHeading() {
+        const offsetTop = this.props.offsetTop ?? 100;
+        const scrollY = window.scrollY;
+        // Find the heading that is currently at or above the offset point
+        let activeHeading = null;
+        for (const heading of this.headingElements) {
+            const rect = heading.getBoundingClientRect();
+            const headingTop = rect.top + scrollY;
+            // If heading is at or above the trigger point (scrollY + offset)
+            if (headingTop <= scrollY + offsetTop + 10) {
+                activeHeading = heading;
+            }
+            else {
+                // Headings are in order, so we can stop once we find one below
+                break;
+            }
+        }
+        // If no heading is above the trigger point, use the first one
+        if (!activeHeading && this.headingElements.length > 0) {
+            activeHeading = this.headingElements[0];
+        }
+        if (activeHeading && activeHeading.id !== this.activeId()) {
+            this.ngZone.run(() => {
+                this.activeId.set(activeHeading.id);
+                this.sectionChange.emit(activeHeading.id);
+            });
+        }
+    }
     destroyScrollSpy() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
+        if (this.scrollHandler) {
+            window.removeEventListener('scroll', this.scrollHandler);
+            this.scrollHandler = null;
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
         }
         this.headingElements = [];
     }