@ui5/webcomponents 0.0.0-201dc9cbe → 0.0.0-20ff83d14

package/dist/Panel.js

@@ -1,472 +1,298 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Panel_1;
 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.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import {
-	getEffectiveAriaLabelText,
-	getAriaLabelledByTexts,
-} from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import Button from "./Button.js";
+import Icon from "./Icon.js";
 import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
-
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
-
 // Styles
 import panelCss from "./generated/themes/Panel.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-panel",
-	languageAware: true,
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
-
-		/**
-		 * Defines the <code>ui5-panel</code> header area.
-		 * <br><br>
-		 * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Determines the content of the <code>ui5-panel</code>.
-		 * The content is visible only when the <code>ui5-panel</code> is expanded.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: HTMLElement,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
-
-		/**
-		 * This property is used to set the header text of the <code>ui5-panel</code>.
-		 * The text is visible in both expanded and collapsed states.
-		 * <br><br>
-		 * <b>Note:</b> This property is overridden by the <code>header</code> slot.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		headerText: {
-			type: String,
-		},
-
-		/**
-		 * Determines whether the <code>ui5-panel</code> is in a fixed state that is not
-		 * expandable/collapsible by user interaction.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		fixed: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates whether the <code>ui5-panel</code> is collapsed and only the header is displayed.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		collapsed: {
-			type: Boolean,
-		},
-
-		/**
-		 * Sets the accessible aria role of the <code>ui5-panel</code>.
-		 * Depending on the usage, you can change the role from the default <code>Form</code>
-		 * to <code>Region</code> or <code>Complementary</code>.
-		 *
-		 * @type {PanelAccessibleRole}
-		 * @defaultvalue "Form"
-		 * @public
-		 */
-		accessibleRole: {
-			type: PanelAccessibleRole,
-			defaultValue: PanelAccessibleRole.Form,
-		},
-
-		/**
-		 * Defines the "aria-level" of <code>ui5-panel</code> heading,
-		 * set by the <code>headerText</code>.
-		 * <br><br>
-		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
-		 * @type {TitleLevel}
-		 * @defaultvalue "H2"
-		 * @public
-		*/
-		headerLevel: {
-			type: TitleLevel,
-			defaultValue: TitleLevel.H2,
-		},
-
-		/**
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabel: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the panel
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the header of the panel
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		headerAriaLabelledby: {
-			type: String,
-		},
-
-		/**
-		 * @private
-		 */
-		_hasHeader: {
-			type: Boolean,
-		},
-
-		_header: {
-			type: Object,
-		},
-
-		_contentExpanded: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_animationRunning: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_buttonAccInfo: {
-			type: Object,
-		},
-	},
-	events: {
-
-		/**
-		 * Fired when the ui5-panel is expanded/collapsed by user interaction.
-		 *
-		 * @event
-		 * @public
-		 */
-		toggle: {},
-	},
-};
-
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-panel</code> component is a container which has a header and a
+ * The `ui5-panel` component is a container which has a header and a
  * content area and is used
  * for grouping and displaying information. It can be collapsed to save space on the screen.
  *
- * <h3>Guidelines:</h3>
- * <ul>
- * <li>Nesting two or more panels is not recommended.</li>
- * <li>Do not stack too many panels on one page.</li>
- * </ul>
+ * ### Guidelines:
+ *
+ * - Nesting two or more panels is not recommended.
+ * - Do not stack too many panels on one page.
+ *
+ * ### Structure
+ * The panel's header area consists of a title bar with a header text or custom header.
+ *
+ * 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.
+ *
+ * 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.
  *
- * <h3>Structure</h3>
- * A panel consists of a title bar with a header text or custom header.
- * <br>
  * The content area can contain an arbitrary set of controls.
- * 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.
- * <br>
- * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
- * <br><b>Note:</b> 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.
  *
