feat(ui5-popover): implement resizable popover

packages/main/src/PopoverTemplate.tsx

@@ -1,3 +1,5 @@
+import Icon from "./Icon.js";
+import resizeCorner from "@ui5/webcomponents-icons/dist/resize-corner.js";
 import type Popover from "./Popover.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
@@ -32,5 +34,13 @@ function afterContent(this: Popover) {
 				<slot name="footer"></slot>
 			</footer>
 		}
+
+		{this._showResizeHandle &&
+			<div class="ui5-popover-resize-handle"
+				 onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner} />
+			</div>
+		}
 	</>);
 }

packages/main/src/popup-utils/PopoverRegistry.ts

@@ -1,4 +1,3 @@
-import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
@@ -100,7 +99,7 @@ const clickHandler = (event: MouseEvent) => {
 			return;
 		}
 
-		if (isClickInRect(event, popup.getBoundingClientRect())) {
+		if ((popup as Popover).isClicked(event)) {
 			break;
 		}
 

packages/main/src/themes/Dialog.css

@@ -139,22 +139,6 @@
 	color: var(--sapButton_Lite_TextColor);
 }
 
-::slotted([slot="footer"]) {
-	height: var(--_ui5_dialog_footer_height);
-}
-
-::slotted([slot="footer"][ui5-bar][design="Footer"]) {
-	border-top: none;
-}
-
-::slotted([slot="header"][ui5-bar]) {
-	box-shadow: none;
-}
-
-::slotted([slot="footer"][ui5-toolbar]) {
-	border: 0;
-}
-
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
 	opacity: var(--_ui5_popup_block_layer_opacity);

packages/main/src/themes/Popover.css

@@ -90,3 +90,80 @@
 :host([modal]) .ui5-block-layer {
 	display: block;
 }
+
+/* resize handle */
+
+.ui5-popover-resize-handle {
+	position: absolute;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	z-index: 1;
+}
+
+.ui5-popover-resize-handle [ui5-icon] {
+	position: absolute;
+	width: 1rem;
+	height: 1rem;
+	cursor: inherit;
+	color: var(--sapButton_Lite_TextColor);
+	--rotAngle: 0;
+	--scaleX: 1;
+	transform: rotate(var(--rotAngle)) scaleX(var(--scaleX));
+}
+
+.ui5-popover-rtl .ui5-popover-resize-handle [ui5-icon] {
+	--scaleX: -1;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
+	top: -0.5rem;
+	right: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	left: 0;
+	--rotAngle: 270deg;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle {
+	top: -0.5rem;
+	left: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	right: 0;
+	--rotAngle: 180deg;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	left: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	right: 0;
+	--rotAngle: 90deg;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	right: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	left: 0;
+}
+
+.ui5-popover-resizing,
+.ui5-popover-resizing * {
+	user-select: none !important;
+}

packages/main/src/themes/PopupsCommon.css

@@ -127,3 +127,19 @@
 	padding-left: var(--_ui5_popup_header_footer_padding_xl);
 	padding-right: var(--_ui5_popup_header_footer_padding_xl);
 }
