@vectoriox/iox-builder 1.4.4 → 1.4.6
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.
|
@@ -1641,6 +1641,23 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
|
|
|
1641
1641
|
]);
|
|
1642
1642
|
}
|
|
1643
1643
|
}
|
|
1644
|
+
/**
|
|
1645
|
+
* Returns a fresh set of all 8 style-group configs in canonical display order.
|
|
1646
|
+
* Every call produces new TraitConfig instances so different component nodes
|
|
1647
|
+
* never share mutable state.
|
|
1648
|
+
*/
|
|
1649
|
+
function buildFullStyleTraits() {
|
|
1650
|
+
return [
|
|
1651
|
+
new PositionGroupStyleConfig(),
|
|
1652
|
+
new LayoutGroupStyleConfig(),
|
|
1653
|
+
new SizeGroupStyleConfig(),
|
|
1654
|
+
new TypographyGroupStyleConfig(),
|
|
1655
|
+
new SpacingGroupStyleConfig(),
|
|
1656
|
+
new BorderGroupStyleConfig(),
|
|
1657
|
+
new BackgroundGroupStyleConfig(),
|
|
1658
|
+
new EffectsGroupStyleConfig(),
|
|
1659
|
+
];
|
|
1660
|
+
}
|
|
1644
1661
|
function flattenSchemaFields(properties, prefix = '') {
|
|
1645
1662
|
const result = [];
|
|
1646
1663
|
for (const [key, field] of Object.entries(properties)) {
|
|
@@ -3823,7 +3840,6 @@ class BuilderRepeaterComponent {
|
|
|
3823
3840
|
}
|
|
3824
3841
|
ngOnInit() {
|
|
3825
3842
|
this.orgId = this.activatedRoute.snapshot.paramMap.get('orgId') || 'default';
|
|
3826
|
-
// When a binding is added/removed on any node, regenerate the preview rows.
|
|
3827
3843
|
this.bindingSub = this.panelEventService.subscribe(event => {
|
|
3828
3844
|
if (event.type !== PanelEventTypes.BINDING_CHANGED)
|
|
3829
3845
|
return;
|
|
@@ -3901,32 +3917,54 @@ class BuilderRepeaterComponent {
|
|
|
3901
3917
|
}
|
|
3902
3918
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: IOX_CONTENT_SERVICE, optional: true }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3903
3919
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
|
|
3904
|
-
<
|
|
3920
|
+
<ng-template #badgeContent>
|
|
3921
|
+
<i class="ph-thin ph-repeat"></i>
|
|
3922
|
+
<span *ngIf="source">{{ source }}</span>
|
|
3923
|
+
<span *ngIf="!source" class="repeater-badge-empty">No source</span>
|
|
3924
|
+
<span *ngIf="items.length" class="repeater-badge-count">× {{ items.length }}</span>
|
|
3925
|
+
<span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
|
|
3926
|
+
</ng-template>
|
|
3927
|
+
|
|
3928
|
+
<!--
|
|
3929
|
+
.repeater-wrapper is the layout root.
|
|
3930
|
+
In has-children state, .repeater-badge lives here as a direct child
|
|
3931
|
+
(position:absolute, hover-only) so it is NOT a child of .repeater-root
|
|
3932
|
+
and does NOT shift the :nth-child index of the item wrappers.
|
|
3933
|
+
|
|
3934
|
+
In empty state, .repeater-badge lives inside .repeater-root (no items
|
|
3935
|
+
to count, so :nth-child is irrelevant there).
|
|
3936
|
+
-->
|
|
3937
|
+
<div class="repeater-wrapper" [class.has-children]="children.length > 0">
|
|
3905
3938
|
|
|
3906
|
-
<!--
|
|
3907
|
-
<div class="repeater-badge">
|
|
3908
|
-
<
|
|
3909
|
-
<span *ngIf="source">{{ source }}</span>
|
|
3910
|
-
<span *ngIf="!source" class="repeater-badge-empty">No source</span>
|
|
3911
|
-
<span *ngIf="items.length" class="repeater-badge-count">× {{ items.length }}</span>
|
|
3912
|
-
<span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
|
|
3939
|
+
<!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
|
|
3940
|
+
<div *ngIf="children.length > 0" class="repeater-badge">
|
|
3941
|
+
<ng-container *ngTemplateOutlet="badgeContent"></ng-container>
|
|
3913
3942
|
</div>
|
|
3914
3943
|
|
|
3915
|
-
|
|
3916
|
-
|
|
3944
|
+
<div class="repeater-root"
|
|
3945
|
+
[ngClass]="['iox-node-' + nodeId]"
|
|
3917
3946
|
ioxDropzone
|
|
3918
3947
|
[ioxDropzoneId]="dropListId"
|
|
3919
3948
|
[ioxDropzoneData]="children"
|
|
3920
3949
|
[ioxDropzonePostDrop]="refreshPreviewsBound"
|
|
3921
3950
|
(ioxDrop)="onDrop($event)">
|
|
3922
3951
|
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
<
|
|
3926
|
-
|
|
3952
|
+
<!-- EMPTY STATE: badge + placeholder inside root -->
|
|
3953
|
+
<ng-container *ngIf="!children.length">
|
|
3954
|
+
<div class="repeater-badge">
|
|
3955
|
+
<ng-container *ngTemplateOutlet="badgeContent"></ng-container>
|
|
3956
|
+
</div>
|
|
3957
|
+
<div class="repeater-placeholder">
|
|
3958
|
+
<i class="ph-thin ph-rows"></i>
|
|
3959
|
+
<span>Drop a component here as the item template</span>
|
|
3960
|
+
</div>
|
|
3961
|
+
</ng-container>
|
|
3927
3962
|
|
|
3963
|
+
<!-- Template items — DIRECT children of repeater-root.
|
|
3964
|
+
:first-child / :nth-child(odd) etc. now correctly target these
|
|
3965
|
+
as siblings of the preview items below. -->
|
|
3928
3966
|
<div *ngFor="let child of children"
|
|
3929
|
-
[ngClass]="['repeater-template
|
|
3967
|
+
[ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
3930
3968
|
ioxDraggable
|
|
3931
3969
|
[ioxDragData]="child"
|
|
3932
3970
|
[ioxDragSourceId]="dropListId">
|
|
@@ -3937,54 +3975,74 @@ class BuilderRepeaterComponent {
|
|
|
3937
3975
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
3938
3976
|
</ng-container>
|
|
3939
3977
|
</div>
|
|
3940
|
-
</div>
|
|
3941
3978
|
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
</ng-container>
|
|
3979
|
+
<!-- Preview items — also DIRECT children of repeater-root. -->
|
|
3980
|
+
<ng-container *ngFor="let row of previewRows">
|
|
3981
|
+
<div *ngFor="let child of row"
|
|
3982
|
+
[ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
|
|
3983
|
+
<ng-container
|
|
3984
|
+
[ioxRender]="child"
|
|
3985
|
+
(onClick)="$event"
|
|
3986
|
+
(onMouseEnter)="$event"
|
|
3987
|
+
(onMouseLeave)="undefined">
|
|
3988
|
+
</ng-container>
|
|
3989
|
+
</div>
|
|
3990
|
+
</ng-container>
|
|
3991
|
+
</div>
|
|
3956
3992
|
</div>
|
|
3957
|
-
`, isInline: true, styles: [".repeater-
|
|
3993
|
+
`, isInline: true, styles: [".repeater-wrapper{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-wrapper.has-children>.repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-wrapper.has-children:hover>.repeater-badge{opacity:1}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-root{box-sizing:border-box}.repeater-wrapper:not(.has-children) .repeater-root{border:1px dashed rgba(203,144,144,.4);border-top:none;border-radius:0 0 4px 4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-item-template{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;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
3994
|
}
|
|
3959
3995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, decorators: [{
|
|
3960
3996
|
type: Component,
|
|
3961
3997
|
args: [{ selector: 'app-builder-repeater', template: `
|
|
3962
|
-
<
|
|
3998
|
+
<ng-template #badgeContent>
|
|
3999
|
+
<i class="ph-thin ph-repeat"></i>
|
|
4000
|
+
<span *ngIf="source">{{ source }}</span>
|
|
4001
|
+
<span *ngIf="!source" class="repeater-badge-empty">No source</span>
|
|
4002
|
+
<span *ngIf="items.length" class="repeater-badge-count">× {{ items.length }}</span>
|
|
4003
|
+
<span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
|
|
4004
|
+
</ng-template>
|
|
3963
4005
|
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
4006
|
+
<!--
|
|
4007
|
+
.repeater-wrapper is the layout root.
|
|
4008
|
+
In has-children state, .repeater-badge lives here as a direct child
|
|
4009
|
+
(position:absolute, hover-only) so it is NOT a child of .repeater-root
|
|
4010
|
+
and does NOT shift the :nth-child index of the item wrappers.
|
|
4011
|
+
|
|
4012
|
+
In empty state, .repeater-badge lives inside .repeater-root (no items
|
|
4013
|
+
to count, so :nth-child is irrelevant there).
|
|
4014
|
+
-->
|
|
4015
|
+
<div class="repeater-wrapper" [class.has-children]="children.length > 0">
|
|
4016
|
+
|
|
4017
|
+
<!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
|
|
4018
|
+
<div *ngIf="children.length > 0" class="repeater-badge">
|
|
4019
|
+
<ng-container *ngTemplateOutlet="badgeContent"></ng-container>
|
|
3971
4020
|
</div>
|
|
3972
4021
|
|
|
3973
|
-
|
|
3974
|
-
|
|
4022
|
+
<div class="repeater-root"
|
|
4023
|
+
[ngClass]="['iox-node-' + nodeId]"
|
|
3975
4024
|
ioxDropzone
|
|
3976
4025
|
[ioxDropzoneId]="dropListId"
|
|
3977
4026
|
[ioxDropzoneData]="children"
|
|
3978
4027
|
[ioxDropzonePostDrop]="refreshPreviewsBound"
|
|
3979
4028
|
(ioxDrop)="onDrop($event)">
|
|
3980
4029
|
|
|
3981
|
-
|
|
3982
|
-
|
|
3983
|
-
<
|
|
3984
|
-
|
|
4030
|
+
<!-- EMPTY STATE: badge + placeholder inside root -->
|
|
4031
|
+
<ng-container *ngIf="!children.length">
|
|
4032
|
+
<div class="repeater-badge">
|
|
4033
|
+
<ng-container *ngTemplateOutlet="badgeContent"></ng-container>
|
|
4034
|
+
</div>
|
|
4035
|
+
<div class="repeater-placeholder">
|
|
4036
|
+
<i class="ph-thin ph-rows"></i>
|
|
4037
|
+
<span>Drop a component here as the item template</span>
|
|
4038
|
+
</div>
|
|
4039
|
+
</ng-container>
|
|
3985
4040
|
|
|
4041
|
+
<!-- Template items — DIRECT children of repeater-root.
|
|
4042
|
+
:first-child / :nth-child(odd) etc. now correctly target these
|
|
4043
|
+
as siblings of the preview items below. -->
|
|
3986
4044
|
<div *ngFor="let child of children"
|
|
3987
|
-
[ngClass]="['repeater-template
|
|
4045
|
+
[ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
|
|
3988
4046
|
ioxDraggable
|
|
3989
4047
|
[ioxDragData]="child"
|
|
3990
4048
|
[ioxDragSourceId]="dropListId">
|
|
@@ -3995,24 +4053,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
3995
4053
|
(onMouseLeave)="childMouseLeave.emit()">
|
|
3996
4054
|
</ng-container>
|
|
3997
4055
|
</div>
|
|
3998
|
-
</div>
|
|
3999
4056
|
|
|
4000
|
-
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
</ng-container>
|
|
4057
|
+
<!-- Preview items — also DIRECT children of repeater-root. -->
|
|
4058
|
+
<ng-container *ngFor="let row of previewRows">
|
|
4059
|
+
<div *ngFor="let child of row"
|
|
4060
|
+
[ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
|
|
4061
|
+
<ng-container
|
|
4062
|
+
[ioxRender]="child"
|
|
4063
|
+
(onClick)="$event"
|
|
4064
|
+
(onMouseEnter)="$event"
|
|
4065
|
+
(onMouseLeave)="undefined">
|
|
4066
|
+
</ng-container>
|
|
4067
|
+
</div>
|
|
4068
|
+
</ng-container>
|
|
4069
|
+
</div>
|
|
4014
4070
|
</div>
|
|
4015
|
-
`, standalone: false, styles: [".repeater-
|
|
4071
|
+
`, standalone: false, styles: [".repeater-wrapper{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-wrapper.has-children>.repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-wrapper.has-children:hover>.repeater-badge{opacity:1}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-root{box-sizing:border-box}.repeater-wrapper:not(.has-children) .repeater-root{border:1px dashed rgba(203,144,144,.4);border-top:none;border-radius:0 0 4px 4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-item-template{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"] }]
|
|
4016
4072
|
}], ctorParameters: () => [{ type: DragEngineService }, { type: OverlayService }, { type: undefined, decorators: [{
|
|
4017
4073
|
type: Optional
|
|
4018
4074
|
}, {
|
|
@@ -4491,16 +4547,7 @@ class BuilderButtonComponentConfig extends ComponentConfig {
|
|
|
4491
4547
|
new TraitConfig('link', 'Link', TraitInputType.Text, undefined, '#'),
|
|
4492
4548
|
new TraitConfig('variant', 'Variant', TraitInputType.Select, ['primary', 'outlined', 'text'], 'primary'),
|
|
4493
4549
|
];
|
|
4494
|
-
this.styleTraits =
|
|
4495
|
-
new PositionGroupStyleConfig(),
|
|
4496
|
-
new LayoutGroupStyleConfig(),
|
|
4497
|
-
new SizeGroupStyleConfig(),
|
|
4498
|
-
new TypographyGroupStyleConfig(),
|
|
4499
|
-
new SpacingGroupStyleConfig(),
|
|
4500
|
-
new BorderGroupStyleConfig(),
|
|
4501
|
-
new BackgroundGroupStyleConfig(),
|
|
4502
|
-
new EffectsGroupStyleConfig(),
|
|
4503
|
-
];
|
|
4550
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4504
4551
|
}
|
|
4505
4552
|
}
|
|
4506
4553
|
|
|
@@ -4520,15 +4567,7 @@ class ButtonBlockComponentConfig extends ComponentConfig {
|
|
|
4520
4567
|
new TraitConfig('target', 'Target', TraitInputType.Select, ['_self', '_blank'], '_self', false, { trait: 'tag', values: 'a' }),
|
|
4521
4568
|
new TraitConfig('type', 'Type', TraitInputType.Select, ['button', 'submit', 'reset'], 'button', false, { trait: 'tag', values: 'button' }),
|
|
4522
4569
|
];
|
|
4523
|
-
this.styleTraits =
|
|
4524
|
-
new PositionGroupStyleConfig(),
|
|
4525
|
-
new LayoutGroupStyleConfig(),
|
|
4526
|
-
new SizeGroupStyleConfig(),
|
|
4527
|
-
new SpacingGroupStyleConfig(),
|
|
4528
|
-
new BorderGroupStyleConfig(),
|
|
4529
|
-
new BackgroundGroupStyleConfig(),
|
|
4530
|
-
new EffectsGroupStyleConfig(),
|
|
4531
|
-
];
|
|
4570
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4532
4571
|
this.applyStyleDefaults({
|
|
4533
4572
|
display: 'inline-flex',
|
|
4534
4573
|
alignItems: 'center',
|
|
@@ -4556,15 +4595,7 @@ class CardComponentConfig extends ComponentConfig {
|
|
|
4556
4595
|
new TraitConfig('image', 'Image URL', TraitInputType.Media, { mode: 'compact' }, 'https://via.placeholder.com/150'),
|
|
4557
4596
|
new TraitConfig('description', 'Description', TraitInputType.Text, undefined, 'This is a default card description.')
|
|
4558
4597
|
];
|
|
4559
|
-
this.styleTraits =
|
|
4560
|
-
new PositionGroupStyleConfig(),
|
|
4561
|
-
new LayoutGroupStyleConfig(),
|
|
4562
|
-
new SizeGroupStyleConfig(),
|
|
4563
|
-
new SpacingGroupStyleConfig(),
|
|
4564
|
-
new BorderGroupStyleConfig(),
|
|
4565
|
-
new BackgroundGroupStyleConfig(),
|
|
4566
|
-
new EffectsGroupStyleConfig(),
|
|
4567
|
-
];
|
|
4598
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4568
4599
|
this.applyStyleDefaults({
|
|
4569
4600
|
width: '200px',
|
|
4570
4601
|
height: 'auto',
|
|
@@ -4583,14 +4614,7 @@ class BuilderContainerComponentConfig extends ComponentConfig {
|
|
|
4583
4614
|
super('Container', 'app-builder-container', 'ph-thin ph-square', 'Layout');
|
|
4584
4615
|
this.children = [];
|
|
4585
4616
|
this.traits = [];
|
|
4586
|
-
this.styleTraits =
|
|
4587
|
-
new LayoutGroupStyleConfig(),
|
|
4588
|
-
new SizeGroupStyleConfig(),
|
|
4589
|
-
new SpacingGroupStyleConfig(),
|
|
4590
|
-
new BorderGroupStyleConfig(),
|
|
4591
|
-
new BackgroundGroupStyleConfig(),
|
|
4592
|
-
new EffectsGroupStyleConfig(),
|
|
4593
|
-
];
|
|
4617
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4594
4618
|
this.applyStyleDefaults({
|
|
4595
4619
|
width: '100%',
|
|
4596
4620
|
height: 'auto',
|
|
@@ -4605,14 +4629,7 @@ class BuilderDividerComponentConfig extends ComponentConfig {
|
|
|
4605
4629
|
constructor() {
|
|
4606
4630
|
super('Divider', 'app-builder-divider', 'ph-thin ph-minus', 'Layout');
|
|
4607
4631
|
this.traits = [];
|
|
4608
|
-
this.styleTraits =
|
|
4609
|
-
new LayoutGroupStyleConfig(),
|
|
4610
|
-
new SizeGroupStyleConfig(),
|
|
4611
|
-
new BackgroundGroupStyleConfig(),
|
|
4612
|
-
new SpacingGroupStyleConfig(),
|
|
4613
|
-
new BorderGroupStyleConfig(),
|
|
4614
|
-
new EffectsGroupStyleConfig(),
|
|
4615
|
-
];
|
|
4632
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4616
4633
|
this.applyStyleDefaults({
|
|
4617
4634
|
width: '100%',
|
|
4618
4635
|
height: '1px',
|
|
@@ -4629,16 +4646,7 @@ class BuilderHeadingComponentConfig extends ComponentConfig {
|
|
|
4629
4646
|
new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Heading'),
|
|
4630
4647
|
new TraitConfig('level', 'Level', TraitInputType.Select, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 'h2'),
|
|
4631
4648
|
];
|
|
4632
|
-
this.styleTraits =
|
|
4633
|
-
new PositionGroupStyleConfig(),
|
|
4634
|
-
new LayoutGroupStyleConfig(),
|
|
4635
|
-
new SizeGroupStyleConfig(),
|
|
4636
|
-
new TypographyGroupStyleConfig(),
|
|
4637
|
-
new SpacingGroupStyleConfig(),
|
|
4638
|
-
new BorderGroupStyleConfig(),
|
|
4639
|
-
new BackgroundGroupStyleConfig(),
|
|
4640
|
-
new EffectsGroupStyleConfig(),
|
|
4641
|
-
];
|
|
4649
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4642
4650
|
this.applyStyleDefaults({
|
|
4643
4651
|
fontSize: '32px',
|
|
4644
4652
|
fontWeight: '700',
|
|
@@ -4653,19 +4661,11 @@ class BuilderIconComponentConfig extends ComponentConfig {
|
|
|
4653
4661
|
this.traits = [
|
|
4654
4662
|
new TraitConfig('iconClass', 'Icon', TraitInputType.Icon, undefined, 'ph-thin ph-star'),
|
|
4655
4663
|
];
|
|
4656
|
-
this.styleTraits =
|
|
4657
|
-
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4661
|
-
new TraitConfig('fontSize', 'Size', TraitInputType.Scrub, { min: 8, max: 200, step: 1, units: UNITS_FIXED }, '24px'),
|
|
4662
|
-
new TraitConfig('color', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#374151'),
|
|
4663
|
-
]),
|
|
4664
|
-
new SpacingGroupStyleConfig(),
|
|
4665
|
-
new BorderGroupStyleConfig(),
|
|
4666
|
-
new BackgroundGroupStyleConfig(),
|
|
4667
|
-
new EffectsGroupStyleConfig(),
|
|
4668
|
-
];
|
|
4664
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4665
|
+
this.applyStyleDefaults({
|
|
4666
|
+
fontSize: '24px',
|
|
4667
|
+
color: '#374151',
|
|
4668
|
+
});
|
|
4669
4669
|
}
|
|
4670
4670
|
}
|
|
4671
4671
|
|
|
@@ -4682,14 +4682,7 @@ class BuilderImageComponentConfig extends ComponentConfig {
|
|
|
4682
4682
|
new TraitConfig('alt', 'Alt Text', TraitInputType.Text, undefined, 'Image'),
|
|
4683
4683
|
new TraitConfig('objectFit', 'Object Fit', TraitInputType.Select, ['cover', 'contain', 'fill', 'none'], 'cover'),
|
|
4684
4684
|
];
|
|
4685
|
-
this.styleTraits =
|
|
4686
|
-
new PositionGroupStyleConfig(),
|
|
4687
|
-
new LayoutGroupStyleConfig(),
|
|
4688
|
-
new SizeGroupStyleConfig(),
|
|
4689
|
-
new SpacingGroupStyleConfig(),
|
|
4690
|
-
new BorderGroupStyleConfig(),
|
|
4691
|
-
new BackgroundGroupStyleConfig(),
|
|
4692
|
-
];
|
|
4685
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4693
4686
|
this.applyStyleDefaults({
|
|
4694
4687
|
width: '300px',
|
|
4695
4688
|
aspectRatio: '1/1',
|
|
@@ -4719,12 +4712,7 @@ class BuilderLinkComponentConfig extends ComponentConfig {
|
|
|
4719
4712
|
{ label: 'Full window', value: '_top' },
|
|
4720
4713
|
], '_self'),
|
|
4721
4714
|
];
|
|
4722
|
-
this.styleTraits =
|
|
4723
|
-
new PositionGroupStyleConfig(),
|
|
4724
|
-
new SpacingGroupStyleConfig(),
|
|
4725
|
-
new TypographyGroupStyleConfig(),
|
|
4726
|
-
new EffectsGroupStyleConfig(),
|
|
4727
|
-
];
|
|
4715
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4728
4716
|
}
|
|
4729
4717
|
}
|
|
4730
4718
|
|
|
@@ -4749,15 +4737,7 @@ class BuilderLinkedContainerConfig extends ComponentConfig {
|
|
|
4749
4737
|
{ label: 'Full window', value: '_top' },
|
|
4750
4738
|
], '_self'),
|
|
4751
4739
|
];
|
|
4752
|
-
this.styleTraits =
|
|
4753
|
-
new PositionGroupStyleConfig(),
|
|
4754
|
-
new LayoutGroupStyleConfig(),
|
|
4755
|
-
new SizeGroupStyleConfig(),
|
|
4756
|
-
new SpacingGroupStyleConfig(),
|
|
4757
|
-
new BorderGroupStyleConfig(),
|
|
4758
|
-
new BackgroundGroupStyleConfig(),
|
|
4759
|
-
new EffectsGroupStyleConfig(),
|
|
4760
|
-
];
|
|
4740
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4761
4741
|
this.applyStyleDefaults({
|
|
4762
4742
|
width: 'auto',
|
|
4763
4743
|
height: 'auto',
|
|
@@ -4786,14 +4766,7 @@ class RepeaterComponentConfig extends ComponentConfig {
|
|
|
4786
4766
|
default: 10,
|
|
4787
4767
|
},
|
|
4788
4768
|
];
|
|
4789
|
-
this.styleTraits =
|
|
4790
|
-
new LayoutGroupStyleConfig(),
|
|
4791
|
-
new SizeGroupStyleConfig(),
|
|
4792
|
-
new SpacingGroupStyleConfig(),
|
|
4793
|
-
new BorderGroupStyleConfig(),
|
|
4794
|
-
new BackgroundGroupStyleConfig(),
|
|
4795
|
-
new EffectsGroupStyleConfig(),
|
|
4796
|
-
];
|
|
4769
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4797
4770
|
this.applyStyleDefaults({
|
|
4798
4771
|
width: '100%',
|
|
4799
4772
|
height: 'auto',
|
|
@@ -4804,16 +4777,9 @@ class RepeaterComponentConfig extends ComponentConfig {
|
|
|
4804
4777
|
class SectionComponentConfig extends ComponentConfig {
|
|
4805
4778
|
constructor() {
|
|
4806
4779
|
super('Section', 'app-section', 'ph-thin ph-rows', 'Layout');
|
|
4807
|
-
this.children = [];
|
|
4780
|
+
this.children = [];
|
|
4808
4781
|
this.traits = [];
|
|
4809
|
-
this.styleTraits =
|
|
4810
|
-
new LayoutGroupStyleConfig(),
|
|
4811
|
-
new SizeGroupStyleConfig(),
|
|
4812
|
-
new SpacingGroupStyleConfig(),
|
|
4813
|
-
new BorderGroupStyleConfig(),
|
|
4814
|
-
new BackgroundGroupStyleConfig(),
|
|
4815
|
-
new EffectsGroupStyleConfig(),
|
|
4816
|
-
];
|
|
4782
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4817
4783
|
this.applyStyleDefaults({
|
|
4818
4784
|
width: 'auto',
|
|
4819
4785
|
height: 'auto',
|
|
@@ -4828,11 +4794,7 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
|
|
|
4828
4794
|
constructor() {
|
|
4829
4795
|
super('Spacer', 'app-builder-spacer', 'ph-thin ph-arrows-vertical', 'Layout');
|
|
4830
4796
|
this.traits = [];
|
|
4831
|
-
this.styleTraits =
|
|
4832
|
-
new LayoutGroupStyleConfig(),
|
|
4833
|
-
new SizeGroupStyleConfig(),
|
|
4834
|
-
new EffectsGroupStyleConfig(),
|
|
4835
|
-
];
|
|
4797
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4836
4798
|
this.applyStyleDefaults({
|
|
4837
4799
|
width: '100%',
|
|
4838
4800
|
height: '40px',
|
|
@@ -4851,16 +4813,7 @@ class TextBlockComponentConfig extends ComponentConfig {
|
|
|
4851
4813
|
new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
|
|
4852
4814
|
new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
|
|
4853
4815
|
];
|
|
4854
|
-
this.styleTraits =
|
|
4855
|
-
new PositionGroupStyleConfig(),
|
|
4856
|
-
new LayoutGroupStyleConfig(),
|
|
4857
|
-
new SizeGroupStyleConfig(),
|
|
4858
|
-
new TypographyGroupStyleConfig(),
|
|
4859
|
-
new SpacingGroupStyleConfig(),
|
|
4860
|
-
new BorderGroupStyleConfig(),
|
|
4861
|
-
new BackgroundGroupStyleConfig(),
|
|
4862
|
-
new EffectsGroupStyleConfig(),
|
|
4863
|
-
];
|
|
4816
|
+
this.styleTraits = buildFullStyleTraits();
|
|
4864
4817
|
this.applyStyleDefaults({
|
|
4865
4818
|
display: 'block',
|
|
4866
4819
|
width: '100%',
|
|
@@ -4879,5 +4832,5 @@ class TextBlockComponentConfig extends ComponentConfig {
|
|
|
4879
4832
|
* Generated bundle index. Do not edit.
|
|
4880
4833
|
*/
|
|
4881
4834
|
|
|
4882
|
-
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, 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, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
|
|
4835
|
+
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, 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, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
|
|
4883
4836
|
//# sourceMappingURL=vectoriox-iox-builder.mjs.map
|