@kubex/zinc 0.0.2 → 1.0.0

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

@@ -0,0 +1,220 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, unsafeCSS} from 'lit';
+import {getTextContent, HasSlotController} from '../../internal/slot';
+import {html, literal} from "lit/static-html.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {LocalizeController} from '../../utilities/localize';
+import {property, query} from 'lit/decorators.js';
+import {SubmenuController} from './submenu-controller';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+import ZnPopup from "../popup";
+import type ZnDropdown from "../dropdown";
+
+import styles from './menu-item.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/menu-item
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnMenuItem extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  static dependencies = {
+    'zn-icon': ZnIcon,
+    'zn-popup': ZnPopup
+  };
+
+  private cachedTextLabel: string;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.menu-item') menuItem: HTMLElement;
+
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+  @property() type: 'normal' | 'checkbox' = 'normal';
+
+  /** Draws the item in a checked state. */
+  @property({type: Boolean, reflect: true}) checked = false;
+
+  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+  @property() value = '';
+
+  /** Draws the menu item in a loading state. */
+  @property({type: Boolean, reflect: true}) loading = false;
+
+  /** Draws the menu item in a disabled state, preventing selection. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  // Link Specific
+  @property() href: string;
+
+  @property({attribute: "data-path"}) dataPath: string;
+
+  @property() target: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  @property({attribute: 'data-target'}) dataTarget: 'modal' | 'slide' | string;
+
+  @property() rel: string = 'noreferrer noopener';
+
+  @property({attribute: 'gaid'}) gaid: string;
+
+  private readonly localize = new LocalizeController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'submenu');
+  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleHostClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+  }
+
+  private handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+
+    // Ignore the first time the label is set
+    if (typeof this.cachedTextLabel === 'undefined') {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+
+    // When the label changes, emit a slotchange event so parent controls see it
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit('slotchange', {bubbles: true, composed: false, cancelable: false});
+    }
+  }
+
+  private handleHostClick = (event: MouseEvent) => {
+    // Prevent the click event from being emitted when the button is disabled or loading
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    if (!this.isSubmenu()) {
+      const composedPath = event.composedPath();
+      const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
+      (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
+      this.emit('zn-menu-select', {detail: {value: this.value, element: this}});
+    }
+  };
+
+  private handleMouseOver = (event: MouseEvent) => {
+    this.focus();
+    event.stopPropagation();
+  };
+
+  @watch('checked')
+  handleCheckedChange() {
+    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+    if (this.checked && this.type !== 'checkbox') {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+
+    // Only checkbox types can receive the aria-checked attribute
+    if (this.type === 'checkbox') {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    } else {
+      this.removeAttribute('aria-checked');
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('type')
+  handleTypeChange() {
+    if (this.type === 'checkbox') {
+      this.setAttribute('role', 'menuitemcheckbox');
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    } else {
+      this.setAttribute('role', 'menuitem');
+      this.removeAttribute('aria-checked');
+    }
+  }
+
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+
+  isSubmenu() {
+    return this.hasSlotController.test('submenu');
+  }
+
+  private _isLink() {
+    return this.href !== undefined || this.dataPath !== undefined;
+  }
+
+  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+    const isLink = this._isLink();
+    const tag = isLink ? literal`a` : literal`div`;
+
+    return html`
+      <${tag}
+        id="anchor"
+        part="base"
+        data-path=${ifDefined(this.dataPath)}
+        href=${ifDefined(this.href)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        data-target=${ifDefined(isLink ? this.dataTarget : undefined)}
+        rel=${ifDefined(isLink ? this.rel : undefined)}
+        gaid=${ifDefined(this.gaid)}
+        class=${classMap({
+          'menu-item': true,
+          'menu-item--rtl': isRtl,
+          'menu-item--checked': this.checked,
+          'menu-item--disabled': this.disabled,
+          'menu-item--loading': this.loading,
+          'menu-item--has-submenu': this.isSubmenu(),
+          'menu-item--submenu-expanded': isSubmenuExpanded
+        })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded}">
+        <span part="checked-icon" class="menu-item__check">
+          <zn-icon src="check_small" aria-hidden="true"></zn-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <zn-icon src=${isRtl ? 'chevron_left' : 'chevron_right'} aria-hidden="true"></zn-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading ? html`
+          <zn-spinner part="spinner" exportparts="base:spinner__base"></zn-spinner> ` : ''}
+        </div>
+    `;
+  }
+}

package/src/components/menu-item/menu-item.scss

@@ -0,0 +1,157 @@
+@use "../../wc";
+
+:host {
+  --submenu-offset: -2px;
+  display: block;
+}
+
+:host([inert]) {
+  display: none;
+}
+
+.menu-item {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  padding: var(--zn-spacing-medium);
+  transition: .4s fill;
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border-bottom-width: 1px;
+
+  text-decoration: none;
+  color: rgb(var(--zn-text));
+}
+
+.menu-item__label::slotted(*) {
+  text-decoration: none;
+  color: inherit;
+}
+
+.menu-item.menu-item--disabled {
+  outline: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.menu-item.menu-item--loading {
+  outline: none;
+  cursor: wait;
+}
+
+.menu-item .menu-item__label {
+  display: flex;
+  flex: 1 1 auto;
+  text-overflow: ellipsis;
+  align-items: center;
+  overflow: hidden;
+}
+
+.menu-item .menu-item__prefix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.menu-item .menu-item__prefix::slotted(*) {
+  --icon-size: var(--zn-font-size-small);
+  margin-inline-end: var(--zn-spacing-small);
+}
+
+.menu-item .menu-item__suffix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.menu-item .menu-item__suffix::slotted(*) {
+  margin-inline-start: var(--zn-spacing-x-small);
+}
+
+/* Safe triangle */
+.menu-item--submenu-expanded::after {
+  content: '';
+  position: fixed;
+  z-index: calc(var(--zn-z-index-dropdown) - 1);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  clip-path: polygon(
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+  );
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
+.menu-item--submenu-expanded {
+  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
+  color: rgb(var(--zn-primary));
+}
+
+:host(:focus-visible) .menu-item {
+  outline: none;
+  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
+  color: rgb(var(--zn-primary));
+  opacity: 1;
+}
+
+.menu-item .menu-item__check,
+.menu-item .menu-item__chevron {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  visibility: hidden;
+}
+
+.menu-item .menu-item__chevron {
+  display: none;
+}
+
+.menu-item--has-submenu .menu-item__chevron {
+  display: flex;
+}
+
+:host(:not([role="menuitemcheckbox"])) .menu-item .menu-item__check {
+  display: none;
+}
+
+.menu-item--checked .menu-item__check,
+.menu-item--has-submenu .menu-item__chevron {
+  visibility: visible;
+  display: flex;
+}
+
+/* Add elevation and z-index to submenus */
+zn-popup::part(popup) {
+  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  z-index: 100;
+  margin-left: var(--submenu-offset);
+}
+
+.menu-item--rtl zn-popup::part(popup) {
+  margin-left: calc(-1 * var(--submenu-offset));
+}
+
+@media (forced-colors: active) {
+  :host(:hover:not([aria-disabled='true'])) .menu-item,
+  :host(:focus-visible) .menu-item {
+    outline: dashed 1px SelectedItem;
+    outline-offset: -1px;
+  }
+}
+
+::slotted(zn-menu) {
+  max-width: var(--auto-size-available-width) !important;
+  max-height: var(--auto-size-available-height) !important;
+}

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

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-menu-item>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-menu-item></zn-menu-item> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/menu-item/submenu-controller.ts

@@ -0,0 +1,291 @@
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
+import { type HasSlotController } from '../../internal/slot.js';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { html } from 'lit';
+import { type LocalizeController } from '../../utilities/localize.js';
+import type ZnMenuItem from '../menu-item';
+import type ZnPopup from '../popup';
+
+/** A reactive controller to manage the registration of event listeners for submenus. */
+export class SubmenuController implements ReactiveController {
+  private host: ReactiveControllerHost & ZnMenuItem;
+  private popupRef: Ref<ZnPopup> = createRef();
+  private enableSubmenuTimer = -1;
+  private isConnected = false;
+  private isPopupConnected = false;
+  private skidding = 0;
+  private readonly hasSlotController: HasSlotController;
+  private readonly localize: LocalizeController;
+  private readonly submenuOpenDelay = 100;
+
+  constructor(
+    host: ReactiveControllerHost & ZnMenuItem,
+    hasSlotController: HasSlotController,
+    localize: LocalizeController
+  ) {
+    (this.host = host).addController(this);
+    this.hasSlotController = hasSlotController;
+    this.localize = localize;
+  }
+
+  hostConnected() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+    }
+  }
+
+  hostDisconnected() {
+    this.removeListeners();
+  }
+
+  hostUpdated() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+      this.updateSkidding();
+    } else {
+      this.removeListeners();
+    }
+  }
+
+  private addListeners() {
+    if (!this.isConnected) {
+      this.host.addEventListener('mousemove', this.handleMouseMove);
+      this.host.addEventListener('mouseover', this.handleMouseOver);
+      this.host.addEventListener('keydown', this.handleKeyDown);
+      this.host.addEventListener('click', this.handleClick);
+      this.host.addEventListener('focusout', this.handleFocusOut);
+      this.isConnected = true;
+    }
+
+    // The popup does not seem to get wired when the host is
+    // connected, so manage its listeners separately.
+    if (!this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.addEventListener('zn-reposition', this.handlePopupReposition);
+        this.isPopupConnected = true;
+      }
+    }
+  }
+
+  private removeListeners() {
+    if (this.isConnected) {
+      this.host.removeEventListener('mousemove', this.handleMouseMove);
+      this.host.removeEventListener('mouseover', this.handleMouseOver);
+      this.host.removeEventListener('keydown', this.handleKeyDown);
+      this.host.removeEventListener('click', this.handleClick);
+      this.host.removeEventListener('focusout', this.handleFocusOut);
+      this.isConnected = false;
+    }
+    if (this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener('zn-reposition', this.handlePopupReposition);
+        this.isPopupConnected = false;
+      }
+    }
+  }
+
+  // Set the safe triangle cursor position
+  private handleMouseMove = (event: MouseEvent) => {
+    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);
+    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);
+  };
+
+  private handleMouseOver = () => {
+    if (this.hasSlotController.test('submenu')) {
+      this.enableSubmenu();
+    }
+  };
+
+  private handleSubmenuEntry(event: KeyboardEvent) {
+    // Pass focus to the first menu-item in the submenu.
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+
+    // Missing slot
+    if (!submenuSlot) {
+      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);
+      return;
+    }
+
+    // Menus
+    let menuItems: NodeListOf<Element> | null = null;
+    for (const elt of submenuSlot.assignedElements()) {
+      menuItems = elt.querySelectorAll("zn-menu-item, [role^='menuitem']");
+      if (menuItems.length !== 0) {
+        break;
+      }
+    }
+
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+
+    menuItems[0].setAttribute('tabindex', '0');
+    for (let i = 1; i !== menuItems.length; ++i) {
+      menuItems[i].setAttribute('tabindex', '-1');
+    }
+
+    // Open the submenu (if not open), and set focus to first menuitem.
+    if (this.popupRef.value) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.popupRef.value.active) {
+        if (menuItems[0] instanceof HTMLElement) {
+          menuItems[0].focus();
+        }
+      } else {
+        this.enableSubmenu(false);
+        this.host.updateComplete.then(() => {
+          if (menuItems![0] instanceof HTMLElement) {
+            menuItems![0].focus();
+          }
+        });
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Focus on the first menu-item of a submenu.
+  private handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.disableSubmenu();
+        break;
+      case 'ArrowLeft':
+        // Either focus is currently on the host element or a child
+        if (event.target !== this.host) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.host.focus();
+          this.disableSubmenu();
+        }
+        break;
+      case 'ArrowRight':
+      case 'Enter':
+      case ' ':
+        this.handleSubmenuEntry(event);
+        break;
+      default:
+        break;
+    }
+  };
+
+  private handleClick = (event: MouseEvent) => {
+    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate
+    if (event.target === this.host) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (
+      event.target instanceof Element &&
+      (event.target.tagName === 'zn-menu-item' || event.target.role?.startsWith('menuitem'))
+    ) {
+      this.disableSubmenu();
+    }
+  };
+
+  // Close this submenu on focus outside of the parent or any descendants.
+  private handleFocusOut = (event: FocusEvent) => {
+    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
+      return;
+    }
+    this.disableSubmenu();
+  };
+
+  // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+  private handlePopupMouseover = (event: MouseEvent) => {
+    event.stopPropagation();
+  };
+
+  // Set the safe triangle values for the submenu when the position changes
+  private handlePopupReposition = () => {
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'zn-menu')[0];
+    const isRtl = this.localize.dir() === 'rtl';
+
+    if (!menu) {
+      return;
+    }
+
+    const { left, top, width, height } = menu.getBoundingClientRect();
+
+    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);
+  };
+
+  private setSubmenuState(state: boolean) {
+    if (this.popupRef.value) {
+      if (this.popupRef.value.active !== state) {
+        this.popupRef.value.active = state;
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
+  // newly opened menu.
+  private enableSubmenu(delay = true) {
+    if (delay) {
+      this.enableSubmenuTimer = window.setTimeout(() => {
+        this.setSubmenuState(true);
+      }, this.submenuOpenDelay);
+    } else {
+      this.setSubmenuState(true);
+    }
+  }
+
+  private disableSubmenu() {
+    clearTimeout(this.enableSubmenuTimer);
+    this.setSubmenuState(false);
+  }
+
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  private updateSkidding(): void {
+    // .computedStyleMap() not always available.
+    if (!this.host.parentElement?.computedStyleMap) {
+      return;
+    }
+    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();
+    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];
+
+    const skidding = attrs.reduce((accumulator, attr) => {
+      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');
+      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');
+      const pxValue = unitValue.to('px');
+      return accumulator - pxValue.value;
+    }, 0);
+
+    this.skidding = skidding;
+  }
+
+  isExpanded(): boolean {
+    return this.popupRef.value ? this.popupRef.value.active : false;
+  }
+
+  renderSubmenu() {
+    const isLtr = this.localize.dir() === 'ltr';
+
+    // Always render the slot, but conditionally render the outer <zn-popup>
+    if (!this.isConnected) {
+      return html`
+        <slot name="submenu" hidden></slot> `;
+    }
+
+    return html`
+      <zn-popup
+        ${ref(this.popupRef)}
+        placement=${isLtr ? 'right-start' : 'left-start'}
+        anchor="anchor"
+        flip
+        flip-fallback-strategy="best-fit"
+        skidding="${this.skidding}"
+        strategy="fixed"
+      >
+        <slot name="submenu"></slot>
+      </zn-popup>
+    `;
+  }
+}

package/src/components/navbar/index.ts

@@ -0,0 +1,12 @@
+import ZnNavbar from './navbar.component';
+
+export * from './navbar.component';
+export default ZnNavbar;
+
+ZnNavbar.define('zn-navbar');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-navbar': ZnNavbar;
+  }
+}