@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

package/src/nile-side-bar-action/nile-side-bar-action.ts

@@ -1,367 +0,0 @@
-/**
- * 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 { html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './nile-side-bar-action.css';
-import NileElement from '../internal/nile-element';
-
-import { animateTo, stopAnimations } from '../internal/animate';
-import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
-import { getTabbableBoundary } from '../internal/tabbable';
-import { waitForEvent } from '../internal/event';
-import { watch } from '../internal/watch';
-
-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 side-bar-action component.
- *
- * @tag nile-side-bar-action
- *
- * @slot trigger - The clickable trigger (icon/button).
- * @slot - The dropdown panel content (menu, custom content).
- *
- * @event nile-show - Fired when dropdown opens.
- * @event nile-after-show - Fired after dropdown + animations.
- * @event nile-hide - Fired when dropdown closes.
- * @event nile-after-hide - Fired after dropdown closes + animations.
- */
-@customElement('nile-side-bar-action')
-export class NileSideBarAction extends NileElement {
-  static styles: CSSResultArray = [styles];
-
-  @query('.dropdown') popup: NilePopup;
-  @query('.dropdown__trigger') trigger: HTMLSlotElement;
-  @query('.dropdown__panel') panel: HTMLSlotElement;
-
-  /** Whether the dropdown is open */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** Preferred placement relative to trigger */
-  @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';
-
-  /** Disable interaction */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Keep open on select */
-  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true })
-  stayOpenOnSelect = false;
-
-  /** External containing element (default: self) */
-  @property({ attribute: false }) containingElement?: HTMLElement;
-
-  /** Offsets */
-  @property({ type: Number }) distance = 0;
-  @property({ type: Number }) skidding = 0;
-
-  /** Sync size with trigger */
-  @property() sync: 'width' | 'height' | 'both';
-
-  /** Hoist above scroll containers */
-  @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;
-    }
-    this.emit('nile-init');
-  }
-
-  firstUpdated() {
-    this.panel.hidden = !this.open;
-    if (this.open) {
-      this.addOpenListeners();
-      this.popup.active = true;
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeOpenListeners();
-    this.hide();
-    this.emit('nile-destroy');
-  }
-
-  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) {
-    if (this.open && event.key === 'Escape') {
-      event.stopPropagation();
-      this.hide();
-      this.focusOnTrigger();
-    }
-  }
-
-  handleDocumentKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && this.open) {
-      event.stopPropagation();
-      this.focusOnTrigger();
-      this.hide();
-      return;
-    }
-    if (event.key === 'Tab') {
-      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) {
-    const path = event.composedPath();
-    if (this.containingElement && !path.includes(this.containingElement)) {
-      this.hide();
-    }
-  }
-
-  handlePanelSelect(event: any) {
-    const target = event.target as HTMLElement;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
-      this.hide();
-      this.focusOnTrigger();
-    }
-  }
-
-  handleTriggerClick() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-      this.focusOnTrigger();
-    }
-  }
-
-  handleTriggerKeyDown(event: KeyboardEvent) {
-    const menu = this.getMenu();
-    if (menu) {
-      const menuItems = menu.getAllItems();
-      const firstMenuItem = menuItems[0];
-      const lastMenuItem = menuItems[menuItems.length - 1];
-
-      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-        event.preventDefault();
-        if (!this.open) this.show();
-        if (menuItems.length > 0) {
-          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) {
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-  }
-
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-
-  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()) {
-        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');
-    }
-  }
-
-  /** Public methods */
-  async show() {
-    if (this.open) return;
-    this.open = true;
-    return waitForEvent(this, 'nile-after-show');
-  }
-
-  async hide() {
-    if (!this.open) return;
-    this.open = false;
-    return waitForEvent(this, 'nile-after-hide');
-  }
-
-  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) {
-      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 {
-      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(): TemplateResult {
-    return html`
-      <nile-popup
-        part="base"
-        id="sidebar-action-dropdown"
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
-        sync=${this.sync}
-        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="sidebar-action-dropdown"
-        ></slot>
-      </nile-popup>
-    `;
-  }
-}
-
-/* Default animations */
-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 NileSideBarAction;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-action': NileSideBarAction;
-  }
-}

package/src/nile-side-bar-action-menu/index.ts

@@ -1 +0,0 @@
-export { NileSideBarActionMenu } from './nile-side-bar-action-menu';

package/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.ts

@@ -1,75 +0,0 @@
-/**
-* 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';
-
-/**
- * SideBarActionMenu CSS
- */
-export const styles = css`
-   :host {
-    display: block;
-    position: relative;
-    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));
-    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));
-    overflow: hidden;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-    height: 100%;
-    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
-      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-    /* overscroll-behavior: none; */
-    /* -ms-overflow-style: none; */
-    /* scrollbar-width: none; */
-  }
-
-  .search__wrapper {
-    box-sizing: border-box;
-    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));
-    position: sticky;
-    z-index: 999;
-    top: 0px;
-    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
-    height: 64px;
-  }
-
-  .menu__items-wrapper {
-    overflow: auto;
-    max-height: var(--auto-size-available-height);
-  }
-
-  ::slotted(nile-divider) {
-    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
-  }
-
-  .menu__footer {
-    display: var(--nile-display-flex, var(--ng-display-none)); 
-    /* No need to tokenize below - token not required*/
-    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
-    align-items: stretch;
-    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: 180%;
-    letter-spacing: normal;
-    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));
-    min-height: 40px;
-    transition: 150ms fill;
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
-    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));
-  }
-
-  .menu__footer:hover {
-    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));
-  }
-`;
-
-export default [styles];

package/src/nile-side-bar-action-menu/nile-side-bar-action-menu.ts