+
+::slotted([slot="footer"]) {
+	height: var(--_ui5_popup_footer_height);
+}
+
+::slotted([slot="footer"][ui5-bar][design="Footer"]) {
+	border-top: none;
+}
+
+::slotted([slot="header"][ui5-bar]) {
+	box-shadow: none;
+}
+
+::slotted([slot="footer"][ui5-toolbar]) {
+	border: 0;
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -64,9 +64,11 @@
 	--_ui5_datetime_timeview_phonemode_clocks_width: 24.5rem;
 	--_ui5_datetime_dateview_phonemode_margin_bottom: 0;
 
+	/* Popup */
+	--_ui5_popup_footer_height: 2.75rem;
+
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.75rem;
-	--_ui5_dialog_footer_height: 2.75rem;
 
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
@@ -265,9 +267,11 @@
 	--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
 	--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
 
+	/* Popup */
+	--_ui5_popup_footer_height: 2.5rem;
+
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.5rem;
-	--_ui5_dialog_footer_height: 2.5rem;
 
 	/* Form */
 	--_ui5_form_item_min_height: 2rem;

packages/main/test/pages/PopoverResize.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html class="popover1auto">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Popover Resize</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN",
+			"libs": "sap.ui.webc.main"
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/PopoverResize.css">
+	<script>
+		document.addEventListener('DOMContentLoaded', function () {
+			buttonId.onclick = function () {
+				popoverId.open = true;
+			};
+
+			placementSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.placement = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			hAlignSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.horizontalAlign = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			vAlignSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.verticalAlign = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			hideArrowSwitch.addEventListener("ui5-change", event => {
+				popoverId.hideArrow = hideArrowSwitch.checked;
+			})
+		});
+	</script>
+</head>
+
+<body class="sapUiSizeCompact">
+	<div class="pageContainer">
+		<ui5-title level="H1">Popover Resize</ui5-title>
+		<div class="popoverSettings">
+			<div>
+				<ui5-label for="placementSwitch" show-colon>Placement</ui5-label>
+				<ui5-segmented-button id="placementSwitch">
+					<ui5-segmented-button-item data-ui5-value="Start">Start</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="End" selected>End</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Top">Top</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Bottom">Bottom</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="hAlignSwitch" show-colon>Horizontal Align</ui5-label>
+				<ui5-segmented-button id="hAlignSwitch">
+					<ui5-segmented-button-item data-ui5-value="Center" selected>Center</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Start">Start</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="End">End</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Stretch">Stretch</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="vAlignSwitch" show-colon>Vertical Align</ui5-label>
+				<ui5-segmented-button id="vAlignSwitch">
+					<ui5-segmented-button-item data-ui5-value="Center" selected>Center</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Top">Top</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Bottom">Bottom</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Stretch">Stretch</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="hideArrowSwitch" show-colon>Hide Arrow</ui5-label>
+				<ui5-switch id="hideArrowSwitch"></ui5-switch>
+			</div>
+		</div>
+		<div class="popoverOpenerContainer">
+			<ui5-button id="buttonId">Open Popover</ui5-button>
+			<ui5-popover id="popoverId"
+						 resizable
+						 opener="buttonId"
+						 header-text="Popover">
+				<div>
+					This is a Popover control.
+				</div>
+				<ui5-bar slot="footer" design="Footer">
+					<ui5-button design="Emphasized" id="closeDialogStateButton" slot="endContent">OK</ui5-button>
+				</ui5-bar>
+			</ui5-popover>
+		</div>
+	</div>
+</body>
+</html>

packages/main/test/pages/PopoverResizeRTL.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html class="popover1auto" dir="rtl">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Popover Resize in RTL mode</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN",
+			"libs": "sap.ui.webc.main"
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/PopoverResize.css">
+	<script>
+		document.addEventListener('DOMContentLoaded', function () {
+			buttonId.onclick = function () {
+				popoverId.open = true;
+			};
+
+			placementSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.placement = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			hAlignSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.horizontalAlign = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			vAlignSwitch.addEventListener("ui5-selection-change", event => {
+				popoverId.verticalAlign = event.detail.selectedItems[0].getAttribute("data-ui5-value");
+			});
+
+			hideArrowSwitch.addEventListener("ui5-change", event => {
+				popoverId.hideArrow = hideArrowSwitch.checked;
+			})
+		});
+	</script>
+</head>
+
+<body class="sapUiSizeCompact">
+	<div class="pageContainer">
+		<ui5-title level="H1">Popover Resize</ui5-title>
+		<div class="popoverSettings">
+			<div>
+				<ui5-label for="placementSwitch" show-colon>Placement</ui5-label>
+				<ui5-segmented-button id="placementSwitch">
+					<ui5-segmented-button-item data-ui5-value="Start">Start</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="End" selected>End</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Top">Top</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Bottom">Bottom</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="hAlignSwitch" show-colon>Horizontal Align</ui5-label>
+				<ui5-segmented-button id="hAlignSwitch">
+					<ui5-segmented-button-item data-ui5-value="Center" selected>Center</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Start">Start</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="End">End</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Stretch">Stretch</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="vAlignSwitch" show-colon>Vertical Align</ui5-label>
+				<ui5-segmented-button id="vAlignSwitch">
+					<ui5-segmented-button-item data-ui5-value="Center" selected>Center</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Top">Top</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Bottom">Bottom</ui5-segmented-button-item>
+					<ui5-segmented-button-item data-ui5-value="Stretch">Stretch</ui5-segmented-button-item>
+				</ui5-segmented-button>
+			</div>
+			<div>
+				<ui5-label for="hideArrowSwitch" show-colon>Hide Arrow</ui5-label>
+				<ui5-switch id="hideArrowSwitch"></ui5-switch>
+			</div>
+		</div>
+		<div class="popoverOpenerContainer">
+			<ui5-button id="buttonId">Open Popover</ui5-button>
+			<ui5-popover id="popoverId"
+						 resizable
+						 opener="buttonId"
+						 header-text="Popover">
+				<div>
+					This is a Popover control.
+				</div>
+				<ui5-bar slot="footer" design="Footer">
+					<ui5-button design="Emphasized" id="closeDialogStateButton" slot="endContent">OK</ui5-button>
+				</ui5-bar>
+			</ui5-popover>
+		</div>
+	</div>
+</body>
+</html>