@vectoriox/iox-builder 1.7.2 → 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.
|
@@ -2858,7 +2858,10 @@ let dropListCounter = 0;
|
|
|
2858
2858
|
*/
|
|
2859
2859
|
const DIRECTIVE_HOST_TYPES = new Set([
|
|
2860
2860
|
'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
|
|
2861
|
+
// Phase 2 (9c): layout components converted to directive-hosts (host IS the real tag).
|
|
2862
|
+
'Section', 'Container', 'List', 'ListItem',
|
|
2861
2863
|
]);
|
|
2864
|
+
const CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'];
|
|
2862
2865
|
/**
|
|
2863
2866
|
* RenderDirective — applied to <ng-container> to dynamically instantiate a
|
|
2864
2867
|
* builder component with zero wrapper elements in the DOM.
|
|
@@ -2908,6 +2911,14 @@ class RenderDirective {
|
|
|
2908
2911
|
return traitVal('tag') === 'span' ? 'span' : 'p';
|
|
2909
2912
|
case 'ButtonBlock':
|
|
2910
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
|
+
}
|
|
2911
2922
|
default:
|
|
2912
2923
|
return null;
|
|
2913
2924
|
}
|
|
@@ -4897,42 +4908,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
4897
4908
|
args: ['globalOverlay']
|
|
4898
4909
|
}] } });
|
|
4899
4910
|
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
|
|
4906
|
-
|
|
4907
|
-
this.ioxDrop = new EventEmitter();
|
|
4908
|
-
}
|
|
4909
|
-
ngOnInit() {
|
|
4910
|
-
this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
|
|
4911
|
-
}
|
|
4912
|
-
ngOnDestroy() {
|
|
4913
|
-
this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
|
|
4914
|
-
}
|
|
4915
|
-
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 }); }
|
|
4916
|
-
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 }); }
|
|
4917
|
-
}
|
|
4918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
|
|
4919
|
-
type: Directive,
|
|
4920
|
-
args: [{
|
|
4921
|
-
selector: '[ioxDropzone]',
|
|
4922
|
-
standalone: false,
|
|
4923
|
-
}]
|
|
4924
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
|
|
4925
|
-
type: Input
|
|
4926
|
-
}], ioxDropzoneData: [{
|
|
4927
|
-
type: Input
|
|
4928
|
-
}], ioxDropzonePostDrop: [{
|
|
4929
|
-
type: Input
|
|
4930
|
-
}], ioxDrop: [{
|
|
4931
|
-
type: Output
|
|
4932
|
-
}] } });
|
|
4933
|
-
|
|
4911
|
+
/**
|
|
4912
|
+
* Directive-host Section (Phase 2 of the Moveable migration = task 9c). The `<section>` IS the host
|
|
4913
|
+
* (no `<app-section>` wrapper, no separate `.section-root`) — matching the SSR engine's
|
|
4914
|
+
* `section[iox-section]`. The dropzone is registered on the host element itself (was the ioxDropzone
|
|
4915
|
+
* directive on `.section-root`); the `.section-child` draggable wrappers are UNCHANGED, so interact.js
|
|
4916
|
+
* (flag-off) keeps working exactly as before. See moveable-migration.md.
|
|
4917
|
+
*/
|
|
4934
4918
|
class SectionComponent {
|
|
4935
|
-
constructor(dragEngine, cdr) {
|
|
4919
|
+
constructor(elRef, dragEngine, cdr) {
|
|
4920
|
+
this.elRef = elRef;
|
|
4936
4921
|
this.dragEngine = dragEngine;
|
|
4937
4922
|
this.cdr = cdr;
|
|
4938
4923
|
this.children = [];
|
|
@@ -4943,7 +4928,13 @@ class SectionComponent {
|
|
|
4943
4928
|
this.childMouseEnter = new EventEmitter();
|
|
4944
4929
|
this.childMouseLeave = new EventEmitter();
|
|
4945
4930
|
}
|
|
4946
|
-
ngOnInit() {
|
|
4931
|
+
ngOnInit() {
|
|
4932
|
+
// Register the HOST as the dropzone (was the ioxDropzone directive on `.section-root`).
|
|
4933
|
+
this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
|
|
4934
|
+
}
|
|
4935
|
+
ngOnDestroy() {
|
|
4936
|
+
this.dragEngine.unregisterDropzone(this.dropListId, this.elRef.nativeElement);
|
|
4937
|
+
}
|
|
4947
4938
|
get listOrientation() {
|
|
4948
4939
|
const d = this.style?.['display'];
|
|
4949
4940
|
if (d === 'flex' || d === 'inline-flex') {
|
|
@@ -4953,69 +4944,54 @@ class SectionComponent {
|
|
|
4953
4944
|
}
|
|
4954
4945
|
return 'vertical';
|
|
4955
4946
|
}
|
|
4956
|
-
ngOnDestroy() { }
|
|
4957
4947
|
onDrop(event) {
|
|
4958
4948
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
4959
4949
|
}
|
|
4960
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "
|
|
4962
|
-
<
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
[ioxDropzoneData]="children"
|
|
4967
|
-
(ioxDrop)="onDrop($event)">
|
|
4968
|
-
|
|
4969
|
-
<div *ngIf="!children.length" class="section-placeholder">
|
|
4970
|
-
<i class="ph-thin ph-rows"></i>
|
|
4971
|
-
<span>Drop components here</span>
|
|
4972
|
-
</div>
|
|
4950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')" } }, ngImport: i0, template: `
|
|
4952
|
+
<div *ngIf="!children.length" class="section-placeholder">
|
|
4953
|
+
<i class="ph-thin ph-rows"></i>
|
|
4954
|
+
<span>Drop components here</span>
|
|
4955
|
+
</div>
|
|
4973
4956
|
|
|
4974
|
-
|
|
4975
|
-
|
|
4976
|
-
|
|
4977
|
-
|
|
4978
|
-
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
|
|
4982
|
-
|
|
4983
|
-
|
|
4984
|
-
|
|
4985
|
-
|
|
4986
|
-
|
|
4987
|
-
`, 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"] }] }); }
|
|
4957
|
+
<div *ngFor="let child of children"
|
|
4958
|
+
[ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
4959
|
+
ioxDraggable
|
|
4960
|
+
[ioxDragData]="child"
|
|
4961
|
+
[ioxDragSourceId]="dropListId">
|
|
4962
|
+
<ng-container
|
|
4963
|
+
[ioxRender]="child"
|
|
4964
|
+
(onClick)="childClick.emit($event)"
|
|
4965
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
4966
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
4967
|
+
</ng-container>
|
|
4968
|
+
</div>
|
|
4969
|
+
`, isInline: true, styles: [":host{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}:host(:hover) .section-placeholder,:host(.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"] }] }); }
|
|
4988
4970
|
}
|
|
4989
4971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
|
|
4990
4972
|
type: Component,
|
|
4991
|
-
args: [{ selector: '
|
|
4992
|
-
<
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
[ioxDropzoneData]="children"
|
|
4997
|
-
(ioxDrop)="onDrop($event)">
|
|
4998
|
-
|
|
4999
|
-
<div *ngIf="!children.length" class="section-placeholder">
|
|
5000
|
-
<i class="ph-thin ph-rows"></i>
|
|
5001
|
-
<span>Drop components here</span>
|
|
5002
|
-
</div>
|
|
4973
|
+
args: [{ selector: 'section[iox-section]', template: `
|
|
4974
|
+
<div *ngIf="!children.length" class="section-placeholder">
|
|
4975
|
+
<i class="ph-thin ph-rows"></i>
|
|
4976
|
+
<span>Drop components here</span>
|
|
4977
|
+
</div>
|
|
5003
4978
|
|
|
5004
|
-
|
|
5005
|
-
|
|
5006
|
-
|
|
5007
|
-
|
|
5008
|
-
|
|
5009
|
-
|
|
5010
|
-
|
|
5011
|
-
|
|
5012
|
-
|
|
5013
|
-
|
|
5014
|
-
|
|
5015
|
-
|
|
5016
|
-
|
|
5017
|
-
|
|
5018
|
-
|
|
4979
|
+
<div *ngFor="let child of children"
|
|
4980
|
+
[ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
4981
|
+
ioxDraggable
|
|
4982
|
+
[ioxDragData]="child"
|
|
4983
|
+
[ioxDragSourceId]="dropListId">
|
|
4984
|
+
<ng-container
|
|
4985
|
+
[ioxRender]="child"
|
|
4986
|
+
(onClick)="childClick.emit($event)"
|
|
4987
|
+
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
4988
|
+
(onMouseLeave)="childMouseLeave.emit()">
|
|
4989
|
+
</ng-container>
|
|
4990
|
+
</div>
|
|
4991
|
+
`, host: {
|
|
4992
|
+
'[class]': "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')",
|
|
4993
|
+
}, standalone: false, styles: [":host{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}:host(:hover) .section-placeholder,:host(.iox-drag-over) .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
|
|
4994
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
|
|
5019
4995
|
type: Input
|
|
5020
4996
|
}], style: [{
|
|
5021
4997
|
type: Input
|
|
@@ -5031,8 +5007,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5031
5007
|
type: Output
|
|
5032
5008
|
}] } });
|
|
5033
5009
|
|
|
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
|
+
*/
|
|
5034
5018
|
class BuilderContainerComponent {
|
|
5035
|
-
constructor(dragEngine, cdr) {
|
|
5019
|
+
constructor(elRef, dragEngine, cdr) {
|
|
5020
|
+
this.elRef = elRef;
|
|
5036
5021
|
this.dragEngine = dragEngine;
|
|
5037
5022
|
this.cdr = cdr;
|
|
5038
5023
|
this.children = [];
|
|
@@ -5046,8 +5031,13 @@ class BuilderContainerComponent {
|
|
|
5046
5031
|
this.childMouseEnter = new EventEmitter();
|
|
5047
5032
|
this.childMouseLeave = new EventEmitter();
|
|
5048
5033
|
}
|
|
5049
|
-
ngOnInit() {
|
|
5050
|
-
|
|
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
|
+
}
|
|
5051
5041
|
get listOrientation() {
|
|
5052
5042
|
const d = this.style?.['display'];
|
|
5053
5043
|
if (d === 'flex' || d === 'inline-flex') {
|
|
@@ -5060,77 +5050,53 @@ class BuilderContainerComponent {
|
|
|
5060
5050
|
onDrop(event) {
|
|
5061
5051
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
5062
5052
|
}
|
|
5063
|
-
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 }); }
|
|
5064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5065
|
-
<
|
|
5066
|
-
<
|
|
5067
|
-
|
|
5068
|
-
|
|
5069
|
-
</div>
|
|
5070
|
-
<div *ngFor="let child of children"
|
|
5071
|
-
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5072
|
-
ioxDraggable
|
|
5073
|
-
[ioxDragData]="child"
|
|
5074
|
-
[ioxDragSourceId]="dropListId">
|
|
5075
|
-
<ng-container
|
|
5076
|
-
[ioxRender]="child"
|
|
5077
|
-
(onClick)="childClick.emit($event)"
|
|
5078
|
-
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5079
|
-
(onMouseLeave)="childMouseLeave.emit()">
|
|
5080
|
-
</ng-container>
|
|
5081
|
-
</div>
|
|
5082
|
-
</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>
|
|
5083
5059
|
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
`, 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"] }] }); }
|
|
5097
5073
|
}
|
|
5098
5074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
|
|
5099
5075
|
type: Component,
|
|
5100
|
-
args: [{ selector: '
|
|
5101
|
-
<
|
|
5102
|
-
<
|
|
5103
|
-
|
|
5104
|
-
|
|
5105
|
-
</div>
|
|
5106
|
-
<div *ngFor="let child of children"
|
|
5107
|
-
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
5108
|
-
ioxDraggable
|
|
5109
|
-
[ioxDragData]="child"
|
|
5110
|
-
[ioxDragSourceId]="dropListId">
|
|
5111
|
-
<ng-container
|
|
5112
|
-
[ioxRender]="child"
|
|
5113
|
-
(onClick)="childClick.emit($event)"
|
|
5114
|
-
(onMouseEnter)="childMouseEnter.emit($event)"
|
|
5115
|
-
(onMouseLeave)="childMouseLeave.emit()">
|
|
5116
|
-
</ng-container>
|
|
5117
|
-
</div>
|
|
5118
|
-
</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>
|
|
5119
5081
|
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
`,
|
|
5133
|
-
|
|
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: [{
|
|
5134
5100
|
type: Input
|
|
5135
5101
|
}], style: [{
|
|
5136
5102
|
type: Input
|
|
@@ -5152,6 +5118,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5152
5118
|
type: Output
|
|
5153
5119
|
}] } });
|
|
5154
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
|
+
|
|
5155
5155
|
class BuilderLinkedContainerComponent {
|
|
5156
5156
|
constructor(dragEngine, cdr, elRef, isPreview) {
|
|
5157
5157
|
this.dragEngine = dragEngine;
|