@vectoriox/iox-builder 1.4.27 → 1.4.29
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.
|
@@ -1893,6 +1893,9 @@ class TypographyGroupStyleConfig extends GroupStyleConfig {
|
|
|
1893
1893
|
], 'left'),
|
|
1894
1894
|
new TraitConfig('fontStyle', 'Italic', TraitInputType.SelectButton, { items: [{ value: 'italic', icon: 'ph-thin ph-text-italic', label: 'Italic' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
|
|
1895
1895
|
new TraitConfig('textDecoration', 'Underline', TraitInputType.SelectButton, { items: [{ value: 'underline', icon: 'ph-thin ph-text-underline', label: 'Underline' }], allowEmpty: true, noneValue: 'none' }, 'none', true),
|
|
1896
|
+
new TraitConfig('_sep_stroke', 'Stroke', TraitInputType.SectionLabel),
|
|
1897
|
+
new TraitConfig('WebkitTextStrokeWidth', 'Width', TraitInputType.Scrub, { min: 0, max: 10, step: 0.5, units: ['px'] }, '0px', true),
|
|
1898
|
+
new TraitConfig('WebkitTextStrokeColor', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: true, formats: ['hex', 'rgb', 'hsl'] }, 'transparent', true),
|
|
1896
1899
|
]);
|
|
1897
1900
|
}
|
|
1898
1901
|
}
|
|
@@ -3909,6 +3912,7 @@ class BuilderContainerComponent {
|
|
|
3909
3912
|
this.style = {};
|
|
3910
3913
|
this.nodeId = '';
|
|
3911
3914
|
this.dropListId = '';
|
|
3915
|
+
this.htmlTag = 'div';
|
|
3912
3916
|
this.childClick = new EventEmitter();
|
|
3913
3917
|
this.childMouseEnter = new EventEmitter();
|
|
3914
3918
|
this.childMouseLeave = new EventEmitter();
|
|
@@ -3928,19 +3932,12 @@ class BuilderContainerComponent {
|
|
|
3928
3932
|
this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
|
|
3929
3933
|
}
|
|
3930
3934
|
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 }); }
|
|
3931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3932
|
-
<
|
|
3933
|
-
[ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
|
|
3934
|
-
ioxDropzone
|
|
3935
|
-
[ioxDropzoneId]="dropListId"
|
|
3936
|
-
[ioxDropzoneData]="children"
|
|
3937
|
-
(ioxDrop)="onDrop($event)">
|
|
3938
|
-
|
|
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: `
|
|
3936
|
+
<ng-template #dropContent>
|
|
3939
3937
|
<div *ngIf="!children.length" class="container-placeholder">
|
|
3940
3938
|
<i class="ph-thin ph-square"></i>
|
|
3941
3939
|
<span>Drop components here</span>
|
|
3942
3940
|
</div>
|
|
3943
|
-
|
|
3944
3941
|
<div *ngFor="let child of children"
|
|
3945
3942
|
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
3946
3943
|
ioxDraggable
|
|
@@ -3953,24 +3950,30 @@ class BuilderContainerComponent {
|
|
|
3953
3950
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
3954
3951
|
</ng-container>
|
|
3955
3952
|
</div>
|
|
3956
|
-
</
|
|
3957
|
-
|
|
3953
|
+
</ng-template>
|
|
3954
|
+
|
|
3955
|
+
@switch (htmlTag) {
|
|
3956
|
+
@case ('section') { <section 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></section> }
|
|
3957
|
+
@case ('article') { <article 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></article> }
|
|
3958
|
+
@case ('header') { <header 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></header> }
|
|
3959
|
+
@case ('footer') { <footer 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></footer> }
|
|
3960
|
+
@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
|
+
@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
|
+
@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> }
|
|
3964
|
+
@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
|
+
@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
|
+
}
|
|
3967
|
+
`, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
|
|
3958
3968
|
}
|
|
3959
3969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
|
|
3960
3970
|
type: Component,
|
|
3961
3971
|
args: [{ selector: 'app-builder-container', template: `
|
|
3962
|
-
<
|
|
3963
|
-
[ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
|
|
3964
|
-
ioxDropzone
|
|
3965
|
-
[ioxDropzoneId]="dropListId"
|
|
3966
|
-
[ioxDropzoneData]="children"
|
|
3967
|
-
(ioxDrop)="onDrop($event)">
|
|
3968
|
-
|
|
3972
|
+
<ng-template #dropContent>
|
|
3969
3973
|
<div *ngIf="!children.length" class="container-placeholder">
|
|
3970
3974
|
<i class="ph-thin ph-square"></i>
|
|
3971
3975
|
<span>Drop components here</span>
|
|
3972
3976
|
</div>
|
|
3973
|
-
|
|
3974
3977
|
<div *ngFor="let child of children"
|
|
3975
3978
|
[ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
3976
3979
|
ioxDraggable
|
|
@@ -3983,7 +3986,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
3983
3986
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
3984
3987
|
</ng-container>
|
|
3985
3988
|
</div>
|
|
3986
|
-
</
|
|
3989
|
+
</ng-template>
|
|
3990
|
+
|
|
3991
|
+
@switch (htmlTag) {
|
|
3992
|
+
@case ('section') { <section 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></section> }
|
|
3993
|
+
@case ('article') { <article 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></article> }
|
|
3994
|
+
@case ('header') { <header 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></header> }
|
|
3995
|
+
@case ('footer') { <footer 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></footer> }
|
|
3996
|
+
@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
|
+
@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
|
+
@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> }
|
|
4000
|
+
@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
|
+
@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
|
+
}
|
|
3987
4003
|
`, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
|
|
3988
4004
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
|
|
3989
4005
|
type: Input
|
|
@@ -3993,6 +4009,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
3993
4009
|
type: Input
|
|
3994
4010
|
}], dropListId: [{
|
|
3995
4011
|
type: Input
|
|
4012
|
+
}], htmlTag: [{
|
|
4013
|
+
type: Input
|
|
3996
4014
|
}], childClick: [{
|
|
3997
4015
|
type: Output
|
|
3998
4016
|
}], childMouseEnter: [{
|
|
@@ -5071,7 +5089,9 @@ class BuilderContainerComponentConfig extends ComponentConfig {
|
|
|
5071
5089
|
constructor() {
|
|
5072
5090
|
super('Container', 'app-builder-container', 'ph-thin ph-square', 'Layout');
|
|
5073
5091
|
this.children = [];
|
|
5074
|
-
this.traits = [
|
|
5092
|
+
this.traits = [
|
|
5093
|
+
new TraitConfig('htmlTag', 'HTML Tag', TraitInputType.Select, ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'], 'div'),
|
|
5094
|
+
];
|
|
5075
5095
|
this.styleTraits = buildFullStyleTraits();
|
|
5076
5096
|
this.applyStyleDefaults({
|
|
5077
5097
|
width: '100%',
|