@vectoriox/iox-builder 4.31.0 → 4.31.1

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.
@@ -8490,6 +8490,11 @@ class BuilderDialogComponent {
8490
8490
  this.selectSub?.unsubscribe();
8491
8491
  this.instanceRegistry.unregister(this.nodeId);
8492
8492
  }
8493
+ /** A click on the stage ITSELF is the backdrop click — children swallow everything else. */
8494
+ onStageClick(event) {
8495
+ if (event.target === event.currentTarget)
8496
+ this.onBackdrop();
8497
+ }
8493
8498
  onBackdrop() {
8494
8499
  if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false')
8495
8500
  this.designOpen = false;
@@ -8499,8 +8504,8 @@ class BuilderDialogComponent {
8499
8504
  }
8500
8505
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
8501
8506
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
8502
- <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue">
8503
- <div class="dialog-backdrop" (click)="onBackdrop()"></div>
8507
+ <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
8508
+ (click)="onStageClick($event)">
8504
8509
  <div [ngStyle]="style"
8505
8510
  [ngClass]="'iox-node-' + nodeId"
8506
8511
  class="dialog-surface"
@@ -8530,13 +8535,13 @@ class BuilderDialogComponent {
8530
8535
  </ng-container>
8531
8536
  </div>
8532
8537
  </div>
8533
- `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50}.dialog-backdrop{position:absolute;inset:0;background:#0f172a73}.dialog-surface{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 48px);max-height:calc(100% - 48px);overflow:auto}:host-context([dir=\"rtl\"]) .dialog-surface{transform:translate(50%,-50%)}.dialog-stage[data-placement=top] .dialog-surface{top:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=top] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=bottom] .dialog-surface{top:auto;bottom:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=bottom] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=start] .dialog-surface{inset-inline-start:24px;transform:translateY(-50%)}.dialog-stage[data-placement=end] .dialog-surface{inset-inline-start:auto;inset-inline-end:24px;transform:translateY(-50%)}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
8538
+ `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
8534
8539
  }
8535
8540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
8536
8541
  type: Component,
8537
8542
  args: [{ selector: 'app-builder-dialog', template: `
8538
- <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue">
8539
- <div class="dialog-backdrop" (click)="onBackdrop()"></div>
8543
+ <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
8544
+ (click)="onStageClick($event)">
8540
8545
  <div [ngStyle]="style"
8541
8546
  [ngClass]="'iox-node-' + nodeId"
8542
8547
  class="dialog-surface"
@@ -8566,7 +8571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
8566
8571
  </ng-container>
8567
8572
  </div>
8568
8573
  </div>
8569
- `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50}.dialog-backdrop{position:absolute;inset:0;background:#0f172a73}.dialog-surface{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 48px);max-height:calc(100% - 48px);overflow:auto}:host-context([dir=\"rtl\"]) .dialog-surface{transform:translate(50%,-50%)}.dialog-stage[data-placement=top] .dialog-surface{top:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=top] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=bottom] .dialog-surface{top:auto;bottom:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=bottom] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=start] .dialog-surface{inset-inline-start:24px;transform:translateY(-50%)}.dialog-stage[data-placement=end] .dialog-surface{inset-inline-start:auto;inset-inline-end:24px;transform:translateY(-50%)}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
8574
+ `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
8570
8575
  }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
8571
8576
  type: Input
8572
8577
  }], style: [{