@vectoriox/iox-builder 1.4.30 → 1.4.31

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1484,12 +1484,18 @@ const TRANSFORM_FUNS = [
     ['skewX', 'skewX', '0deg'],
     ['skewY', 'skewY', '0deg'],
 ];
+// ─── ::marker pseudo-element ─────────────────────────────────────────────────
+const MARKER_FUNS = [
+    ['markerColor', 'color'],
+    ['markerFontSize', 'fontSize'],
+];
 // ─── All virtual trait names ──────────────────────────────────────────────────
 const VIRTUAL_TRAIT_KEYS = new Set([
     ...FILTER_FUNS.map(([t]) => t),
     ...BACKDROP_FUNS.map(([t]) => t),
     ...TRANSFORM_FUNS.map(([t]) => t),
     'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+    ...MARKER_FUNS.map(([t]) => t),
 ]);
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 function buildFns(funs, src) {
@@ -1541,6 +1547,17 @@ function composeVirtualTraits(raw, base = raw) {
         const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
         result['transition'] = `all ${dur} ${ease}${delPart}`;
     }
+    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
+    // can emit a separate `.iox-node-{id}::marker { … }` rule.
+    const markerStyles = {};
+    for (const [trait, cssProp] of MARKER_FUNS) {
+        const val = raw[trait] ?? base[trait];
+        if (val != null && val !== '')
+            markerStyles[cssProp] = val;
+    }
+    if (Object.keys(markerStyles).length) {
+        result['__markerStyles'] = markerStyles;
+    }
     return result;
 }
 
@@ -1554,6 +1571,7 @@ var StyleCategory;
     StyleCategory["Position"] = "Position";
     StyleCategory["Background"] = "Background";
     StyleCategory["Effects"] = "Effects";
+    StyleCategory["List"] = "List";
     // Legacy — kept for backward compat; prefer Size
     StyleCategory["Dimensions"] = "Dimensions";
 })(StyleCategory || (StyleCategory = {}));
@@ -1952,6 +1970,32 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
         ]);
     }
 }
