@aquera/nile-elements 0.0.1-beta.2 → 0.0.1-beta.4

package/src/nile-chip/nile-chip.ts

@@ -0,0 +1,183 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult
+} from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-chip.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../internal/slot';
+import { watch } from '../internal/watch';
+import NileElement, { NileFormControl } from '../internal/nile-element';
+
+
+interface CustomEventDetail {
+  value: string;
+}
+
+@customElement('nile-chip')
+export class NileChip extends NileElement {
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+
+  @state() tags: string[] = [];
+
+  @state() inputValue: string = '';
+
+  @state() isDropdownOpen: boolean = false;
+
+  @query('nile-auto-complete') autoComplete!: any;
+
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  @property() label = '';
+
+  /** Adds a clear button when the input is not empty. */
+  @property({ type: Boolean }) acceptUserInput = false;
+
+  /** Adds a clear button when the input is not empty. */
+  @property({ type: Boolean }) clearable = false;
+
+  /** Placeholder text to show as a hint when the input is empty. */
+  @property() placeholder = '';
+
+  /** Makes the input readonly. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  /** Disables the input. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  // Auto-complete options
+  private autoCompleteOptions: string[] = [];
+
+  private handleSelect(event: CustomEvent<CustomEventDetail>) {
+    // Emit a custom event with the selected value
+    this.emit('nile-chip-change', { value: event.detail.value });
+
+    // Add the selected value to the tags array
+    this.tags = [...this.tags, event.detail.value];
+
+    // Reset the input field
+    this.resetInput();
+  }
+
+  private handleRemove(value: string) {
+    // Remove the tag from the tags array
+    this.tags = this.tags.filter(tag => tag !== value);
+  }
+
+  private handleInputChange(event: CustomEvent<CustomEventDetail>) {
+    // Update the input value
+    this.inputValue = event.detail.value;
+  }
+
+  private handleInputKeydown(event: KeyboardEvent) {
+    if (!this.acceptUserInput) {
+      return;
+    }
+
+    if (event.key === 'Enter' && this.inputValue) {
+      this.tags = [...this.tags, this.inputValue];
+
+      this.resetInput();
+    }
+  }
+
+  private handleFocus() {
+    this.isDropdownOpen = true;
+  }
+
+  private resetInput() {
+    // Reset the input-related properties
+    this.inputValue = '';
+    this.isDropdownOpen = false;
+    this.autoComplete.value = '';
+    this.autoComplete.handleFocus();
+  }
+
+  render() {
+    // Check if slots are present
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+
+    // Check if label and help text are present
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText,
+          'nile-chip--disabled': this.disabled,
+        })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div class="nile-chip">
+          ${this.tags.map(tag => html`
+            <nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
+              ${tag}
+            </nile-tag>
+          `)}
+          <div class="nile-chip__auto-complete">
+            <nile-auto-complete
+              .allMenuItems=${this.autoCompleteOptions}
+              .value=${this.inputValue}
+              ?isDropdownOpen=${this.isDropdownOpen}
+              .noBorder=${true}
+              openOnFocus
+              .placeholder=${this.placeholder}
+              @nile-input=${this.handleInputChange}
+              @keydown=${this.handleInputKeydown}
+              @nile-focus=${this.handleFocus}
+              @nile-complete=${this.handleSelect}
+            ></nile-auto-complete>
+          </div>
+          <slot
+            name="help-text"
+            part="form-control-help-text"
+            id="help-text"
+            class="form-control__help-text"
+            aria-hidden=${hasHelpText ? 'false' : 'true'}
+          >
+            ${this.helpText}
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default NileChip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-chip': NileChip;
+  }
+}

package/src/nile-dropdown/index.ts

@@ -0,0 +1 @@
+export { NileDropdown} from './nile-dropdown';

package/src/nile-dropdown/nile-dropdown.css.ts

@@ -0,0 +1,62 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Dropdown CSS
+ */
+export const styles = css`
+:host {
+    display: inline-block;
+  }
+
+  .dropdown::part(popup) {
+    z-index: 900;
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-size: 1rem;
+    font-weight: 400;
+    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+    border-radius: 0.25rem;
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(nile-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+
+export default [styles];

package/src/nile-dropdown/nile-dropdown.ts

@@ -0,0 +1,461 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-dropdown.css';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import {  query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { getTabbableBoundary } from '../internal/tabbable';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type NileButton from '../nile-button/nile-button';
+import type NileIconButton from '../nile-icon-button/nile-icon-button';
+import type { NileMenu } from '../nile-menu';
+import type { NilePopup } from '../nile-popup';
+import '../nile-popup';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-dropdown
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @dependency nile-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<nile-button>` element.
+ *
+ * @event nile-show - Emitted when the dropdown opens.
+ * @event nile-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event nile-hide - Emitted when the dropdown closes.
+ * @event nile-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+@customElement('nile-dropdown')
+export class NileDropdown extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @query('.dropdown') popup: NilePopup;
+  @query('.dropdown__trigger') trigger: HTMLSlotElement;
+  @query('.dropdown__panel') panel: HTMLSlotElement;
+
+
+  /**
+   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+   * inside of the viewport.
+   */
+  @property({ reflect: true }) placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'bottom-start';
+
+  /** Disables the dropdown so the panel will not open. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+   * dropdowns that allow for multiple interactions.
+   */
+  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;
+
+  /**
+   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+   * components that use a dropdown internally.
+   */
+  @property({ attribute: false }) containingElement?: HTMLElement;
+
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  @property({ type: Number }) distance = 0;
+
+
+  @property({ type: Boolean }) noOpenOnClick = false;
+
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+
+    // If the dropdown is visible on init, update its position
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    if (typeof trigger?.focus === 'function') {
+      trigger.focus();
+    }
+  }
+
+  getMenu() {
+    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'nile-menu') as
+      | NileMenu
+      | undefined;
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
+    // in case any ancestors are also listening for this key.
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleDocumentKeyDown(event: KeyboardEvent) {
+    // Close when escape or tab is pressed
+    if (event.key === 'Escape' && this.open) {
+      event.stopPropagation();
+      this.focusOnTrigger();
+      this.hide();
+      return;
+    }
+
+    // Handle tabbing
+    if (event.key === 'Tab') {
+      // Tabbing within an open menu should close the dropdown and refocus the trigger
+      if (this.open && document.activeElement?.tagName.toLowerCase() === 'nile-menu-item') {
+        event.preventDefault();
+        this.hide();
+        this.focusOnTrigger();
+        return;
+      }
+
+      // Tabbing outside of the containing element closes the panel
+      //
+      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+      setTimeout(() => {
+        const activeElement =
+          this.containingElement?.getRootNode() instanceof ShadowRoot
+            ? document.activeElement?.shadowRoot?.activeElement
+            : document.activeElement;
+
+        if (
+          !this.containingElement ||
+          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement
+        ) {
+          this.hide();
+        }
+      });
+    }
+  }
+
+  handleDocumentMouseDown(event: MouseEvent) {
+    // Close when clicking outside of the containing element
+    const path = event.composedPath();
+    if (this.containingElement && !path.includes(this.containingElement)) {
+      this.hide();
+    }
+  }
+
+  handlePanelSelect(event: any) {
+    const target = event.target as HTMLElement;
+
+    // Hide the dropdown when a menu item is selected
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
+      this.hide();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleTriggerClick() {
+    if(this.noOpenOnClick){
+      return;
+    }
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleTriggerKeyDown(event: KeyboardEvent) {
+    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+    // key again to hide the menu in case they don't want to make a selection.
+    // if (['Enter'].includes(event.key)) {
+    //   event.preventDefault();
+    //   this.handleTriggerClick();
+    //   return;
+    // }
+
+    const menu = this.getMenu();
+
+    if (menu) {
+      const menuItems = menu.getAllItems();
+      const firstMenuItem = menuItems[0];
+      const lastMenuItem = menuItems[menuItems.length - 1];
+
+      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+      // faster navigation.
+      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+        event.preventDefault();
+
+        // Show the menu if it's not already open
+        if (!this.open) {
+          this.show();
+        }
+
+        if (menuItems.length > 0) {
+          // Focus on the first/last menu item after showing
+          this.updateComplete.then(() => {
+            if (event.key === 'ArrowDown' || event.key === 'Home') {
+              menu.setCurrentItem(firstMenuItem);
+              firstMenuItem.focus();
+            }
+
+            if (event.key === 'ArrowUp' || event.key === 'End') {
+              menu.setCurrentItem(lastMenuItem);
+              lastMenuItem.focus();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  handleTriggerKeyUp(event: KeyboardEvent) {
+    // Prevent space from triggering a click event in Firefox
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <nile-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];
+    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
+    let target: HTMLElement;
+
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // nile buttons have to update the internal button so it's announced correctly by screen readers
+        case 'nile-button':
+        case 'nile-icon-button':
+          target = (accessibleTrigger as NileButton | NileIconButton).button;
+          break;
+
+        default:
+          target = accessibleTrigger;
+      }
+
+      target.setAttribute('aria-haspopup', 'true');
+      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+
+  /** Shows the dropdown panel. */
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'nile-after-show');
+  }
+
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return undefined;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'nile-after-hide');
+  }
+
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+
+  addOpenListeners() {
+    this.panel.addEventListener('nile-select', this.handlePanelSelect);
+    this.panel.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  removeOpenListeners() {
+    if (this.panel) {
+      this.panel.removeEventListener('nile-select', this.handlePanelSelect);
+      this.panel.removeEventListener('keydown', this.handleKeyDown);
+    }
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+
+    this.updateAccessibleTrigger();
+
+    if (this.open) {
+      // Show
+      this.emit('nile-show');
+      this.addOpenListeners();
+
+      await stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+
+      this.emit('nile-after-show');
+    } else {
+      // Hide
+      this.emit('nile-hide');
+      this.removeOpenListeners();
+
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+
+      this.emit('nile-after-hide');
+    }
+  }
+
+  render() {
+    return html`
+      <nile-popup
+        part="base"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        auto-size="both"
+        auto-size-padding="10"
+        class=${classMap({
+          dropdown: true,
+          'dropdown--open': this.open
+        })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <slot
+          part="panel"
+          class="dropdown__panel"
+          aria-hidden=${this.open ? 'false' : 'true'}
+          aria-labelledby="dropdown"
+        ></slot>
+      </nile-popup>
+    `;
+  }
+}
+
+setDefaultAnimation('dropdown.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});
+
+setDefaultAnimation('dropdown.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});
+
+export default NileDropdown;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-dropdown': NileDropdown;
+  }
+}

package/src/nile-icon-button/index.ts

@@ -0,0 +1 @@
+export { NileIconButton } from './nile-icon-button';