@limetech/lime-elements 36.3.0-next.9 → 36.3.0

package/dist/collection/components/menu/menu.css

@@ -10,9 +10,21 @@
  * @prop --list-grid-item-max-width: Maximum width of items in the menu list when `gridLayout={true}`. Defaults to `10rem`.
  * @prop --list-grid-item-min-width: Minimum width of items in the menu list when `gridLayout={true}`. Defaults to `7.5rem`.
  * @prop --list-grid-gap: Distance between the items in the menu list when `gridLayout={true}`. Defaults to `0.75rem`.
+ * @prop --notification-badge-text-color: Defines the text color of notification badges. Defaults to `--color-white`.
+ * @prop --notification-badge-background-color: Defines the background color of notification badges. Defaults to `--color-red-default`.
  */
-:host {
+:host(limel-menu) {
+  isolation: isolate;
+  position: relative;
   display: inline-block;
+  --badge-background-color: var(
+      --notification-badge-background-color,
+      rgb(var(--color-red-default))
+  );
+  --badge-text-color: var(
+      --notification-badge-text-color,
+      rgb(var(--color-white))
+  );
 }
 
 :host([hidden]) {
@@ -34,4 +46,10 @@
 
 .mdc-menu-surface--anchor {
   position: relative;
+}
+
+limel-badge {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
 }

package/dist/collection/components/menu/menu.js

@@ -11,6 +11,7 @@ import { zipObject } from 'lodash-es';
  * @exampleComponent limel-example-menu-grid
  * @exampleComponent limel-example-menu-hotkeys
  * @exampleComponent limel-example-menu-secondary-text
+ * @exampleComponent limel-example-menu-notification
  * @exampleComponent limel-example-menu-composite
  */
 export class Menu {
@@ -59,6 +60,12 @@ export class Menu {
       const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
       (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    this.renderNotificationBadge = () => {
+      if (this.items.some(this.hasNotificationBadge)) {
+        return h("limel-badge", null);
+      }
+    };
+    this.hasNotificationBadge = (item) => this.isMenuItem(item) && item.badge !== undefined;
     this.items = [];
     this.disabled = false;
     this.openDirection = 'bottom-start';
@@ -80,7 +87,7 @@ export class Menu {
   render() {
     const cssProperties = this.getCssProperties();
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
+    return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
         'has-grid-layout': this.gridLayout,
       } }, h("limel-menu-list", { class: {
         'has-grid-layout has-interactive-items': this.gridLayout,
@@ -96,6 +103,8 @@ export class Menu {
       '--list-grid-item-max-width',
       '--list-grid-item-min-width',
       '--list-grid-gap',
+      '--notification-badge-background-color',
+      '--notification-badge-text-color',
     ];
     const style = getComputedStyle(this.host);
     const values = propertyNames.map((property) => {

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -55,7 +55,7 @@ export class MenuListRenderer {
       if (index === this.applyTabIndexToItemAtIndex) {
         attributes.tabindex = '0';
       }
-      return (h("li", Object.assign({ class: classNames, role: "menuitem", "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes), item.icon ? this.renderIcon(this.config, item) : null, this.renderText(item), this.twoLines && this.avatarList ? this.renderDivider() : null));
+      return (h("li", Object.assign({ class: classNames, role: "menuitem", "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes), item.icon ? this.renderIcon(this.config, item) : null, this.renderText(item), this.renderNotification(item), this.twoLines && this.avatarList ? this.renderDivider() : null));
     };
     /**
      * Render the text of the list item
@@ -100,6 +100,11 @@ export class MenuListRenderer {
       }
       return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
     };
+    this.renderNotification = (item) => {
+      if (item.badge !== undefined) {
+        return h("limel-badge", { label: item.badge });
+      }
+    };
     this.renderDivider = () => {
       const classes = {
         'mdc-deprecated-list-divider': true,