@openui5/sap.ui.webc.main 1.115.1 → 1.117.0

package/src/sap/ui/webc/main/thirdparty/Option.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], function (_exports, _UI5Element) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property"], function (_exports, _UI5Element, _customElement, _property) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,106 +6,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  /**
-  * @public
-  */
-  const metadata = {
-    tag: "ui5-option",
-    managedSlots: true,
-    properties: /** @lends sap.ui.webcomponents.main.Option.prototype */{
-      /**
-       * Defines the selected state of the component.
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      selected: {
-        type: Boolean
-      },
-      /**
-       * Defines whether the component is in disabled state.
-       * <br><br>
-       * <b>Note:</b> A disabled component is noninteractive.
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       * @since 1.0.0-rc.12
-       */
-      disabled: {
-        type: Boolean
-      },
-      /**
-       * Defines the tooltip of the component.
-       * @type {string}
-       * @defaultvalue ""
-       * @private
-       * @since 1.1.0
-       */
-      title: {
-        type: String
-      },
-      /**
-       * Defines the <code>icon</code> source URI.
-       * <br><br>
-       * <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://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-       *
-       * @type {string}
-       * @public
-       */
-      icon: {
-        type: String,
-        defaultValue: 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}
-       * @public
-       */
-      value: {
-        type: String
-      },
-      /**
-       * Defines the additional text displayed at the end of the option element.
-       * @type {string}
-       * @public
-       * @since 1.3.0
-       */
-      additionalText: {
-        type: String
-      },
-      /**
-       * Defines the focused state of the component.
-       * @type {boolean}
-       * @defaultvalue false
-       * @since 1.0.0-rc.13
-       * @private
-       */
-      _focused: {
-        type: Boolean
-      }
-    },
-    slots: /** @lends sap.ui.webcomponents.main.Option.prototype */{
-      /**
-       * 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[]}
-       * @slot
-       * @public
-       */
-      "default": {
-        type: Node
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.Option.prototype */{}
+  var __decorate = void 0 && (void 0).__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;
   };
-
   /**
    * @class
    *
@@ -115,20 +25,43 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Option
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.main.Option
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-option
-   * @implements sap.ui.webcomponents.main.ISelectOption
+   * @implements sap.ui.webc.main.ISelectOption
    * @public
    */
-  class Option extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
+  let Option = class Option extends _UI5Element.default {
+    /**
+     * 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`;
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Option.prototype, "selected", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Option.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)()], Option.prototype, "title", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: null
+  })], Option.prototype, "icon", void 0);
+  __decorate([(0, _property.default)()], Option.prototype, "value", void 0);
+  __decorate([(0, _property.default)()], Option.prototype, "additionalText", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Option.prototype, "_focused", void 0);
+  Option = __decorate([(0, _customElement.default)("ui5-option")], Option);
   Option.define();
   var _default = Option;
   _exports.default = _default;

package/src/sap/ui/webc/main/thirdparty/Panel.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/animations/slideDown", "sap/ui/webc/common/thirdparty/base/animations/slideUp", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/slim-arrow-right", "./Button", "./Icon", "./types/TitleLevel", "./types/PanelAccessibleRole", "./generated/templates/PanelTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Panel.css"], function (_exports, _UI5Element, _LitRenderer, _slideDown, _slideUp, _Keys, _AnimationMode, _AnimationMode2, _i18nBundle, _slimArrowRight, _Button, _Icon, _TitleLevel, _PanelAccessibleRole, _PanelTemplate, _i18nDefaults, _Panel) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/animations/slideDown", "sap/ui/webc/common/thirdparty/base/animations/slideUp", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/slim-arrow-right", "./Button", "./Icon", "./types/TitleLevel", "./types/PanelAccessibleRole", "./generated/templates/PanelTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Panel.css"], function (_exports, _UI5Element, _customElement, _event, _property, _slot, _LitRenderer, _slideDown, _slideUp, _Keys, _AnimationMode, _AnimationMode2, _i18nBundle, _slimArrowRight, _Button, _Icon, _TitleLevel, _PanelAccessibleRole, _PanelTemplate, _i18nDefaults, _Panel) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,6 +6,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _event = _interopRequireDefault(_event);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _slideDown = _interopRequireDefault(_slideDown);
   _slideUp = _interopRequireDefault(_slideUp);
@@ -17,164 +21,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _PanelTemplate = _interopRequireDefault(_PanelTemplate);
   _Panel = _interopRequireDefault(_Panel);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-panel",
-    languageAware: true,
-    managedSlots: true,
-    fastNavigation: true,
-    slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */{
-      /**
-       * Defines the component 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
-      },
-      /**
-       * Defines the content of the component.
-       * The content is visible only when the component 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 component.
-       * 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 component is in a fixed state that is not
-       * expandable/collapsible by user interaction.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      fixed: {
-        type: Boolean
-      },
-      /**
-       * Indicates whether the component is collapsed and only the header is displayed.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      collapsed: {
-        type: 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}
-       * @defaultvalue false
-       * @public
-       * @since 1.0.0-rc.16
-       */
-      noAnimation: {
-        type: Boolean
-      },
-      /**
-       * Sets the accessible aria role of the component.
-       * 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.default,
-        defaultValue: _PanelAccessibleRole.default.Form
-      },
-      /**
-       * 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 {TitleLevel}
-       * @defaultvalue "H2"
-       * @public
-      */
-      headerLevel: {
-        type: _TitleLevel.default,
-        defaultValue: _TitleLevel.default.H2
-      },
-      /**
-       * Defines the accessible aria name of the component.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       * @since 1.0.0-rc.15
-       */
-      accessibleName: {
-        type: String
-      },
-      /**
-       * 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
-       * @private
-      	 */
-      useAccessibleNameForToggleButton: {
-        type: Boolean
-      },
-      /**
-       * @private
-       */
-      _hasHeader: {
-        type: Boolean
-      },
-      _header: {
-        type: Object
-      },
-      _contentExpanded: {
-        type: Boolean,
-        noAttribute: true
-      },
-      _animationRunning: {
-        type: Boolean,
-        noAttribute: true
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.Panel.prototype */{
-      /**
-       * Fired when the component is expanded/collapsed by user interaction.
-       *
-       * @event
-       * @public
-       */
-      toggle: {}
-    }
+  var __decorate = void 0 && (void 0).__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;
   /**
    * @class
    *
@@ -239,28 +93,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Panel
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.main.Panel
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-panel
    * @public
    */
-  class Panel extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _PanelTemplate.default;
-    }
-    static get styles() {
-      return _Panel.default;
-    }
-    constructor() {
-      super();
-      this._header = {};
-    }
+  let Panel = Panel_1 = class Panel extends _UI5Element.default {
     onBeforeRendering() {
       // If the animation is running, it will set the content expanded state at the end
       if (!this._animationRunning) {
@@ -268,43 +106,46 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       this._hasHeader = !!this.header.length;
     }
-    shouldToggle(node) {
+    shouldToggle(element) {
       const customContent = this.header.length;
       if (customContent) {
-        return node.classList.contains("ui5-panel-header-button");
+        return element.classList.contains("ui5-panel-header-button");
       }
       return true;
     }
     shouldNotAnimate() {
       return this.noAnimation || (0, _AnimationMode2.getAnimationMode)() === _AnimationMode.default.None;
     }
-    _headerClick(event) {
-      if (!this.shouldToggle(event.target)) {
+    _headerClick(e) {
+      if (!this.shouldToggle(e.target)) {
         return;
       }
       this._toggleOpen();
     }
-    _toggleButtonClick(event) {
-      if (event.x === 0 && event.y === 0) {
-        event.stopImmediatePropagation();
+    _toggleButtonClick(e) {
+      if (e.x === 0 && e.y === 0) {
+        e.stopImmediatePropagation();
       }
     }
-    _headerKeyDown(event) {
-      if (!this.shouldToggle(event.target)) {
+    _headerKeyDown(e) {
+      if (!this.shouldToggle(e.target)) {
         return;
       }
-      if ((0, _Keys.isEnter)(event)) {
-        this._toggleOpen();
+      if ((0, _Keys.isEnter)(e)) {
+        e.preventDefault();
       }
-      if ((0, _Keys.isSpace)(event)) {
-        event.preventDefault();
+      if ((0, _Keys.isSpace)(e)) {
+        e.preventDefault();
       }
     }
-    _headerKeyUp(event) {
-      if (!this.shouldToggle(event.target)) {
+    _headerKeyUp(e) {
+      if (!this.shouldToggle(e.target)) {
         return;
       }
-      if ((0, _Keys.isSpace)(event)) {
+      if ((0, _Keys.isEnter)(e)) {
+        this._toggleOpen();
+      }
+      if ((0, _Keys.isSpace)(e)) {
         this._toggleOpen();
       }
     }
@@ -322,16 +163,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const animations = [];
       [].forEach.call(elements, oElement => {
         if (this.collapsed) {
-          animations.push((0, _slideUp.default)({
-            element: oElement
-          }).promise());
+          animations.push((0, _slideUp.default)(oElement).promise());
         } else {
-          animations.push((0, _slideDown.default)({
-            element: oElement
-          }).promise());
+          animations.push((0, _slideDown.default)(oElement).promise());
         }
       });
-      Promise.all(animations).then(_ => {
+      Promise.all(animations).then(() => {
         this._animationRunning = false;
         this._contentExpanded = !this.collapsed;
         this.fireEvent("toggle");
@@ -348,7 +185,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       };
     }
     get toggleButtonTitle() {
-      return Panel.i18nBundle.getText(_i18nDefaults.PANEL_ICON);
+      return Panel_1.i18nBundle.getText(_i18nDefaults.PANEL_ICON);
     }
     get expanded() {
       return !this.collapsed;
@@ -363,8 +200,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return {
         "button": {
           "accessibilityAttributes": {
-            "expanded": this.expanded,
-            "controls": `${this._id}-content`
+            "expanded": this.expanded
           },
           "title": this.toggleButtonTitle,
           "ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined
@@ -376,10 +212,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       };
     }
     get ariaLabelledbyReference() {
-      return this.nonFocusableButton && this.headerText ? `${this._id}-header-title` : undefined;
+      return this.nonFocusableButton && this.headerText && !this.fixed ? `${this._id}-header-title` : undefined;
     }
-    get header() {
-      return this.getDomRef().querySelector(`#${this._id}-header-title`);
+    get fixedPanelAriaLabelledbyReference() {
+      return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
     }
     get headerAriaLevel() {
       return this.headerLevel.slice(1);
@@ -387,15 +223,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     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 shouldRenderH1() {
-      return !this.header.length && (this.headerText || !this.fixed);
-    }
     get styles() {
       return {
         content: {
@@ -403,13 +245,59 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
       };
     }
-    static get dependencies() {
-      return [_Button.default, _Icon.default];
-    }
     static async onDefine() {
-      Panel.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      Panel_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
-  }
+  };
+  __decorate([(0, _property.default)()], Panel.prototype, "headerText", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "fixed", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "collapsed", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "noAnimation", void 0);
+  __decorate([(0, _property.default)({
+    type: _PanelAccessibleRole.default,
+    defaultValue: _PanelAccessibleRole.default.Form
+  })], Panel.prototype, "accessibleRole", void 0);
+  __decorate([(0, _property.default)({
+    type: _TitleLevel.default,
+    defaultValue: _TitleLevel.default.H2
+  })], Panel.prototype, "headerLevel", void 0);
+  __decorate([(0, _property.default)()], Panel.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "useAccessibleNameForToggleButton", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "_hasHeader", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], Panel.prototype, "_contentExpanded", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], Panel.prototype, "_animationRunning", void 0);
+  __decorate([(0, _slot.default)()], Panel.prototype, "header", void 0);
+  Panel = Panel_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-panel",
+    fastNavigation: true,
+    languageAware: true,
+    renderer: _LitRenderer.default,
+    template: _PanelTemplate.default,
+    styles: _Panel.default,
+    dependencies: [_Button.default, _Icon.default]
+  })
+  /**
+   * Fired when the component is expanded/collapsed by user interaction.
+   *
+   * @event sap.ui.webc.main.Panel#toggle
+   * @public
+   */, (0, _event.default)("toggle")], Panel);
   Panel.define();
   var _default = Panel;
   _exports.default = _default;