@vectoriox/iox-builder 1.4.30 → 1.4.32

package/fesm2022/vectoriox-iox-builder.mjs

@@ -314,6 +314,8 @@ class DragEngineService {
         this.ids$ = new BehaviorSubject([]);
         this.isDragging$ = new BehaviorSubject(false);
         this.deepTarget$ = new BehaviorSubject(null);
+        /** Emits the dropped/inserted ComponentNode after every successful drop. */
+        this.dropComplete$ = new Subject();
         // ── Active drag state ─────────────────────────────────────
         this._isDragging = false;
         this._payload = null;
@@ -355,6 +357,7 @@ class DragEngineService {
             if (config) {
                 children.splice(insertIndex, 0, config);
                 cdr.detectChanges();
+                this.dropComplete$.next(config);
             }
             afterDrop?.();
             return;
@@ -369,15 +372,19 @@ class DragEngineService {
                     this.getCdr(payload.sourceId)?.detectChanges();
                 }
                 children.splice(insertIndex, 0, item);
+                cdr.detectChanges();
+                this.dropComplete$.next(item);
             }
             else {
                 // Source not in the drop-zone registry → came from an external panel
                 // (e.g. the built-in blocks panel stores one pre-built node object and
                 // reuses it across drags). Deep-clone with fresh IDs so each drop
                 // produces a fully independent node, preventing shared CSS rules.
-                children.splice(insertIndex, 0, deepCloneNode(item));
+                const cloned = deepCloneNode(item);
+                children.splice(insertIndex, 0, cloned);
+                cdr.detectChanges();
+                this.dropComplete$.next(cloned);
             }
-            cdr.detectChanges();
             afterDrop?.();
             return;
         }
@@ -387,6 +394,7 @@ class DragEngineService {
             children.splice(currentIdx, 1);
             children.splice(adjustedIdx, 0, item);
             cdr.detectChanges();
+            this.dropComplete$.next(item);
         }
         afterDrop?.();
     }
@@ -1484,12 +1492,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 +1555,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 +1579,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 +1978,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 +2115,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')) {
@@ -3228,11 +3294,14 @@ class BuilderComponent {
         this.dsRegistry.setDataSources(this.dataSources);
         this.dragEngine.setScale(this.viewportService.getScale());
         this.sub = this.panelEventService.subscribe((panelEvent) => this.handlePanelEvents(panelEvent));
-        this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
-        this.dragEngine.isDragging$.subscribe((v) => {
+        this.sub.add(this.dragEngine.isDragging$.subscribe((v) => {
             this.isDragging = v;
             this.cdr.markForCheck();
-        });
+        }));
+        this.sub.add(this.dragEngine.dropComplete$.subscribe((node) => {
+            this._selectAfterDrop(node);
+        }));
+        this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
         this.viewportSub = this.viewportService.state$.subscribe(state => {
             this.activeDevice = state.device;
             this.activeZoom = Math.round(state.scale * 100);
@@ -3382,12 +3451,15 @@ class BuilderComponent {
                 if (!config)
                     return;
                 this.layout.splice(insertIndex, 0, config);
+                this.cdr.markForCheck();
+                this._selectAfterDrop(config);
             }
             else {
                 const clone = this.deepCloneWithNewIds(payload.data);
                 this.layout.splice(insertIndex, 0, clone);
+                this.cdr.markForCheck();
+                this._selectAfterDrop(clone);
             }
-            this.cdr.markForCheck();
             return;
         }
         const item = payload.data;
@@ -3396,6 +3468,7 @@ class BuilderComponent {
             const clone = this.deepCloneWithNewIds(item);
             this.layout.splice(insertIndex, 0, clone);
             this.cdr.markForCheck();
+            this._selectAfterDrop(clone);
             return;
         }
         if (payload.sourceId && payload.sourceId !== 'canvas-preview') {
@@ -3410,6 +3483,7 @@ class BuilderComponent {
             }
             this.layout.splice(insertIndex, 0, item);
             this.cdr.markForCheck();
+            this._selectAfterDrop(item);
             return;
         }
         // Same-container reorder (canvas root).
@@ -3419,6 +3493,7 @@ class BuilderComponent {
             this.layout.splice(currentIdx, 1);
             this.layout.splice(adjustedIdx, 0, item);
             this.cdr.markForCheck();
+            this._selectAfterDrop(item);
         }
     }
     onModeChange(mode) {
@@ -3491,6 +3566,19 @@ class BuilderComponent {
         this.selectPanel(PanelTypes.STYLES);
         this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: event.node, componentRef: event.componentRef });
     }
+    _selectAfterDrop(node) {
+        // Wait one tick for Angular to render the new component and register it
+        // in the overlay before attempting to select it.
+        setTimeout(() => {
+            const ref = this.overlayService.getNodeRef(node);
+            if (!ref)
+                return;
+            this.selectedItem = node;
+            this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+            this.selectPanel(PanelTypes.STYLES);
+            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef });
+        });
+    }
     handleMouseEnter(event) {
         if (this.isDragging || this.activeMode === BuilderMode.Pan)
             return;
@@ -3859,7 +3947,7 @@ class SectionComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -3889,7 +3977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -3915,6 +4003,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 +4024,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,11 +4052,11 @@ 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> }
         }
-    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
             type: Component,
@@ -3998,11 +4088,11 @@ 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> }
         }
-    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -4013,6 +4103,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: [{
@@ -4097,7 +4191,7 @@ class BuilderLinkedContainerComponent {
                 </ng-container>
             </div>
         </a>
-    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkedContainerComponent, decorators: [{
             type: Component,
@@ -4130,7 +4224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </a>
-    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5227,6 +5321,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 +5456,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 +5464,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