@vectoriox/iox-ui 5.86.0 → 5.86.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3166,6 +3166,9 @@ function sliderInputsFromProps(props, responsive) {
  * (premium M4) sits in its runway — the string path writes the same `iox-slider-runway` wrapper.
  */
 class ClientSliderContainerComponent {
+    get runwaySteps() {
+        return Math.max(0, this.slideTotal - 1);
+    }
     constructor(platformId) {
         this.platformId = platformId;
         this.nodeId = '';
@@ -3214,6 +3217,9 @@ class ClientSliderContainerComponent {
         this.scrollPlays = false;
         this.swiper = null;
         this.slidesSeen = false;
+        /** The slides the renderer placed (it asks `childHostFor` for each, before the first change detection), so a played
+         *  slider's runway reserves its steps in the SERVER render — the page never shifts when the slider boots. */
+        this.slideTotal = 0;
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
     }
     /** Swiper draws its own arrows / dots only for a saved slider whose controls are not parts yet. */
@@ -3225,6 +3231,7 @@ class ClientSliderContainerComponent {
     childHostFor(child) {
         if (!isSliderPart(child)) {
             this.slidesSeen = true;
+            this.slideTotal++;
             return this.childrenHost;
         }
         return this.slidesSeen ? this.trailHost : this.leadHost;
@@ -3265,7 +3272,8 @@ class ClientSliderContainerComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", autoHeight: "autoHeight", slideToClickedSlide: "slideToClickedSlide", freeMode: "freeMode", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", paginationDynamicBullets: "paginationDynamicBullets", navigationColor: "navigationColor", paginationColor: "paginationColor", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive", controlParts: "controlParts", scrollPlays: "scrollPlays" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "leadHost", first: true, predicate: ["leadHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "trailHost", first: true, predicate: ["trailHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
-        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'">
+        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'"
+             [style.--slider-steps]="scrollPlays ? runwaySteps : null">
         <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
              [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
              [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>
@@ -3285,7 +3293,8 @@ class ClientSliderContainerComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'iox-slider-container', template: `
-        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'">
+        <div [class.iox-slider-runway]="scrollPlays" [attr.data-iox-scene]="scrollPlays ? '' : null" [style.display]="scrollPlays ? null : 'contents'"
+             [style.--slider-steps]="scrollPlays ? runwaySteps : null">
         <div class="swiper" [class]="'swiper iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir"
              [style.--swiper-navigation-color]="legacyControls ? (navigationColor || null) : null"
              [style.--swiper-pagination-color]="legacyControls ? (paginationColor || null) : null" #swiperEl>