@devjuliovilla/jv-ui 1.10.0 → 1.11.1

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, forwardRef, inject, output, Directive, Injectable, signal, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, effect, contentChildren, HostListener, viewChild, viewChildren, afterNextRender, Renderer2, ElementRef } from '@angular/core';
+import { input, computed, Component, forwardRef, inject, output, Directive, Injectable, signal, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, effect, contentChildren, HostListener, viewChild, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -18729,6 +18729,7 @@ const JV_UI_DEFAULT_CONFIG = {
         percent: { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 },
     },
     toastPosition: 'bottom-right',
+    tabsTransition: 'none',
 };
 
 class JvFormatService {
@@ -19026,6 +19027,12 @@ const ES = {
     'dialog.cancel': 'Cancelar',
     'common.expanded': 'Expandido',
     'common.collapsed': 'Colapsado',
+    'slider.prevImage': 'Imagen anterior',
+    'slider.nextImage': 'Imagen siguiente',
+    'slider.thumbnailList': 'Miniaturas de imagenes',
+    'gallery.close': 'Cerrar',
+    'gallery.prevImage': 'Imagen anterior',
+    'gallery.nextImage': 'Imagen siguiente',
 };
 
 const EN = {
@@ -19088,6 +19095,12 @@ const EN = {
     'dialog.cancel': 'Cancel',
     'common.expanded': 'Expanded',
     'common.collapsed': 'Collapsed',
+    'slider.prevImage': 'Previous image',
+    'slider.nextImage': 'Next image',
+    'slider.thumbnailList': 'Image thumbnails',
+    'gallery.close': 'Close',
+    'gallery.prevImage': 'Previous image',
+    'gallery.nextImage': 'Next image',
 };
 
 const JV_LOCALE_DICTIONARIES = {
@@ -19923,10 +19936,10 @@ class JvDatePickerComponent {
     visibleMonth = signal(firstOfMonth(new Date()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
     focusedDate = signal(startOfDay(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     dialogId = `jv-date-picker-dialog-${this.instanceId}`;
-    value = null;
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = false;
     resolvedDialogTitle = computed(() => this.dialogTitle() || this.translation.translate('datePicker.dialogTitle'), ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
-    currentValue = computed(() => this.valueInput() !== undefined ? this.valueInput() : this.value, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => this.valueInput() !== undefined ? this.valueInput() : this.value(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
     triggerAriaLabel = computed(() => {
         const name = this.label() || this.resolvedDialogTitle();
         return `${name}. ${this.displayValue()}`;
@@ -19974,7 +19987,7 @@ class JvDatePickerComponent {
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) {
-        this.value = value ? startOfDay(value) : null;
+        this.value.set(value ? startOfDay(value) : null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -20080,7 +20093,7 @@ class JvDatePickerComponent {
         this.onTouched();
     }
     updateValue(value) {
-        this.value = value;
+        this.value.set(value);
         this.onChange(value);
         this.selectionChange.emit(value);
     }
@@ -21242,6 +21255,535 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-textarea{width:100%;min-height:var(--jv-density-control-height);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);resize:vertical;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box}.jv-textarea::placeholder{color:var(--jv-color-foreground-muted)}.jv-textarea.is-invalid{border-color:var(--jv-color-danger)}.jv-textarea:disabled{opacity:.7;cursor:not-allowed}.jv-textarea:read-only{background:var(--jv-color-surface-muted);cursor:default}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
+class JvImageGalleryComponent {
+    translation = inject(JvTranslationService);
+    images = input([], ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    stripHeightVh = input(25, { ...(ngDevMode ? { debugName: "stripHeightVh" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    imageClick = output();
+    actionClick = output();
+    strip = viewChild('strip', ...(ngDevMode ? [{ debugName: "strip" }] : /* istanbul ignore next */ []));
+    dialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "dialogOpen" }] : /* istanbul ignore next */ []));
+    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    slideDirection = signal(null, ...(ngDevMode ? [{ debugName: "slideDirection" }] : /* istanbul ignore next */ []));
+    hasMultiple = computed(() => this.images().length > 1, ...(ngDevMode ? [{ debugName: "hasMultiple" }] : /* istanbul ignore next */ []));
+    stripHeightStyle = computed(() => `${this.clampStripHeight(this.stripHeightVh())}vh`, ...(ngDevMode ? [{ debugName: "stripHeightStyle" }] : /* istanbul ignore next */ []));
+    currentImage = computed(() => this.images()[this.currentIndex()] ?? null, ...(ngDevMode ? [{ debugName: "currentImage" }] : /* istanbul ignore next */ []));
+    dialogTitle = computed(() => {
+        const image = this.currentImage();
+        if (!image)
+            return '';
+        const counter = this.hasMultiple() ? ` (${this.currentIndex() + 1}/${this.images().length})` : '';
+        return `${image.alt}${counter}`;
+    }, ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    translatedLabels = computed(() => ({
+        close: this.translation.translate('gallery.close'),
+        prev: this.translation.translate('gallery.prevImage'),
+        next: this.translation.translate('gallery.nextImage'),
+    }), ...(ngDevMode ? [{ debugName: "translatedLabels" }] : /* istanbul ignore next */ []));
+    handleKeydown(event) {
+        if (!this.dialogOpen())
+            return;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.previous();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+        }
+    }
+    onWheel(event) {
+        const el = this.strip()?.nativeElement;
+        if (!el)
+            return;
+        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+            const delta = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+                ? event.deltaY * 32
+                : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+                    ? event.deltaY * el.clientWidth
+                    : event.deltaY;
+            const firstThumb = el.querySelector('.jv-gallery-thumb');
+            const gap = Number.parseFloat(getComputedStyle(el).columnGap || getComputedStyle(el).gap || '0') || 0;
+            const step = firstThumb ? firstThumb.getBoundingClientRect().width + gap : 0;
+            const offset = Math.sign(delta) * Math.max(Math.abs(delta), step);
+            event.preventDefault();
+            el.scrollLeft += offset;
+        }
+    }
+    openDialog(index) {
+        this.currentIndex.set(index);
+        this.slideDirection.set(null);
+        this.dialogOpen.set(true);
+        this.imageClick.emit(this.images()[index]);
+    }
+    closeDialog() {
+        this.dialogOpen.set(false);
+        this.slideDirection.set(null);
+    }
+    previous() {
+        if (!this.hasMultiple())
+            return;
+        const newIndex = this.currentIndex() === 0
+            ? this.images().length - 1
+            : this.currentIndex() - 1;
+        this.showImage(newIndex, 'right');
+    }
+    next() {
+        if (!this.hasMultiple())
+            return;
+        const newIndex = this.currentIndex() === this.images().length - 1
+            ? 0
+            : this.currentIndex() + 1;
+        this.showImage(newIndex, 'left');
+    }
+    onAction(action) {
+        const image = this.currentImage();
+        if (image) {
+            this.actionClick.emit({ actionId: action.id, image });
+        }
+    }
+    clampStripHeight(value) {
+        if (!Number.isFinite(value)) {
+            return 25;
+        }
+        return Math.min(100, Math.max(0, value));
+    }
+    showImage(index, direction) {
+        this.slideDirection.set(null);
+        this.currentIndex.set(index);
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => this.slideDirection.set(direction));
+            return;
+        }
+        this.slideDirection.set(direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvImageGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvImageGalleryComponent, isStandalone: true, selector: "jv-image-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, stripHeightVh: { classPropertyName: "stripHeightVh", publicName: "stripHeightVh", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageClick: "imageClick", actionClick: "actionClick" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "strip", first: true, predicate: ["strip"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="jv-gallery">
+      <div class="jv-gallery-strip" #strip [style.height]="stripHeightStyle()" (wheel)="onWheel($event)">
+        @for (image of images(); track image.src; let i = $index) {
+          <button
+            type="button"
+            class="jv-gallery-thumb"
+            [class.jv-gallery-thumb--active]="dialogOpen() && currentIndex() === i"
+            [attr.aria-label]="image.alt"
+            (wheel)="onWheel($event)"
+            (click)="openDialog(i)"
+          >
+            <img
+              class="jv-gallery-thumb-image"
+              [src]="image.thumbnail || image.src"
+              [alt]="image.alt"
+              loading="lazy"
+            />
+          </button>
+        }
+      </div>
+
+      <jv-dialog
+        [open]="dialogOpen()"
+        [title]="dialogTitle()"
+        (closed)="closeDialog()"
+      >
+        <div class="jv-gallery-viewer" tabindex="0">
+          @if (currentImage(); as image) {
+            <img
+              class="jv-gallery-viewer-image"
+              [class.jv-gallery-viewer-image--slide-left]="slideDirection() === 'left'"
+              [class.jv-gallery-viewer-image--slide-right]="slideDirection() === 'right'"
+              [src]="image.src"
+              [alt]="image.alt"
+            />
+          }
+
+          @if (hasMultiple()) {
+            <button
+              type="button"
+              class="jv-gallery-viewer-nav jv-gallery-viewer-nav--prev"
+              [attr.aria-label]="translatedLabels().prev"
+              (click)="previous(); $event.stopPropagation()"
+            >
+              <jv-icon name="chevron-left" [size]="24" />
+            </button>
+
+            <button
+              type="button"
+              class="jv-gallery-viewer-nav jv-gallery-viewer-nav--next"
+              [attr.aria-label]="translatedLabels().next"
+              (click)="next(); $event.stopPropagation()"
+            >
+              <jv-icon name="chevron-right" [size]="24" />
+            </button>
+
+            <span class="jv-gallery-viewer-counter">
+              {{ currentIndex() + 1 }} / {{ images().length }}
+            </span>
+          }
+        </div>
+
+        <div dialog-actions>
+          @for (action of actions(); track action.id) {
+            <jv-button
+              [variant]="action.tone ?? 'outline'"
+              (click)="onAction(action)"
+            >
+              @if (action.icon) {
+                <jv-icon [name]="action.icon" [size]="16" />
+              }
+              {{ action.label }}
+            </jv-button>
+          }
+          <jv-button variant="ghost" (click)="closeDialog()">
+            {{ translatedLabels().close }}
+          </jv-button>
+        </div>
+      </jv-dialog>
+    </div>
+  `, isInline: true, styles: [".jv-gallery{display:block;width:100%;max-width:100vw}.jv-gallery-strip{display:flex;gap:5px;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.jv-gallery-strip::-webkit-scrollbar{display:none}.jv-gallery-thumb{flex:0 0 auto;width:calc((100vw - 20px)/4);min-width:120px;height:100%;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:border-color .16s ease,opacity .16s ease}.jv-gallery-thumb:hover{opacity:.85}.jv-gallery-thumb--active{border-color:var(--jv-color-primary)}.jv-gallery-thumb:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-thumb-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.jv-gallery-viewer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:70vh;min-height:300px;background:#000;border-radius:var(--jv-radius-md);overflow:hidden}.jv-gallery-viewer:focus{outline:none}.jv-gallery-viewer-image{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}@keyframes gallery-slide-left{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes gallery-slide-right{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.jv-gallery-viewer-image--slide-left{animation:gallery-slide-left .28s ease-out}.jv-gallery-viewer-image--slide-right{animation:gallery-slide-right .28s ease-out}.jv-gallery-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:var(--jv-radius-md);background:#00000080;color:#fff;cursor:pointer;transition:background-color .16s ease;z-index:1}.jv-gallery-viewer-nav:hover{background:#000000bf}.jv-gallery-viewer-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-md)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-md)}.jv-gallery-viewer-counter{position:absolute;bottom:var(--jv-spacing-md);left:50%;transform:translate(-50%);padding:var(--jv-spacing-xs) var(--jv-spacing-sm);border-radius:var(--jv-radius-sm);background:#0009;color:#fff;font-size:.8125rem;font-variant-numeric:tabular-nums;pointer-events:none}@media(max-width:768px){.jv-gallery-thumb{width:calc(100vw - 20px);min-width:200px}.jv-gallery-viewer-nav{width:2.5rem;height:2.5rem}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-sm)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-sm)}}@media(prefers-reduced-motion:reduce){.jv-gallery-strip{scroll-behavior:auto}.jv-gallery-viewer-image--slide-left,.jv-gallery-viewer-image--slide-right{animation:none}}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvImageGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-image-gallery', standalone: true, imports: [JvButtonComponent, JvDialogComponent, JvIconComponent], template: `
+    <div class="jv-gallery">
+      <div class="jv-gallery-strip" #strip [style.height]="stripHeightStyle()" (wheel)="onWheel($event)">
+        @for (image of images(); track image.src; let i = $index) {
+          <button
+            type="button"
+            class="jv-gallery-thumb"
+            [class.jv-gallery-thumb--active]="dialogOpen() && currentIndex() === i"
+            [attr.aria-label]="image.alt"
+            (wheel)="onWheel($event)"
+            (click)="openDialog(i)"
+          >
+            <img
+              class="jv-gallery-thumb-image"
+              [src]="image.thumbnail || image.src"
+              [alt]="image.alt"
+              loading="lazy"
+            />
+          </button>
+        }
+      </div>
+
+      <jv-dialog
+        [open]="dialogOpen()"
+        [title]="dialogTitle()"
+        (closed)="closeDialog()"
+      >
+        <div class="jv-gallery-viewer" tabindex="0">
+          @if (currentImage(); as image) {
+            <img
+              class="jv-gallery-viewer-image"
+              [class.jv-gallery-viewer-image--slide-left]="slideDirection() === 'left'"
+              [class.jv-gallery-viewer-image--slide-right]="slideDirection() === 'right'"
+              [src]="image.src"
+              [alt]="image.alt"
+            />
+          }
+
+          @if (hasMultiple()) {
+            <button
+              type="button"
+              class="jv-gallery-viewer-nav jv-gallery-viewer-nav--prev"
+              [attr.aria-label]="translatedLabels().prev"
+              (click)="previous(); $event.stopPropagation()"
+            >
+              <jv-icon name="chevron-left" [size]="24" />
+            </button>
+
+            <button
+              type="button"
+              class="jv-gallery-viewer-nav jv-gallery-viewer-nav--next"
+              [attr.aria-label]="translatedLabels().next"
+              (click)="next(); $event.stopPropagation()"
+            >
+              <jv-icon name="chevron-right" [size]="24" />
+            </button>
+
+            <span class="jv-gallery-viewer-counter">
+              {{ currentIndex() + 1 }} / {{ images().length }}
+            </span>
+          }
+        </div>
+
+        <div dialog-actions>
+          @for (action of actions(); track action.id) {
+            <jv-button
+              [variant]="action.tone ?? 'outline'"
+              (click)="onAction(action)"
+            >
+              @if (action.icon) {
+                <jv-icon [name]="action.icon" [size]="16" />
+              }
+              {{ action.label }}
+            </jv-button>
+          }
+          <jv-button variant="ghost" (click)="closeDialog()">
+            {{ translatedLabels().close }}
+          </jv-button>
+        </div>
+      </jv-dialog>
+    </div>
+  `, styles: [".jv-gallery{display:block;width:100%;max-width:100vw}.jv-gallery-strip{display:flex;gap:5px;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.jv-gallery-strip::-webkit-scrollbar{display:none}.jv-gallery-thumb{flex:0 0 auto;width:calc((100vw - 20px)/4);min-width:120px;height:100%;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:border-color .16s ease,opacity .16s ease}.jv-gallery-thumb:hover{opacity:.85}.jv-gallery-thumb--active{border-color:var(--jv-color-primary)}.jv-gallery-thumb:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-thumb-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.jv-gallery-viewer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:70vh;min-height:300px;background:#000;border-radius:var(--jv-radius-md);overflow:hidden}.jv-gallery-viewer:focus{outline:none}.jv-gallery-viewer-image{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}@keyframes gallery-slide-left{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes gallery-slide-right{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.jv-gallery-viewer-image--slide-left{animation:gallery-slide-left .28s ease-out}.jv-gallery-viewer-image--slide-right{animation:gallery-slide-right .28s ease-out}.jv-gallery-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:var(--jv-radius-md);background:#00000080;color:#fff;cursor:pointer;transition:background-color .16s ease;z-index:1}.jv-gallery-viewer-nav:hover{background:#000000bf}.jv-gallery-viewer-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-md)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-md)}.jv-gallery-viewer-counter{position:absolute;bottom:var(--jv-spacing-md);left:50%;transform:translate(-50%);padding:var(--jv-spacing-xs) var(--jv-spacing-sm);border-radius:var(--jv-radius-sm);background:#0009;color:#fff;font-size:.8125rem;font-variant-numeric:tabular-nums;pointer-events:none}@media(max-width:768px){.jv-gallery-thumb{width:calc(100vw - 20px);min-width:200px}.jv-gallery-viewer-nav{width:2.5rem;height:2.5rem}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-sm)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-sm)}}@media(prefers-reduced-motion:reduce){.jv-gallery-strip{scroll-behavior:auto}.jv-gallery-viewer-image--slide-left,.jv-gallery-viewer-image--slide-right{animation:none}}\n"] }]
+        }], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], stripHeightVh: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripHeightVh", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], imageClick: [{ type: i0.Output, args: ["imageClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], strip: [{ type: i0.ViewChild, args: ['strip', { isSignal: true }] }], handleKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class JvImageSliderComponent {
+    thumbnailStripRef = viewChild('thumbnailStrip', ...(ngDevMode ? [{ debugName: "thumbnailStripRef" }] : /* istanbul ignore next */ []));
+    translation = inject(JvTranslationService);
+    images = input([], ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    showThumbnails = input(true, ...(ngDevMode ? [{ debugName: "showThumbnails" }] : /* istanbul ignore next */ []));
+    showDescription = input(true, ...(ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []));
+    imageChange = output();
+    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    hasMultiple = computed(() => this.images().length > 1, ...(ngDevMode ? [{ debugName: "hasMultiple" }] : /* istanbul ignore next */ []));
+    currentImage = computed(() => this.images()[this.currentIndex()] ?? null, ...(ngDevMode ? [{ debugName: "currentImage" }] : /* istanbul ignore next */ []));
+    translatedAriaLabels = computed(() => ({
+        prev: this.translation.translate('slider.prevImage'),
+        next: this.translation.translate('slider.nextImage'),
+        thumbnailList: this.translation.translate('slider.thumbnailList'),
+    }), ...(ngDevMode ? [{ debugName: "translatedAriaLabels" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const images = this.images();
+            if (images.length > 0 && this.currentIndex() >= images.length) {
+                this.currentIndex.set(0);
+            }
+        });
+    }
+    handleKeydown(event) {
+        if (!this.hasMultiple()) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.previous();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.images().length - 1);
+                break;
+        }
+    }
+    previous() {
+        if (!this.hasMultiple()) {
+            return;
+        }
+        const newIndex = this.currentIndex() === 0
+            ? this.images().length - 1
+            : this.currentIndex() - 1;
+        this.goTo(newIndex);
+    }
+    next() {
+        if (!this.hasMultiple()) {
+            return;
+        }
+        const newIndex = this.currentIndex() === this.images().length - 1
+            ? 0
+            : this.currentIndex() + 1;
+        this.goTo(newIndex);
+    }
+    goTo(index) {
+        if (index === this.currentIndex() || index < 0 || index >= this.images().length) {
+            return;
+        }
+        this.currentIndex.set(index);
+        this.imageChange.emit(index);
+        this.scrollThumbnailIntoView(index);
+    }
+    scrollThumbnailIntoView(index) {
+        const strip = this.thumbnailStripRef()?.nativeElement;
+        if (!strip) {
+            return;
+        }
+        const thumbnails = strip.children;
+        if (thumbnails[index]) {
+            thumbnails[index].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvImageSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvImageSliderComponent, isStandalone: true, selector: "jv-image-slider", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageChange: "imageChange" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "thumbnailStripRef", first: true, predicate: ["thumbnailStrip"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="jv-slider">
+      <div class="jv-slider-main">
+        @if (hasMultiple()) {
+          <button
+            type="button"
+            class="jv-slider-nav jv-slider-nav--prev"
+            [attr.aria-label]="translatedAriaLabels().prev"
+            (click)="previous()"
+          >
+            <jv-icon name="chevron-left" [size]="20" />
+          </button>
+        }
+
+        <div class="jv-slider-stage">
+          @for (image of images(); track image.src; let i = $index) {
+            <div
+              class="jv-slider-slide"
+              [class.jv-slider-slide--active]="i === currentIndex()"
+            >
+              <img
+                class="jv-slider-image"
+                [src]="image.src"
+                [alt]="image.alt"
+                loading="lazy"
+              />
+            </div>
+          }
+        </div>
+
+        @if (hasMultiple()) {
+          <button
+            type="button"
+            class="jv-slider-nav jv-slider-nav--next"
+            [attr.aria-label]="translatedAriaLabels().next"
+            (click)="next()"
+          >
+            <jv-icon name="chevron-right" [size]="20" />
+          </button>
+        }
+      </div>
+
+      @if (currentImage(); as image) {
+        @if (showDescription() && image.description) {
+          <div class="jv-slider-description">
+            <p>{{ image.description }}</p>
+          </div>
+        }
+      }
+
+      @if (hasMultiple() && showThumbnails()) {
+        <div class="jv-slider-thumbnails" #thumbnailStrip role="tablist" [attr.aria-label]="translatedAriaLabels().thumbnailList">
+          @for (image of images(); track image.src; let i = $index) {
+            <button
+              type="button"
+              class="jv-slider-thumbnail"
+              [class.jv-slider-thumbnail--active]="i === currentIndex()"
+              role="tab"
+              [attr.aria-selected]="i === currentIndex() ? 'true' : 'false'"
+              [attr.aria-label]="image.alt"
+              (click)="goTo(i)"
+            >
+              <img
+                class="jv-slider-thumbnail-image"
+                [src]="image.thumbnail || image.src"
+                [alt]="image.alt"
+                loading="lazy"
+              />
+            </button>
+          }
+        </div>
+
+        <div class="jv-slider-counter">
+          {{ currentIndex() + 1 }} / {{ images().length }}
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".jv-slider{display:grid;gap:var(--jv-spacing-sm);width:100%;max-width:100%}.jv-slider-main{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--jv-spacing-xs)}.jv-slider-stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--jv-radius-md);background:var(--jv-color-surface-muted)}.jv-slider-slide{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}.jv-slider-slide--active{opacity:1;pointer-events:auto}.jv-slider-image{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.jv-slider-nav{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;flex-shrink:0;z-index:1}.jv-slider-nav:hover{background:var(--jv-color-surface-muted);border-color:var(--jv-color-foreground-muted)}.jv-slider-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-description{padding:var(--jv-spacing-sm) 0}.jv-slider-description p{margin:0;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground-muted);line-height:1.5}.jv-slider-thumbnails{display:flex;gap:var(--jv-spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:var(--jv-spacing-xs) 0}.jv-slider-thumbnails::-webkit-scrollbar{display:none}.jv-slider-thumbnail{flex:0 0 auto;width:3.5rem;height:3.5rem;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .16s ease,opacity .16s ease;opacity:.6}.jv-slider-thumbnail:hover{opacity:.85}.jv-slider-thumbnail--active{border-color:var(--jv-color-primary);opacity:1}.jv-slider-thumbnail:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-thumbnail-image{display:block;width:100%;height:100%;object-fit:cover}.jv-slider-counter{text-align:center;font-size:.8125rem;color:var(--jv-color-foreground-muted);font-variant-numeric:tabular-nums}@media(max-width:640px){.jv-slider-nav{width:2rem;height:2rem}.jv-slider-thumbnail{width:2.75rem;height:2.75rem}}@media(prefers-reduced-motion:reduce){.jv-slider-slide{transition:none}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvImageSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-image-slider', standalone: true, imports: [JvIconComponent], template: `
+    <div class="jv-slider">
+      <div class="jv-slider-main">
+        @if (hasMultiple()) {
+          <button
+            type="button"
+            class="jv-slider-nav jv-slider-nav--prev"
+            [attr.aria-label]="translatedAriaLabels().prev"
+            (click)="previous()"
+          >
+            <jv-icon name="chevron-left" [size]="20" />
+          </button>
+        }
+
+        <div class="jv-slider-stage">
+          @for (image of images(); track image.src; let i = $index) {
+            <div
+              class="jv-slider-slide"
+              [class.jv-slider-slide--active]="i === currentIndex()"
+            >
+              <img
+                class="jv-slider-image"
+                [src]="image.src"
+                [alt]="image.alt"
+                loading="lazy"
+              />
+            </div>
+          }
+        </div>
+
+        @if (hasMultiple()) {
+          <button
+            type="button"
+            class="jv-slider-nav jv-slider-nav--next"
+            [attr.aria-label]="translatedAriaLabels().next"
+            (click)="next()"
+          >
+            <jv-icon name="chevron-right" [size]="20" />
+          </button>
+        }
+      </div>
+
+      @if (currentImage(); as image) {
+        @if (showDescription() && image.description) {
+          <div class="jv-slider-description">
+            <p>{{ image.description }}</p>
+          </div>
+        }
+      }
+
+      @if (hasMultiple() && showThumbnails()) {
+        <div class="jv-slider-thumbnails" #thumbnailStrip role="tablist" [attr.aria-label]="translatedAriaLabels().thumbnailList">
+          @for (image of images(); track image.src; let i = $index) {
+            <button
+              type="button"
+              class="jv-slider-thumbnail"
+              [class.jv-slider-thumbnail--active]="i === currentIndex()"
+              role="tab"
+              [attr.aria-selected]="i === currentIndex() ? 'true' : 'false'"
+              [attr.aria-label]="image.alt"
+              (click)="goTo(i)"
+            >
+              <img
+                class="jv-slider-thumbnail-image"
+                [src]="image.thumbnail || image.src"
+                [alt]="image.alt"
+                loading="lazy"
+              />
+            </button>
+          }
+        </div>
+
+        <div class="jv-slider-counter">
+          {{ currentIndex() + 1 }} / {{ images().length }}
+        </div>
+      }
+    </div>
+  `, styles: [".jv-slider{display:grid;gap:var(--jv-spacing-sm);width:100%;max-width:100%}.jv-slider-main{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--jv-spacing-xs)}.jv-slider-stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--jv-radius-md);background:var(--jv-color-surface-muted)}.jv-slider-slide{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}.jv-slider-slide--active{opacity:1;pointer-events:auto}.jv-slider-image{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.jv-slider-nav{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;flex-shrink:0;z-index:1}.jv-slider-nav:hover{background:var(--jv-color-surface-muted);border-color:var(--jv-color-foreground-muted)}.jv-slider-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-description{padding:var(--jv-spacing-sm) 0}.jv-slider-description p{margin:0;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground-muted);line-height:1.5}.jv-slider-thumbnails{display:flex;gap:var(--jv-spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:var(--jv-spacing-xs) 0}.jv-slider-thumbnails::-webkit-scrollbar{display:none}.jv-slider-thumbnail{flex:0 0 auto;width:3.5rem;height:3.5rem;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .16s ease,opacity .16s ease;opacity:.6}.jv-slider-thumbnail:hover{opacity:.85}.jv-slider-thumbnail--active{border-color:var(--jv-color-primary);opacity:1}.jv-slider-thumbnail:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-thumbnail-image{display:block;width:100%;height:100%;object-fit:cover}.jv-slider-counter{text-align:center;font-size:.8125rem;color:var(--jv-color-foreground-muted);font-variant-numeric:tabular-nums}@media(max-width:640px){.jv-slider-nav{width:2rem;height:2rem}.jv-slider-thumbnail{width:2.75rem;height:2.75rem}}@media(prefers-reduced-motion:reduce){.jv-slider-slide{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { thumbnailStripRef: [{ type: i0.ViewChild, args: ['thumbnailStrip', { isSignal: true }] }], images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], imageChange: [{ type: i0.Output, args: ["imageChange"] }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 class JvDialogService {
     announcementService = inject(JvAnnouncementService);
     translation = inject(JvTranslationService);
@@ -22125,12 +22667,25 @@ class JvTabsComponent {
     instanceId = ++tabsSequence;
     panelTemplates = contentChildren(JvTabPanelDirective, ...(ngDevMode ? [{ debugName: "panelTemplates" }] : /* istanbul ignore next */ []));
     tabListRef = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []));
+    config = inject(JvUiConfigService);
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeTabId = input(null, ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
     keepMounted = input(true, ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    transition = input(null, ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
     activeTabChange = output();
     showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : /* istanbul ignore next */ []));
     showScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : /* istanbul ignore next */ []));
+    slideDirection = signal('right', ...(ngDevMode ? [{ debugName: "slideDirection" }] : /* istanbul ignore next */ []));
+    outgoingPanelId = signal(null, ...(ngDevMode ? [{ debugName: "outgoingPanelId" }] : /* istanbul ignore next */ []));
+    previousActiveTabId = signal(null, ...(ngDevMode ? [{ debugName: "previousActiveTabId" }] : /* istanbul ignore next */ []));
+    effectiveTransition = computed(() => {
+        const local = this.transition();
+        if (local !== null) {
+            return local === 'slide' && this.keepMounted() ? 'fade' : local;
+        }
+        const global = this.config.snapshot.tabsTransition;
+        return global === 'slide' && this.keepMounted() ? 'fade' : global;
+    }, ...(ngDevMode ? [{ debugName: "effectiveTransition" }] : /* istanbul ignore next */ []));
     resolvedActiveTabId = computed(() => {
         const enabledTabs = this.tabs().filter((tab) => !tab.disabled);
         const requestedId = this.activeTabId();
@@ -22150,6 +22705,20 @@ class JvTabsComponent {
                 this.updateScrollControls();
             });
         });
+        effect(() => {
+            const activeId = this.resolvedActiveTabId();
+            const prevId = this.previousActiveTabId();
+            if (activeId !== prevId && prevId !== null && !this.keepMounted()) {
+                const enabledTabs = this.tabs().filter((t) => !t.disabled);
+                const newIndex = enabledTabs.findIndex((t) => t.id === activeId);
+                const oldIndex = enabledTabs.findIndex((t) => t.id === prevId);
+                if (newIndex !== oldIndex) {
+                    this.slideDirection.set(newIndex > oldIndex ? 'left' : 'right');
+                }
+                this.outgoingPanelId.set(prevId);
+            }
+            this.previousActiveTabId.set(activeId);
+        });
     }
     ngAfterViewInit() {
         this.updateScrollControls();
@@ -22174,6 +22743,14 @@ class JvTabsComponent {
         this.activeTabChange.emit(tabId);
         queueMicrotask(() => this.focusTabButton(tabId));
     }
+    handleTransitionEnd(event) {
+        if (event.propertyName !== 'opacity' && event.propertyName !== 'transform') {
+            return;
+        }
+        if (!this.keepMounted() && this.outgoingPanelId()) {
+            this.outgoingPanelId.set(null);
+        }
+    }
     handleKeydown(event, currentTabId) {
         const enabledTabs = this.tabs().filter((tab) => !tab.disabled);
         if (enabledTabs.length === 0) {
@@ -22254,148 +22831,194 @@ class JvTabsComponent {
         return (Array.from(tabList.querySelectorAll('[data-jv-tab-id]')).find((button) => button.dataset['jvTabId'] === tabId) ?? null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTabsComponent, isStandalone: true, selector: "jv-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabChange: "activeTabChange" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, queries: [{ propertyName: "panelTemplates", predicate: JvTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="jv-tabs">
-      <div class="jv-tabs-header">
-        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
-          @for (tab of tabs(); track tab.id) {
-            <button
-              type="button"
-              class="jv-tab"
-              [class.jv-tab--active]="isActive(tab.id)"
-              [class.jv-tab--disabled]="tab.disabled ?? false"
-              [id]="tabButtonId(tab.id)"
-              [attr.data-jv-tab-id]="tab.id"
-              role="tab"
-              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
-              [attr.aria-controls]="panelId(tab.id)"
-              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
-              [disabled]="tab.disabled ?? false"
-              (click)="activateTab(tab.id)"
-              (keydown)="handleKeydown($event, tab.id)"
-            >
-              @if (tab.icon) {
-                <jv-icon [name]="tab.icon" [size]="16" />
-              }
-              <span>{{ tab.label }}</span>
-            </button>
-          }
-        </div>
-
-        @if (showScrollLeft() || showScrollRight()) {
-          <div class="jv-tabs-controls" aria-hidden="true">
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
-              <jv-icon name="chevron-left" [size]="16" />
-            </button>
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
-              <jv-icon name="chevron-right" [size]="16" />
-            </button>
-          </div>
-        }
-      </div>
-
-      <div class="jv-tabs-panels">
-        @if (keepMounted()) {
-          @for (tab of tabs(); track tab.id) {
-            <div
-              class="jv-tab-panel"
-              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
-              [id]="panelId(tab.id)"
-              role="tabpanel"
-              [attr.aria-labelledby]="tabButtonId(tab.id)"
-              [attr.tabindex]="isActive(tab.id) ? 0 : null"
-              [hidden]="!isActive(tab.id)"
-            >
-              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
-            </div>
-          }
-        } @else if (resolvedActiveTabId(); as activeId) {
-          <div
-            class="jv-tab-panel"
-            [id]="panelId(activeId)"
-            role="tabpanel"
-            [attr.aria-labelledby]="tabButtonId(activeId)"
-            tabindex="0"
-          >
-            <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
-          </div>
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTabsComponent, isStandalone: true, selector: "jv-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabChange: "activeTabChange" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, queries: [{ propertyName: "panelTemplates", predicate: JvTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="jv-tabs">
+      <div class="jv-tabs-header">
+        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+          @for (tab of tabs(); track tab.id) {
+            <button
+              type="button"
+              class="jv-tab"
+              [class.jv-tab--active]="isActive(tab.id)"
+              [class.jv-tab--disabled]="tab.disabled ?? false"
+              [id]="tabButtonId(tab.id)"
+              [attr.data-jv-tab-id]="tab.id"
+              role="tab"
+              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
+              [attr.aria-controls]="panelId(tab.id)"
+              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
+              [disabled]="tab.disabled ?? false"
+              (click)="activateTab(tab.id)"
+              (keydown)="handleKeydown($event, tab.id)"
+            >
+              @if (tab.icon) {
+                <jv-icon [name]="tab.icon" [size]="16" />
+              }
+              <span>{{ tab.label }}</span>
+            </button>
+          }
+        </div>
+
+        @if (showScrollLeft() || showScrollRight()) {
+          <div class="jv-tabs-controls" aria-hidden="true">
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+              <jv-icon name="chevron-left" [size]="16" />
+            </button>
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+              <jv-icon name="chevron-right" [size]="16" />
+            </button>
+          </div>
+        }
+      </div>
+
+      <div class="jv-tabs-panels">
+        @if (keepMounted()) {
+          @for (tab of tabs(); track tab.id) {
+            <div
+              class="jv-tab-panel"
+              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(tab.id)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.tabindex]="isActive(tab.id) ? 0 : null"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
+            </div>
+          }
+        } @else {
+          @if (outgoingPanelId(); as outgoingId) {
+            <div
+              class="jv-tab-panel jv-tab-panel--exit"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(outgoingId)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(outgoingId)"
+              tabindex="-1"
+              (transitionend)="handleTransitionEnd($event)"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(outgoingId) ?? null" />
+            </div>
+          }
+
+          @if (resolvedActiveTabId(); as activeId) {
+            <div
+              class="jv-tab-panel jv-tab-panel--entering"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(activeId)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(activeId)"
+              tabindex="0"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
+            </div>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}.jv-tab-panel--hidden{display:none}.jv-tab-panel--fade{transition:opacity .18s ease}.jv-tab-panel--hidden.jv-tab-panel--fade{display:block;opacity:0;pointer-events:none}.jv-tab-panel--slide-left,.jv-tab-panel--slide-right{transition:opacity .18s ease,transform .18s ease}.jv-tab-panel--hidden.jv-tab-panel--slide-left{display:block;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--hidden.jv-tab-panel--slide-right{display:block;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--fade{position:absolute;opacity:0;pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-left{position:absolute;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-right{position:absolute;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--entering{animation:jv-tab-enter .18s ease forwards}.jv-tab-panel--entering.jv-tab-panel--slide-left{animation-name:jv-tab-slide-from-right}.jv-tab-panel--entering.jv-tab-panel--slide-right{animation-name:jv-tab-slide-from-left}@keyframes jv-tab-enter{0%{opacity:0}to{opacity:1}}@keyframes jv-tab-slide-from-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes jv-tab-slide-from-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.jv-tab-panel--fade,.jv-tab-panel--slide-left,.jv-tab-panel--slide-right,.jv-tab-panel--entering{transition:none;animation:none}.jv-tab-panel--hidden.jv-tab-panel--fade,.jv-tab-panel--hidden.jv-tab-panel--slide-left,.jv-tab-panel--hidden.jv-tab-panel--slide-right{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-tabs', standalone: true, imports: [NgTemplateOutlet, JvIconComponent], template: `
-    <div class="jv-tabs">
-      <div class="jv-tabs-header">
-        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
-          @for (tab of tabs(); track tab.id) {
-            <button
-              type="button"
-              class="jv-tab"
-              [class.jv-tab--active]="isActive(tab.id)"
-              [class.jv-tab--disabled]="tab.disabled ?? false"
-              [id]="tabButtonId(tab.id)"
-              [attr.data-jv-tab-id]="tab.id"
-              role="tab"
-              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
-              [attr.aria-controls]="panelId(tab.id)"
-              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
-              [disabled]="tab.disabled ?? false"
-              (click)="activateTab(tab.id)"
-              (keydown)="handleKeydown($event, tab.id)"
-            >
-              @if (tab.icon) {
-                <jv-icon [name]="tab.icon" [size]="16" />
-              }
-              <span>{{ tab.label }}</span>
-            </button>
-          }
-        </div>
-
-        @if (showScrollLeft() || showScrollRight()) {
-          <div class="jv-tabs-controls" aria-hidden="true">
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
-              <jv-icon name="chevron-left" [size]="16" />
-            </button>
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
-              <jv-icon name="chevron-right" [size]="16" />
-            </button>
-          </div>
-        }
-      </div>
-
-      <div class="jv-tabs-panels">
-        @if (keepMounted()) {
-          @for (tab of tabs(); track tab.id) {
-            <div
-              class="jv-tab-panel"
-              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
-              [id]="panelId(tab.id)"
-              role="tabpanel"
-              [attr.aria-labelledby]="tabButtonId(tab.id)"
-              [attr.tabindex]="isActive(tab.id) ? 0 : null"
-              [hidden]="!isActive(tab.id)"
-            >
-              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
-            </div>
-          }
-        } @else if (resolvedActiveTabId(); as activeId) {
-          <div
-            class="jv-tab-panel"
-            [id]="panelId(activeId)"
-            role="tabpanel"
-            [attr.aria-labelledby]="tabButtonId(activeId)"
-            tabindex="0"
-          >
-            <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
-          </div>
-        }
-      </div>
-    </div>
-  `, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvTabPanelDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], handleWindowResize: [{
+            args: [{ selector: 'jv-tabs', standalone: true, imports: [NgTemplateOutlet, JvIconComponent], template: `
+    <div class="jv-tabs">
+      <div class="jv-tabs-header">
+        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+          @for (tab of tabs(); track tab.id) {
+            <button
+              type="button"
+              class="jv-tab"
+              [class.jv-tab--active]="isActive(tab.id)"
+              [class.jv-tab--disabled]="tab.disabled ?? false"
+              [id]="tabButtonId(tab.id)"
+              [attr.data-jv-tab-id]="tab.id"
+              role="tab"
+              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
+              [attr.aria-controls]="panelId(tab.id)"
+              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
+              [disabled]="tab.disabled ?? false"
+              (click)="activateTab(tab.id)"
+              (keydown)="handleKeydown($event, tab.id)"
+            >
+              @if (tab.icon) {
+                <jv-icon [name]="tab.icon" [size]="16" />
+              }
+              <span>{{ tab.label }}</span>
+            </button>
+          }
+        </div>
+
+        @if (showScrollLeft() || showScrollRight()) {
+          <div class="jv-tabs-controls" aria-hidden="true">
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+              <jv-icon name="chevron-left" [size]="16" />
+            </button>
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+              <jv-icon name="chevron-right" [size]="16" />
+            </button>
+          </div>
+        }
+      </div>
+
+      <div class="jv-tabs-panels">
+        @if (keepMounted()) {
+          @for (tab of tabs(); track tab.id) {
+            <div
+              class="jv-tab-panel"
+              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(tab.id)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.tabindex]="isActive(tab.id) ? 0 : null"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
+            </div>
+          }
+        } @else {
+          @if (outgoingPanelId(); as outgoingId) {
+            <div
+              class="jv-tab-panel jv-tab-panel--exit"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(outgoingId)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(outgoingId)"
+              tabindex="-1"
+              (transitionend)="handleTransitionEnd($event)"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(outgoingId) ?? null" />
+            </div>
+          }
+
+          @if (resolvedActiveTabId(); as activeId) {
+            <div
+              class="jv-tab-panel jv-tab-panel--entering"
+              [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
+              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
+              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [id]="panelId(activeId)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(activeId)"
+              tabindex="0"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
+            </div>
+          }
+        }
+      </div>
+    </div>
+  `, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}.jv-tab-panel--hidden{display:none}.jv-tab-panel--fade{transition:opacity .18s ease}.jv-tab-panel--hidden.jv-tab-panel--fade{display:block;opacity:0;pointer-events:none}.jv-tab-panel--slide-left,.jv-tab-panel--slide-right{transition:opacity .18s ease,transform .18s ease}.jv-tab-panel--hidden.jv-tab-panel--slide-left{display:block;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--hidden.jv-tab-panel--slide-right{display:block;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--fade{position:absolute;opacity:0;pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-left{position:absolute;opacity:0;transform:translate(-20px);pointer-events:none}.jv-tab-panel--exit.jv-tab-panel--slide-right{position:absolute;opacity:0;transform:translate(20px);pointer-events:none}.jv-tab-panel--entering{animation:jv-tab-enter .18s ease forwards}.jv-tab-panel--entering.jv-tab-panel--slide-left{animation-name:jv-tab-slide-from-right}.jv-tab-panel--entering.jv-tab-panel--slide-right{animation-name:jv-tab-slide-from-left}@keyframes jv-tab-enter{0%{opacity:0}to{opacity:1}}@keyframes jv-tab-slide-from-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes jv-tab-slide-from-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.jv-tab-panel--fade,.jv-tab-panel--slide-left,.jv-tab-panel--slide-right,.jv-tab-panel--entering{transition:none;animation:none}.jv-tab-panel--hidden.jv-tab-panel--fade,.jv-tab-panel--hidden.jv-tab-panel--slide-left,.jv-tab-panel--hidden.jv-tab-panel--slide-right{opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvTabPanelDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], handleWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -22593,6 +23216,280 @@ const JV_GRID_DEFAULT_OPTIONS = {
     rowDoubleClick: false,
 };
 
+const MAIN_NS = 'http://schemas.openxmlformats.org/spreadsheetml/2006/main';
+const REL_NS = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships';
+const PKG_REL_NS = 'http://schemas.openxmlformats.org/package/2006/relationships';
+const XML_DECL = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+/**
+ * Builds a real Office Open XML (.xlsx) spreadsheet as a Blob.
+ *
+ * The package is assembled in memory with the ZIP "store" method (no
+ * compression) so no third-party dependency is required. All cell text is
+ * written as `inlineStr`, which keeps every character (including UTF-8
+ * accented glyphs) intact and is understood by Microsoft Excel and Apple
+ * Numbers alike.
+ */
+function buildXlsxBlob(sheets) {
+    return new Blob([buildXlsxBuffer(sheets)], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+}
+/**
+ * Returns the raw bytes of a minimal valid .xlsx package. Exposed separately
+ * from the Blob wrapper to make the package easy to assert on in tests.
+ */
+function buildXlsxBuffer(sheets) {
+    const parts = [];
+    const sheetXml = sheets.map((sheet, index) => buildSheetXml(sheet, index));
+    const sheetNames = sheets.length > 0 ? sheets.map((s) => s.name) : ['Sheet1'];
+    parts.push({ name: '[Content_Types].xml', data: utf8(buildContentTypes(sheets.length)) });
+    parts.push({ name: '_rels/.rels', data: utf8(buildRootRels()) });
+    parts.push({ name: 'xl/workbook.xml', data: utf8(buildWorkbook(sheetNames)) });
+    parts.push({ name: 'xl/_rels/workbook.xml.rels', data: utf8(buildWorkbookRels(sheets.length)) });
+    parts.push({ name: 'xl/styles.xml', data: utf8(buildStyles()) });
+    for (let i = 0; i < sheetXml.length; i++) {
+        parts.push({ name: `xl/worksheets/sheet${i + 1}.xml`, data: utf8(sheetXml[i]) });
+    }
+    return toZip(parts);
+}
+function buildContentTypes(sheetCount) {
+    let xml = XML_DECL;
+    xml += `<Types xmlns="${PKG_REL_NS}">`;
+    xml += `<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>`;
+    xml += `<Default Extension="xml" ContentType="application/xml"/>`;
+    xml += `<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>`;
+    for (let i = 0; i < sheetCount; i++) {
+        xml += `<Override PartName="/xl/worksheets/sheet${i + 1}.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>`;
+    }
+    xml += `<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>`;
+    xml += `</Types>`;
+    return xml;
+}
+function buildRootRels() {
+    return XML_DECL +
+        `<Relationships xmlns="${PKG_REL_NS}">` +
+        `<Relationship Id="rId1" Type="${REL_NS}/officeDocument" Target="xl/workbook.xml"/>` +
+        `</Relationships>`;
+}
+function buildWorkbook(sheetNames) {
+    let xml = XML_DECL;
+    xml += `<workbook xmlns="${MAIN_NS}" xmlns:r="${REL_NS}">`;
+    xml += `<sheets>`;
+    for (let i = 0; i < sheetNames.length; i++) {
+        const name = sanitizeSheetName(sheetNames[i]) || `Sheet${i + 1}`;
+        xml += `<sheet name="${escapeXml(name)}" sheetId="${i + 1}" r:id="rId${i + 1}"/>`;
+    }
+    xml += `</sheets></workbook>`;
+    return xml;
+}
+function buildWorkbookRels(sheetCount) {
+    let xml = XML_DECL;
+    xml += `<Relationships xmlns="${PKG_REL_NS}">`;
+    for (let i = 0; i < sheetCount; i++) {
+        xml += `<Relationship Id="rId${i + 1}" Type="${REL_NS}/worksheet" Target="worksheets/sheet${i + 1}.xml"/>`;
+    }
+    xml += `<Relationship Id="rId${sheetCount + 1}" Type="${REL_NS}/styles" Target="styles.xml"/>`;
+    xml += `</Relationships>`;
+    return xml;
+}
+function buildSheetXml(sheet, index) {
+    const rows = sheet.rows;
+    const rowCount = rows.length;
+    const colCount = rows.reduce((max, row) => Math.max(max, row.length), 0);
+    const dimension = rowCount === 0 || colCount === 0 ? 'A1' : `A1:${columnName(colCount - 1)}${rowCount}`;
+    let xml = XML_DECL;
+    xml += `<worksheet xmlns="${MAIN_NS}">`;
+    xml += `<dimension ref="${dimension}"/>`;
+    xml += `<sheetViews><sheetView workbookViewId="0"/></sheetViews>`;
+    xml += `<sheetFormatPr defaultRowHeight="15"/>`;
+    xml += `<sheetData>`;
+    for (let r = 0; r < rowCount; r++) {
+        const row = rows[r];
+        xml += `<row r="${r + 1}">`;
+        for (let c = 0; c < row.length; c++) {
+            xml += `<c r="${columnName(c)}${r + 1}" t="inlineStr"><is><t xml:space="preserve">${escapeXml(String(row[c]))}</t></is></c>`;
+        }
+        xml += `</row>`;
+    }
+    xml += `</sheetData></worksheet>`;
+    void index;
+    return xml;
+}
+function buildStyles() {
+    return XML_DECL +
+        `<styleSheet xmlns="${MAIN_NS}">` +
+        `<fonts count="1"><font><sz val="11"/><name val="Calibri"/></font></fonts>` +
+        `<fills count="1"><fill><patternFill patternType="none"/></fill></fills>` +
+        `<borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders>` +
+        `<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>` +
+        `<cellXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/></cellXfs>` +
+        `<cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles>` +
+        `</styleSheet>`;
+}
+function columnName(index) {
+    let value = '';
+    let n = index;
+    while (n >= 0) {
+        value = String.fromCharCode((n % 26) + 65) + value;
+        n = Math.floor(n / 26) - 1;
+    }
+    return value;
+}
+function sanitizeSheetName(name) {
+    return name.replace(/[\[\]:*?/\\]/g, '').slice(0, 31);
+}
+function escapeXml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+function utf8(value) {
+    return new TextEncoder().encode(value);
+}
+// ---------------------------------------------------------------------------
+// Minimal ZIP writer ("store" method, no compression)
+// ---------------------------------------------------------------------------
+const CRC_TABLE = (() => {
+    const table = new Array(256);
+    for (let n = 0; n < 256; n++) {
+        let c = n;
+        for (let k = 0; k < 8; k++) {
+            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+        }
+        table[n] = c >>> 0;
+    }
+    return table;
+})();
+function crc32(bytes) {
+    let crc = 0xffffffff;
+    for (let i = 0; i < bytes.length; i++) {
+        crc = CRC_TABLE[(crc ^ bytes[i]) & 0xff] ^ (crc >>> 8);
+    }
+    return (crc ^ 0xffffffff) >>> 0;
+}
+function toZip(files) {
+    const encoder = new TextEncoder();
+    const chunks = [];
+    const centralDirectory = new Uint8Array(0);
+    const centralRecords = [];
+    let offset = 0;
+    for (const file of files) {
+        const nameBytes = encoder.encode(file.name);
+        const crc = crc32(file.data);
+        // Local file header
+        const local = new DataView(new ArrayBuffer(30));
+        local.setUint32(0, 0x04034b50, true);
+        local.setUint16(4, 20, true);
+        local.setUint16(6, 0x0800, true);
+        local.setUint16(8, 0, true); // store (no compression)
+        local.setUint16(10, 0, true);
+        local.setUint16(12, 0, true);
+        local.setUint32(14, crc, true);
+        local.setUint32(18, file.data.length, true);
+        local.setUint32(22, file.data.length, true);
+        local.setUint16(26, nameBytes.length, true);
+        local.setUint16(28, 0, true);
+        chunks.push(new Uint8Array(local.buffer), nameBytes, file.data);
+        // Central directory header
+        const central = new DataView(new ArrayBuffer(46));
+        central.setUint32(0, 0x02014b50, true);
+        central.setUint16(4, 20, true); // version made by
+        central.setUint16(6, 20, true); // version needed
+        central.setUint16(8, 0x0800, true); // UTF-8 filename flag
+        central.setUint16(10, 0, true); // store (no compression)
+        central.setUint16(12, 0, true); // mod time
+        central.setUint16(14, 0, true); // mod date
+        central.setUint32(16, crc, true);
+        central.setUint32(20, file.data.length, true); // compressed size
+        central.setUint32(24, file.data.length, true); // uncompressed size
+        central.setUint16(28, nameBytes.length, true);
+        central.setUint16(30, 0, true); // extra field length
+        central.setUint16(32, 0, true); // comment length
+        central.setUint16(34, 0, true); // disk number start
+        central.setUint16(36, 0, true); // internal file attributes
+        central.setUint32(38, 0, true); // external file attributes
+        central.setUint32(42, offset, true); // local header offset
+        centralRecords.push(new Uint8Array(central.buffer), nameBytes);
+        offset += 30 + nameBytes.length + file.data.length;
+    }
+    const centralSize = centralRecords.reduce((sum, chunk) => sum + chunk.length, 0);
+    const eocd = new DataView(new ArrayBuffer(22));
+    eocd.setUint32(0, 0x06054b50, true);
+    eocd.setUint16(4, 0, true);
+    eocd.setUint16(6, 0, true);
+    eocd.setUint16(8, files.length, true);
+    eocd.setUint16(10, files.length, true);
+    eocd.setUint32(12, centralSize, true);
+    eocd.setUint32(16, offset, true);
+    eocd.setUint16(20, 0, true);
+    const result = new Uint8Array(offset + centralSize + 22);
+    let pointer = 0;
+    for (const chunk of chunks) {
+        result.set(chunk, pointer);
+        pointer += chunk.length;
+    }
+    for (const chunk of centralRecords) {
+        result.set(chunk, pointer);
+        pointer += chunk.length;
+    }
+    result.set(new Uint8Array(eocd.buffer), pointer);
+    void centralDirectory;
+    return result;
+}
+
+/**
+ * Triggers a browser download for the given Blob.
+ */
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+const CSV_BOM = '\uFEFF';
+/**
+ * Builds the raw CSV text (including the UTF-8 BOM) for the given header and
+ * rows. Exposed separately from the downloader to keep it easy to test.
+ */
+function buildCsv(header, rows) {
+    const escapeCell = (value) => {
+        const text = value == null ? '' : String(value);
+        return `"${text.replace(/"/g, '""')}"`;
+    };
+    const lines = [];
+    lines.push(header.map(escapeCell).join(','));
+    for (const row of rows) {
+        lines.push(row.map(escapeCell).join(','));
+    }
+    return CSV_BOM + lines.join('\r\n');
+}
+/**
+ * Serializes a grid/table to CSV and downloads it.
+ *
+ * A UTF-8 BOM is prepended so Microsoft Excel recognises the file as UTF-8
+ * and renders accented characters correctly.
+ */
+function exportGridToCsv(header, rows, filename = 'export.csv') {
+    const csv = buildCsv(header, rows);
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    downloadBlob(blob, filename);
+}
+/**
+ * Serializes a grid/table to a real Open XML (.xlsx) spreadsheet and downloads it.
+ *
+ * Generates an actual xlsx package (not an HTML file with an .xls extension),
+ * preserving UTF-8 characters. Comma-separated columns are exported as-is.
+ */
+function exportGridToExcel(header, rows, filename = 'export.xlsx') {
+    const blob = buildXlsxBlob([{ name: 'Sheet1', rows: [header, ...rows] }]);
+    downloadBlob(blob, filename);
+}
+
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
@@ -23104,41 +24001,20 @@ class JvGridComponent {
     }
     // Export
     exportCsv() {
-        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
-        const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
-        const headerRow = cols.map(c => `"${c.header}"`).join(',');
-        const dataRows = allData.map(row => cols.map(col => {
-            const val = row[col.key];
-            if (val == null)
-                return '';
-            return `"${this.getExportValue(val, col.column).replace(/"/g, '""')}"`;
-        }).join(','));
-        const csv = [headerRow, ...dataRows].join('\r\n');
-        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'grid-export.csv';
-        a.click();
-        URL.revokeObjectURL(url);
+        const { header, rows } = this.buildExportMatrix();
+        exportGridToCsv(header, rows, 'grid-export.csv');
     }
     exportExcel() {
+        const { header, rows } = this.buildExportMatrix();
+        exportGridToExcel(header, rows, 'grid-export.xlsx');
+    }
+    buildExportMatrix() {
         const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
         const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
-        let html = '<table>';
-        html += '<thead><tr>' + cols.map(c => `<th>${c.header}</th>`).join('') + '</tr></thead>';
-        html += '<tbody>';
-        for (const row of allData) {
-            html += '<tr>' + cols.map(col => `<td>${this.getExportValue(row[col.key], col.column)}</td>`).join('') + '</tr>';
-        }
-        html += '</tbody></table>';
-        const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'grid-export.xls';
-        a.click();
-        URL.revokeObjectURL(url);
+        return {
+            header: cols.map(c => c.header),
+            rows: allData.map(row => cols.map(col => this.getExportValue(row[col.key], col.column))),
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: `
@@ -24010,5 +24886,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, provideJvUi };
+export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map