@limetech/lime-elements 37.1.0-next.66 → 37.1.0-next.68

package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js

@@ -7,13 +7,13 @@ const makeEnterClickable = require('./make-enter-clickable-59460fd6.js');
 const randomString = require('./random-string-c8445652.js');
 const getIconProps = require('./get-icon-props-46a7e937.js');
 const keycodes = require('./keycodes-3949f425.js');
+const index_es = require('./index.es-75b5e7c4.js');
 const eq = require('./eq-9a943b00.js');
 const zipObject = require('./zipObject-93a471fa.js');
-const component$2 = require('./component-67144c1c.js');
+const component$1 = require('./component-67144c1c.js');
 const ponyfill = require('./ponyfill-98ca4766.js');
-const component$1 = require('./component-9c3fa668.js');
-const component = require('./component-a0124759.js');
-const component$3 = require('./component-cf490570.js');
+const component = require('./component-66df95e7.js');
+const component$2 = require('./component-cf490570.js');
 require('./isObject-e28b7997.js');
 require('./_assignValue-7c18d8d6.js');
 require('./_defineProperty-8f56146d.js');
@@ -103,6 +103,7 @@ Breadcrumbs.style = breadcrumbsCss;
 
 const menuCss = ":host(limel-menu){isolation:isolate;position:relative;display:inline-block;--badge-background-color:var(\n      --notification-badge-background-color,\n      rgb(var(--color-red-default))\n  );--badge-text-color:var(\n      --notification-badge-text-color,\n      rgb(var(--color-white))\n  )}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}";
 
+const SEARCH_DEBOUNCE = 500;
 const Menu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -141,8 +142,35 @@ const Menu = class {
       }
       this.handleSelect(event.detail.menuItem);
     };
+    this.renderSearchField = () => {
+      if (!this.searcher) {
+        return;
+      }
+      return (index.h("limel-input-field", { tabindex: "0", ref: this.setSearchElement, type: "search", leadingIcon: "search", style: {
+          padding: '0.25rem',
+          'box-sizing': 'border-box',
+        }, value: this.searchValue, onChange: this.handleTextInput, onKeyDown: this.handleInputKeyDown }));
+    };
+    this.renderEmptyMessage = () => {
+      var _a;
+      if (this.loading ||
+        this.loadingSubItems ||
+        !this.emptyResultMessage ||
+        !Array.isArray(this.searchResults) ||
+        ((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.length)) {
+        return null;
+      }
+      return (index.h("p", { style: {
+          padding: '0 1rem',
+          'text-align': 'center',
+        } }, this.emptyResultMessage));
+    };
     this.renderMenuList = () => {
+      var _a;
       let items = this.visibleItems;
+      if ((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.length) {
+        items = this.searchResults;
+      }
       if (this.loadingSubItems || this.loading) {
         items = [];
       }
@@ -153,19 +181,67 @@ const Menu = class {
           'has-grid-layout has-interactive-items': this.gridLayout,
         }, items: items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.onSelect, ref: this.setListElement, onKeyDown: this.handleMenuKeyDown }));
     };
