@vectoriox/iox-ui 4.7.5 → 4.8.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -966,11 +966,11 @@ class BuilderIconComponent {
         this.nodeId = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderIconComponent, isStandalone: false, selector: "i[iox-icon]", inputs: { iconClass: "iconClass", nodeId: "nodeId" }, host: { properties: { "class": "iconClass + ' iox-node-' + nodeId" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;line-height:0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderIconComponent, isStandalone: false, selector: "i[iox-icon]", inputs: { iconClass: "iconClass", nodeId: "nodeId" }, host: { properties: { "class": "iconClass + ' iox-node-' + nodeId" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i[iox-icon]', template: '', host: { '[class]': "iconClass + ' iox-node-' + nodeId" }, standalone: false, styles: [":host{display:block;line-height:0}\n"] }]
+            args: [{ selector: 'i[iox-icon]', template: '', host: { '[class]': "iconClass + ' iox-node-' + nodeId" }, standalone: false, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}\n"] }]
         }], propDecorators: { iconClass: [{
                 type: Input
             }], nodeId: [{
@@ -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: [{
@@ -2092,6 +2101,14 @@ function renderDefaultDeclarations(type, styleProps, hasHoverState) {
     // it is not enough: the icon would inherit 1.5 from its container instead.
     if (type === 'Icon')
         out.push('line-height: 0');
+    // An icon's `<i>` must shrink-wrap its glyph so it grows with font-size and doesn't overflow its
+    // parent. Phosphor forces `display:inline-flex` on its own class; generated (fantasticon) fonts
+    // don't, so the engine's plain `<i class="bi-x iox-node-…">` would fall back to inline and the
+    // glyph would overflow. Emit it here (guarded so a user-set display still wins) — mirrors the
+    // builder Icon component's `:host{display:inline-flex}`.
+    if (type === 'Icon' && sp['display'] === undefined) {
+        out.push('display: inline-flex', 'align-items: center', 'justify-content: center');
+    }
     return out;
 }