@vectoriox/iox-ui 4.7.5 → 4.8.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1497,6 +1497,10 @@ class ClientSliderContainerComponent {
     constructor(platformId) {
         this.platformId = platformId;
         this.nodeId = '';
+        /** Language (writing) direction. Rendered as the `dir` attribute so it survives SSR and drives
+         *  Swiper's RTL layout — must match the builder's app-slider-container, which had `dir` while
+         *  this engine-runtime component did not (RTL showed in the editor but never on the live site). */
+        this.dir = 'ltr';
         this.direction = 'horizontal';
         this.loop = false;
         this.slidesPerView = 1;
@@ -1576,6 +1580,9 @@ class ClientSliderContainerComponent {
         }
         const config = {
             modules,
+            // Swiper reads the container's `dir` attribute, but pass it explicitly so RTL is applied
+            // on init regardless of attribute timing.
+            dir: this.dir,
             direction: this.direction,
             loop: this.loop,
             slidesPerView: this.slidesPerView,
@@ -1606,8 +1613,8 @@ class ClientSliderContainerComponent {
         this.instanceRegistry.register(this.nodeId, this._swiper);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", 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", gridRows: "gridRows", breakpoints: "breakpoints" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" #swiperEl>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", 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", gridRows: "gridRows", breakpoints: "breakpoints" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
+        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
             <div class="swiper-wrapper">
                 <ng-container #childrenHost></ng-container>
             </div>
@@ -1621,7 +1628,7 @@ class ClientSliderContainerComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'iox-slider-container', template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" #swiperEl>
+        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
             <div class="swiper-wrapper">
                 <ng-container #childrenHost></ng-container>
             </div>
@@ -1636,6 +1643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     args: [PLATFORM_ID]
                 }] }], propDecorators: { nodeId: [{
                 type: Input
+            }], dir: [{
+                type: Input
             }], direction: [{
                 type: Input
             }], loop: [{