@vectoriox/iox-builder 1.4.29 → 1.4.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1484,12 +1484,18 @@ const TRANSFORM_FUNS = [
|
|
|
1484
1484
|
['skewX', 'skewX', '0deg'],
|
|
1485
1485
|
['skewY', 'skewY', '0deg'],
|
|
1486
1486
|
];
|
|
1487
|
+
// ─── ::marker pseudo-element ─────────────────────────────────────────────────
|
|
1488
|
+
const MARKER_FUNS = [
|
|
1489
|
+
['markerColor', 'color'],
|
|
1490
|
+
['markerFontSize', 'fontSize'],
|
|
1491
|
+
];
|
|
1487
1492
|
// ─── All virtual trait names ──────────────────────────────────────────────────
|
|
1488
1493
|
const VIRTUAL_TRAIT_KEYS = new Set([
|
|
1489
1494
|
...FILTER_FUNS.map(([t]) => t),
|
|
1490
1495
|
...BACKDROP_FUNS.map(([t]) => t),
|
|
1491
1496
|
...TRANSFORM_FUNS.map(([t]) => t),
|
|
1492
1497
|
'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
|
|
1498
|
+
...MARKER_FUNS.map(([t]) => t),
|
|
1493
1499
|
]);
|
|
1494
1500
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
1495
1501
|
function buildFns(funs, src) {
|
|
@@ -1541,6 +1547,17 @@ function composeVirtualTraits(raw, base = raw) {
|
|
|
1541
1547
|
const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
|
|
1542
1548
|
result['transition'] = `all ${dur} ${ease}${delPart}`;
|
|
1543
1549
|
}
|
|
1550
|
+
// ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
|
|
1551
|
+
// can emit a separate `.iox-node-{id}::marker { … }` rule.
|
|
1552
|
+
const markerStyles = {};
|
|
1553
|
+
for (const [trait, cssProp] of MARKER_FUNS) {
|
|
1554
|
+
const val = raw[trait] ?? base[trait];
|
|
1555
|
+
if (val != null && val !== '')
|
|
1556
|
+
markerStyles[cssProp] = val;
|
|
1557
|
+
}
|
|
1558
|
+
if (Object.keys(markerStyles).length) {
|
|
1559
|
+
result['__markerStyles'] = markerStyles;
|
|
1560
|
+
}
|
|
1544
1561
|
return result;
|
|
1545
1562
|
}
|
|
1546
1563
|
|
|
@@ -1554,6 +1571,7 @@ var StyleCategory;
|
|
|
1554
1571
|
StyleCategory["Position"] = "Position";
|
|
1555
1572
|
StyleCategory["Background"] = "Background";
|
|
1556
1573
|
StyleCategory["Effects"] = "Effects";
|
|
1574
|
+
StyleCategory["List"] = "List";
|
|
1557
1575
|
// Legacy — kept for backward compat; prefer Size
|
|
1558
1576
|
StyleCategory["Dimensions"] = "Dimensions";
|
|
1559
1577
|
})(StyleCategory || (StyleCategory = {}));
|
|
@@ -1952,6 +1970,32 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
|
|
|
1952
1970
|
]);
|
|
1953
1971
|
}
|
|
1954
1972
|
}
|
|
1973
|
+
class ListGroupStyleConfig extends GroupStyleConfig {
|
|
1974
|
+
constructor() {
|
|
1975
|
+
super(StyleCategory.List, [
|
|
1976
|
+
new TraitConfig('listStyleType', 'Marker Style', TraitInputType.Select, [
|
|
1977
|
+
{ label: 'None', value: 'none' },
|
|
1978
|
+
{ label: 'Disc', value: 'disc' },
|
|
1979
|
+
{ label: 'Circle', value: 'circle' },
|
|
1980
|
+
{ label: 'Square', value: 'square' },
|
|
1981
|
+
{ label: 'Decimal', value: 'decimal' },
|
|
1982
|
+
{ label: 'Lower Alpha', value: 'lower-alpha' },
|
|
1983
|
+
{ label: 'Upper Alpha', value: 'upper-alpha' },
|
|
1984
|
+
{ label: 'Lower Roman', value: 'lower-roman' },
|
|
1985
|
+
{ label: 'Upper Roman', value: 'upper-roman' },
|
|
1986
|
+
], 'disc'),
|
|
1987
|
+
new TraitConfig('listStylePosition', 'Marker Position', TraitInputType.SelectButton, [
|
|
1988
|
+
{ value: 'outside', label: 'Outside' },
|
|
1989
|
+
{ value: 'inside', label: 'Inside' },
|
|
1990
|
+
], 'outside'),
|
|
1991
|
+
new TraitConfig('columnCount', 'Columns', TraitInputType.Scrub, { min: 1, max: 6, step: 1, units: [''] }, '1'),
|
|
1992
|
+
new TraitConfig('columnGap', 'Column Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px'),
|
|
1993
|
+
new TraitConfig('_sep_marker', 'Marker', TraitInputType.SectionLabel),
|
|
1994
|
+
new TraitConfig('markerColor', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: true, formats: ['hex', 'rgb', 'hsl', 'transparent'] }, ''),
|
|
1995
|
+
new TraitConfig('markerFontSize', 'Size', TraitInputType.Scrub, { min: 4, max: 100, step: 1, units: UNITS_FIXED }, ''),
|
|
1996
|
+
]);
|
|
1997
|
+
}
|
|
1998
|
+
}
|
|
1955
1999
|
/**
|
|
1956
2000
|
* Returns a fresh set of all 8 style-group configs in canonical display order.
|
|
1957
2001
|
* Every call produces new TraitConfig instances so different component nodes
|
|
@@ -2063,11 +2107,25 @@ class StyleRegistryService {
|
|
|
2063
2107
|
this.flush();
|
|
2064
2108
|
return;
|
|
2065
2109
|
}
|
|
2110
|
+
// ::marker pseudo-element — emitted as a separate rule, not part of inner/outer split.
|
|
2111
|
+
const markerStyles = styles['__markerStyles'];
|
|
2112
|
+
if (markerStyles && Object.keys(markerStyles).length) {
|
|
2113
|
+
const markerCss = this.compile(`iox-node-${nodeId}::marker`, markerStyles);
|
|
2114
|
+
if (markerCss)
|
|
2115
|
+
this.rules.set(`${nodeId}::marker`, markerCss);
|
|
2116
|
+
else
|
|
2117
|
+
this.rules.delete(`${nodeId}::marker`);
|
|
2118
|
+
}
|
|
2119
|
+
else {
|
|
2120
|
+
this.rules.delete(`${nodeId}::marker`);
|
|
2121
|
+
}
|
|
2066
2122
|
const pos = String(styles['position'] ?? '');
|
|
2067
2123
|
const isOutOfFlow = pos === 'fixed' || pos === 'absolute';
|
|
2068
2124
|
const inner = {};
|
|
2069
2125
|
const outer = {};
|
|
2070
2126
|
for (const [k, v] of Object.entries(styles)) {
|
|
2127
|
+
if (k === '__markerStyles')
|
|
2128
|
+
continue;
|
|
2071
2129
|
const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
|
|
2072
2130
|
// width goes to inner for fixed/absolute (the positioned element owns its own width)
|
|
2073
2131
|
if (wantsOuter && !(isOutOfFlow && k === 'width')) {
|
|
@@ -2923,6 +2981,7 @@ class LayerTreeComponent {
|
|
|
2923
2981
|
this.hoveredNodeId = null;
|
|
2924
2982
|
this.editingNodeId = null;
|
|
2925
2983
|
this.editingValue = '';
|
|
2984
|
+
this.activeSection = 'page';
|
|
2926
2985
|
/** Cache: component type → icon class */
|
|
2927
2986
|
this.iconMap = new Map();
|
|
2928
2987
|
/** Last-seen structural signature — used by ngDoCheck to skip no-op rebuilds. */
|
|
@@ -2979,6 +3038,7 @@ class LayerTreeComponent {
|
|
|
2979
3038
|
toggleExpand(treeNode, event) {
|
|
2980
3039
|
event.stopPropagation();
|
|
2981
3040
|
treeNode.expanded = !treeNode.expanded;
|
|
3041
|
+
this.rebuild();
|
|
2982
3042
|
}
|
|
2983
3043
|
onDeleteNode(treeNode, event) {
|
|
2984
3044
|
event.stopPropagation();
|
|
@@ -3081,11 +3141,11 @@ class LayerTreeComponent {
|
|
|
3081
3141
|
}
|
|
3082
3142
|
}
|
|
3083
3143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LayerTreeComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LayerTreeComponent, isStandalone: false, selector: "app-layer-tree", inputs: { layout: "layout", globalElements: "globalElements" }, outputs: { nodeSelect: "nodeSelect", nodeAction: "nodeAction", nodeMove: "nodeMove" }, ngImport: i0, template: "<div class=\"layer-tree\">\n <div class=\"tree-header\">\n <h3 class=\"panel-title\">Layers</h3>\n </div>\n\n <div class=\"tree-body\"\n cdkDropList\n [cdkDropListData]=\"flatTree\"\n (cdkDropListDropped)=\"onTreeDrop($event)\">\n <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-tree-structure\"></i>\n <span>No layers yet</span>\n </div>\n\n <div *ngFor=\"let tn of flatTree\"\n class=\"tree-row\"\n cdkDrag\n [cdkDragData]=\"tn\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <!-- Drag handle indicator -->\n <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n <!-- Expand/collapse toggle -->\n <button *ngIf=\"tn.hasChildren\"\n class=\"expand-btn\"\n (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <!-- Icon + Label / inline rename -->\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n <input class=\"node-rename-input\"\n [value]=\"editingValue\"\n (input)=\"editingValue = $any($event.target).value\"\n (keydown.enter)=\"saveRename(tn)\"\n (keydown.escape)=\"cancelRename()\"\n (blur)=\"saveRename(tn)\"\n (click)=\"$event.stopPropagation()\"\n autofocus>\n </ng-container>\n <ng-template #staticLabel>\n <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n </ng-template>\n\n <!-- Actions (visible on hover) -->\n <span class=\"node-actions\">\n <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n <i class=\"ph-thin ph-pencil-simple\"></i>\n </button>\n <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n <i class=\"ph-thin ph-copy\"></i>\n </button>\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n\n <!-- Global Elements section -->\n <ng-container *ngIf=\"flatGlobalTree.length\">\n <div class=\"tree-section-header\">\n <i class=\"ph-thin ph-globe\"></i>\n <span>Global Elements</span>\n </div>\n <div class=\"tree-body tree-body--global\">\n <div *ngFor=\"let tn of flatGlobalTree\"\n class=\"tree-row tree-row--global\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <!-- Expand/collapse toggle -->\n <button *ngIf=\"tn.hasChildren\"\n class=\"expand-btn\"\n (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <!-- Icon + Label -->\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <span class=\"node-label\">{{ tn.label }}</span>\n <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n <!-- Actions (visible on hover) -->\n <span class=\"node-actions\">\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .tree-header .panel-title{margin:0;font-size:13px;font-weight:600;text-transform:capitalize}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\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: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
3144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LayerTreeComponent, isStandalone: false, selector: "app-layer-tree", inputs: { layout: "layout", globalElements: "globalElements" }, outputs: { nodeSelect: "nodeSelect", nodeAction: "nodeAction", nodeMove: "nodeMove" }, ngImport: i0, template: "<div class=\"layer-tree\">\n <div class=\"tree-header\">\n <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'page'\" (click)=\"activeSection = 'page'\">\n <i class=\"ph-thin ph-stack\"></i> Page\n </button>\n <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'global'\" (click)=\"activeSection = 'global'\">\n <i class=\"ph-thin ph-globe\"></i> Global\n <span *ngIf=\"flatGlobalTree.length\" class=\"section-tab-badge\">{{ flatGlobalTree.length }}</span>\n </button>\n </div>\n\n <!-- \u2500\u2500 Page elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div *ngIf=\"activeSection === 'page'\"\n class=\"tree-body\"\n cdkDropList\n [cdkDropListData]=\"flatTree\"\n (cdkDropListDropped)=\"onTreeDrop($event)\">\n <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-tree-structure\"></i>\n <span>No layers yet</span>\n </div>\n\n <div *ngFor=\"let tn of flatTree\"\n class=\"tree-row\"\n cdkDrag\n [cdkDragData]=\"tn\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n <input class=\"node-rename-input\"\n [value]=\"editingValue\"\n (input)=\"editingValue = $any($event.target).value\"\n (keydown.enter)=\"saveRename(tn)\"\n (keydown.escape)=\"cancelRename()\"\n (blur)=\"saveRename(tn)\"\n (click)=\"$event.stopPropagation()\"\n autofocus>\n </ng-container>\n <ng-template #staticLabel>\n <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n </ng-template>\n\n <span class=\"node-actions\">\n <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n <i class=\"ph-thin ph-pencil-simple\"></i>\n </button>\n <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n <i class=\"ph-thin ph-copy\"></i>\n </button>\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n\n <!-- \u2500\u2500 Global elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div *ngIf=\"activeSection === 'global'\" class=\"tree-body\">\n <div *ngIf=\"!flatGlobalTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-globe\"></i>\n <span>No global elements</span>\n </div>\n\n <div *ngFor=\"let tn of flatGlobalTree\"\n class=\"tree-row tree-row--global\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <span class=\"node-label\">{{ tn.label }}</span>\n <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n <span class=\"node-actions\">\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .section-tab{display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;padding:4px 8px;font-size:11px;font-weight:500;border:1px solid var(--p-surface-200);border-radius:4px;background:transparent;color:var(--p-text-muted-color);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.layer-tree .section-tab i{font-size:11px}.layer-tree .section-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}.layer-tree .section-tab--active{background:#cb909026;border-color:#cb9090;color:#cb9090}.layer-tree .section-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;background:#cb9090;color:#fff;border-radius:8px}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\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: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
3085
3145
|
}
|
|
3086
3146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LayerTreeComponent, decorators: [{
|
|
3087
3147
|
type: Component,
|
|
3088
|
-
args: [{ selector: 'app-layer-tree', standalone: false, template: "<div class=\"layer-tree\">\n <div class=\"tree-header\">\n <h3 class=\"panel-title\">Layers</h3>\n </div>\n\n <div class=\"tree-body\"\n cdkDropList\n [cdkDropListData]=\"flatTree\"\n (cdkDropListDropped)=\"onTreeDrop($event)\">\n <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-tree-structure\"></i>\n <span>No layers yet</span>\n </div>\n\n <div *ngFor=\"let tn of flatTree\"\n class=\"tree-row\"\n cdkDrag\n [cdkDragData]=\"tn\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <!-- Drag handle indicator -->\n <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n <!-- Expand/collapse toggle -->\n <button *ngIf=\"tn.hasChildren\"\n class=\"expand-btn\"\n (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <!-- Icon + Label / inline rename -->\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n <input class=\"node-rename-input\"\n [value]=\"editingValue\"\n (input)=\"editingValue = $any($event.target).value\"\n (keydown.enter)=\"saveRename(tn)\"\n (keydown.escape)=\"cancelRename()\"\n (blur)=\"saveRename(tn)\"\n (click)=\"$event.stopPropagation()\"\n autofocus>\n </ng-container>\n <ng-template #staticLabel>\n <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n </ng-template>\n\n <!-- Actions (visible on hover) -->\n <span class=\"node-actions\">\n <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n <i class=\"ph-thin ph-pencil-simple\"></i>\n </button>\n <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n <i class=\"ph-thin ph-copy\"></i>\n </button>\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n\n <!-- Global Elements section -->\n <ng-container *ngIf=\"flatGlobalTree.length\">\n <div class=\"tree-section-header\">\n <i class=\"ph-thin ph-globe\"></i>\n <span>Global Elements</span>\n </div>\n <div class=\"tree-body tree-body--global\">\n <div *ngFor=\"let tn of flatGlobalTree\"\n class=\"tree-row tree-row--global\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <!-- Expand/collapse toggle -->\n <button *ngIf=\"tn.hasChildren\"\n class=\"expand-btn\"\n (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <!-- Icon + Label -->\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <span class=\"node-label\">{{ tn.label }}</span>\n <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n <!-- Actions (visible on hover) -->\n <span class=\"node-actions\">\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .tree-header .panel-title{margin:0;font-size:13px;font-weight:600;text-transform:capitalize}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"] }]
|
|
3148
|
+
args: [{ selector: 'app-layer-tree', standalone: false, template: "<div class=\"layer-tree\">\n <div class=\"tree-header\">\n <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'page'\" (click)=\"activeSection = 'page'\">\n <i class=\"ph-thin ph-stack\"></i> Page\n </button>\n <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'global'\" (click)=\"activeSection = 'global'\">\n <i class=\"ph-thin ph-globe\"></i> Global\n <span *ngIf=\"flatGlobalTree.length\" class=\"section-tab-badge\">{{ flatGlobalTree.length }}</span>\n </button>\n </div>\n\n <!-- \u2500\u2500 Page elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div *ngIf=\"activeSection === 'page'\"\n class=\"tree-body\"\n cdkDropList\n [cdkDropListData]=\"flatTree\"\n (cdkDropListDropped)=\"onTreeDrop($event)\">\n <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-tree-structure\"></i>\n <span>No layers yet</span>\n </div>\n\n <div *ngFor=\"let tn of flatTree\"\n class=\"tree-row\"\n cdkDrag\n [cdkDragData]=\"tn\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n <input class=\"node-rename-input\"\n [value]=\"editingValue\"\n (input)=\"editingValue = $any($event.target).value\"\n (keydown.enter)=\"saveRename(tn)\"\n (keydown.escape)=\"cancelRename()\"\n (blur)=\"saveRename(tn)\"\n (click)=\"$event.stopPropagation()\"\n autofocus>\n </ng-container>\n <ng-template #staticLabel>\n <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n </ng-template>\n\n <span class=\"node-actions\">\n <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n <i class=\"ph-thin ph-pencil-simple\"></i>\n </button>\n <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n <i class=\"ph-thin ph-copy\"></i>\n </button>\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n\n <!-- \u2500\u2500 Global elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div *ngIf=\"activeSection === 'global'\" class=\"tree-body\">\n <div *ngIf=\"!flatGlobalTree.length\" class=\"tree-empty\">\n <i class=\"ph-thin ph-globe\"></i>\n <span>No global elements</span>\n </div>\n\n <div *ngFor=\"let tn of flatGlobalTree\"\n class=\"tree-row tree-row--global\"\n [class.is-selected]=\"tn.node.id === selectedNodeId\"\n [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n (click)=\"onNodeClick(tn)\"\n (mouseenter)=\"onNodeMouseEnter(tn)\"\n (mouseleave)=\"onNodeMouseLeave()\">\n\n <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n </button>\n <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n <span class=\"node-label\">{{ tn.label }}</span>\n <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n <span class=\"node-actions\">\n <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n <i class=\"ph-thin ph-trash\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .section-tab{display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;padding:4px 8px;font-size:11px;font-weight:500;border:1px solid var(--p-surface-200);border-radius:4px;background:transparent;color:var(--p-text-muted-color);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.layer-tree .section-tab i{font-size:11px}.layer-tree .section-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}.layer-tree .section-tab--active{background:#cb909026;border-color:#cb9090;color:#cb9090}.layer-tree .section-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;background:#cb9090;color:#fff;border-radius:8px}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"] }]
|
|
3089
3149
|
}], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }], propDecorators: { layout: [{
|
|
3090
3150
|
type: Input
|
|
3091
3151
|
}], globalElements: [{
|
|
@@ -3913,6 +3973,8 @@ class BuilderContainerComponent {
|
|
|
3913
3973
|
this.nodeId = '';
|
|
3914
3974
|
this.dropListId = '';
|
|
3915
3975
|
this.htmlTag = 'div';
|
|
3976
|
+
this.start = 1;
|
|
3977
|
+
this.reversed = false;
|
|
3916
3978
|
this.childClick = new EventEmitter();
|
|
3917
3979
|
this.childMouseEnter = new EventEmitter();
|
|
3918
3980
|
this.childMouseLeave = new EventEmitter();
|
|
@@ -3932,7 +3994,7 @@ class BuilderContainerComponent {
|
|
|
3932
3994
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
3933
3995
|
}
|
|
3934
3996
|
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 }); }
|
|
3935
|
-
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: `
|
|
3997
|
+
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: `
|
|
3936
3998
|
<ng-template #dropContent>
|
|
3937
3999
|
<div *ngIf="!children.length" class="container-placeholder">
|
|
3938
4000
|
<i class="ph-thin ph-square"></i>
|
|
@@ -3960,7 +4022,7 @@ class BuilderContainerComponent {
|
|
|
3960
4022
|
@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> }
|
|
3961
4023
|
@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> }
|
|
3962
4024
|
@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> }
|
|
3963
|
-
@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> }
|
|
4025
|
+
@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> }
|
|
3964
4026
|
@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> }
|
|
3965
4027
|
@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> }
|
|
3966
4028
|
}
|
|
@@ -3996,7 +4058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
3996
4058
|
@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> }
|
|
3997
4059
|
@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> }
|
|
3998
4060
|
@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> }
|
|
3999
|
-
@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> }
|
|
4061
|
+
@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> }
|
|
4000
4062
|
@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> }
|
|
4001
4063
|
@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> }
|
|
4002
4064
|
}
|
|
@@ -4011,6 +4073,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
4011
4073
|
type: Input
|
|
4012
4074
|
}], htmlTag: [{
|
|
4013
4075
|
type: Input
|
|
4076
|
+
}], start: [{
|
|
4077
|
+
type: Input
|
|
4078
|
+
}], reversed: [{
|
|
4079
|
+
type: Input
|
|
4014
4080
|
}], childClick: [{
|
|
4015
4081
|
type: Output
|
|
4016
4082
|
}], childMouseEnter: [{
|
|
@@ -5225,6 +5291,86 @@ class BuilderLinkedContainerConfig extends ComponentConfig {
|
|
|
5225
5291
|
}
|
|
5226
5292
|
}
|
|
5227
5293
|
|
|
5294
|
+
class BuilderListItemComponentConfig extends ComponentConfig {
|
|
5295
|
+
constructor() {
|
|
5296
|
+
super('ListItem', 'app-builder-container', 'ph-thin ph-list-dashes', 'Layout');
|
|
5297
|
+
this.traits = [
|
|
5298
|
+
new TraitConfig('htmlTag', 'Tag', TraitInputType.Select, ['li'], 'li'),
|
|
5299
|
+
];
|
|
5300
|
+
this.styleTraits = buildFullStyleTraits();
|
|
5301
|
+
this.children = [];
|
|
5302
|
+
this.applyStyleDefaults({
|
|
5303
|
+
width: '100%',
|
|
5304
|
+
display: 'block',
|
|
5305
|
+
backgroundColor: 'transparent',
|
|
5306
|
+
});
|
|
5307
|
+
}
|
|
5308
|
+
}
|
|
5309
|
+
|
|
5310
|
+
class TextBlockComponentConfig extends ComponentConfig {
|
|
5311
|
+
constructor() {
|
|
5312
|
+
super('Text', 'app-text-block', 'ph-thin ph-text-aa', 'Basic');
|
|
5313
|
+
this.inputs = {
|
|
5314
|
+
content: 'text',
|
|
5315
|
+
tag: 'select',
|
|
5316
|
+
};
|
|
5317
|
+
this.traits = [
|
|
5318
|
+
new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
|
|
5319
|
+
new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
|
|
5320
|
+
];
|
|
5321
|
+
this.styleTraits = buildFullStyleTraits();
|
|
5322
|
+
this.applyStyleDefaults({
|
|
5323
|
+
display: 'block',
|
|
5324
|
+
width: '100%',
|
|
5325
|
+
height: 'auto',
|
|
5326
|
+
minHeight: '20px',
|
|
5327
|
+
padding: '10px',
|
|
5328
|
+
});
|
|
5329
|
+
}
|
|
5330
|
+
}
|
|
5331
|
+
|
|
5332
|
+
class BuilderListComponentConfig extends ComponentConfig {
|
|
5333
|
+
constructor() {
|
|
5334
|
+
super('List', 'app-builder-container', 'ph-thin ph-list', 'Layout');
|
|
5335
|
+
this.traits = [
|
|
5336
|
+
new TraitConfig('htmlTag', 'Tag', TraitInputType.Select, ['ul', 'ol'], 'ul'),
|
|
5337
|
+
new TraitConfig('start', 'Start At', TraitInputType.Number, undefined, 1, false, { trait: 'htmlTag', values: 'ol' }),
|
|
5338
|
+
new TraitConfig('reversed', 'Reversed', TraitInputType.Checkbox, undefined, false, false, { trait: 'htmlTag', values: 'ol' }),
|
|
5339
|
+
];
|
|
5340
|
+
this.styleTraits = [
|
|
5341
|
+
new ListGroupStyleConfig(),
|
|
5342
|
+
new PositionGroupStyleConfig(),
|
|
5343
|
+
new LayoutGroupStyleConfig(),
|
|
5344
|
+
new SizeGroupStyleConfig(),
|
|
5345
|
+
new SpacingGroupStyleConfig(),
|
|
5346
|
+
new BorderGroupStyleConfig(),
|
|
5347
|
+
new BackgroundGroupStyleConfig(),
|
|
5348
|
+
new TypographyGroupStyleConfig(),
|
|
5349
|
+
new EffectsGroupStyleConfig(),
|
|
5350
|
+
];
|
|
5351
|
+
this.children = [
|
|
5352
|
+
this.makeListItem(),
|
|
5353
|
+
this.makeListItem(),
|
|
5354
|
+
this.makeListItem(),
|
|
5355
|
+
];
|
|
5356
|
+
this.applyStyleDefaults({
|
|
5357
|
+
width: '100%',
|
|
5358
|
+
display: 'block',
|
|
5359
|
+
backgroundColor: 'transparent',
|
|
5360
|
+
padding: '0px 0px 0px 24px',
|
|
5361
|
+
});
|
|
5362
|
+
}
|
|
5363
|
+
makeListItem() {
|
|
5364
|
+
const item = new BuilderListItemComponentConfig();
|
|
5365
|
+
const textCfg = new TextBlockComponentConfig();
|
|
5366
|
+
const contentTrait = textCfg.traits.find(t => t.name === 'content');
|
|
5367
|
+
if (contentTrait)
|
|
5368
|
+
contentTrait.default = 'List item';
|
|
5369
|
+
item.children = [textCfg];
|
|
5370
|
+
return item;
|
|
5371
|
+
}
|
|
5372
|
+
}
|
|
5373
|
+
|
|
5228
5374
|
class RepeaterComponentConfig extends ComponentConfig {
|
|
5229
5375
|
constructor() {
|
|
5230
5376
|
super('Repeater', 'app-builder-repeater', 'ph-thin ph-repeat', 'Data');
|
|
@@ -5280,28 +5426,6 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
|
|
|
5280
5426
|
}
|
|
5281
5427
|
}
|
|
5282
5428
|
|
|
5283
|
-
class TextBlockComponentConfig extends ComponentConfig {
|
|
5284
|
-
constructor() {
|
|
5285
|
-
super('Text', 'app-text-block', 'ph-thin ph-text-aa', 'Basic');
|
|
5286
|
-
this.inputs = {
|
|
5287
|
-
content: 'text',
|
|
5288
|
-
tag: 'select',
|
|
5289
|
-
};
|
|
5290
|
-
this.traits = [
|
|
5291
|
-
new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
|
|
5292
|
-
new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
|
|
5293
|
-
];
|
|
5294
|
-
this.styleTraits = buildFullStyleTraits();
|
|
5295
|
-
this.applyStyleDefaults({
|
|
5296
|
-
display: 'block',
|
|
5297
|
-
width: '100%',
|
|
5298
|
-
height: 'auto',
|
|
5299
|
-
minHeight: '20px',
|
|
5300
|
-
padding: '10px',
|
|
5301
|
-
});
|
|
5302
|
-
}
|
|
5303
|
-
}
|
|
5304
|
-
|
|
5305
5429
|
/*
|
|
5306
5430
|
* Public API Surface of @vectoriox/iox-builder
|
|
5307
5431
|
*/
|
|
@@ -5310,5 +5434,5 @@ class TextBlockComponentConfig extends ComponentConfig {
|
|
|
5310
5434
|
* Generated bundle index. Do not edit.
|
|
5311
5435
|
*/
|
|
5312
5436
|
|
|
5313
|
-
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 };
|
|
5437
|
+
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 };
|
|
5314
5438
|
//# sourceMappingURL=vectoriox-iox-builder.mjs.map
|