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

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

@@ -1,441 +0,0 @@
-// @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

@@ -1,215 +0,0 @@
-/* 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);