@@ -1,239 +0,0 @@
-/**
- * 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, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { query } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
-import type NileMenuItem from '../nile-menu-item/nile-menu-item';
-import { styles } from './nile-side-bar-action-menu.css';
-import { HasSlotController } from '../internal/slot';
-
-/**
- * A nile-side-bar-action-menu element.
- * @summary Menus provide a list of options for the user to choose from.
- *
- * @slot - The menu's content, including menu items, menu labels, and dividers.
- *
- * @event nile-select - Emitted when a menu item is selected.
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('nile-side-bar-action-menu')
-export class NileSideBarActionMenu extends NileElement {
-  static styles: CSSResultGroup = styles;
-  @state() searchValue: string = '';
-  @state() searchWidth: number = 0;
-
-  @property({ type: Boolean, reflect: true }) searchEnabled = false;
-  @property({ type: Boolean, reflect: true }) customSearch = false;
-
-  @property({ type: Boolean }) showNoResults: boolean = false;
-
-  @property({ type: Boolean }) allowSpaceKey: boolean = false;
-
-  @property({ type: String }) noResultsMessage: string = 'No results found';
-
-  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;
-
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    'menu__footer',
-    'menu__header'
-  );
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'menu');
-  }
-
-  private handleClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const item = target.closest('nile-menu-item');
-
-    if (item?.hasSubMenu) {
-      return;
-    }
-
-    if (!item || item.disabled) {
-      return;
-    }
-
-    if (item.type === 'checkbox') {
-      item.checked = !item.checked;
-    }
-
-    this.emit('nile-select', { value: item.value });
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      const item = this.getCurrentItem();
-      event.preventDefault();
-      item?.click();
-    }
-
-    if (!this.allowSpaceKey && event.key === ' ') {
-      event.preventDefault();
-    }
-
-    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-      const items = this.getAllItems();
-      const activeItem = this.getCurrentItem();
-      let index = activeItem ? items.indexOf(activeItem) : 0;
-
-      if (items.length > 0) {
-        event.preventDefault();
-
-        if (event.key === 'ArrowDown') index++;
-        else if (event.key === 'ArrowUp') index--;
-        else if (event.key === 'Home') index = 0;
-        else if (event.key === 'End') index = items.length - 1;
-
-        if (index < 0) index = items.length - 1;
-        if (index > items.length - 1) index = 0;
-
-        this.setCurrentItem(items[index]);
-        items[index].focus();
-      }
-    }
-  }
-
-  private handleMouseDown(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-
-    if (this.isMenuItem(target)) {
-      this.setCurrentItem(target as NileMenuItem);
-    }
-  }
-
-  private handleSlotChange() {
-    const items = this.getAllItems();
-
-    if (items.length > 0) {
-      this.setCurrentItem(items[0]);
-    }
-  }
-
-  private isMenuItem(item: HTMLElement) {
-    return (
-      item.tagName.toLowerCase() === 'nile-menu-item' ||
-      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(
-        item.getAttribute('role') ?? ''
-      )
-    );
-  }
-
-  getAllItems() {
-    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
-      (el: HTMLElement) => {
-        if (!this.isMenuItem(el)) {
-          return false;
-        }
-        return true;
-      }
-    ) as NileMenuItem[];
-  }
-
-  getCurrentItem() {
-    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
-  }
-
-  setCurrentItem(item: NileMenuItem) {
-    const items = this.getAllItems();
-    items.forEach(i => {
-      i.setAttribute('tabindex', i === item ? '0' : '-1');
-    });
-  }
-
-  private handleSearchChange(e: any) {
-    let items = this.getAllItems();
-    let searchValue = e.target.value;
-    if (this.customSearch) {
-      this.emit('nile-search-value', { value: searchValue });
-      return;
-    }
-
-    let counter = 0;
-    items.map(curr_item => {
-      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
-      if (
-        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())
-      ) {
-        curr_item.style.display = 'block';
-        counter++;
-      } else {
-        curr_item.style.display = 'none';
-      }
-    });
-    this.showNoResults = counter === 0;
-  }
-
-  render() {
-    return html`
-      <slot name="menu__pre-header" part="menu__pre-header" @click=${(e: Event) => {
-            e.stopPropagation();
-          }}></slot>
-      ${this.searchEnabled
-        ? html`<div class="search__wrapper" part="search__wrapper">
-            <nile-input
-              size="medium"
-              .value=${this.searchValue}
-              placeholder="Search..."
-              @nile-input=${this.handleSearchChange}
-              part="menu__input"
-              clearable
-            >
-              <nile-icon
-                name="var(--nile-icon-search, var(--ng-icon-search-lg))"
-                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-                slot="suffix"
-              ></nile-icon>
-            </nile-input>
-          </div>`
-        : html``}
-      <div part="menu__items-wrapper" class="menu__items-wrapper">
-        ${this.showNoResults
-          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
-          : ''}
-
-        <slot
-          name="menu__header"
-          part="menu__header"
-          @click=${(e: Event) => {
-            e.stopPropagation();
-          }}
-        ></slot>
-        <slot
-          class="menu__item-wrapper"
-          @slotchange=${this.handleSlotChange}
-          @click=${this.handleClick}
-          @keydown=${this.handleKeyDown}
-          @mousedown=${this.handleMouseDown}
-        ></slot>
-        ${this.hasSlotController.test('menu__footer')
-          ? html` <slot
-              part="menu__footer"
-              name="menu__footer"
-              class="menu__footer"
-            ></slot>`
-          : null}
-      </div>
-    `;
-  }
-}
-
-export default NileSideBarActionMenu;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-action-menu': NileSideBarActionMenu;
-  }
-}

package/src/nile-side-bar-action-menu-item/index.ts

@@ -1 +0,0 @@
-export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';