Class DropIndicator

packages/main/src/DropIndicator.ts:28–157

* @class * * ### Overview * * ### Usage * * ### ES6 Module Import * * `import "@ui5/webcomponents/dist/DropIndicator.js";` * * @constructor * @extends UI5Element * @private

 * @private
 */
@customElement({
	tag: "ui5-drop-indicator",
	renderer: jsxRenderer,
	styles: DropIndicatorCss,
	template: DropIndicatorTemplate,
})
class DropIndicator extends UI5Element {
	/**
	 * Element where the drop indicator will be shown.
	 *
	 * @public
	 * @default null
	 */
	@property({ type: Object })
	targetReference: HTMLElement | null = null;

	/**
	 * Owner of the indicator and the target.
	 * @public
	 * @default null
	 */
	@property({ type: Object })
	ownerReference: HTMLElement | null = null;

	/**
	 * Placement of the indicator relative to the target.
	 *
	 * @default "Before"
	 * @public
	 */
	@property()
	placement: `${MovePlacement}` = "Before";

	/**
	 * Orientation of the indicator.
	 *
	 * @default "Vertical"
	 * @public
	 */
	@property()
	orientation: `${Orientation}` = "Vertical";

	get _positionProperty() {
		if (this.orientation === Orientation.Vertical) {
			return "left";
		}

		return "top";
	}

	constructor() {
		super();
	}

	onAfterRendering() {
		if (!this.targetReference || !this.ownerReference) {
			Object.assign(this.style, {
				display: "none",