@redvars/peacock 3.3.0 → 3.3.2

package/src/menu/menu-item/menu-item.ts

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
@@ -8,6 +8,7 @@ import colorStyles from './menu-item-colors.scss';
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
+ * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -21,19 +22,24 @@ export class MenuItem extends LitElement {
 
   @property({ type: String }) value = '';
 
-  @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;
+
+  @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;
+
+  @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
 
   /*
    * Hyperlink to navigate to on click.
    */
   @property({ reflect: true }) href?: string;
 
-   /**
+  /**
    * Sets or retrieves the window or frame at which to target content.
    */
   @property() target: string = '_self';
 
-
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
@@ -45,65 +51,140 @@ export class MenuItem extends LitElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'menuitem');
     }
+
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = -1;
+    }
+
+    this.addEventListener('click', this._handleClick);
+    this.addEventListener('keydown', this._handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._handleClick);
+    this.removeEventListener('keydown', this._handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  private emitActivate(source: 'click' | 'keydown', key?: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-activate', {
+        bubbles: true,
+        composed: true,
+        detail: { item: this, source, key },
+      }),
+    );
+  }
+
+  private requestClose(source: 'click' | 'keydown', key?: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-request-close', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          item: this,
+          source,
+          key,
+          reason: source === 'click' ? 'click-selection' : 'keydown',
+        },
+      }),
+    );
+  }
+
+  private requestSubmenuKey(key: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-submenu-keydown', {
+        bubbles: true,
+        composed: true,
+        detail: { item: this, key },
+      }),
+    );
   }
 
-  // Handle keyboard activation (Enter/Space)
   private _handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      this.requestSubmenuKey(e.key);
+      return;
+    }
+
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      this.click();
+      this.emitActivate('keydown', e.key);
+      if (!this.keepOpen) {
+        this.requestClose('keydown', e.key);
+      }
+    }
+  }
+
+  private _handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    this.emitActivate('click');
+    if (!this.keepOpen) {
+      this.requestClose('click');
     }
   }
 
