diff --git a/projects/step-core/src/lib/modules/basics/components/popover/popover.component.scss b/projects/step-core/src/lib/modules/basics/components/popover/popover.component.scss index 6097a6ed9..ee1de9427 100644 --- a/projects/step-core/src/lib/modules/basics/components/popover/popover.component.scss +++ b/projects/step-core/src/lib/modules/basics/components/popover/popover.component.scss @@ -94,7 +94,7 @@ } } &.bottom-left { - margin-bottom: 0.5rem; + margin-bottom: 1rem; margin-right: -2.5rem; .step-popover__arrow { @@ -107,7 +107,7 @@ } } &.bottom-right { - margin-bottom: 0.5rem; + margin-bottom: 1rem; margin-left: -2.5rem; .step-popover__arrow { diff --git a/projects/step-core/src/lib/modules/basics/components/popover/popover.component.ts b/projects/step-core/src/lib/modules/basics/components/popover/popover.component.ts index 54330893e..b6dd6dc47 100644 --- a/projects/step-core/src/lib/modules/basics/components/popover/popover.component.ts +++ b/projects/step-core/src/lib/modules/basics/components/popover/popover.component.ts @@ -56,7 +56,7 @@ export class PopoverComponent implements PopoverService, AfterViewInit, OnDestro @ViewChild('popoverTemplate', { static: true }) popoverTemplate!: TemplateRef; readonly xPosition = input<'before' | 'after'>('after'); - readonly yPosition = input<'above' | 'below'>('above'); + readonly yPosition = input<'above' | 'below'>('below'); readonly noPadding = input(false); readonly withBorder = input(false); readonly whiteBackground = input(false); @@ -114,35 +114,12 @@ export class PopoverComponent implements PopoverService, AfterViewInit, OnDestro private createOverlay(): void { if (this.overlayRef) return; + const positions = this.buildPositions(); + this.positionStrategy = this.overlay .position() .flexibleConnectedTo(this._el) - .withPositions([ - { - originX: 'center', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top', - }, - { - originX: 'center', - originY: 'bottom', - overlayX: 'end', - overlayY: 'top', - }, - { - originX: 'center', - originY: 'top', - overlayX: 'end', - overlayY: 'bottom', - }, - { - originX: 'center', - originY: 'top', - overlayX: 'end', - overlayY: 'bottom', - }, - ]) + .withPositions(positions) .withViewportMargin(8) .withPush(false); @@ -167,6 +144,44 @@ export class PopoverComponent implements PopoverService, AfterViewInit, OnDestro }); } + private buildPositions(): ConnectedPosition[] { + const isBelow = this.yPosition() === 'below'; + const preferLeft = this.xPosition() === 'before'; + + const buildPosition = ( + originY: 'top' | 'bottom', + overlayY: 'top' | 'bottom', + overlayX: 'start' | 'end', + ): ConnectedPosition => ({ + originX: 'center', + originY, + overlayX, + overlayY, + }); + + const primary = buildPosition(isBelow ? 'bottom' : 'top', isBelow ? 'top' : 'bottom', preferLeft ? 'end' : 'start'); + + const secondary = buildPosition( + isBelow ? 'bottom' : 'top', + isBelow ? 'top' : 'bottom', + preferLeft ? 'start' : 'end', + ); + + const fallbackPrimary = buildPosition( + isBelow ? 'top' : 'bottom', + isBelow ? 'bottom' : 'top', + preferLeft ? 'end' : 'start', + ); + + const fallbackSecondary = buildPosition( + isBelow ? 'top' : 'bottom', + isBelow ? 'bottom' : 'top', + preferLeft ? 'start' : 'end', + ); + + return [primary, secondary, fallbackPrimary, fallbackSecondary]; + } + private setBackdropActive(active: boolean): void { const backdrop = this.overlayRef?.backdropElement; if (!backdrop) return; diff --git a/projects/step-frontend/src/lib/modules/plan-editor/components/plan-editor-actions/plan-editor-actions.component.html b/projects/step-frontend/src/lib/modules/plan-editor/components/plan-editor-actions/plan-editor-actions.component.html index a95797c96..c753259d2 100644 --- a/projects/step-frontend/src/lib/modules/plan-editor/components/plan-editor-actions/plan-editor-actions.component.html +++ b/projects/step-frontend/src/lib/modules/plan-editor/components/plan-editor-actions/plan-editor-actions.component.html @@ -95,25 +95,15 @@ @if (_interactiveSession.hasExecutionParameters()) { - - - - Advanced: Set target execution parameters so the editor can display the right Keyword or Plan version (See - Automation Packages: Versions). - - +
+ Target Execution Parameters (advanced)
Display the right Keyword or Plan version in the editor
(See + Automation Packages: Versions).
@if (_interactiveSession.hasExecutionParameters()) { ) { - this.targetExecutionParameters = parameters; - this.targetExecutionParametersChange.emit(parameters as Record); + const nonEmptyParameters = Object.fromEntries( + Object.entries(parameters ?? {}).filter(([, value]) => value !== undefined), + ) as Record; + + this.targetExecutionParameters = nonEmptyParameters; + this.targetExecutionParametersChange.emit(nonEmptyParameters as Record); } protected readonly Object = Object;