-    /**
-     * Key handler for the menu list
-     * Can go forward/back with righ/left arrow keys
-     * @param {KeyboardEvent} event event
-     * @returns {void}
-     */
+    this.handleTextInput = async (event) => {
+      event.stopPropagation();
+      const query = event.detail;
+      this.searchValue = query;
+      if (query === '') {
+        this.searchResults = null;
+        return;
+      }
+      this.loadingSubItems = true;
+      const result = await this.debouncedSearch(query);
+      this.searchResults = result;
+      this.loadingSubItems = false;
+    };
+    // Key handler for the input search field
+    // Will change focus to the first/last item in the dropdown
+    // list to enable selection with the keyboard
+    this.handleInputKeyDown = (event) => {
+      const isForwardTab = (event.key === keycodes.TAB || event.keyCode === keycodes.TAB_KEY_CODE) &&
+        !event.altKey &&
+        !event.metaKey &&
+        !event.shiftKey;
+      const isUp = event.key === keycodes.ARROW_UP || event.keyCode === keycodes.ARROW_UP_KEY_CODE;
+      const isDown = event.key === keycodes.ARROW_DOWN || event.keyCode === keycodes.ARROW_DOWN_KEY_CODE;
+      if (!isForwardTab && !isUp && !isDown) {
+        return;
+      }
+      if (!this.list) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      if (isForwardTab || isDown) {
+        const listElement = this.list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
+        listElement.focus();
+        return;
+      }
+      if (isUp) {
+        const listElement = this.list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
+        listElement.focus();
+      }
+    };
+    // Key handler for the menu list
+    // Will change focus to the search field if using shift+tab
+    // And can go forward/back with righ/left arrow keys
     this.handleMenuKeyDown = (event) => {
+      var _a;
+      const isBackwardTab = (event.key === keycodes.TAB || event.keyCode === keycodes.TAB_KEY_CODE) &&
+        !event.altKey &&
+        !event.metaKey &&
+        event.shiftKey;
       const isLeft = event.key === keycodes.ARROW_LEFT || event.keyCode === keycodes.ARROW_LEFT_KEY_CODE;
       const isRight = event.key === keycodes.ARROW_RIGHT || event.keyCode === keycodes.ARROW_RIGHT_KEY_CODE;
-      if (!isLeft && !isRight) {
+      if (!isBackwardTab && !isLeft && !isRight) {
         return;
       }
-      if (!this.gridLayout) {
+      if (isBackwardTab) {
+        event.stopPropagation();
+        event.preventDefault();
+        (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      else if (!this.gridLayout) {
         const currentItem = this.getCurrentItem();
         event.stopPropagation();
         event.preventDefault();
@@ -177,6 +253,10 @@ const Menu = class {
         }
       }
     };
+    this.clearSearch = () => {
+      this.searchValue = '';
+      this.searchResults = null;
+    };
     this.getCurrentItem = () => {
       var _a, _b, _c;
       const activeItem = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="menuitem"][tabindex="0"]');
@@ -233,6 +313,7 @@ const Menu = class {
     };
     this.handleSelect = async (menuItem, selectOnEmptyChildren = true) => {
       if (Array.isArray(menuItem === null || menuItem === void 0 ? void 0 : menuItem.items) && menuItem.items.length > 0) {
+        this.clearSearch();
         this.currentSubMenu = menuItem;
         this.navigateMenu.emit(menuItem);
         this.setFocus();
@@ -268,13 +349,28 @@ const Menu = class {
     };
     this.setFocus = () => {
       setTimeout(() => {
-        const observer = new IntersectionObserver(() => {
-          observer.unobserve(this.list);
-          this.focusMenuItem();
-        });
-        observer.observe(this.list);
+        if (this.searchInput && this.searcher) {
+          const observer = new IntersectionObserver(() => {
+            observer.unobserve(this.searchInput);
+            if (this.searchInput === window.document.activeElement) {
+              return;
+            }
+            this.searchInput.focus();
+          });
+          observer.observe(this.searchInput);
+        }
+        else if (this.list) {
+          const observer = new IntersectionObserver(() => {
+            observer.unobserve(this.list);
+            this.focusMenuItem();
+          });
+          observer.observe(this.list);
+        }
       }, 0);
     };
+    this.setSearchElement = (element) => {
+      this.searchInput = element;
+    };
     this.focusMenuItem = () => {
       var _a;
       if (!this.list) {
@@ -305,10 +401,18 @@ const Menu = class {
     this.gridLayout = false;
     this.loading = false;
     this.currentSubMenu = undefined;
+    this.searcher = undefined;
+    this.emptyResultMessage = undefined;
     this.loadingSubItems = undefined;
     this.menuBreadCrumb = [];
+    this.searchValue = undefined;
+    this.searchResults = undefined;
+    this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);
     this.portalId = randomString.createRandomString();
   }
+  componentDidLoad() {
+    this.createDebouncedSearcher(this.searcher);
+  }
   componentDidRender() {
     const slotElement = this.host.shadowRoot.querySelector('slot');
     slotElement.assignedElements().forEach(this.setTriggerAttributes);
@@ -319,17 +423,25 @@ const Menu = class {
     const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
     return (index.h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), index.h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--mdc-menu-min-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
         'has-grid-layout': this.gridLayout,
-      } }, this.renderBreadcrumb(), this.renderLoader(), this.renderMenuList()))));
+      } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
   }
   itemsWatcher() {
+    this.clearSearch();
     this.setFocus();
   }
   openWatcher(newValue) {
     if (newValue) {
       this.setFocus();
     }
+    else {
+      this.clearSearch();
+    }
   }
   currentSubMenuWatcher() {
+    if (this.searchValue) {
+      this.menuBreadCrumb = [];
+      return;
+    }
     const breadCrumbItems = [];
     let currentItem = this.currentSubMenu;
     while (currentItem) {
@@ -351,6 +463,12 @@ const Menu = class {
     }
     this.menuBreadCrumb = breadCrumbItems.reverse();
   }
+  createDebouncedSearcher(newValue) {
+    if (typeof newValue !== 'function') {
+      return;
+    }
+    this.debouncedSearch = index_es.AwesomeDebouncePromise(newValue, SEARCH_DEBOUNCE);
+  }
   getCssProperties() {
     const propertyNames = [
       '--menu-surface-width',
@@ -401,7 +519,8 @@ const Menu = class {
   static get watchers() { return {
     "items": ["itemsWatcher"],
     "open": ["openWatcher"],
-    "currentSubMenu": ["currentSubMenuWatcher"]
+    "currentSubMenu": ["currentSubMenuWatcher"],
+    "searcher": ["createDebouncedSearcher"]
   }; }
 };
 Menu.style = menuCss;
@@ -659,11 +778,11 @@ var MDCMenuFoundation = /** @class */ (function (_super) {
     MDCMenuFoundation.prototype.setEnabled = function (index, isEnabled) {
         this.validatedIndex(index);
         if (isEnabled) {
-            this.adapter.removeClassFromElementAtIndex(index, component$1.cssClasses.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.removeClassFromElementAtIndex(index, component.cssClasses.LIST_ITEM_DISABLED_CLASS);
             this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'false');
         }
         else {
-            this.adapter.addClassToElementAtIndex(index, component$1.cssClasses.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addClassToElementAtIndex(index, component.cssClasses.LIST_ITEM_DISABLED_CLASS);
             this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'true');
         }
     };
@@ -675,7 +794,7 @@ var MDCMenuFoundation = /** @class */ (function (_super) {
         }
     };
     return MDCMenuFoundation;
-}(component$2.MDCFoundation));
+}(component$1.MDCFoundation));
 
 /**
  * @license
@@ -709,7 +828,7 @@ var MDCMenu = /** @class */ (function (_super) {
     };
     MDCMenu.prototype.initialize = function (menuSurfaceFactory, listFactory) {
         if (menuSurfaceFactory === void 0) { menuSurfaceFactory = function (el) { return new component.MDCMenuSurface(el); }; }
-        if (listFactory === void 0) { listFactory = function (el) { return new component$1.MDCList(el); }; }
+        if (listFactory === void 0) { listFactory = function (el) { return new component.MDCList(el); }; }
         this.menuSurfaceFactory = menuSurfaceFactory;
         this.listFactory = listFactory;
     };
@@ -735,7 +854,7 @@ var MDCMenu = /** @class */ (function (_super) {
         };
         this.menuSurface.listen(component.MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
         this.listen('keydown', this.handleKeydown);
-        this.listen(component$1.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
+        this.listen(component.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
     };
     MDCMenu.prototype.destroy = function () {
         if (this.list) {
@@ -744,7 +863,7 @@ var MDCMenu = /** @class */ (function (_super) {
         this.menuSurface.destroy();
         this.menuSurface.unlisten(component.MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
         this.unlisten('keydown', this.handleKeydown);
-        this.unlisten(component$1.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
+        this.unlisten(component.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
         _super.prototype.destroy.call(this);
     };
     Object.defineProperty(MDCMenu.prototype, "open", {
@@ -859,7 +978,7 @@ var MDCMenu = /** @class */ (function (_super) {
          *     radio lists, and an array of numbers for checkbox lists.
          */
         get: function () {
-            return this.list ? this.list.selectedIndex : component$1.numbers.UNSET_INDEX;
+            return this.list ? this.list.selectedIndex : component.numbers.UNSET_INDEX;
         },
         /**
          * Sets the selected index of the list. Only applicable to select menus.
@@ -1011,7 +1130,7 @@ var MDCMenu = /** @class */ (function (_super) {
         return new MDCMenuFoundation(adapter);
     };
     return MDCMenu;
-}(component$2.MDCComponent));
+}(component$1.MDCComponent));
 
 class MenuListRenderer {
   constructor() {
@@ -1204,7 +1323,7 @@ const MenuList = class {
       this.mdcMenu = new MDCMenu(element);
       this.mdcMenu.hasTypeahead = true;
       this.mdcMenu.wrapFocus = true;
-      this.mdcMenu.items.forEach((item) => new component$3.MDCRipple(item));
+      this.mdcMenu.items.forEach((item) => new component$2.MDCRipple(item));
     };
     this.setupListeners = () => {
       if (!this.mdcMenu) {