@vectoriox/iox-builder 1.7.3 → 1.7.4
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.
|
@@ -2859,8 +2859,9 @@ let dropListCounter = 0;
|
|
|
2859
2859
|
const DIRECTIVE_HOST_TYPES = new Set([
|
|
2860
2860
|
'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
|
|
2861
2861
|
// Phase 2 (9c): layout components converted to directive-hosts (host IS the real tag).
|
|
2862
|
-
'Section',
|
|
2862
|
+
'Section', 'Container', 'List', 'ListItem',
|
|
2863
2863
|
]);
|
|
2864
|
+
const CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'];
|
|
2864
2865
|
/**
|
|
2865
2866
|
* RenderDirective — applied to <ng-container> to dynamically instantiate a
|
|
2866
2867
|
* builder component with zero wrapper elements in the DOM.
|
|
@@ -2910,6 +2911,14 @@ class RenderDirective {
|
|
|
2910
2911
|
return traitVal('tag') === 'span' ? 'span' : 'p';
|
|
2911
2912
|
case 'ButtonBlock':
|
|
2912
2913
|
return traitVal('tag') === 'a' ? 'a' : 'button';
|
|
2914
|
+
case 'Container':
|
|
2915
|
+
case 'List':
|
|
2916
|
+
case 'ListItem': {
|
|
2917
|
+
const t = traitVal('htmlTag');
|
|
2918
|
+
if (CONTAINER_TAGS.includes(t))
|
|
2919
|
+
return t;
|
|
2920
|
+
return node.type === 'List' ? 'ul' : node.type === 'ListItem' ? 'li' : 'div';
|
|
2921
|
+
}
|
|
2913
2922
|
default:
|
|
2914
2923
|
return null;
|
|
2915
2924
|
}
|
|
@@ -4998,42 +5007,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
4998
5007
|
type: Output
|
|
4999
5008
|
}] } });
|
|
5000
5009
|
|
|
5001
|
-
|
|
5002
|
-
|
|
5003
|
-
|
|
5004
|
-
|
|
5005
|
-
|
|
5006
|
-
|
|
5007
|
-
|
|
5008
|
-
|
|
5009
|
-
}
|
|
5010
|
-
ngOnInit() {
|
|
5011
|
-
this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
|
|
5012
|
-
}
|
|
5013
|
-
ngOnDestroy() {
|
|
5014
|
-
this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
|
|
5015
|
-
}
|
|
5016
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5017
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDropzoneDirective, isStandalone: false, selector: "[ioxDropzone]", inputs: { ioxDropzoneId: "ioxDropzoneId", ioxDropzoneData: "ioxDropzoneData", ioxDropzonePostDrop: "ioxDropzonePostDrop" }, outputs: { ioxDrop: "ioxDrop" }, ngImport: i0 }); }
|
|
5018
|
-
}
|
|
5019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
|
|
5020
|
-
type: Directive,
|
|
5021
|
-
args: [{
|
|
5022
|
-
selector: '[ioxDropzone]',
|
|
5023
|
-
standalone: false,
|
|
5024
|
-
}]
|
|
5025
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
|
|
5026
|
-
type: Input
|
|
5027
|
-
}], ioxDropzoneData: [{
|
|
5028
|
-
type: Input
|
|
5029
|
-
}], ioxDropzonePostDrop: [{
|
|
5030
|
-
type: Input
|
|
5031
|
-
}], ioxDrop: [{
|
|
5032
|
-
type: Output
|
|
5033
|
-
}] } });
|
|
5034
|
-
|
|
5010
|
+
/**
|
|
5011
|
+
* Directive-host Container (Phase 2 of the Moveable migration = task 9c). The real tag (div/section/
|
|
5012
|
+
* ul/ol/li/…, chosen from the `htmlTag` trait by RenderDirective via `hostElement`) IS the host — no
|
|
5013
|
+
* `<app-builder-container>` wrapper, no separate `.container-root` — matching the SSR engine. The
|
|
5014
|
+
* dropzone is registered on the host itself; the `.container-child` draggable wrappers are UNCHANGED,
|
|
5015
|
+
* so interact.js (flag-off) keeps working. Also backs the List (`ul`/`ol`) and ListItem (`li`) types.
|
|
5016
|
+
* See moveable-migration.md.
|
|
5017
|
+
*/
|
|
5035
5018
|
class BuilderContainerComponent {
|
|
5036
|
-
constructor(dragEngine, cdr) {
|
|
5019
|
+
constructor(elRef, dragEngine, cdr) {
|
|
5020
|
+
this.elRef = elRef;
|
|
5037
5021
|
this.dragEngine = dragEngine;
|
|
5038
5022
|
this.cdr = cdr;
|
|
5039
5023
|
this.children = [];
|
|
@@ -5047,8 +5031,13 @@ class BuilderContainerComponent {
|
|
|
5047
5031
|
this.childMouseEnter = new EventEmitter();
|
|
5048
5032
|
this.childMouseLeave = new EventEmitter();
|
|
5049
5033
|
}
|
|
5050
|
-
ngOnInit() {
|
|
5051
|
-
|
|
5034
|
+
ngOnInit() {
|
|
5035
|
+
// Register the HOST as the dropzone (was the ioxDropzone directive on `.container-root`).
|
|
5036
|
+
this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
|
|
5037
|
+
}
|
|
5038
|
+
ngOnDestroy() {
|
|
5039
|
+
this.dragEngine.unregisterDropzone(this.dropListId, this.elRef.nativeElement);
|
|
5040
|
+
}
|
|
5052
5041
|
get listOrientation() {
|
|
5053
5042
|
const d = this.style?.['display'];
|
|
5054
5043
|
if (d === 'flex' || d === 'inline-flex') {
|
|
@@ -5061,77 +5050,53 @@ class BuilderContainerComponent {
|
|
|
5061
5050
|
onDrop(event) {
|
|
5062
5051
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
5063
5052
|
}
|
|
5064
|
-
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 }); }
|
|
5065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5066
|
-
<
|
|
5067
|
-
<
|
|
5068
|
-
|
|
5069
|
-
|
|
5070
|
-
</div>
|
|
5071
|
-
<div *ngFor="let child of children"
|
|
5072
|
-
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5073
|
-
ioxDraggable
|
|
5074
|
-
[ioxDragData]="child"
|
|
5075
|
-
[ioxDragSourceId]="dropListId">
|
|
5076
|
-
<ng-container
|
|
5077
|
-
[ioxRender]="child"
|
|
5078
|
-
(onClick)="childClick.emit($event)"
|
|
5079
|
-
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5080
|
-
(onMouseLeave)="childMouseLeave.emit()">
|
|
5081
|
-
</ng-container>
|
|
5082
|
-
</div>
|
|
5083
|
-
</ng-template>
|
|
5053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderContainerComponent, isStandalone: false, selector: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
|
|
5055
|
+
<div *ngIf="!children.length" class="container-placeholder">
|
|
5056
|
+
<i class="ph-thin ph-square"></i>
|
|
5057
|
+
<span>Drop components here</span>
|
|
5058
|
+
</div>
|
|
5084
5059
|
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
`, isInline: true, styles: ["
|
|
5060
|
+
<div *ngFor="let child of children"
|
|
5061
|
+
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5062
|
+
ioxDraggable
|
|
5063
|
+
[ioxDragData]="child"
|
|
5064
|
+
[ioxDragSourceId]="dropListId">
|
|
5065
|
+
<ng-container
|
|
5066
|
+
[ioxRender]="child"
|
|
5067
|
+
(onClick)="childClick.emit($event)"
|
|
5068
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5069
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
5070
|
+
</ng-container>
|
|
5071
|
+
</div>
|
|
5072
|
+
`, isInline: true, styles: [":host{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}:host(:hover) .container-placeholder,:host(.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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }] }); }
|
|
5098
5073
|
}
|
|
5099
5074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
|
|
5100
5075
|
type: Component,
|
|
5101
|
-
args: [{ selector: '
|
|
5102
|
-
<
|
|
5103
|
-
<
|
|
5104
|
-
|
|
5105
|
-
|
|
5106
|
-
</div>
|
|
5107
|
-
<div *ngFor="let child of children"
|
|
5108
|
-
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5109
|
-
ioxDraggable
|
|
5110
|
-
[ioxDragData]="child"
|
|
5111
|
-
[ioxDragSourceId]="dropListId">
|
|
5112
|
-
<ng-container
|
|
5113
|
-
[ioxRender]="child"
|
|
5114
|
-
(onClick)="childClick.emit($event)"
|
|
5115
|
-
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5116
|
-
(onMouseLeave)="childMouseLeave.emit()">
|
|
5117
|
-
</ng-container>
|
|
5118
|
-
</div>
|
|
5119
|
-
</ng-template>
|
|
5076
|
+
args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]', template: `
|
|
5077
|
+
<div *ngIf="!children.length" class="container-placeholder">
|
|
5078
|
+
<i class="ph-thin ph-square"></i>
|
|
5079
|
+
<span>Drop components here</span>
|
|
5080
|
+
</div>
|
|
5120
5081
|
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
|
|
5133
|
-
`,
|
|
5134
|
-
|
|
5082
|
+
<div *ngFor="let child of children"
|
|
5083
|
+
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5084
|
+
ioxDraggable
|
|
5085
|
+
[ioxDragData]="child"
|
|
5086
|
+
[ioxDragSourceId]="dropListId">
|
|
5087
|
+
<ng-container
|
|
5088
|
+
[ioxRender]="child"
|
|
5089
|
+
(onClick)="childClick.emit($event)"
|
|
5090
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5091
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
5092
|
+
</ng-container>
|
|
5093
|
+
</div>
|
|
5094
|
+
`, host: {
|
|
5095
|
+
'[class]': "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')",
|
|
5096
|
+
'[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
|
|
5097
|
+
'[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
|
|
5098
|
+
}, standalone: false, styles: [":host{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}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
|
|
5099
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
|
|
5135
5100
|
type: Input
|
|
5136
5101
|
}], style: [{
|
|
5137
5102
|
type: Input
|
|
@@ -5153,6 +5118,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5153
5118
|
type: Output
|
|
5154
5119
|
}] } });
|
|
5155
5120
|
|
|
5121
|
+
class IoxDropzoneDirective {
|
|
5122
|
+
constructor(el, dragEngine, cdr) {
|
|
5123
|
+
this.el = el;
|
|
5124
|
+
this.dragEngine = dragEngine;
|
|
5125
|
+
this.cdr = cdr;
|
|
5126
|
+
this.ioxDropzoneId = '';
|
|
5127
|
+
this.ioxDropzoneData = [];
|
|
5128
|
+
this.ioxDrop = new EventEmitter();
|
|
5129
|
+
}
|
|
5130
|
+
ngOnInit() {
|
|
5131
|
+
this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
|
|
5132
|
+
}
|
|
5133
|
+
ngOnDestroy() {
|
|
5134
|
+
this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
|
|
5135
|
+
}
|
|
5136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5137
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDropzoneDirective, isStandalone: false, selector: "[ioxDropzone]", inputs: { ioxDropzoneId: "ioxDropzoneId", ioxDropzoneData: "ioxDropzoneData", ioxDropzonePostDrop: "ioxDropzonePostDrop" }, outputs: { ioxDrop: "ioxDrop" }, ngImport: i0 }); }
|
|
5138
|
+
}
|
|
5139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
|
|
5140
|
+
type: Directive,
|
|
5141
|
+
args: [{
|
|
5142
|
+
selector: '[ioxDropzone]',
|
|
5143
|
+
standalone: false,
|
|
5144
|
+
}]
|
|
5145
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
|
|
5146
|
+
type: Input
|
|
5147
|
+
}], ioxDropzoneData: [{
|
|
5148
|
+
type: Input
|
|
5149
|
+
}], ioxDropzonePostDrop: [{
|
|
5150
|
+
type: Input
|
|
5151
|
+
}], ioxDrop: [{
|
|
5152
|
+
type: Output
|
|
5153
|
+
}] } });
|
|
5154
|
+
|
|
5156
5155
|
class BuilderLinkedContainerComponent {
|
|
5157
5156
|
constructor(dragEngine, cdr, elRef, isPreview) {
|
|
5158
5157
|
this.dragEngine = dragEngine;
|