@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

@@ -0,0 +1,55 @@
+import { css } from 'lit';
+
+export const styles = css`
+ :host {
+    display: inline-block;
+    -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));
+  }
+
+  .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: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));
+    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+ 
+  ::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-side-bar-action/nile-side-bar-action.ts

@@ -0,0 +1,398 @@
+/**
+ * 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;
+
+  @property({ reflect: true }) triggerDropdown: 'click' | 'hover' = 'click';
+  private hoverTimeout: number | undefined;
+
+  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);
+    this.handleTriggerMouseEnter = this.handleTriggerMouseEnter.bind(this);
+    this.handleTriggerMouseLeave = this.handleTriggerMouseLeave.bind(this);
+  
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+    this.emit('nile-init');
+  }
+  
+ 
+  
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+  
+    if (this.triggerDropdown === 'hover') {
+      const triggerEl = this.trigger;
+      if (triggerEl) {
+        triggerEl.addEventListener('mouseenter', this.handleTriggerMouseEnter);
+        triggerEl.addEventListener('mouseleave', this.handleTriggerMouseLeave);
+      }
+      if (this.panel) {
+        this.panel.addEventListener('mouseenter', this.handleTriggerMouseEnter);
+        this.panel.addEventListener('mouseleave', this.handleTriggerMouseLeave);
+      }
+    } else {
+    }
+  
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+  
+  handleTriggerMouseEnter() {
+    clearTimeout(this.hoverTimeout);
+    this.show();
+  }
+  
+  handleTriggerMouseLeave() {
+    clearTimeout(this.hoverTimeout);
+    this.hoverTimeout = window.setTimeout(() => this.hide(), 200);
+  }
+
+  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

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

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

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