@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/Option.d.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { IOption } from "./Select.js";
+import type { IOption } from "./Interfaces.js";
 /**
  * @class
  *
@@ -8,19 +8,14 @@ import type { IOption } from "./Select.js";
  * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Option
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-option
- * @implements sap.ui.webc.main.ISelectOption
+ * @extends UI5Element
+ * @implements {IOption}
  * @public
  */
 declare class Option extends UI5Element implements IOption {
     /**
      * Defines the selected state of the component.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.main.Option.prototype.selected
+     * @default false
      * @public
      */
     selected: boolean;
@@ -28,17 +23,14 @@ declare class Option extends UI5Element implements IOption {
      * Defines whether the component is in disabled state.
      * <br><br>
      * <b>Note:</b> A disabled component is hidden.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.main.Option.prototype.disabled
+     * @default false
      * @public
      * @since 1.0.0-rc.12
      */
     disabled: boolean;
     /**
      * Defines the tooltip of the component.
-     * @type {string}
-     * @defaultvalue ""
+     * @default ""
      * @private
      * @since 1.1.0
      */
@@ -49,33 +41,28 @@ declare class Option extends UI5Element implements IOption {
      * <b>Note:</b>
      * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
      * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Option.prototype.icon
+     * @default null
      * @public
      */
-    icon?: string;
+    icon?: string | null;
     /**
      * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
      * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Option.prototype.value
+     * @default ""
      * @public
      */
     value: string;
     /**
      * Defines the additional text displayed at the end of the option element.
-     * @type {string}
-     * @name sap.ui.webc.main.Option.prototype.additionalText
+     * @default ""
      * @public
      * @since 1.3.0
      */
     additionalText: string;
     /**
      * Defines the focused state of the component.
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @since 1.0.0-rc.13
      * @private
      */
@@ -85,11 +72,9 @@ declare class Option extends UI5Element implements IOption {
      * <br><br>
      * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.Option.prototype.default
-     * @slot
      * @public
      */
+    text: Array<Node>;
     get stableDomRef(): string;
 }
 export default Option;

package/dist/Option.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 /**
  * @class
@@ -15,24 +16,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Option
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-option
- * @implements sap.ui.webc.main.ISelectOption
+ * @extends UI5Element
+ * @implements {IOption}
  * @public
  */
 let Option = class Option extends UI5Element {
-    /**
-     * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-     *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.Option.prototype.default
-     * @slot
-     * @public
-     */
     get stableDomRef() {
         return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
     }
@@ -58,6 +46,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Option.prototype, "_focused", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], Option.prototype, "text", void 0);
 Option = __decorate([
     customElement("ui5-option")
 ], Option);

package/dist/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;;;;GAcG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA+E9B;;;;;;;;;OASG;IAEH,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AApFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAanB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAUnB;IADC,QAAQ,EAAE;qCACI;AAcf;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACnB;AAWd;IADC,QAAQ,EAAE;qCACI;AAUf;IADC,QAAQ,EAAE;8CACa;AAUxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AA7Ed,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CA6FX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IOption } from \"./Select.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Option\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-option\n * @implements sap.ui.webc.main.ISelectOption\n * @public\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\n\t/**\n\t * Defines the selected state of the component.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.Option.prototype.selected\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.Option.prototype.disabled\n\t * @public\n\t * @since 1.0.0-rc.12\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @type {string}\n\t * @defaultvalue \"\"\n\t * @private\n\t * @since 1.1.0\n\t */\n\t@property()\n\ttitle!: string;\n\n\t/**\n\t * Defines the <code>icon</code> source URI.\n\t * <br><br>\n\t * <b>Note:</b>\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.icon\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string;\n\n\t/**\n\t * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.value\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.additionalText\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_focused!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @type {Node[]}\n\t * @name sap.ui.webc.main.Option.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;GAWG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA+E9B,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AA3EA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAWnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AASnB;IADC,QAAQ,EAAE;qCACI;AAYf;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACZ;AAUrB;IADC,QAAQ,EAAE;qCACI;AASf;IADC,QAAQ,EAAE;8CACa;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAUnB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AA7Ed,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CAkFX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IOption } from \"./Interfaces.js\";\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.\n *\n * @constructor\n * @extends UI5Element\n * @implements {IOption}\n * @public\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.12\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default \"\"\n\t * @private\n\t * @since 1.1.0\n\t */\n\t@property()\n\ttitle!: string;\n\n\t/**\n\t * Defines the <code>icon</code> source URI.\n\t * <br><br>\n\t * <b>Note:</b>\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t * @default null\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string | null;\n\n\t/**\n\t * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @default \"\"\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @default false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_focused!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}

package/dist/Panel.d.ts

@@ -43,16 +43,6 @@ import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
  * clockwise/counter-clockwise.</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the wrapper of the header</li>
- * <li>content - Used to style the wrapper of the content</li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <h4>Fast Navigation</h4>
@@ -66,11 +56,11 @@ import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
  * <code>import "@ui5/webcomponents/dist/Panel";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Panel
- * @extends sap.ui.webc.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.
  */
 declare class Panel extends UI5Element {
     /**
@@ -79,9 +69,7 @@ declare class Panel extends UI5Element {
      * <br><br>
      * <b>Note:</b> This property is overridden by the <code>header</code> slot.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Panel.prototype.headerText
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     headerText: string;
@@ -89,27 +77,21 @@ declare class Panel extends UI5Element {
      * Determines whether the component is in a fixed state that is not
      * expandable/collapsible by user interaction.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Panel.prototype.fixed
-     * @defaultvalue false
+     * @default false
      * @public
      */
     fixed: boolean;
     /**
      * Indicates whether the component is collapsed and only the header is displayed.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Panel.prototype.collapsed
-     * @defaultvalue false
+     * @default false
      * @public
      */
     collapsed: boolean;
     /**
      * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Panel.prototype.noAnimation
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.0.0-rc.16
      */
@@ -119,39 +101,43 @@ declare class Panel extends UI5Element {
      * Depending on the usage, you can change the role from the default <code>Form</code>
      * to <code>Region</code> or <code>Complementary</code>.
      *
-     * @type {sap.ui.webc.main.types.PanelAccessibleRole}
-     * @name sap.ui.webc.main.Panel.prototype.accessibleRole
-     * @defaultvalue "Form"
+     * @default "Form"
      * @public
      */
-    accessibleRole: PanelAccessibleRole;
+    accessibleRole: `${PanelAccessibleRole}`;
     /**
      * Defines the "aria-level" of component heading,
      * set by the <code>headerText</code>.
-     * <br><br>
-     * Available options are: <code>"H6"</code> to <code>"H1"</code>.
-     * @type {sap.ui.webc.main.types.TitleLevel}
-     * @name sap.ui.webc.main.Panel.prototype.headerLevel
-     * @defaultvalue "H2"
+     *
+     * @default "H2"
      * @public
     */
-    headerLevel: TitleLevel;
+    headerLevel: `${TitleLevel}`;
     /**
      * Defines the accessible ARIA name of the component.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Panel.prototype.accessibleName
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleName: string;
+    /**
+     * Indicates whether the Panel header is sticky or not.
+     * If stickyHeader is set to true, then whenever you scroll the content or
+     * the application, the header of the panel will be always visible and
+     * a solid color will be used for its design.
+     *
+     * @default false
+     * @public
+     * @since 1.16.0-rc.1
+     */
+    stickyHeader: boolean;
     /**
      * When set to <code>true</code>, the <code>accessibleName</code> property will be
      * applied not only on the panel root itself, but on its toggle button too.
      * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.
-     * @type {boolean}
-     * @defaultvalue false
+     *
+     * @default false
      * @private
       */
     useAccessibleNameForToggleButton: boolean;
@@ -166,21 +152,9 @@ declare class Panel extends UI5Element {
      * <br><br>
      * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Panel.prototype.header
-     * @slot
      * @public
      */
     header: Array<HTMLElement>;
-    /**
-     * Defines the content of the component.
-     * The content is visible only when the component is expanded.
-     *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.Panel.prototype.default
-     * @slot
-     * @public
-     */
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
     shouldToggle(element: HTMLElement): boolean;
@@ -195,6 +169,9 @@ declare class Panel extends UI5Element {
         headerBtn: {
             "ui5-panel-header-button-animated": boolean;
         };
+        stickyHeaderClass: {
+            "ui5-panel-heading-wrapper-sticky": boolean;
+        };
     };
     get toggleButtonTitle(): string;
     get expanded(): boolean;

package/dist/Panel.js

@@ -66,16 +66,6 @@ import panelCss from "./generated/themes/Panel.css.js";
  * clockwise/counter-clockwise.</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the wrapper of the header</li>
- * <li>content - Used to style the wrapper of the content</li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <h4>Fast Navigation</h4>
@@ -89,11 +79,11 @@ import panelCss from "./generated/themes/Panel.css.js";
  * <code>import "@ui5/webcomponents/dist/Panel";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Panel
- * @extends sap.ui.webc.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.
  */
 let Panel = Panel_1 = class Panel extends UI5Element {
     onBeforeRendering() {
@@ -180,6 +170,9 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             headerBtn: {
                 "ui5-panel-header-button-animated": !this.shouldNotAnimate(),
             },
+            stickyHeaderClass: {
+                "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
+            },
         };
     }
     get toggleButtonTitle() {
@@ -268,6 +261,9 @@ __decorate([
 __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);
@@ -296,7 +292,6 @@ Panel = Panel_1 = __decorate([
     /**
      * Fired when the component is expanded/collapsed by user interaction.
      *
-     * @event sap.ui.webc.main.Panel#toggle
      * @public
      */
     ,

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.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.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 { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport TitleLevel from \"./types/TitleLevel.js\";\nimport PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./generated/templates/PanelTemplate.lit.js\";\n\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 * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-panel</code> 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 * <h3>Guidelines:</h3>\n * <ul>\n * <li>Nesting two or more panels is not recommended.</li>\n * <li>Do not stack too many panels on one page.</li>\n * </ul>\n *\n * <h3>Structure</h3>\n * The panel's header area consists of a title bar with a header text or custom header.\n * <br>\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 * <br>\n * 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.\n * <br>\n * The content area can contain an arbitrary set of controls.\n * <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.\n *\n * <h3>Responsive Behavior</h3>\n * <ul>\n * <li>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.</li>\n * <li>If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.</li>\n * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),\n * an arrow icon (pointing to the right) appears in front of the header.</li>\n * <li>When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.</li>\n * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.</li>\n * </ul>\n *\n * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>header - Used to style the wrapper of the header</li>\n * <li>content - Used to style the wrapper of the content</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Panel\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Panel\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-panel\n * @public\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n *\n * @event sap.ui.webc.main.Panel#toggle\n * @public\n */\n@event(\"toggle\")\nclass Panel extends UI5Element {\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 * <br><br>\n\t * <b>Note:</b> This property is overridden by the <code>header</code> slot.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Panel.prototype.headerText\n\t * @defaultvalue \"\"\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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.fixed\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed!: boolean;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.collapsed\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed!: boolean;\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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.noAnimation\n\t * @defaultvalue false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation!: boolean;\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 <code>Form</code>\n\t * to <code>Region</code> or <code>Complementary</code>.\n\t *\n\t * @type {sap.ui.webc.main.types.PanelAccessibleRole}\n\t * @name sap.ui.webc.main.Panel.prototype.accessibleRole\n\t * @defaultvalue \"Form\"\n\t * @public\n\t */\n\t@property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })\n\taccessibleRole!: PanelAccessibleRole;\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the <code>headerText</code>.\n\t * <br><br>\n\t * Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.\n\t * @type {sap.ui.webc.main.types.TitleLevel}\n\t * @name sap.ui.webc.main.Panel.prototype.headerLevel\n\t * @defaultvalue \"H2\"\n\t * @public\n\t*/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\theaderLevel!: TitleLevel;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Panel.prototype.accessibleName\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * When set to <code>true</code>, the <code>accessibleName</code> property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning!: boolean;\n\n\t/**\n\t * Defines the component header area.\n\t * <br><br>\n\t * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.Panel.prototype.header\n\t * @slot\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the component.\n\t * The content is visible only when the component is expanded.\n\t *\n\t * @type {Node[]}\n\t * @name sap.ui.webc.main.Panel.prototype.default\n\t * @slot\n\t * @public\n\t */\n\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\tshouldNotAnimate() {\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: MouseEvent) {\n\t\tif (e.x === 0 && e.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.fireEvent(\"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.fireEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\theaderBtn: {\n\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate(),\n\t\t\t},\n\t\t};\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();\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,\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 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\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic async onDefine() {\n\t\tPanel.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\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 customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.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 { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport TitleLevel from \"./types/TitleLevel.js\";\nimport PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./generated/templates/PanelTemplate.lit.js\";\n\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 * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-panel</code> 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 * <h3>Guidelines:</h3>\n * <ul>\n * <li>Nesting two or more panels is not recommended.</li>\n * <li>Do not stack too many panels on one page.</li>\n * </ul>\n *\n * <h3>Structure</h3>\n * The panel's header area consists of a title bar with a header text or custom header.\n * <br>\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 * <br>\n * 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.\n * <br>\n * The content area can contain an arbitrary set of controls.\n * <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.\n *\n * <h3>Responsive Behavior</h3>\n * <ul>\n * <li>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.</li>\n * <li>If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.</li>\n * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),\n * an arrow icon (pointing to the right) appears in front of the header.</li>\n * <li>When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.</li>\n * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Panel\";</code>\n *\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: litRender,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n *\n * @public\n */\n@event(\"toggle\")\nclass Panel extends UI5Element {\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 * <br><br>\n\t * <b>Note:</b> This property is overridden by the <code>header</code> slot.\n\t *\n\t * @default \"\"\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 *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed!: boolean;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed!: boolean;\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 *\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation!: boolean;\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 <code>Form</code>\n\t * to <code>Region</code> or <code>Complementary</code>.\n\t *\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })\n\taccessibleRole!: `${PanelAccessibleRole}`;\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the <code>headerText</code>.\n\t *\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\theaderLevel!: `${TitleLevel}`;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @default \"\"\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 *\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!: boolean;\n\n\t/**\n\t * When set to <code>true</code>, the <code>accessibleName</code> property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.\n\t *\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning!: boolean;\n\n\t/**\n\t * Defines the component header area.\n\t * <br><br>\n\t * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.\n\t *\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\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\tshouldNotAnimate() {\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: MouseEvent) {\n\t\tif (e.x === 0 && e.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.fireEvent(\"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.fireEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\theaderBtn: {\n\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate(),\n\t\t\t},\n\t\t\tstickyHeaderClass: {\n\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t},\n\t\t};\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();\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,\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 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\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic async onDefine() {\n\t\tPanel.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}