-   __isLink() {
+  __isLink() {
     return !!this.href;
   }
 
-   @query('.menu-item') private readonly menuItemElement!: HTMLElement | null;
-  
-    override focus() {
-      this.menuItemElement?.focus();
-    }
-  
-    override blur() {
-      this.menuItemElement?.blur();
-    }
+  get focusTarget() {
+    return this;
+  }
 
   render() {
-
     const isLink = this.__isLink();
 
     const cssClasses = {
-          'menu-item': true,
-          disabled: this.disabled,
-          selected: this.selected,
-        };
+      'menu-item': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    };
+
+    const controls = this.getAttribute('aria-controls');
 
     if (isLink) {
       return html`<a
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
+        aria-disabled=${String(this.disabled)}
+        aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
+        aria-controls=${this.hasSubmenu && controls ? controls : nothing}
+        aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : nothing}
       >
         ${this.renderContent()}
-      </a>
-    `;
+      </a> `;
     }
 
-
     return html`<div
-        class=${classMap(cssClasses)}
-        tabindex=${!this.disabled ? 0 : -1}
-        @keydown="${this._handleKeyDown}"
-      >
-        ${this.renderContent()}
-      </div>
-    `;
+      class=${classMap(cssClasses)}
+      aria-disabled=${String(this.disabled)}
+      aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
+      aria-controls=${this.hasSubmenu && controls ? controls : nothing}
+      aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : nothing}
+    >
+      ${this.renderContent()}
+    </div>`;
   }
 
   renderContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></wc-focus-ring>
+      <wc-focus-ring
+        class="focus-ring"
+        .control=${this}
+        element="focusTarget"
+      ></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
@@ -112,9 +193,7 @@ export class MenuItem extends LitElement {
         <div class="slot-container">
           <slot></slot>
         </div>
-        <slot
-          name="trailing-supporting-text"
-        ></slot>
+        <slot name="trailing-supporting-text"></slot>
       </div>
     `;
   }

package/src/menu/sub-menu/sub-menu.scss

@@ -0,0 +1,7 @@
+@use "../../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+}

package/src/menu/sub-menu/sub-menu.ts

@@ -0,0 +1,243 @@
+import { html, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import styles from './sub-menu.scss';
+import { MenuItem } from '../menu-item/menu-item.js';
+import { Menu } from '../menu/menu.js';
+
+let subMenuIdCounter = 0;
+
+/**
+ * @label Sub Menu
+ * @tag wc-sub-menu
+ * @rawTag sub-menu
+ * @summary Connects a menu item to a nested menu.
+ */
+export class SubMenu extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Number, attribute: 'hover-open-delay' })
+  hoverOpenDelay = 120;
+
+  @property({ type: Number, attribute: 'hover-close-delay' })
+  hoverCloseDelay = 180;
+
+  @property({ type: String, attribute: 'anchor-corner' })
+  anchorCorner = 'start-end';
+
+  @property({ type: String, attribute: 'menu-corner' })
+  menuCorner = 'start-start';
+
+  @queryAssignedElements({ slot: 'item' })
+  private readonly _items!: Element[];
+
+  @queryAssignedElements({ slot: 'menu' })
+  private readonly _menus!: Element[];
+
+  private _openTimeout?: number;
+
+  private _closeTimeout?: number;
+
+  private readonly _onChildMenuOpened = () => {
+    const { item } = this;
+    if (!item) {
+      return;
+    }
+
+    item.submenuOpen = true;
+    item.setAttribute('aria-expanded', 'true');
+  };
+
+  private readonly _onChildMenuClosed = () => {
+    const { item } = this;
+    if (!item) {
+      return;
+    }
+
+    item.submenuOpen = false;
+    item.setAttribute('aria-expanded', 'false');
+  };
+
+  get item(): MenuItem | null {
+    const [candidate] = this._items ?? [];
+    return candidate instanceof MenuItem ? candidate : null;
+  }
+
+  get menu(): Menu | null {
+    const [candidate] = this._menus ?? [];
+    return candidate instanceof Menu ? candidate : null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('mouseenter', this._onMouseEnter);
+    this.addEventListener('mouseleave', this._onMouseLeave);
+  }
+
+  disconnectedCallback() {
+    const { menu } = this;
+    menu?.removeEventListener('opened', this._onChildMenuOpened);
+    menu?.removeEventListener('closed', this._onChildMenuClosed);
+    this.removeEventListener('mouseenter', this._onMouseEnter);
+    this.removeEventListener('mouseleave', this._onMouseLeave);
+    window.clearTimeout(this._openTimeout);
+    window.clearTimeout(this._closeTimeout);
+    super.disconnectedCallback();
+  }
+
+  async show() {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    menu.anchorElement = item;
+    menu.isSubmenu = true;
+    menu.show();
+
+    item.hasSubmenu = true;
+    item.submenuOpen = true;
+    item.setAttribute('aria-expanded', 'true');
+  }
+
+  async close() {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    menu.close({ kind: 'programmatic' });
+    item.submenuOpen = false;
+    item.setAttribute('aria-expanded', 'false');
+  }
+
+  render() {
+    return html`
+      <slot
+        name="item"
+        @slotchange=${this._onSlotChange}
+        @click=${this._onItemClick}
+        @keydown=${this._onItemKeyDown}
+      ></slot>
+      <slot
+        name="menu"
+        @slotchange=${this._onSlotChange}
+        @close-menu=${this._onCloseMenu}
+        @keydown=${this._onMenuKeyDown}
+      ></slot>
+    `;
+  }
+
+  private _onSlotChange = () => {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    if (!menu.id) {
+      subMenuIdCounter += 1;
+      menu.id = `wc-sub-menu-${subMenuIdCounter}`;
+    }
+
+    item.keepOpen = true;
+    item.hasSubmenu = true;
+    item.submenuOpen = menu.open;
+    item.setAttribute('aria-haspopup', 'menu');
+    item.setAttribute('aria-expanded', String(menu.open));
+    item.setAttribute('aria-controls', menu.id);
+
+    menu.removeEventListener('opened', this._onChildMenuOpened);
+    menu.removeEventListener('closed', this._onChildMenuClosed);
+    menu.addEventListener('opened', this._onChildMenuOpened);
+    menu.addEventListener('closed', this._onChildMenuClosed);
+
+    menu.isSubmenu = true;
+    menu.anchorElement = item;
+    menu.placement =
+      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';
+    menu.offset = 4;
+  };
+
+  private _onItemClick = () => {
+    if (this.menu?.open) {
+      this.close();
+      return;
+    }
+
+    this.show();
+  };
+
+  private _onItemKeyDown = async (event: KeyboardEvent) => {
+    const isRtl = getComputedStyle(this).direction === 'rtl';
+    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';
+
+    const shouldOpen =
+      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';
+
+    if (!shouldOpen) {
+      return;
+    }
+
+    event.preventDefault();
+    if (event.key === arrowEnter) {
+      event.stopPropagation();
+    }
+
+    await this.show();
+    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);
+    if (firstItem) {
+      firstItem.tabIndex = 0;
+      firstItem.focus();
+    }
+  };
+
+  private _onMenuKeyDown = async (event: KeyboardEvent) => {
+    const isRtl = getComputedStyle(this).direction === 'rtl';
+    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+    if (event.key !== 'Escape' && event.key !== arrowExit) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    await this.close();
+
+    const { item } = this;
+    if (item) {
+      item.tabIndex = 0;
+      item.focus();
+    }
+  };
+
+  private _onCloseMenu = async (
+    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,
+  ) => {
+    const { reason } = event.detail ?? {};
+    const { key } = reason ?? {};
+    if (reason?.kind === 'keydown' && key === 'Escape') {
+      event.stopPropagation();
+      await this.close();
+      this.item?.focus();
+    }
+  };
+
+  private _onMouseEnter = () => {
+    window.clearTimeout(this._closeTimeout);
+    this._openTimeout = window.setTimeout(() => {
+      this.show();
+    }, this.hoverOpenDelay);
+  };
+
+  private _onMouseLeave = (event: MouseEvent) => {
+    const { relatedTarget: related } = event;
+    if (related instanceof Node && this.contains(related)) {
+      return;
+    }
+
+    window.clearTimeout(this._openTimeout);
+    this._closeTimeout = window.setTimeout(() => {
+      this.close();
+    }, this.hoverCloseDelay);
+  };
+}

package/src/pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './pagination.js';

package/src/pagination/pagination.scss

@@ -0,0 +1,59 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.pagination {
+  background: var(--color-surface, #fff);
+  display: flex;
+  align-items: center;
+
+  .page-sizes-select {
+    margin-inline-start: var(--spacing-100, 0.5rem);
+  }
+
+  .page-size-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-100, 0.5rem);
+    @include mixin.get-typography-not-important('body-medium');
+    color: var(--color-on-surface-variant);
+    white-space: nowrap;
+  }
+
+  .page-size-select {
+    border: 1px solid var(--color-outline-variant);
+    background: var(--color-surface, #fff);
+    color: var(--color-on-surface);
+    padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
+    cursor: pointer;
+    outline: none;
+    height: 2.5rem;
+
+    @include mixin.get-typography-not-important('body-medium');
+
+    &:focus {
+      outline: 2px solid var(--color-primary);
+    }
+  }
+
+  .pagination-item-count {
+    margin-inline-start: var(--spacing-150, 0.75rem);
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-text {
+    @include mixin.get-typography-not-important('body-medium');
+    color: var(--color-on-surface-variant);
+  }
+
+  .arrows {
+    --border-radius: 0;
+    --button-height: calc(2.5rem - 2px);
+  }
+}

package/src/pagination/pagination.ts

@@ -0,0 +1,135 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './pagination.scss';
+
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+
+/**
+ * @label Pagination
+ * @tag wc-pagination
+ * @rawTag pagination
+ * @summary A pagination control with page size selector, item count display, and previous/next navigation.
+ * @overview
+ * <p>The pagination component provides controls for navigating through paged data sets.</p>
+ *
+ * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.
+ *
+ * @example
+ * ```html
+ * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * ```
+ * @tags navigation, data
+ */
+export class Pagination extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The current page number (1-based). Defaults to `1`.
+   */
+  @property({ type: Number })
+  page: number = 1;
+
+  /**
+   * The number of rows per page. Defaults to `10`.
+   */
+  @property({ type: Number, attribute: 'page-size' })
+  pageSize: number = 10;
+
+  /**
+   * Total number of items.
+   */
+  @property({ type: Number, attribute: 'total-items' })
+  totalItems: number = 0;
+
+  /**
+   * Supported page size options.
+   */
+  @property({ type: Array, attribute: 'page-sizes' })
+  pageSizes: number[] = DEFAULT_PAGE_SIZES;
+
+  private dispatchPageEvent() {
+    this.dispatchEvent(
+      new CustomEvent('page', {
+        detail: { page: this.page, pageSize: this.pageSize },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    const startItem = this.pageSize * (this.page - 1);
+    const endItem = Math.min(this.pageSize * this.page, this.totalItems);
+    const isFirstPage = this.page === 1;
+    const isLastPage = this.pageSize * this.page >= this.totalItems;
+
+    return html`
+      <div class="pagination">
+        <div class="page-sizes-select">
+          <label class="page-size-label">
+            Items per page:
+            <select
+              class="page-size-select"
+              .value=${String(this.pageSize)}
+              @change=${(e: Event) => {
+                this.pageSize = parseInt(
+                  (e.target as HTMLSelectElement).value,
+                  10,
+                );
+                this.page = 1;
+                this.dispatchPageEvent();
+              }}
+            >
+              ${this.pageSizes.map(
+                size => html`
+                  <option value=${size} ?selected=${this.pageSize === size}>
+                    ${size}
+                  </option>
+                `,
+              )}
+            </select>
+          </label>
+        </div>
+        <div class="pagination-item-count">
+          <span class="pagination-text">
+            ${startItem} - ${endItem} of ${this.totalItems} items
+          </span>
+        </div>
+        <div class="pagination-right">
+          <div class="table-footer-right-content">
+            <div class="table-footer-right-content-pagination">
+              <wc-button
+                class="arrows"
+                color="secondary"
+                variant="text"
+                ?disabled=${isFirstPage}
+                @click=${() => {
+                  if (!isFirstPage) {
+                    this.page -= 1;
+                    this.dispatchPageEvent();
+                  }
+                }}
+              >
+                <wc-icon slot="icon" name="arrow--left"></wc-icon>
+              </wc-button>
+              <wc-button
+                color="secondary"
+                variant="text"
+                class="arrows"
+                ?disabled=${isLastPage}
+                @click=${() => {
+                  if (!isLastPage) {
+                    this.page += 1;
+                    this.dispatchPageEvent();
+                  }
+                }}
+              >
+                <wc-icon slot="icon" name="arrow--right"></wc-icon>
+              </wc-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}