@vectoriox/iox-builder 1.1.8 → 1.2.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -422,6 +422,9 @@ class DragEngineService {
     registerDraggable(el, getPayload) {
         el.setAttribute('data-iox-draggable', '');
         interact(el).draggable({
+            // Don't start a drag when the pointer goes down inside a contenteditable
+            // element (e.g. a text block in inline-edit mode).
+            ignoreFrom: '[contenteditable="true"]',
             listeners: {
                 start: (event) => this._onDragStart(event, el, getPayload),
                 move: (event) => this._onDragMove(event),
@@ -449,6 +452,10 @@ class DragEngineService {
     // Drag lifecycle
     // ─────────────────────────────────────────────────────────
     _onDragStart(event, el, getPayload) {
+        if (el.hasAttribute('data-editing')) {
+            event.interaction.stop();
+            return;
+        }
         this._payload = getPayload();
         this._sourceEl = el;
         this._isDragging = true;
@@ -3574,6 +3581,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }] } });
 
+class BuilderButtonBlockComponent {
+    constructor(dragEngine, cdr) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.children = [];
+        this.style = {};
+        this.tag = 'button';
+        this.href = '';
+        this.target = '_self';
+        this.type = 'button';
+        this.nodeId = '';
+        this.dropListId = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderButtonBlockComponent, isStandalone: false, selector: "app-builder-button-block", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <button *ngIf="tag !== 'a'"
+                class="button-block-root"
+                [ngClass]="'iox-node-' + nodeId"
+                [attr.type]="type"
+                ioxDropzone
+                [ioxDropzoneId]="dropListId"
+                [ioxDropzoneData]="children"
+                (ioxDrop)="onDrop($event)">
+            <ng-container *ngIf="!children.length">
+                <span class="button-block-placeholder">Button</span>
+            </ng-container>
+            <div *ngFor="let child of children"
+                 class="button-block-child"
+                 [ngClass]="'iox-outer-' + (child.styleId ?? child.id)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </button>
+
+        <a *ngIf="tag === 'a'"
+           class="button-block-root"
+           [ngClass]="'iox-node-' + nodeId"
+           [attr.href]="href || null"
+           [attr.target]="target || null"
+           ioxDropzone
+           [ioxDropzoneId]="dropListId"
+           [ioxDropzoneData]="children"
+           (ioxDrop)="onDrop($event)">
+            <ng-container *ngIf="!children.length">
+                <span class="button-block-placeholder">Button</span>
+            </ng-container>
+            <div *ngFor="let child of children"
+                 class="button-block-child"
+                 [ngClass]="'iox-outer-' + (child.styleId ?? child.id)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </a>
+    `, isInline: true, styles: [".button-block-root{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;border:none;background:none;padding:0;font:inherit;color:inherit;box-sizing:border-box;width:100%;height:100%;position:relative}.button-block-placeholder{display:flex;align-items:center;justify-content:center;width:100%;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-button-block', template: `
+        <button *ngIf="tag !== 'a'"
+                class="button-block-root"
+                [ngClass]="'iox-node-' + nodeId"
+                [attr.type]="type"
+                ioxDropzone
+                [ioxDropzoneId]="dropListId"
+                [ioxDropzoneData]="children"
+                (ioxDrop)="onDrop($event)">
+            <ng-container *ngIf="!children.length">
+                <span class="button-block-placeholder">Button</span>
+            </ng-container>
+            <div *ngFor="let child of children"
+                 class="button-block-child"
+                 [ngClass]="'iox-outer-' + (child.styleId ?? child.id)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </button>
+
+        <a *ngIf="tag === 'a'"
+           class="button-block-root"
+           [ngClass]="'iox-node-' + nodeId"
+           [attr.href]="href || null"
+           [attr.target]="target || null"
+           ioxDropzone
+           [ioxDropzoneId]="dropListId"
+           [ioxDropzoneData]="children"
+           (ioxDrop)="onDrop($event)">
+            <ng-container *ngIf="!children.length">
+                <span class="button-block-placeholder">Button</span>
+            </ng-container>
+            <div *ngFor="let child of children"
+                 class="button-block-child"
+                 [ngClass]="'iox-outer-' + (child.styleId ?? child.id)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </a>
+    `, standalone: false, styles: [".button-block-root{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;border:none;background:none;padding:0;font:inherit;color:inherit;box-sizing:border-box;width:100%;height:100%;position:relative}.button-block-placeholder{display:flex;align-items:center;justify-content:center;width:100%;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.button-block-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], tag: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }] } });
+
 class PanelChildComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: PanelChildComponent, isStandalone: false, selector: "panel-child", inputs: { name: "name" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #tpl><ng-content></ng-content></ng-template>', isInline: true }); }
@@ -4090,6 +4254,7 @@ const DECLARATIONS = [
     BuilderContainerComponent,
     BuilderLinkedContainerComponent,
     BuilderRepeaterComponent,
+    BuilderButtonBlockComponent,
     PanelComponent,
     PanelChildComponent,
     LayerTreeComponent,
@@ -4107,6 +4272,7 @@ class IoxBuilderModule {
             BuilderContainerComponent,
             BuilderLinkedContainerComponent,
             BuilderRepeaterComponent,
+            BuilderButtonBlockComponent,
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
@@ -4144,6 +4310,7 @@ class IoxBuilderModule {
             BuilderContainerComponent,
             BuilderLinkedContainerComponent,
             BuilderRepeaterComponent,
+            BuilderButtonBlockComponent,
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
@@ -4234,6 +4401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         BuilderContainerComponent,
                         BuilderLinkedContainerComponent,
                         BuilderRepeaterComponent,
+                        BuilderButtonBlockComponent,
                         PanelComponent,
                         PanelChildComponent,
                         LayerTreeComponent,
@@ -4269,6 +4437,45 @@ class BuilderButtonComponentConfig extends ComponentConfig {
     }
 }
 
+class ButtonBlockComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Button', 'app-builder-button-block', 'ph-thin ph-cursor-click', 'Basic');
+        this.children = [];
+        this.inputs = {
+            tag: 'select',
+            href: 'text',
+            target: 'select',
+            type: 'select',
+        };
+        this.traits = [
+            new TraitConfig('tag', 'Tag', TraitInputType.Select, ['button', 'a'], 'button'),
+            new TraitConfig('href', 'URL', TraitInputType.Text, undefined, '', false, { trait: 'tag', values: 'a' }),
+            new TraitConfig('target', 'Target', TraitInputType.Select, ['_self', '_blank'], '_self', false, { trait: 'tag', values: 'a' }),
+            new TraitConfig('type', 'Type', TraitInputType.Select, ['button', 'submit', 'reset'], 'button', false, { trait: 'tag', values: 'button' }),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '8px',
+            width: 'auto',
+            height: 'auto',
+            padding: '10px 20px',
+            borderRadius: '6px',
+            cursor: 'pointer',
+        });
+    }
+}
+
 class CardComponentConfig extends ComponentConfig {
     constructor() {
         super('Card', 'app-card', 'ph-thin ph-cards', 'Content');
@@ -4588,8 +4795,11 @@ class TextBlockComponentConfig extends ComponentConfig {
             new EffectsGroupStyleConfig(),
         ];
         this.applyStyleDefaults({
-            width: '200px',
+            display: 'block',
+            width: '100%',
             height: 'auto',
+            minHeight: '20px',
+            padding: '10px',
         });
     }
 }
@@ -4602,5 +4812,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, 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, 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 };
+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, 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, 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 };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map