@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/Panel.js

@@ -9,13 +9,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import PanelTemplate from "./PanelTemplate.js";
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
@@ -74,7 +75,8 @@ import panelCss from "./generated/themes/Panel.css.js";
  * @extends UI5Element
  * @public
  * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.
- * @csspart header - Used to style the wrapper of the header.
+ * @csspart header-wrapper - Used to style the outermost header wrapper, useful for adjusting sticky header position.
+ * @csspart header - Used to style the header.
  * @csspart content - Used to style the wrapper of the content.
  */
 let Panel = Panel_1 = class Panel extends UI5Element {
@@ -139,6 +141,8 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         this._hasHeader = false;
         this._contentExpanded = false;
         this._animationRunning = false;
+        this._pendingToggle = false;
+        this._touched = false;
     }
     onBeforeRendering() {
         // If the animation is running, it will set the content expanded state at the end
@@ -157,6 +161,14 @@ let Panel = Panel_1 = class Panel extends UI5Element {
     get shouldNotAnimate() {
         return this.noAnimation || getAnimationMode() === AnimationMode.None;
     }
+    _isMobile() {
+        if (supportsTouch()) {
+            this._touched = true;
+        }
+    }
+    _headerFocusOut() {
+        this._touched = false;
+    }
     _headerClick(e) {
         if (!this.shouldToggle(e.target)) {
             return;
@@ -173,10 +185,16 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         if (isEnter(e)) {
-            e.preventDefault();
+            this._toggleOpen();
         }
         if (isSpace(e)) {
             e.preventDefault();
+            this._pendingToggle = true;
+        }
+        // Cancel toggle if Escape is pressed
+        if (isEscape(e) && this._pendingToggle) {
+            e.preventDefault();
+            this._pendingToggle = false;
         }
     }
     _headerKeyUp(e) {
@@ -184,10 +202,14 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         if (isEnter(e)) {
-            this._toggleOpen();
+            e.preventDefault();
         }
         if (isSpace(e)) {
-            this._toggleOpen();
+            // Only toggle if space was pressed and escape wasn't pressed to cancel
+            if (this._pendingToggle) {
+                this._toggleOpen();
+            }
+            this._pendingToggle = false;
         }
     }
     _toggleOpen() {
@@ -310,6 +332,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Panel.prototype, "_animationRunning", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Panel.prototype, "_pendingToggle", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "_touched", void 0);
 __decorate([
     slot()
 ], Panel.prototype, "header", void 0);

package/dist/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t @property({ type: Boolean })\n\t stickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport { supportsTouch } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header-wrapper - Used to style the outermost header wrapper, useful for adjusting sticky header position.\n * @csspart header - Used to style the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t@property({ type: Boolean })\n\tstickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_pendingToggle = false;\n\n\t@property({ type: Boolean })\n\t_touched = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_isMobile() {\n\t\tif (supportsTouch()) {\n\t\t\tthis._touched = true;\n\t\t}\n\t}\n\n\t_headerFocusOut() {\n\t\tthis._touched = false;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = true;\n\t\t}\n\n\t\t// Cancel toggle if Escape is pressed\n\t\tif (isEscape(e) && this._pendingToggle) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\t// Only toggle if space was pressed and escape wasn't pressed to cancel\n\t\t\tif (this._pendingToggle) {\n\t\t\t\tthis._toggleOpen();\n\t\t\t}\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}

package/dist/PanelTemplate.js

@@ -8,7 +8,7 @@ export default function PanelTemplate() {
                     _jsx("div", { class: {
                             "ui5-panel-heading-wrapper": true,
                             "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
-                        }, role: this.headingWrapperRole, "aria-level": this.headingWrapperAriaLevel, children: _jsxs("div", { onClick: this._headerClick, onKeyDown: this._headerKeyDown, onKeyUp: this._headerKeyUp, class: "ui5-panel-header", tabindex: this.headerTabIndex, role: this.accInfo.role, "aria-expanded": this.accInfo.ariaExpanded, "aria-controls": this.accInfo.ariaControls, "aria-labelledby": this.accInfo.ariaLabelledby, part: "header", children: [!this.fixed &&
+                        }, role: this.headingWrapperRole, "aria-level": this.headingWrapperAriaLevel, part: "header-wrapper", children: _jsxs("div", { onClick: this._headerClick, onKeyDown: this._headerKeyDown, onKeyUp: this._headerKeyUp, onTouchStart: this._isMobile, onFocusOut: this._headerFocusOut, class: "ui5-panel-header", tabindex: this.headerTabIndex, role: this.accInfo.role, "aria-expanded": this.accInfo.ariaExpanded, "aria-controls": this.accInfo.ariaControls, "aria-labelledby": this.accInfo.ariaLabelledby, part: "header", children: [!this.fixed &&
                                     _jsx("div", { class: "ui5-panel-header-button-root", children: this._hasHeader ?
                                             _jsx(Button, { design: "Transparent", class: "ui5-panel-header-button ui5-panel-header-button-with-icon", onClick: this._toggleButtonClick, accessibilityAttributes: this.accInfo.button.accessibilityAttributes, tooltip: this.accInfo.button.title, accessibleName: this.accInfo.button.ariaLabelButton, children: _jsx("div", { class: "ui5-panel-header-icon-wrapper", children: _jsx(Icon, { class: {
                                                             "ui5-panel-header-icon": true,

package/dist/PanelTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTemplate.js","sourceRoot":"","sources":["../src/PanelTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CAAC,4BACP,eACC,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,gBACN,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,iCAAiC,aAErD,IAAI,CAAC,qBAAqB;oBAC3B,+CAA+C;oBAC/C,cACC,KAAK,EAAE;4BACN,2BAA2B,EAAE,IAAI;4BACjC,kCAAkC,EAAE,IAAI,CAAC,YAAY;yBACrD,EACD,IAAI,EAAE,IAAI,CAAC,kBAAkB,gBACjB,IAAI,CAAC,uBAAuB,YAExC,eACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,mBACR,IAAI,CAAC,OAAO,CAAC,YAAY,mBACzB,IAAI,CAAC,OAAO,CAAC,YAAY,qBACvB,IAAI,CAAC,OAAO,CAAC,cAAc,EAC5C,IAAI,EAAC,QAAQ,aAEX,CAAC,IAAI,CAAC,KAAK;oCACZ,cAAK,KAAK,EAAC,8BAA8B,YACtC,IAAI,CAAC,UAAU,CAAC,CAAC;4CAClB,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,2DAA2D,EACjE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,EACpE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAClC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,YAEnD,cAAK,KAAK,EAAC,+BAA+B,YACzC,KAAC,IAAI,IACJ,KAAK,EAAE;4DACN,uBAAuB,EAAE,IAAI;4DAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;yDAC1D,EACD,IAAI,EAAE,cAAc,GAEd,GACF,GACE;4CACT,CAAC,CAAC,OAAO;gDACT,KAAC,IAAI,IACJ,KAAK,EAAE;wDACN,yBAAyB,EAAE,IAAI;wDAC/B,uBAAuB,EAAE,IAAI;wDAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;qDAC1D,EACD,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB,GACrC,GAEE,EAGL,IAAI,CAAC,UAAU,CAAC,CAAC;oCAClB,eAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC3B,CAAC,CAAC,OAAO;wCACT,cACC,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,eAAe,EAC/B,KAAK,EAAC,wBAAwB,YAE5B,IAAI,CAAC,UAAU,GACZ,IAEF,GACD,EAIP,cACC,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,UAAU,EAC1B,QAAQ,EAAG,CAAC,CAAC,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBACjD,EACD,IAAI,EAAC,SAAS,YAEd,gBAAa,GACR,IACD,GACJ,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type Panel from \"./Panel.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function PanelTemplate(this: Panel) {\n\treturn (<>\n\t\t<div\n\t\t\tclass=\"ui5-panel-root\"\n\t\t\trole={this.accRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.fixedPanelAriaLabelledbyReference}\n\t\t>\n\t\t\t{ this.hasHeaderOrHeaderText &&\n\t\t\t\t// header: either header or h1 with header text\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper\": true,\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.headingWrapperRole}\n\t\t\t\t\taria-level={this.headingWrapperAriaLevel}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tonClick={this._headerClick}\n\t\t\t\t\t\tonKeyDown={this._headerKeyDown}\n\t\t\t\t\t\tonKeyUp={this._headerKeyUp}\n\t\t\t\t\t\tclass=\"ui5-panel-header\"\n\t\t\t\t\t\ttabindex={this.headerTabIndex}\n\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\taria-labelledby={this.accInfo.ariaLabelledby}\n\t\t\t\t\t\tpart=\"header\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ !this.fixed &&\n\t\t\t\t\t\t\t<div class=\"ui5-panel-header-button-root\">\n\t\t\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-button ui5-panel-header-button-with-icon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._toggleButtonClick}\n\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.button.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\ttooltip={this.accInfo.button.title}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.accInfo.button.ariaLabelButton}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-panel-header-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.toggleButtonTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={ `${this._id}-header-title` }\n\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this.headerText }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{/* content area */}\n\t\t\t<div\n\t\t\t\tclass=\"ui5-panel-content\"\n\t\t\t\tid={ `${this._id}-content` }\n\t\t\t\ttabindex={ -1 }\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t\t}}\n\t\t\t\tpart=\"content\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t</>);\n}\n"]}
+{"version":3,"file":"PanelTemplate.js","sourceRoot":"","sources":["../src/PanelTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CAAC,4BACP,eACC,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,gBACN,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,iCAAiC,aAErD,IAAI,CAAC,qBAAqB;oBAC3B,+CAA+C;oBAC/C,cACC,KAAK,EAAE;4BACN,2BAA2B,EAAE,IAAI;4BACjC,kCAAkC,EAAE,IAAI,CAAC,YAAY;yBACrD,EACD,IAAI,EAAE,IAAI,CAAC,kBAAkB,gBACjB,IAAI,CAAC,uBAAuB,EACxC,IAAI,EAAC,gBAAgB,YAErB,eACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,mBACR,IAAI,CAAC,OAAO,CAAC,YAAY,mBACzB,IAAI,CAAC,OAAO,CAAC,YAAY,qBACvB,IAAI,CAAC,OAAO,CAAC,cAAc,EAC5C,IAAI,EAAC,QAAQ,aAEX,CAAC,IAAI,CAAC,KAAK;oCACZ,cAAK,KAAK,EAAC,8BAA8B,YACtC,IAAI,CAAC,UAAU,CAAC,CAAC;4CAClB,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,2DAA2D,EACjE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,EACpE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAClC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,YAEnD,cAAK,KAAK,EAAC,+BAA+B,YACzC,KAAC,IAAI,IACJ,KAAK,EAAE;4DACN,uBAAuB,EAAE,IAAI;4DAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;yDAC1D,EACD,IAAI,EAAE,cAAc,GAEd,GACF,GACE;4CACT,CAAC,CAAC,OAAO;gDACT,KAAC,IAAI,IACJ,KAAK,EAAE;wDACN,yBAAyB,EAAE,IAAI;wDAC/B,uBAAuB,EAAE,IAAI;wDAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;qDAC1D,EACD,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB,GACrC,GAEE,EAGL,IAAI,CAAC,UAAU,CAAC,CAAC;oCAClB,eAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC3B,CAAC,CAAC,OAAO;wCACT,cACC,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,eAAe,EAC/B,KAAK,EAAC,wBAAwB,YAE5B,IAAI,CAAC,UAAU,GACZ,IAEF,GACD,EAIP,cACC,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,UAAU,EAC1B,QAAQ,EAAG,CAAC,CAAC,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBACjD,EACD,IAAI,EAAC,SAAS,YAEd,gBAAa,GACR,IACD,GACJ,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type Panel from \"./Panel.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function PanelTemplate(this: Panel) {\n\treturn (<>\n\t\t<div\n\t\t\tclass=\"ui5-panel-root\"\n\t\t\trole={this.accRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.fixedPanelAriaLabelledbyReference}\n\t\t>\n\t\t\t{ this.hasHeaderOrHeaderText &&\n\t\t\t\t// header: either header or h1 with header text\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper\": true,\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.headingWrapperRole}\n\t\t\t\t\taria-level={this.headingWrapperAriaLevel}\n\t\t\t\t\tpart=\"header-wrapper\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tonClick={this._headerClick}\n\t\t\t\t\t\tonKeyDown={this._headerKeyDown}\n\t\t\t\t\t\tonKeyUp={this._headerKeyUp}\n\t\t\t\t\t\tonTouchStart={this._isMobile}\n\t\t\t\t\t\tonFocusOut={this._headerFocusOut}\n\t\t\t\t\t\tclass=\"ui5-panel-header\"\n\t\t\t\t\t\ttabindex={this.headerTabIndex}\n\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\taria-labelledby={this.accInfo.ariaLabelledby}\n\t\t\t\t\t\tpart=\"header\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ !this.fixed &&\n\t\t\t\t\t\t\t<div class=\"ui5-panel-header-button-root\">\n\t\t\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-button ui5-panel-header-button-with-icon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._toggleButtonClick}\n\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.button.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\ttooltip={this.accInfo.button.title}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.accInfo.button.ariaLabelButton}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-panel-header-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.toggleButtonTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={ `${this._id}-header-title` }\n\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this.headerText }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{/* content area */}\n\t\t\t<div\n\t\t\t\tclass=\"ui5-panel-content\"\n\t\t\t\tid={ `${this._id}-content` }\n\t\t\t\ttabindex={ -1 }\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t\t}}\n\t\t\t\tpart=\"content\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t</>);\n}\n"]}

package/dist/Popover.d.ts

@@ -1,8 +1,11 @@
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Popup from "./Popup.js";
 import PopoverPlacement from "./types/PopoverPlacement.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import PopoverResize from "./PopoverResize.js";
+import type { ResizeHandlePlacement } from "./PopoverResize.js";
 type PopoverSize = {
     width: number;
     height: number;
@@ -11,11 +14,23 @@ type ArrowPosition = {
     x: number;
     y: number;
 };
+declare enum PopoverActualHorizontalAlign {
+    Center = "Center",
+    Left = "Left",
+    Right = "Right",
+    Stretch = "Stretch"
+}
+declare enum PopoverActualPlacement {
+    Left = "Left",
+    Right = "Right",
+    Top = "Top",
+    Bottom = "Bottom"
+}
 type CalculatedPlacement = {
     arrow: ArrowPosition;
     top: number;
     left: number;
-    placement: `${PopoverPlacement}`;
+    actualPlacement: `${PopoverActualPlacement}`;
 };
 /**
  * @class
@@ -82,7 +97,7 @@ declare class Popover extends Popup {
     verticalAlign: `${PopoverVerticalAlign}`;
     /**
      * Defines whether the component should close when
-     * clicking/tapping outside of the popover.
+     * clicking/tapping outside the popover.
      * If enabled, it blocks any interaction with the background.
      * @default false
      * @public
@@ -102,6 +117,14 @@ declare class Popover extends Popup {
      * @public
      */
     allowTargetOverlap: boolean;
+    /**
+     * Determines whether the component is resizable.
+     * **Note:** This property is effective only on desktop devices.
+     * @default false
+     * @public
+     * @since 2.19.0
+     */
+    resizable: boolean;
     /**
      * Sets the X translation of the arrow
      * @private
@@ -116,19 +139,20 @@ declare class Popover extends Popup {
      * Returns the calculated placement depending on the free space
      * @private
      */
-    actualPlacement: `${PopoverPlacement}`;
+    actualPlacement: `${PopoverActualPlacement}`;
     _maxHeight?: number;
     _maxWidth?: number;
+    _resizeHandlePlacement?: `${ResizeHandlePlacement}`;
     /**
      * Defines the header HTML Element.
      * @public
      */
-    header: Array<HTMLElement>;
+    header: Slot<HTMLElement>;
     /**
      * Defines the footer HTML Element.
      * @public
      */
-    footer: Array<HTMLElement>;
+    footer: Slot<HTMLElement>;
     _opener?: HTMLElement | string | null | undefined;
     _openerRect?: DOMRect;
     _preventRepositionAndClose?: boolean;
@@ -137,6 +161,10 @@ declare class Popover extends Popup {
     _oldPlacement?: CalculatedPlacement;
     _width?: string;
     _height?: string;
+    _openerIntersectionObserver?: IntersectionObserver | null;
+    _popoverResize: PopoverResize;
+    _initialWidth?: string;
+    _initialHeight?: string;
     static get VIEWPORT_MARGIN(): number;
     constructor();
     /**
@@ -150,7 +178,9 @@ declare class Popover extends Popup {
     set opener(value: HTMLElement | string | null);
     get opener(): HTMLElement | string | null | undefined;
     openPopup(): Promise<void>;
+    closePopup(escPressed?: boolean, preventRegistryUpdate?: boolean, preventFocusRestore?: boolean): void;
     isOpenerClicked(e: MouseEvent): boolean;
+    isClicked(e: MouseEvent): boolean;
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
      * @private
@@ -162,13 +192,14 @@ declare class Popover extends Popup {
      */
     _removeOpenedPopup(): void;
     getOpenerHTMLElement(opener: HTMLElement | string | null | undefined): HTMLElement | null | undefined;
-    shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean;
+    shouldCloseDueToOverflow(placement: `${PopoverActualPlacement}`, openerRect: DOMRect): boolean;
     shouldCloseDueToNoOpener(openerRect: DOMRect): boolean;
     isOpenerOutsideViewport(openerRect: DOMRect): boolean;
     /**
      * @override
      */
     _resize(): void;
+    get _viewportMargin(): number;
     reposition(): void;
     _show(): Promise<void>;
     /**
@@ -179,6 +210,22 @@ declare class Popover extends Popup {
      * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top: number): number;
+    /**
+     * Callback invoked when the opener element's intersection status changes.
+     * Closes the popover when the opener is no longer visible.
+     * @private
+     */
+    _onOpenerIntersection(entries: Array<IntersectionObserverEntry>): void;
+    /**
+     * Starts observing the opener element's visibility in the viewport.
+     * @private
+     */
+    _observeOpenerVisibility(): void;
+    /**
+     * Stops observing the opener element and cleans up the IntersectionObserver instance.
+     * @private
+     */
+    _unobserveOpenerVisibility(): void;
     getPopoverSize(calcScrollHeight?: boolean): PopoverSize;
     _showOutsideViewport(): void;
     _isUI5AbstractElement(el: HTMLElement): el is UI5Element;
@@ -191,6 +238,7 @@ declare class Popover extends Popup {
      * @private
      */
     calcPlacement(targetRect: DOMRect, popoverSize: PopoverSize): CalculatedPlacement;
+    get isVertical(): boolean;
     getRTLCorrectionLeft(): number;
     /**
      * Calculates the position for the arrow.
@@ -208,8 +256,8 @@ declare class Popover extends Popup {
      * Fallbacks to new placement, prioritizing `Left` and `Right` placements.
      * @private
      */
-    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacement | undefined;
-    getActualPlacement(targetRect: DOMRect): `${PopoverPlacement}`;
+    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverActualPlacement | undefined;
+    getActualPlacement(targetRect: DOMRect): `${PopoverActualPlacement}`;
     getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number;
     getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number;
     get isModal(): boolean;
@@ -233,8 +281,13 @@ declare class Popover extends Popup {
      * Hook for descendants to hide footer.
      */
     get _displayFooter(): boolean;
-    get _actualHorizontalAlign(): "Start" | "End" | "Center" | "Stretch" | PopoverHorizontalAlign.Start | PopoverHorizontalAlign.End;
+    get isRtl(): boolean;
+    get _actualHorizontalAlign(): PopoverActualHorizontalAlign;
+    get _showResizeHandle(): boolean;
+    get resizeHandlePlacement(): "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | undefined;
+    _onResizeMouseDown(e: MouseEvent): void;
+    readonly isPopover = true;
 }
-declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;
-export { instanceOfPopover };
+export declare const instanceOfPopover: (object: any) => object is Popover;
+export { PopoverActualPlacement, PopoverActualHorizontalAlign };