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

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

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

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

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

@@ -0,0 +1,142 @@
+/**
+* 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';
+
+/**
+ * SideBarActionMenuItem CSS
+ */
+export const styles = css`
+     :host {
+    box-sizing: border-box;
+    -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));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
+    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-semibold));
+    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));
+    letter-spacing: normal;
+    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
+    min-height:40px;
+    transition: 150ms fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));
+    display: inline-flex;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
+    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));
+    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  :host([active]) .menu-item {
+    background: var(--nile-colors-primary-100);
+  }
+
+
+ .menu-item {
+ 
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,204 @@
+/**
+ * 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,
+	CSSResultArray,
+	TemplateResult
+  } from 'lit';
+  import { customElement, property } from 'lit/decorators.js';
+  import { styles } from './nile-side-bar-action-menu-item.css';
+  import '../nile-icon';
+  import { classMap } from 'lit/directives/class-map.js';
+  import { query } from 'lit/decorators.js';
+  import { getTextContent } from '../internal/slot';
+  import { watch } from '../internal/watch';
+  import NileElement from '../internal/nile-element';
+  import type { CSSResultGroup } from 'lit';
+  
+  /**
+   * Nile side-bar-action-menu-item component.
+   *
+   * @tag nile-side-bar-action-menu-item
+   *
+   * @summary Menu items provide options for the user to pick from in a menu.
+   * @status stable
+   * @since 2.0
+   *
+   * @dependency nile-icon
+   *
+   * @slot - The menu item's label.
+   * @slot prefix - Used to prepend an icon or similar element to the menu item.
+   * @slot suffix - Used to append an icon or similar element to the menu item.
+   *
+   * @csspart base - The component's base wrapper.
+   * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+   * @csspart prefix - The prefix container.
+   * @csspart label - The menu item label.
+   * @csspart suffix - The suffix container.
+   * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu.
+   */
+  @customElement('nile-side-bar-action-menu-item')
+  export class NileSideBarActionMenuItem extends NileElement {
+	static styles: CSSResultGroup = styles;
+  
+	private cachedTextLabel: string;
+  
+	@query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  
+	@query('.menu-item') menuItem: HTMLElement;
+  
+	/** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+	@property() type: 'normal' | 'checkbox' = 'normal';
+  
+	/** Draws the item in a checked state. */
+	@property({ type: Boolean, reflect: true }) checked = false;
+  
+	/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+	@property() value = '';
+  
+	/** Draws the menu item in a disabled state, preventing selection. */
+	@property({ type: Boolean, reflect: true }) disabled = false;
+  
+	/** Indicates if this menu item has a submenu. */
+	@property({ type: Boolean, reflect: true }) hasSubMenu = false;
+  
+	connectedCallback() {
+	  super.connectedCallback();
+	  this.handleHostClick = this.handleHostClick.bind(this);
+	  this.addEventListener('click', this.handleHostClick);
+	}
+  
+	disconnectedCallback() {
+	  super.disconnectedCallback();
+	  this.removeEventListener('click', this.handleHostClick);
+	}
+  
+	private handleDefaultSlotChange() {
+	  const textLabel = this.getTextLabel();
+  
+	  // Ignore the first time the label is set
+	  if (typeof this.cachedTextLabel === 'undefined') {
+		this.cachedTextLabel = textLabel;
+		return;
+	  }
+  
+	  // When the label changes, emit a slotchange event so parent controls see it
+	  if (textLabel !== this.cachedTextLabel) {
+		this.cachedTextLabel = textLabel;
+		this.emit('slotchange');
+	  }
+	}
+  
+	private handleHostClick(event: MouseEvent) {
+	  // Prevent the click event from being emitted when the item is disabled
+	  if (this.disabled) {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	  }
+	}
+  
+	@watch('checked')
+	handleCheckedChange() {
+	  // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+	  if (this.checked && this.type !== 'checkbox') {
+		this.checked = false;
+		console.error(
+		  'The checked attribute can only be used on menu items with type="checkbox"',
+		  this
+		);
+		return;
+	  }
+  
+	  // Only checkbox types can receive the aria-checked attribute
+	  if (this.type === 'checkbox') {
+		this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+	  } else {
+		this.removeAttribute('aria-checked');
+	  }
+	}
+  
+	@watch('disabled')
+	handleDisabledChange() {
+	  this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+	}
+  
+	@watch('type')
+	handleTypeChange() {
+	  if (this.type === 'checkbox') {
+		this.setAttribute('role', 'menuitemcheckbox');
+		this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+	  } else {
+		this.setAttribute('role', 'menuitem');
+		this.removeAttribute('aria-checked');
+	  }
+	}
+  
+	/** Returns a text label based on the contents of the menu item's default slot. */
+	getTextLabel() {
+	  return getTextContent(this.defaultSlot);
+	}
+  
+	render() {
+	  return html`
+		<div
+		  part="base"
+		  class=${classMap({
+			'menu-item': true,
+			'menu-item--checked': this.checked,
+			'menu-item--disabled': this.disabled,
+			'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
+		  })}
+		>
+		  ${this.checked
+			? html`
+				<span part="checked-icon" class="menu-item__check">
+				  <nile-icon
+					name="var(--nile-icon-tick, var(--ng-icon-check))"
+					method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+					library="system"
+					color="green"
+					aria-hidden="true"
+				  ></nile-icon>
+				</span>
+			  `
+			: ``}
+  
+		  <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+  
+		  <slot
+			part="label"
+			class="menu-item__label"
+			@slotchange=${this.handleDefaultSlotChange}
+		  ></slot>
+  
+		  <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+  
+		  ${this.hasSubMenu
+			? html` <span part="submenu-icon" class="menu-item__chevron">
+				<nile-icon
+				  name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+				  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+				  library="system"
+				  aria-hidden="true"
+				></nile-icon>
+			  </span>`
+			: ``}
+		</div>
+	  `;
+	}
+  }
+  
+  export default NileSideBarActionMenuItem;
+  
+  declare global {
+	interface HTMLElementTagNameMap {
+	  'nile-side-bar-action-menu-item': NileSideBarActionMenuItem;
+	}
+  }
+  

package/src/nile-side-bar-expand/index.ts

@@ -0,0 +1 @@
+export { NileSideBarExpand } from './nile-side-bar-expand';

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

@@ -0,0 +1,47 @@
+/**
+* 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';
+
+/**
+ * SideBarExpand CSS
+ */
+export const styles = css`
+	 :host {
+  display: inline-flex;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+.expand-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+nile-tooltip::part(body) {
+    width: max-content;
+    height: max-content;
+    padding: var(--nile-spacing-sm);
+    overflow-x: hidden;
+  }
+
+ 
+
+`;
+
+export default [styles];

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

@@ -0,0 +1,69 @@
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-expand.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile side-bar-expand component.
+ *
+ * @tag nile-side-bar-expand
+ *
+ */
+@customElement('nile-side-bar-expand')
+export class NileSideBarExpand extends NileElement {
+  @property({ type: Boolean, reflect: true })
+  collapsed: boolean = false;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Sync with parent sidebar if it exists
+    const sidebar = this.closest('nile-side-bar');
+    if (sidebar) {
+      this.collapsed = sidebar.hasAttribute('collapsed');
+    }
+  }
+
+  private toggleSidebar() {
+    const sidebar = this.closest('nile-side-bar');
+    if (!sidebar) return;
+
+    const isCollapsed = sidebar.hasAttribute('collapsed');
+    if (isCollapsed) {
+      sidebar.removeAttribute('collapsed');
+      this.collapsed = false;
+    } else {
+      sidebar.setAttribute('collapsed', '');
+      this.collapsed = true;
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <button class="expand-btn" @click=${this.toggleSidebar}>
+        ${this.collapsed
+          ? html`
+              <nile-tooltip placement="right" hoist content="Expand Sidebar">
+                <span part="icon"><nile-icon name="moveright"></nile-icon></span>
+              </nile-tooltip>
+            `
+          : html`
+              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
+                <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
+              </nile-tooltip>
+            `}
+      </button>
+    `;
+  }
+}
+
+export default NileSideBarExpand;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-expand': NileSideBarExpand;
+  }
+}

package/src/nile-side-bar-footer/index.ts

@@ -0,0 +1 @@
+export { NileSideBarFooter } from './nile-side-bar-footer';