+class ListGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.List, [
+            new TraitConfig('listStyleType', 'Marker Style', TraitInputType.Select, [
+                { label: 'None', value: 'none' },
+                { label: 'Disc', value: 'disc' },
+                { label: 'Circle', value: 'circle' },
+                { label: 'Square', value: 'square' },
+                { label: 'Decimal', value: 'decimal' },
+                { label: 'Lower Alpha', value: 'lower-alpha' },
+                { label: 'Upper Alpha', value: 'upper-alpha' },
+                { label: 'Lower Roman', value: 'lower-roman' },
+                { label: 'Upper Roman', value: 'upper-roman' },
+            ], 'disc'),
+            new TraitConfig('listStylePosition', 'Marker Position', TraitInputType.SelectButton, [
+                { value: 'outside', label: 'Outside' },
+                { value: 'inside', label: 'Inside' },
+            ], 'outside'),
+            new TraitConfig('columnCount', 'Columns', TraitInputType.Scrub, { min: 1, max: 6, step: 1, units: [''] }, '1'),
+            new TraitConfig('columnGap', 'Column Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px'),
+            new TraitConfig('_sep_marker', 'Marker', TraitInputType.SectionLabel),
+            new TraitConfig('markerColor', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: true, formats: ['hex', 'rgb', 'hsl', 'transparent'] }, ''),
+            new TraitConfig('markerFontSize', 'Size', TraitInputType.Scrub, { min: 4, max: 100, step: 1, units: UNITS_FIXED }, ''),
+        ]);
+    }
+}
 /**
  * Returns a fresh set of all 8 style-group configs in canonical display order.
  * Every call produces new TraitConfig instances so different component nodes
@@ -2063,11 +2107,25 @@ class StyleRegistryService {
             this.flush();
             return;
         }
+        // ::marker pseudo-element — emitted as a separate rule, not part of inner/outer split.
+        const markerStyles = styles['__markerStyles'];
+        if (markerStyles && Object.keys(markerStyles).length) {
+            const markerCss = this.compile(`iox-node-${nodeId}::marker`, markerStyles);
+            if (markerCss)
+                this.rules.set(`${nodeId}::marker`, markerCss);
+            else
+                this.rules.delete(`${nodeId}::marker`);
+        }
+        else {
+            this.rules.delete(`${nodeId}::marker`);
+        }
         const pos = String(styles['position'] ?? '');
         const isOutOfFlow = pos === 'fixed' || pos === 'absolute';
         const inner = {};
         const outer = {};
         for (const [k, v] of Object.entries(styles)) {
+            if (k === '__markerStyles')
+                continue;
             const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
             // width goes to inner for fixed/absolute (the positioned element owns its own width)
             if (wantsOuter && !(isOutOfFlow && k === 'width')) {
@@ -3915,6 +3973,8 @@ class BuilderContainerComponent {
         this.nodeId = '';
         this.dropListId = '';
         this.htmlTag = 'div';
+        this.start = 1;
+        this.reversed = false;
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
@@ -3934,7 +3994,7 @@ class BuilderContainerComponent {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderContainerComponent, isStandalone: false, selector: "app-builder-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderContainerComponent, isStandalone: false, selector: "app-builder-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #dropContent>
             <div *ngIf="!children.length" class="container-placeholder">
                 <i class="ph-thin ph-square"></i>
@@ -3962,7 +4022,7 @@ class BuilderContainerComponent {
             @case ('main')    { <main    class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></main> }
             @case ('nav')     { <nav     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></nav> }
             @case ('ul')      { <ul      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ul> }
-            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
+            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" [attr.start]="start !== 1 ? start : null" [attr.reversed]="reversed ? '' : null" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
             @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
             @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></div> }
         }
@@ -3998,7 +4058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             @case ('main')    { <main    class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></main> }
             @case ('nav')     { <nav     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></nav> }
             @case ('ul')      { <ul      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ul> }
-            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
+            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" [attr.start]="start !== 1 ? start : null" [attr.reversed]="reversed ? '' : null" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
             @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
             @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></div> }
         }
@@ -4013,6 +4073,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], htmlTag: [{
                 type: Input
+            }], start: [{
+                type: Input
+            }], reversed: [{
+                type: Input
             }], childClick: [{
                 type: Output
             }], childMouseEnter: [{
@@ -5227,6 +5291,86 @@ class BuilderLinkedContainerConfig extends ComponentConfig {
     }
 }
 
+class BuilderListItemComponentConfig extends ComponentConfig {
+    constructor() {
+        super('ListItem', 'app-builder-container', 'ph-thin ph-list-dashes', 'Layout');
+        this.traits = [
+            new TraitConfig('htmlTag', 'Tag', TraitInputType.Select, ['li'], 'li'),
+        ];
+        this.styleTraits = buildFullStyleTraits();
+        this.children = [];
+        this.applyStyleDefaults({
+            width: '100%',
+            display: 'block',
+            backgroundColor: 'transparent',
+        });
+    }
+}
+
+class TextBlockComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Text', 'app-text-block', 'ph-thin ph-text-aa', 'Basic');
+        this.inputs = {
+            content: 'text',
+            tag: 'select',
+        };
+        this.traits = [
+            new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
+            new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
+        ];
+        this.styleTraits = buildFullStyleTraits();
+        this.applyStyleDefaults({
+            display: 'block',
+            width: '100%',
+            height: 'auto',
+            minHeight: '20px',
+            padding: '10px',
+        });
+    }
+}
+
+class BuilderListComponentConfig extends ComponentConfig {
+    constructor() {
+        super('List', 'app-builder-container', 'ph-thin ph-list', 'Layout');
+        this.traits = [
+            new TraitConfig('htmlTag', 'Tag', TraitInputType.Select, ['ul', 'ol'], 'ul'),
+            new TraitConfig('start', 'Start At', TraitInputType.Number, undefined, 1, false, { trait: 'htmlTag', values: 'ol' }),
+            new TraitConfig('reversed', 'Reversed', TraitInputType.Checkbox, undefined, false, false, { trait: 'htmlTag', values: 'ol' }),
+        ];
+        this.styleTraits = [
+            new ListGroupStyleConfig(),
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new TypographyGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.children = [
+            this.makeListItem(),
+            this.makeListItem(),
+            this.makeListItem(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            display: 'block',
+            backgroundColor: 'transparent',
+            padding: '0px 0px 0px 24px',
+        });
+    }
+    makeListItem() {
+        const item = new BuilderListItemComponentConfig();
+        const textCfg = new TextBlockComponentConfig();
+        const contentTrait = textCfg.traits.find(t => t.name === 'content');
+        if (contentTrait)
+            contentTrait.default = 'List item';
+        item.children = [textCfg];
+        return item;
+    }
+}
+
 class RepeaterComponentConfig extends ComponentConfig {
     constructor() {
         super('Repeater', 'app-builder-repeater', 'ph-thin ph-repeat', 'Data');
@@ -5282,28 +5426,6 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
     }
 }
 
-class TextBlockComponentConfig extends ComponentConfig {
-    constructor() {
-        super('Text', 'app-text-block', 'ph-thin ph-text-aa', 'Basic');
-        this.inputs = {
-            content: 'text',
-            tag: 'select',
-        };
-        this.traits = [
-            new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
-            new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
-        ];
-        this.styleTraits = buildFullStyleTraits();
-        this.applyStyleDefaults({
-            display: 'block',
-            width: '100%',
-            height: 'auto',
-            minHeight: '20px',
-            padding: '10px',
-        });
-    }
-}
-
 /*
  * Public API Surface of @vectoriox/iox-builder
  */
@@ -5312,5 +5434,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map