@openui5/sap.ui.webc.main 1.111.1 → 1.112.0

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

@@ -25,10 +25,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
   _BreadcrumbsPopoverTemplate = _interopRequireDefault(_BreadcrumbsPopoverTemplate);
   _Breadcrumbs = _interopRequireDefault(_Breadcrumbs);
   _BreadcrumbsPopover = _interopRequireDefault(_BreadcrumbsPopover);
-
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
   // Templates
+
   // Styles
 
   /**
@@ -38,9 +37,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
     tag: "ui5-breadcrumbs",
     managedSlots: true,
     languageAware: true,
-    slots:
-    /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */
-    {
+    slots: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */{
       /**
        * Defines the component items.
        *
@@ -56,9 +53,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         invalidateOnChildChange: true
       }
     },
-    properties:
-    /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */
-    {
+    properties: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */{
       /**
        * Defines the visual indication and behavior of the breadcrumbs.
        * Available options are <code>Standard</code> (by default) and <code>NoCurrentPage</code>.
@@ -74,7 +69,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _BreadcrumbsDesign.default,
         defaultValue: _BreadcrumbsDesign.default.Standard
       },
-
       /**
        * Determines the visual style of the separator between the breadcrumb items.
        *
@@ -97,7 +91,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _BreadcrumbsSeparatorStyle.default,
         defaultValue: _BreadcrumbsSeparatorStyle.default.Slash
       },
-
       /**
        * Holds the number of items in the overflow.
        *
@@ -111,9 +104,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         defaultValue: 0
       }
     },
-    events:
-    /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */
-    {
+    events: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */{
       /**
        * Fires when a <code>BreadcrumbsItem</code> is clicked.
        * <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>.
@@ -148,6 +139,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       }
     }
   };
+
   /**
    * @class
    *
@@ -184,64 +176,51 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
    * @public
    * @since 1.0.0-rc.15
    */
-
   class Breadcrumbs extends _UI5Element.default {
     static get metadata() {
       return metadata;
     }
-
     static get render() {
       return _LitRenderer.default;
     }
-
     static get template() {
       return _BreadcrumbsTemplate.default;
     }
-
     static get staticAreaTemplate() {
       return _BreadcrumbsPopoverTemplate.default;
     }
-
     static get styles() {
       return _Breadcrumbs.default;
     }
-
     static get staticAreaStyles() {
       return _BreadcrumbsPopover.default;
     }
-
     constructor() {
       super();
-
       this._initItemNavigation();
+      this._onResizeHandler = this._updateOverflow.bind(this);
 
-      this._onResizeHandler = this._updateOverflow.bind(this); // maps items to their widths
-
-      this._breadcrumbItemWidths = new WeakMap(); // the width of the interactive element that opens the overflow
-
+      // maps items to their widths
+      this._breadcrumbItemWidths = new WeakMap();
+      // the width of the interactive element that opens the overflow
       this._dropdownArrowLinkWidth = 0;
       this._labelFocusAdaptor = {
         id: `${this._id}-labelWrapper`,
         getlabelWrapper: this.getCurrentLocationLabelWrapper.bind(this),
-
         set _tabIndex(value) {
           const wrapper = this.getlabelWrapper();
           wrapper && wrapper.setAttribute("tabindex", value);
         },
-
         get _tabIndex() {
           const wrapper = this.getlabelWrapper();
           return wrapper ? wrapper.getAttribute("tabindex") : undefined;
         }
-
       };
     }
-
     onInvalidation(changeInfo) {
       if (changeInfo.reason === "childchange") {
         const itemIndex = this.getSlottedNodes("items").indexOf(changeInfo.child),
-              isInOverflow = itemIndex < this._overflowSize;
-
+          isInOverflow = itemIndex < this._overflowSize;
         if (isInOverflow) {
           // the content of an overflowing item has changed
           // => need to render the item outside the overflow to obtain its new width
@@ -250,25 +229,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         }
       }
     }
-
     onBeforeRendering() {
       this._preprocessItems();
     }
-
     onAfterRendering() {
       this._cacheWidths();
-
       this._updateOverflow();
     }
-
     onEnterDOM() {
       _ResizeHandler.default.register(this, this._onResizeHandler);
     }
-
     onExitDOM() {
       _ResizeHandler.default.deregister(this, this._onResizeHandler);
     }
-
     _initItemNavigation() {
       if (!this._itemNavigation) {
         this._itemNavigation = new _ItemNavigation.default(this, {
@@ -277,145 +250,118 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         });
       }
     }
+
     /**
      * Obtains the items for navigation via keyboard
      * @private
      */
-
-
     _getFocusableItems() {
       const items = this._links;
-
       if (!this._isOverflowEmpty) {
         items.unshift(this._dropdownArrowLink);
       }
-
       if (this._endsWithCurrentLocationLabel) {
         items.push(this._labelFocusAdaptor);
       }
-
       return items;
     }
-
     _onfocusin(event) {
       const target = event.target,
-            labelWrapper = this.getCurrentLocationLabelWrapper(),
-            currentItem = target === labelWrapper ? this._labelFocusAdaptor : target;
-
+        labelWrapper = this.getCurrentLocationLabelWrapper(),
+        currentItem = target === labelWrapper ? this._labelFocusAdaptor : target;
       this._itemNavigation.setCurrentItem(currentItem);
     }
-
     _onkeydown(event) {
       const isDropdownArrowFocused = this._isDropdownArrowFocused;
-
       if ((0, _Keys.isShow)(event) && isDropdownArrowFocused && !this._isOverflowEmpty) {
         event.preventDefault();
-
         this._toggleRespPopover();
-
         return;
       }
-
       if ((0, _Keys.isSpace)(event) && isDropdownArrowFocused && !this._isOverflowEmpty && !this._isPickerOpen) {
         event.preventDefault();
         return;
       }
-
       if (((0, _Keys.isEnter)(event) || (0, _Keys.isSpace)(event)) && this._isCurrentLocationLabelFocused) {
         this._onLabelPress();
       }
     }
-
     _onkeyup(event) {
       if (this._isDropdownArrowFocused && (0, _Keys.isSpace)(event) && !this._isOverflowEmpty && !this._isPickerOpen) {
         this._openRespPopover();
       }
     }
+
     /**
      * Caches the space required to render the content
      * @private
      */
-
-
     _cacheWidths() {
       const map = this._breadcrumbItemWidths,
-            items = this.getSlottedNodes("items"),
-            label = this._currentLocationLabel;
-
+        items = this.getSlottedNodes("items"),
+        label = this._currentLocationLabel;
       for (let i = this._overflowSize; i < items.length; i++) {
         const item = items[i],
-              link = this.shadowRoot.querySelector(`#${item._id}-link-wrapper`);
+          link = this.shadowRoot.querySelector(`#${item._id}-link-wrapper`);
         map.set(item, this._getElementWidth(link) || 0);
       }
-
       if (items.length && this._endsWithCurrentLocationLabel && label) {
         const item = items[items.length - 1];
         map.set(item, this._getElementWidth(label));
       }
-
       if (!this._isOverflowEmpty) {
         this._dropdownArrowLinkWidth = this._getElementWidth(this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper"));
       }
     }
-
     _updateOverflow() {
       const items = this.getSlottedNodes("items"),
-            availableWidth = this.shadowRoot.querySelector(".ui5-breadcrumbs-root").offsetWidth;
-
+        availableWidth = this.shadowRoot.querySelector(".ui5-breadcrumbs-root").offsetWidth;
       let requiredWidth = this._getTotalContentWidth(),
-          overflowSize = 0;
-
+        overflowSize = 0;
       if (requiredWidth > availableWidth) {
         // need to show the component that opens the overflow
         requiredWidth += this._dropdownArrowLinkWidth;
       }
-
       while (requiredWidth > availableWidth && overflowSize < this._maxAllowedOverflowSize) {
         const itemToOverflow = items[overflowSize];
         let itemWidth = 0;
-
         if (this._isItemVisible(itemToOverflow)) {
           itemWidth = this._breadcrumbItemWidths.get(itemToOverflow) || 0;
-        } // move the item to the overflow
-
+        }
 
+        // move the item to the overflow
         requiredWidth -= itemWidth;
         overflowSize++;
       }
+      this._overflowSize = overflowSize;
 
-      this._overflowSize = overflowSize; // if overflow was emptied while picker was open => close redundant popup
-
+      // if overflow was emptied while picker was open => close redundant popup
       if (this._isOverflowEmpty && this._isPickerOpen) {
         this.responsivePopover.close();
-      } // if the last focused link has done into the overflow =>
-      // ensure the first visible link is focusable
-
+      }
 
+      // if the last focused link has done into the overflow =>
+      // ensure the first visible link is focusable
       const focusableItems = this._getFocusableItems();
-
       if (!focusableItems.some(x => x._tabIndex === "0")) {
         this._itemNavigation.setCurrentItem(focusableItems[0]);
       }
     }
-
     _getElementWidth(element) {
       if (element) {
         return Math.ceil(element.getBoundingClientRect().width);
       }
     }
-
     _getTotalContentWidth() {
       const items = this.getSlottedNodes("items"),
-            widthsMap = this._breadcrumbItemWidths,
-            totalLinksWidth = items.reduce((sum, link) => sum + widthsMap.get(link), 0);
+        widthsMap = this._breadcrumbItemWidths,
+        totalLinksWidth = items.reduce((sum, link) => sum + widthsMap.get(link), 0);
       return totalLinksWidth;
     }
-
     _onLinkPress(event) {
       const link = event.target,
-            items = this.getSlottedNodes("items"),
-            item = items.find(x => `${x._id}-link` === link.id);
-
+        items = this.getSlottedNodes("items"),
+        item = items.find(x => `${x._id}-link` === link.id);
       if (!this.fireEvent("item-click", {
         item,
         ...event.detail
@@ -423,21 +369,18 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         event.preventDefault();
       }
     }
-
     _onLabelPress(event) {
       const items = this.getSlottedNodes("items"),
-            item = items[items.length - 1];
+        item = items[items.length - 1];
       this.fireEvent("item-click", {
         item,
         ...event.detail
       });
     }
-
     _onOverflowListItemSelect(event) {
       const listItem = event.detail.selectedItems[0],
-            items = this.getSlottedNodes("items"),
-            item = items.find(x => `${x._id}-li` === listItem.id);
-
+        items = this.getSlottedNodes("items"),
+        item = items.find(x => `${x._id}-li` === listItem.id);
       if (this.fireEvent("item-click", {
         item
       }, true)) {
@@ -445,137 +388,111 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         this.responsivePopover.close();
       }
     }
-
     async _respPopover() {
       const staticAreaItem = await this.getStaticAreaItemDomRef();
       return staticAreaItem.querySelector("[ui5-responsive-popover]");
     }
-
     async _toggleRespPopover() {
       this.responsivePopover = await this._respPopover();
-
       if (this._isPickerOpen) {
         this._closeRespPopover();
       } else {
         this._openRespPopover();
       }
     }
-
     async _closeRespPopover() {
       this.responsivePopover && this.responsivePopover.close();
     }
-
     async _openRespPopover() {
       this.responsivePopover = await this._respPopover();
       this.responsivePopover.showAt(this._dropdownArrowLink);
     }
-
     _isItemVisible(item) {
       return !item.hidden && this._hasVisibleContent(item);
     }
-
     _hasVisibleContent(item) {
       // the check is not complete but may be extended in the future if needed to cover
       // cases besides the standard (UX-recommended) ones
       return item.innerText || Array.from(item.children).some(child => !child.hidden);
     }
-
     _preprocessItems() {
       this.items.forEach(item => {
         item._getRealDomRef = () => this.getDomRef().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`);
       });
     }
-
     _getItemPositionText(position, size) {
       return Breadcrumbs.i18nBundle.getText(_i18nDefaults.BREADCRUMB_ITEM_POS, position, size);
     }
-
     _getItemAccessibleName(item, position, size) {
-      const positionText = this._getItemPositionText(position, size); // innerText is needed as it is no longer read out when label is set
-
+      const positionText = this._getItemPositionText(position, size);
 
+      // innerText is needed as it is no longer read out when label is set
       let text = "";
-
       if (item.accessibleName) {
         text = `${item.textContent.trim()} ${item.accessibleName} ${positionText}`;
       } else {
         text = `${item.textContent.trim()} ${positionText}`;
       }
-
       return text;
     }
-
     getCurrentLocationLabelWrapper() {
       return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
     }
-
     get _visibleItems() {
       return this.getSlottedNodes("items").slice(this._overflowSize).filter(i => this._isItemVisible(i));
     }
-
     get _endsWithCurrentLocationLabel() {
       return this.design === _BreadcrumbsDesign.default.Standard;
     }
-
     get _currentLocationText() {
       const items = this.getSlottedNodes("items");
-
       if (this._endsWithCurrentLocationLabel && items.length) {
         const item = items[items.length - 1];
-
         if (this._isItemVisible(item)) {
           return item.innerText;
         }
       }
-
       return "";
     }
-
     get _currentLocationLabel() {
       return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location [ui5-label]");
     }
-
     get _isDropdownArrowFocused() {
       return this._dropdownArrowLink._tabIndex === "0";
     }
-
     get _isCurrentLocationLabelFocused() {
       const label = this.getCurrentLocationLabelWrapper();
       return label && label.tabIndex === 0;
     }
+
     /**
      * Returns the maximum allowed count of items in the overflow
      * with respect to the UX requirement to never overflow the last visible item
      */
-
-
     get _maxAllowedOverflowSize() {
-      const items = this.getSlottedNodes("items").filter(item => this._isItemVisible(item)); // all items except tha last visible one are allowed to overflow by UX requirement
-
+      const items = this.getSlottedNodes("items").filter(item => this._isItemVisible(item));
+      // all items except tha last visible one are allowed to overflow by UX requirement
       return items.length - 1;
     }
+
     /**
      * Getter for the interactive element that opens the overflow
      * @private
      */
-
-
     get _dropdownArrowLink() {
       return this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link]");
     }
+
     /**
      * Getter for the list of abstract breadcrumb items to be rendered as list-items inside the overflow
      */
-
-
     get _overflowItemsData() {
       return this.getSlottedNodes("items").slice(0, this._overflowSize).filter(item => this._isItemVisible(item)).reverse();
     }
+
     /**
      * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
      */
-
-
     get _linksData() {
       const items = this._visibleItems;
       const itemsCount = items.length; // get size before removing of current location
@@ -583,81 +500,62 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       if (this._endsWithCurrentLocationLabel) {
         items.pop();
       }
-
       return items.map((item, index) => {
         item._accessibleNameText = this._getItemAccessibleName(item, index + 1, itemsCount);
         return item;
       });
     }
+
     /**
      * Getter for accessible name of the current location. Includes the position of the current location and the size of the breadcrumbs
      */
-
-
     get _currentLocationAccName() {
       const items = this._visibleItems;
-
       const positionText = this._getItemPositionText(items.length, items.length);
-
       const lastItem = items[items.length - 1];
-
       if (!lastItem) {
         return positionText;
       }
-
       if (lastItem.accessibleName) {
         return `${lastItem.textContent.trim()} ${lastItem.accessibleName} ${positionText}`;
       }
-
       return `${lastItem.textContent.trim()} ${positionText}`;
     }
+
     /**
      * Getter for the list of links corresponding to the abstract breadcrumb items
      */
-
-
     get _links() {
       return Array.from(this.shadowRoot.querySelectorAll(".ui5-breadcrumbs-link-wrapper [ui5-link]"));
     }
-
     get _isOverflowEmpty() {
       return this._overflowItemsData.length === 0;
     }
-
     get _ariaHasPopup() {
       if (!this._isOverflowEmpty) {
         return "listbox";
       }
-
       return undefined;
     }
-
     get _isPickerOpen() {
       return !!this.responsivePopover && this.responsivePopover.opened;
     }
-
     get _accessibleNameText() {
       return Breadcrumbs.i18nBundle.getText(_i18nDefaults.BREADCRUMBS_ARIA_LABEL);
     }
-
     get _dropdownArrowAccessibleNameText() {
       return Breadcrumbs.i18nBundle.getText(_i18nDefaults.BREADCRUMBS_OVERFLOW_ARIA_LABEL);
     }
-
     get _cancelButtonText() {
       return Breadcrumbs.i18nBundle.getText(_i18nDefaults.BREADCRUMBS_CANCEL_BUTTON);
     }
-
     static get dependencies() {
       return [_BreadcrumbsItem.default, _Link.default, _Label.default, _ResponsivePopover.default, _List.default, _StandardListItem.default, _Icon.default, _Button.default];
     }
-
     static async onDefine() {
       Breadcrumbs.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
-
   }
-
   Breadcrumbs.define();
   var _default = Breadcrumbs;
   _exports.default = _default;

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

@@ -6,18 +6,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
-
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
   /**
   * @public
   */
   const metadata = {
     tag: "ui5-breadcrumbs-item",
     managedSlots: true,
-    properties:
-    /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */
-    {
+    properties: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */{
       /**
        * Defines the link href.
        * <br><br>
@@ -30,7 +26,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
       href: {
         type: String
       },
-
       /**
        * Defines the link target.
        * <br><br>
@@ -53,7 +48,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
         type: String,
         defaultValue: undefined
       },
-
       /**
        * Defines the accessible aria name of the item.
        *
@@ -65,9 +59,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
         type: String
       }
     },
-    slots:
-    /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */
-    {
+    slots: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */{
       /**
        * Defines the text of the component.
        * <br><br>
@@ -81,10 +73,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
         type: Node
       }
     },
-    events:
-    /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */
-    {}
+    events: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */{}
   };
+
   /**
    * @class
    *
@@ -101,18 +92,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element"], func
    * @public
    * @since 1.0.0-rc.15
    */
-
   class BreadcrumbsItem extends _UI5Element.default {
     static get metadata() {
       return metadata;
     }
-
     get stableDomRef() {
       return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
     }
-
   }
-
   BreadcrumbsItem.define();
   var _default = BreadcrumbsItem;
   _exports.default = _default;