@vectoriox/iox-builder 1.6.9 → 1.6.11

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i14 from '@vectoriox/iox-ui';
-import { ComponentInstanceRegistryService, compileDeclarations, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
+import { ComponentInstanceRegistryService, DEFAULT_WIDTH_BY_TYPE, compileDeclarations, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -2086,6 +2086,12 @@ class ComponentConfig {
     /** Override specific trait defaults after styleTraits are set.
      *  Call this at the end of each subclass constructor. */
     applyStyleDefaults(defaults) {
+        // Single source of truth for container-type width defaults: when a subclass does
+        // not set width explicitly, fill it from the shared DEFAULT_WIDTH_BY_TYPE map — the
+        // same map the SSR engine resolves from. See render-parity.md.
+        if (defaults['width'] === undefined && DEFAULT_WIDTH_BY_TYPE[this.type] !== undefined) {
+            defaults = { ...defaults, width: DEFAULT_WIDTH_BY_TYPE[this.type] };
+        }
         for (const group of this.styleTraits) {
             for (const trait of group.traits) {
                 if (defaults[trait.name] !== undefined) {
@@ -2243,7 +2249,11 @@ class SizeGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('minHeight', 'Min H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
             new TraitConfig('maxWidth', 'Max W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
             new TraitConfig('maxHeight', 'Max H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Text, undefined, 'auto'),
+            // aspect-ratio is a unitless ratio (or 'auto') — scrub with no unit.
+            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Scrub, { min: 0, max: 10, step: 0.1, units: [''], allowAuto: true }, 'auto', true),
+            // object-fit is a style trait (applies to replaced elements, e.g. images). Lives here so
+            // it flows through the CSS engine (styleProps) instead of a per-component inline binding.
+            new TraitConfig('objectFit', 'Object Fit', TraitInputType.Select, ['cover', 'contain', 'fill', 'none', 'scale-down'], 'cover'),
         ]);
     }
 }
@@ -7093,7 +7103,6 @@ class BuilderContainerComponentConfig extends ComponentConfig {
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: 'auto',
             minHeight: '200px',
             display: 'block',
@@ -7108,7 +7117,6 @@ class BuilderDividerComponentConfig extends ComponentConfig {
         this.traits = [];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: '1px',
             backgroundColor: '#cccccc',
             margin: '8px 0px 8px 0px',
@@ -7152,12 +7160,11 @@ class BuilderImageComponentConfig extends ComponentConfig {
         this.inputs = {
             src: 'text',
             alt: 'text',
-            objectFit: 'select'
         };
         this.traits = [
             new TraitConfig('src', 'Image URL', TraitInputType.Media, { mode: 'compact' }, 'https://placehold.co/600x400?text=Image'),
             new TraitConfig('alt', 'Alt Text', TraitInputType.Text, undefined, 'Image'),
-            new TraitConfig('objectFit', 'Object Fit', TraitInputType.Select, ['cover', 'contain', 'fill', 'none'], 'cover'),
+            // objectFit moved to the Size style group (flows through the CSS engine as a style trait).
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -7233,7 +7240,6 @@ class BuilderListItemComponentConfig extends ComponentConfig {
         this.styleTraits = buildFullStyleTraits();
         this.children = [];
         this.applyStyleDefaults({
-            width: '100%',
             display: 'block',
             backgroundColor: 'transparent',
         });
@@ -7254,7 +7260,6 @@ class TextBlockComponentConfig extends ComponentConfig {
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
             display: 'block',
-            width: '100%',
             height: 'auto',
             minHeight: '20px',
             padding: '10px',
@@ -7287,7 +7292,6 @@ class BuilderListComponentConfig extends ComponentConfig {
             this.makeListItem(),
         ];
         this.applyStyleDefaults({
-            width: '100%',
             display: 'block',
             backgroundColor: 'transparent',
             padding: '0px 0px 0px 24px',
@@ -7325,7 +7329,6 @@ class RepeaterComponentConfig extends ComponentConfig {
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: 'auto',
         });
     }
@@ -7494,9 +7497,7 @@ class SliderContainerConfig extends ComponentConfig {
             new BackgroundGroupStyleConfig(),
             new EffectsGroupStyleConfig(),
         ];
-        this.applyStyleDefaults({
-            width: '100%',
-        });
+        this.applyStyleDefaults({});
     }
 }
 
@@ -7506,7 +7507,6 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
         this.traits = [];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
-            width: '100%',
             height: '40px',
         });
     }