@lion/ui 0.21.0 → 0.21.1-menu-system.0

package/docs/components/menu/src/DemoNavigationBar.js

@@ -0,0 +1,441 @@
+// @ts-nocheck
+/* eslint-disable class-methods-use-this */
+/* eslint-disable import/no-relative-packages */
+import { LitElement, html, css, nothing } from 'lit';
+import { LionMenu } from '@lion/ui/menu.js';
+import { ScopedElementsMixin } from '../../../../packages/ui/components/core/src/ScopedElementsMixin.js';
+
+/**
+ * @typedef {import('./navigation-bar-types.js').NavBarResponsiveMode} NavBarResponsiveMode
+ * @typedef {import('./navigation-bar-types.js').MenuItem} MenuItem
+ * @typedef {import('./navigation-bar-types.js').CtaLink} CtaLink
+ * @typedef {import('./navigation-bar-types.js').Logo} Logo
+ * @typedef {import('./navigation-bar-types.js').LevelConfig} LevelConfig
+ */
+
+export class DemoNavigationBar extends ScopedElementsMixin(LitElement) {
+  static get properties() {
+    return {
+      responsiveMode: { type: String, reflect: true, attribute: 'responsive-mode' },
+      // logo: { type: String },
+      menuItems: { type: Array },
+      menuSupportItems: { type: Array },
+      ctaPrimary: { type: Object },
+      ctaSecondary: { type: Object },
+      suggestions: { type: Array },
+      showOnMobile: { type: Array, attribute: 'show-on-mobile', reflect: true },
+
+      _levelCfg: { state: true },
+    };
+  }
+
+  static get scopedElements() {
+    return {
+      'lion-menu': LionMenu,
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        /** specific styles */
+
+        :host([responsive-mode='desktop']) [data-has-full-width-flyout] > [slot='list'] {
+          /** make sure that we give the right styles */
+          position: relative;
+        }
+
+        :host([responsive-mode='desktop'])
+          [data-has-full-width-flyout]
+          > [slot='list']
+          [level='2']
+          > [slot='list'] {
+          position: absolute;
+          width: 100%;
+          left: 0;
+          right: 0;
+          min-height: 300px;
+          padding: 1em;
+          background-color: white;
+          border: 1px solid gray;
+          box-sizing: border-box;
+        }
+
+        :host([responsive-mode='desktop']) [level='3'] > [slot='list'] {
+          position: absolute;
+          left: 33.333%;
+          width: 33.333%;
+          top: 0;
+          padding: 1em;
+          background-color: white;
+          box-sizing: border-box;
+          height: 100%;
+        }
+
+        :host([responsive-mode='mobile']) nav {
+          border: 1px solid black;
+          display: block;
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          min-width: 500px;
+        }
+
+        :host([responsive-mode='mobile']) [level][opened] > [slot='list'] {
+          left: 0;
+          width: 100%;
+          top: 0;
+          box-sizing: border-box;
+        }
+
+        :host([responsive-mode='mobile']) [slot='list'] {
+          position: relative;
+          padding: 1em;
+          background-color: white;
+        }
+
+        :host([responsive-mode='mobile']) [level='2'] > [slot='list'],
+        :host([responsive-mode='mobile']) [level='3'] > [slot='list'] {
+          position: absolute;
+          left: 100%;
+          top: 0;
+          box-sizing: border-box;
+          padding-bottom: 200%;
+        }
+
+        /**
+        * TODO remove it. Use it now for testing More button feature
+        */
+        :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'],
+        :host([responsive-mode='desktop'])
+          [level='1']
+          > [slot='list']
+          > [data-more-button-wrapper] {
+          margin-right: 180px;
+        }
+
+        :host([responsive-mode='mobile']) nav {
+          display: flex;
+          flex-direction: column;
+          /* height: 100%;
+          justify-content: space-between; */
+        }
+
+        /* :host([responsive-mode='mobile']) .cta-items {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          padding: 1em;
+          background-color: white;
+          box-sizing: border-box;
+        } */
+
+        :host([responsive-mode='mobile']) .logo-and-close {
+          padding: 1em;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+
+    /** @type {Logo} */
+    this.logo = { type: 'ing', alt: 'ING homepage', href: '/' };
+    /** @type {MenuItem[]} */
+    this.menuSupportItems = [];
+    // /**
+    //  * @type {string[]}
+    //  * @description Choose which items to show on mobile when in default mode, maximum of two. Possible values: 'search', 'ctaPrimary', 'ctaSecondary', 'avatarMenu'
+    //  */
+    // this.showOnMobile = [];
+    /**
+     * @type {CtaLink}
+     */
+    // @ts-ignore
+    this.ctaPrimary = {};
+    /**
+     * @type {CtaLink}
+     */
+    // @ts-ignore
+    this.ctaSecondary = {};
+    /** @type {MenuItem[]} */
+    this.menuItems = [];
+    // /** @type {Boolean} */
+    // this.searchDisabled = false;
+    this.breakpointMin = 1400; // force desktop
+    /** @type {string[]} */
+    this.suggestions = [];
+
+    this.prefilledSuggestion = '';
+
+    const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
+    /** @type {NavBarResponsiveMode} */
+    this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
+    this._levelCfg = this._getLevelCfg(this.responsiveMode);
+    this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
+
+    mql.addEventListener('change', () => {
+      this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
+      this._levelCfg = this._getLevelCfg(this.responsiveMode);
+      this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
+    });
+
+    this.#storeLatestFocusedElementId();
+  }
+
+  /**
+   * @param {NavBarResponsiveMode} responsiveMode
+   */
+  _getLevelCfg(responsiveMode) {
+    // N.B. we're fighting some of the overlay configs provided by LionMenu here,
+    // the idea is to take over all of that when depending on LionMenu.
+
+    if (responsiveMode === 'mobile') {
+      return {
+        l1: {
+          isBar: false,
+          openableConfig: {
+            // We want to do the absolute positioning ourselves, popper is not suited for this...
+            placementMode: 'custom',
+            isActivated: false,
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+        l2: {
+          openableConfig: {
+            // We want disclosure behavior
+            placementMode: 'custom',
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+        l3: {
+          openableConfig: {
+            // We want disclosure behavior
+            placementMode: 'custom',
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+      };
+    }
+
+    return {
+      l1: {
+        isBar: true,
+        hasFullWidthFlyout: true,
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          // N.B. we don't have an invoker...
+          isActivated: false,
+          inheritsReferenceWidth: 'none',
+          elementToFocusOnShow: true,
+        },
+      },
+      l2: {
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          hidesOnOutsideClick: true,
+          hidesOnEscape: true,
+          inheritsReferenceWidth: 'none',
+          elementToFocusOnShow: true,
+        },
+      },
+      l3: {
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          inheritsReferenceWidth: 'none',
+          elementToFocusOnShow: true,
+          // TODO: implement in OverlayController
+          hideVisually: true,
+        },
+      },
+    };
+  }
+
+  _getSecondaryLevelCfg(responsiveMode) {
+    if (responsiveMode === 'mobile') {
+      return {
+        l1: {
+          isBar: true,
+        },
+        l2: {
+          isBar: false,
+        },
+      };
+    }
+
+    return {
+      l1: {
+        isBar: true,
+      },
+      l2: {
+        isBar: false,
+      },
+    };
+  }
+
+  /** @type {string | null} */
+  #latestFocusedElementId = null;
+
+  #storeLatestFocusedElementId() {
+    this.addEventListener('focusin', ({ target }) => {
+      // @ts-ignore
+      this.#latestFocusedElementId = target.id;
+    });
+  }
+
+  #syncLatestFocusedElementForNewResponsiveMode() {
+    // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
+    // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
+    if (!this.#latestFocusedElementId) return;
+    const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
+    if (newFocusedElement instanceof HTMLElement) {
+      newFocusedElement.focus();
+    }
+  }
+
+  /**
+   * @param {import("./types.js").MenuItem}
+   * @param {number} level
+   */
+  _getId(menuItem, level) {
+    if (menuItem.id) return menuItem.id;
+    const title = menuItem.title || menuItem.label || 'item';
+    return `${
+      Number.isInteger(level) ? `l${level}-${title}` : title
+    }-${Math.random().toString(16).slice(2)}`;
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('responsiveMode')) {
+      this._levelCfg = this._getLevelCfg(this.responsiveMode);
+      this.#syncLatestFocusedElementForNewResponsiveMode();
+    }
+  }
+
+  render() {
+    return html`
+      <nav>
+        <div class="nav-header">
+          <div class="logo-and-close">
+            <a href="${this.logo.href || '#'}">
+              <img src="${this.logo.src || ''}" alt="${this.logo.alt || ''}" />
+            </a>
+            ${this.responsiveMode === 'mobile'
+              ? html`<button data-close data-level="1">✖️</button>`
+              : ''}
+          </div>
+          ${this._searchTemplate()}
+        </div>
+        <div class="nav-body">
+          ${this._menulevelTemplate(this.menuSupportItems, 1, '')}
+          ${this.responsiveMode === 'desktop'
+            ? this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)
+            : ''}
+          ${this._menulevelTemplate(this.menuItems, 1, '', true)}
+        </div>
+        ${this.responsiveMode === 'mobile'
+          ? html`<div class="nav-footer">
+              ${this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)}
+            </div>`
+          : ''}
+      </nav>
+    `;
+  }
+
+  /**
+   * @param {string[]} suggestions
+   * @returns {import('lit').TemplateResult}
+   */
+  _searchTemplate(suggestions = this.suggestions, prefilledSuggestion = this.prefilledSuggestion) {
+    return html` <form role="search">
+      <input
+        type="search"
+        list="search-list"
+        placeholder="What are you looking for?"
+        .value="${prefilledSuggestion}"
+      />
+      <datalist id="search-list">
+        ${suggestions.map(suggestion => html`<option value="${suggestion}"></option>`)}
+      </datalist>
+      <input type="submit" value="Search" />
+    </form>`;
+  }
+
+  /**
+   * @param {CtaLink} ctaPrimary
+   * @param {CtaLink} ctaSecondary
+   * @returns {import('lit').TemplateResult}
+   */
+  _ctasTemplate(ctaPrimary, ctaSecondary) {
+    return html`<div class="cta-items">
+      ${ctaSecondary?.href
+        ? html`<div class="cta-secondary">
+            <a id="${this._getId(ctaSecondary)}" href="${ctaSecondary.href}"
+              >${ctaSecondary.label}
+            </a>
+          </div>`
+        : ''}
+      ${ctaPrimary?.href
+        ? html`<div class="cta-primary">
+            <a id="${this._getId(ctaPrimary)}" href="${ctaPrimary.href}"> ${ctaPrimary.label}</a>
+          </div>`
+        : ''}
+    </div>`;
+  }
+
+  /**
+   * @param {MenuItem[]} menuItemsForLevel
+   * @param {number} level
+   * @returns {import('lit').TemplateResult}
+   */
+  _menulevelTemplate(menuItemsForLevel, level, prevText = '', itemWrap = false) {
+    // @ts-ignore
+    const cfgForLevel = this._levelCfg[`l${level}`];
+
+    return html`<lion-menu
+      ?item-wrap=${itemWrap}
+      .config="${cfgForLevel.openableConfig || {}}"
+      .bar="${cfgForLevel.isBar}"
+      ?data-has-full-width-flyout="${cfgForLevel.hasFullWidthFlyout}"
+      ._activeMode="${'tabbable-disclosure'}"
+    >
+      ${level > 1 && this.responsiveMode === 'mobile'
+        ? html` <div role="listitem">
+            <button data-close data-level="${level}">&lt; ${prevText}</button>
+          </div>`
+        : ''}
+      ${menuItemsForLevel.map(
+        menuItem => html`
+          <div role="listitem">
+            ${menuItem.sub
+              ? html` <button id="${this._getId(menuItem)}" data-invoker>${menuItem.title}</button>
+                  ${menuItem.sub
+                    ? this._menulevelTemplate(menuItem.sub, level + 1, menuItem.title)
+                    : ''}`
+              : html` <a id="${this._getId(menuItem)}" href="${menuItem.link || ''}"
+                  >${menuItem.title}</a
+                >`}
+          </div>
+        `,
+      )}
+      ${itemWrap
+        ? html`<div slot="more-button">
+            <button>More</button>
+          </div>`
+        : nothing}
+    </lion-menu> `;
+  }
+}
+
+customElements.define('demo-navigation-bar', DemoNavigationBar);

package/docs/components/menu/src/DemoSpinButton.js

@@ -0,0 +1,215 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html, css } from 'lit';
+
+export class DemoSpinButton extends LitElement {
+  static get properties() {
+    return {
+      now: { type: Number },
+      min: { type: Number },
+      max: { type: Number },
+      unit: { type: String },
+      step: { type: Number },
+    };
+  }
+
+  get _decreaseNode() {
+    return this.shadowRoot?.querySelector('[data-ref=decrease]');
+  }
+
+  get _increaseNode() {
+    return this.shadowRoot?.querySelector('[data-ref=increase]');
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        cursor: default;
+      }
+    `;
+  }
+
+  render() {
+    return this._mainTemplate({ ariaText: this._getAriaText() });
+  }
+
+  /**
+   * @param {{ ariaText: string }} props
+   */
+  _mainTemplate({ ariaText }) {
+    return html`${ariaText}${this._decreaseBtnTemplate()}${this._increaseBtnTemplate()}`;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _decreaseBtnTemplate() {
+    return html`<span data-ref="decrease">▼</span>`;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _increaseBtnTemplate() {
+    return html`<span data-ref="increase">▲</span>`;
+  }
+
+  constructor() {
+    super();
+    this.unit = '';
+
+    this.step = 1;
+
+    this.__decrease = this.__decrease.bind(this);
+    this.__increase = this.__increase.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.__isSetup) {
+      return;
+    }
+
+    this.setAttribute('tabindex', '0');
+    this.__isSetup = true;
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    // @ts-ignore - event listener type compatibility
+    this._decreaseNode?.addEventListener('mousedown', this.__decrease);
+    // @ts-ignore - event listener type compatibility
+    this._increaseNode?.addEventListener('mousedown', this.__increase);
+    this.addEventListener('keydown', this._onKeydown);
+
+    this.addEventListener('mousedown', () => {
+      this.__isMousedown = true;
+    });
+    this.addEventListener('mouseup', () => {
+      this.__isMousedown = false;
+    });
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('now')) {
+      this.setAttribute('aria-valuenow', `${this.now}`);
+    }
+
+    if (changedProperties.has('now') || changedProperties.has('unit')) {
+      this.setAttribute('aria-valuetext', this._getAriaText());
+    }
+
+    if (changedProperties.has('min')) {
+      // @ts-ignore - min property from properties
+      this.setAttribute('aria-valuemin', `${this.min}`);
+    }
+
+    if (changedProperties.has('max')) {
+      // @ts-ignore - max property from properties
+      this.setAttribute('aria-valuemax', `${this.max}`);
+    }
+  }
+
+  /**
+   * @overridable
+   */
+  _getAriaText() {
+    return `${this.now}${this.unit ? this.unit : ''}`;
+  }
+
+  /**
+   * @param {MouseEvent | null} ev
+   * @param {number} step
+   * @param {number} timeout
+   */
+  __decrease(ev, step = this.step, timeout = 100) {
+    // @ts-ignore - min property from properties
+    if (this.min !== undefined && this.now - 1 >= this.min) {
+      this.now -= 1; // TODO: support step/increment?
+    }
+    // @ts-ignore - ev can be null
+    if (ev.type === 'mousedown') {
+      setTimeout(() => {
+        if (this.__isMousedown) {
+          this.__decrease(ev, step, timeout / 1.3);
+        }
+      }, timeout);
+    }
+  }
+
+  /**
+   * @param {MouseEvent | null} ev
+   * @param {number} step
+   * @param {number} timeout
+   */
+  __increase(ev, step = this.step, timeout = 100) {
+    // @ts-ignore - max property from properties
+    if (this.max !== undefined && this.now + 1 <= this.max) {
+      this.now += 1; // TODO: support step/increment?
+    }
+    // @ts-ignore - ev can be null
+    if (ev.type === 'mousedown') {
+      setTimeout(() => {
+        if (this.__isMousedown) {
+          this.__increase(ev, step, timeout / 1.3);
+        }
+      }, timeout);
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  _onKeydown(ev) {
+    const { key } = ev;
+
+    // eslint-disable-next-line default-case
+    switch (key) {
+      case 'ArrowDown':
+        ev.stopPropagation(); // In case we are inside a menu
+        ev.preventDefault(); // Prevent scroll
+        // @ts-ignore - passing null for ev parameter
+        this.__decrease();
+        break;
+      case 'ArrowUp':
+        ev.stopPropagation(); // In case we are inside a menu
+        ev.preventDefault(); // Prevent scroll
+        // @ts-ignore - passing null for ev parameter
+        this.__increase();
+        break;
+      case 'Home':
+        ev.stopPropagation(); // In case we are inside a menu
+        ev.preventDefault(); // Prevent scroll
+        // @ts-ignore - min property from properties
+        if (this.min !== undefined) {
+          // @ts-ignore
+          this.now = this.min;
+        }
+        break;
+      case 'End':
+        ev.stopPropagation(); // In case we are inside a menu
+        ev.preventDefault(); // Prevent scroll
+        // @ts-ignore - max property from properties
+        if (this.max !== undefined) {
+          // @ts-ignore
+          this.now = this.max;
+        }
+        break;
+      case 'PageDown':
+        this.__decrease(null, this.step * 2);
+        break;
+      case 'PageUp':
+        this.__increase(null, this.step * 2);
+        break;
+    }
+  }
+}
+
+customElements.define('demo-spin-button', DemoSpinButton);