- * <h3>Responsive Behavior</h3>
- * <ul>
- * <li>If the width of the panel is set to 100% (default), the panel and its children are
+ * **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.
+ *
+ * ### Responsive Behavior
+ *
+ * - If the width of the panel is set to 100% (default), the panel and its children are
  * resized responsively,
- * depending on its parent container.</li>
- * <li>If the panel has a fixed height, it will take up the space even if the panel is
- * collapsed.</li>
- * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),
- * an arrow icon (pointing to the right) appears in front of the header.</li>
- * <li>When the animation is activated, expand/collapse uses a smooth animation to open or
- * close the content area.</li>
- * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees
- * clockwise/counter-clockwise.</li>
- * </ul>
+ * depending on its parent container.
+ * - If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.
+ * - When the panel is expandable (the `fixed` property is set to `false`),
+ * an arrow icon (pointing to the right) appears in front of the header.
+ * - When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.
+ * - When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.
+ *
+ * ### Keyboard Handling
  *
- * <h3>ES6 Module Import</h3>
+ * #### Fast Navigation
+ * 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].
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents/dist/Panel";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Panel.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Panel
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-panel
+ * @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 content - Used to style the wrapper of the content.
  */
-class Panel extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return PanelTemplate;
-	}
-
-	static get styles() {
-		return panelCss;
-	}
-
-	constructor() {
-		super();
-
-		this._header = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering() {
-		// If the animation is running, it will set the content expanded state at the end
-		if (!this._animationRunning) {
-			this._contentExpanded = !this.collapsed;
-		}
-
-		this._hasHeader = !!this.header.length;
-	}
-
-	shouldToggle(node) {
-		const customContent = this.header.length;
-		if (customContent) {
-			return node.classList.contains("ui5-panel-header-button");
-		}
-		return true;
-	}
-
-	shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
-	}
-
-	_headerClick(event) {
-		if (!this.shouldToggle(event.target)) {
-			return;
-		}
-
-		this._toggleOpen();
-	}
-
-	_toggleButtonClick(event) {
-		if (event.x === 0 && event.y === 0) {
-			event.stopImmediatePropagation();
-		}
-	}
-
-	_headerKeyDown(event) {
-		if (!this.shouldToggle(event.target)) {
-			return;
-		}
-
-
-		if (isEnter(event)) {
-			this._toggleOpen();
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-	}
-
-	_headerKeyUp(event) {
-		if (!this.shouldToggle(event.target)) {
-			return;
-		}
-
-		if (isSpace(event)) {
-			this._toggleOpen();
-		}
-	}
-
-	_toggleOpen() {
-		if (this.fixed) {
-			return;
-		}
-
-		this.collapsed = !this.collapsed;
-
-		if (!this.shouldAnimate()) {
-			this.fireEvent("toggle");
-			return;
-		}
-
-		this._animationRunning = true;
-
-		const elements = this.getDomRef().querySelectorAll(".ui5-panel-content");
-		const animations = [];
-
-		[].forEach.call(elements, oElement => {
-			if (this.collapsed) {
-				animations.push(slideUp({
-					element: oElement,
-				}).promise());
-			} else {
-				animations.push(slideDown({
-					element: oElement,
-				}).promise());
-			}
-		});
-
-		Promise.all(animations).then(_ => {
-			this._animationRunning = false;
-			this._contentExpanded = !this.collapsed;
-			this.fireEvent("toggle");
-		});
-	}
-
-	_headerOnTarget(target) {
-		return target.classList.contains("sapMPanelWrappingDiv");
-	}
-
-	get classes() {
-		return {
-			headerBtn: {
-				"ui5-panel-header-button-animated": this.shouldAnimate(),
-			},
-		};
-	}
-
-	get toggleButtonTitle() {
-		return this.i18nBundle.getText(PANEL_ICON);
-	}
-
-	get expanded() {
-		return !this.collapsed;
-	}
-
-	get accRole() {
-		return this.accessibleRole.toLowerCase();
-	}
-
-	get accInfo() {
-		return {
-			"button": {
-				"ariaExpanded": this._hasHeader ? this.expanded : undefined,
-				"ariaControls": this._hasHeader ? `${this._id}-content` : undefined,
-				"title": this.toggleButtonTitle,
-			},
-			"ariaExpanded": this.nonFixedInternalHeader ? this.expanded : undefined,
-			"ariaControls": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,
-			"ariaLabelledby": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,
-			"ariaLabel": this.nonFocusableButton ? this.ariaLabelTxt : undefined,
-			"ariaLabelledbyButton": this.nonFocusableButton ? undefined : this.ariaLabelledbyReference,
-			"ariaLabelButton": this.nonFocusableButton ? undefined : this.ariaLabelTxt,
-			"role": this.nonFixedInternalHeader ? "button" : undefined,
-		};
-	}
-
-	get ariaLabelledbyReference() {
-		if (this.ariaLabelledby || this.ariaLabel) {
-			return undefined;
-		}
-
-		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
-	}
-
-	get ariaLabelTxt() {
-		return getEffectiveAriaLabelText(this);
-	}
-
-	get header() {
-		return this.getDomRef().querySelector(`#${this._id}-header-title`);
-	}
-
-	get headerAriaLevel() {
-		return this.headerLevel.slice(1);
-	}
-
-	get headerTabIndex() {
-		return (this.header.length || this.fixed) ? "-1" : "0";
-	}
-
-	get headerAriaLabelledByText() {
-		if (!this.headerAriaLabelledby) {
-			return;
-		}
-		return getAriaLabelledByTexts(this.header, findNodeOwner(this), this.headerAriaLabelledby);
-	}
-
-	get nonFixedInternalHeader() {
-		return !this._hasHeader && !this.fixed;
-	}
-
-	get nonFocusableButton() {
-		return !this.header.length;
-	}
-
-	get shouldRenderH1() {
-		return !this.header.length && (this.headerText || !this.fixed);
-	}
-
-	get styles() {
-		return {
-			content: {
-				display: this._contentExpanded ? "block" : "none",
-			},
-		};
-	}
-
-	static get dependencies() {
-		return [Button];
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-}
-
+let Panel = Panel_1 = class Panel extends UI5Element {
+    onBeforeRendering() {
+        // If the animation is running, it will set the content expanded state at the end
+        if (!this._animationRunning) {
+            this._contentExpanded = !this.collapsed;
+        }
+        this._hasHeader = !!this.header.length;
+    }
+    shouldToggle(element) {
+        const customContent = this.header.length;
+        if (customContent) {
+            return element.classList.contains("ui5-panel-header-button");
+        }
+        return true;
+    }
+    shouldNotAnimate() {
+        return this.noAnimation || getAnimationMode() === AnimationMode.None;
+    }
+    _headerClick(e) {
+        if (!this.shouldToggle(e.target)) {
+            return;
+        }
+        this._toggleOpen();
+    }
+    _toggleButtonClick(e) {
+        if (e.x === 0 && e.y === 0) {
+            e.stopImmediatePropagation();
+        }
+    }
+    _headerKeyDown(e) {
+        if (!this.shouldToggle(e.target)) {
+            return;
+        }
+        if (isEnter(e)) {
+            e.preventDefault();
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+    }
+    _headerKeyUp(e) {
+        if (!this.shouldToggle(e.target)) {
+            return;
+        }
+        if (isEnter(e)) {
+            this._toggleOpen();
+        }
+        if (isSpace(e)) {
+            this._toggleOpen();
+        }
+    }
+    _toggleOpen() {
+        if (this.fixed) {
+            return;
+        }
+        this.collapsed = !this.collapsed;
+        if (this.shouldNotAnimate()) {
+            this.fireEvent("toggle");
+            return;
+        }
+        this._animationRunning = true;
+        const elements = this.getDomRef().querySelectorAll(".ui5-panel-content");
+        const animations = [];
+        [].forEach.call(elements, oElement => {
+            if (this.collapsed) {
+                animations.push(slideUp(oElement).promise());
+            }
+            else {
+                animations.push(slideDown(oElement).promise());
+            }
+        });
+        Promise.all(animations).then(() => {
+            this._animationRunning = false;
+            this._contentExpanded = !this.collapsed;
+            this.fireEvent("toggle");
+        });
+    }
+    _headerOnTarget(target) {
+        return target.classList.contains("sapMPanelWrappingDiv");
+    }
+    get classes() {
+        return {
+            headerBtn: {
+                "ui5-panel-header-button-animated": !this.shouldNotAnimate(),
+            },
+            stickyHeaderClass: {
+                "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
+            },
+        };
+    }
+    get toggleButtonTitle() {
+        return Panel_1.i18nBundle.getText(PANEL_ICON);
+    }
+    get expanded() {
+        return !this.collapsed;
+    }
+    get accRole() {
+        return this.accessibleRole.toLowerCase();
+    }
+    get effectiveAccessibleName() {
+        return typeof this.accessibleName === "string" && this.accessibleName.length ? this.accessibleName : undefined;
+    }
+    get accInfo() {
+        return {
+            "button": {
+                "accessibilityAttributes": {
+                    "expanded": this.expanded,
+                },
+                "title": this.toggleButtonTitle,
+                "ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
+            },
+            "ariaExpanded": this.nonFixedInternalHeader ? this.expanded : undefined,
+            "ariaControls": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,
+            "ariaLabelledby": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,
+            "role": this.nonFixedInternalHeader ? "button" : undefined,
+        };
+    }
+    get ariaLabelledbyReference() {
+        return (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;
+    }
+    get fixedPanelAriaLabelledbyReference() {
+        return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
+    }
+    get headerAriaLevel() {
+        return this.headerLevel.slice(1);
+    }
+    get headerTabIndex() {
+        return (this.header.length || this.fixed) ? "-1" : "0";
+    }
+    get headingWrapperAriaLevel() {
+        return !this._hasHeader ? this.headerAriaLevel : undefined;
+    }
+    get headingWrapperRole() {
+        return !this._hasHeader ? "heading" : undefined;
+    }
+    get nonFixedInternalHeader() {
+        return !this._hasHeader && !this.fixed;
+    }
+    get hasHeaderOrHeaderText() {
+        return this._hasHeader || this.headerText;
+    }
+    get nonFocusableButton() {
+        return !this.header.length;
+    }
+    get styles() {
+        return {
+            content: {
+                display: this._contentExpanded ? "block" : "none",
+            },
+        };
+    }
+    static async onDefine() {
+        Panel_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+};
+__decorate([
+    property()
+], Panel.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "fixed", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "noAnimation", void 0);
+__decorate([
+    property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })
+], Panel.prototype, "accessibleRole", void 0);
+__decorate([
+    property({ type: TitleLevel, defaultValue: TitleLevel.H2 })
+], Panel.prototype, "headerLevel", void 0);
+__decorate([
+    property()
+], Panel.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "useAccessibleNameForToggleButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "_hasHeader", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Panel.prototype, "_contentExpanded", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Panel.prototype, "_animationRunning", void 0);
+__decorate([
+    slot()
+], Panel.prototype, "header", void 0);
+Panel = Panel_1 = __decorate([
+    customElement({
+        tag: "ui5-panel",
+        fastNavigation: true,
+        languageAware: true,
+        renderer: litRender,
+        template: PanelTemplate,
+        styles: panelCss,
+        dependencies: [Button, Icon],
+    })
+    /**
+     * Fired when the component is expanded/collapsed by user interaction.
+     * @public
+     */
+    ,
+    event("toggle")
+], Panel);
 Panel.define();
-
 export default Panel;
+//# sourceMappingURL=Panel.js.map