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

package/src/nile-menu-item/nile-menu-item.ts

@@ -0,0 +1,171 @@
+/**
+ * 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-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 icon component.
+ *
+ * @tag nile-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 (not yet implemented).
+ */
+
+@customElement('nile-menu-item')
+export class NileMenuItem 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;
+
+  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', { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+
+  private handleHostClick(event: MouseEvent) {
+    // Prevent the click event from being emitted when the button is disabled or loading
+    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': false // reserved for future use
+        })}
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <nile-icon name="check" library="system" 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>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <nile-icon name="chevron-right" library="system" aria-hidden="true"></nile-icon>
+        </span>
+      </div>
+    `;
+  }
+}
+
+export default NileMenuItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-menu-item': NileMenuItem;
+  }
+}

package/src/nile-option/index.ts

@@ -0,0 +1 @@
+export { NileOption } from './nile-option';

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

@@ -0,0 +1,97 @@
+/**
+ * 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';
+
+/**
+ * Option_2 CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    transition: 150ms fill;
+    cursor: pointer;
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: hsl(0, 0%, 0%);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: #005ea6;
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: 1.4;
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: 0.25rem;
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-option/nile-option.ts

@@ -0,0 +1,172 @@
+/**
+ * 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, CSSResultArray, TemplateResult } from 'lit-element';
+import { styles } from './nile-option.css';
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-option
+ *
+ */
+
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @status stable
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The option'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 checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+
+@customElement('nile-option')
+export class NileOption extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private cachedTextLabel: string;
+
+  @query('.option__label') defaultSlot: HTMLSlotElement;
+
+  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
+  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+  @state() hidden = false; // the option is hidden
+
+  /**
+   * The option's value. When selected, the containing form control will receive this value. The value must be unique
+   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+   * multiple values.
+   */
+  @property({ reflect: true }) value = '';
+
+  /** Draws the option in a disabled state, preventing selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+  }
+
+  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', {
+        bubbles: true,
+        composed: false,
+        cancelable: false,
+      });
+    }
+  }
+
+  private handleMouseEnter() {
+    this.hasHover = true;
+  }
+
+  private handleMouseLeave() {
+    this.hasHover = false;
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('selected')
+  handleSelectedChange() {
+    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+  }
+
+  @watch('value')
+  handleValueChange() {
+    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
+    // instead of requiring them to cast the value to a string.
+    if (typeof this.value !== 'string') {
+      this.value = String(this.value);
+    }
+
+    if (this.value.includes(' ')) {
+      console.error(
+        `Option values cannot include a space. All spaces have been replaced with underscores.`,
+        this
+      );
+      this.value = this.value.replace(/ /g, '_');
+    }
+  }
+
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    return (this.textContent ?? '').trim();
+  }
+
+  render() {
+    return html`
+      ${!this.hidden
+        ? html` <div
+            part="base"
+            class=${classMap({
+              option: true,
+              'option--current': this.current,
+              'option--disabled': this.disabled,
+              'option--selected': this.selected,
+              'option--hover': this.hasHover,
+            })}
+            @mouseenter=${this.handleMouseEnter}
+            @mouseleave=${this.handleMouseLeave}
+          >
+            <nile-icon
+              part="checked-icon"
+              class="option__check"
+              name="tick"
+              color=${this.current ? '#005EA6' : ''}
+              aria-hidden="true"
+            ></nile-icon>
+            <slot part="prefix" name="prefix" class="option__prefix"></slot>
+            <slot
+              part="label"
+              class="option__label"
+              @slotchange=${this.handleDefaultSlotChange}
+            ></slot>
+            <slot part="suffix" name="suffix" class="option__suffix"></slot>
+          </div>`
+        : ''}
+    `;
+  }
+}
+
+export default NileOption;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-option': NileOption;
+  }
+}

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

@@ -13,7 +13,7 @@ import {css} from 'lit-element';
 export const styles = css`
 
 :host {
-    --arrow-color: var(--sl-color-neutral-1000);
+    --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;
 
     /*

package/src/nile-popup/nile-popup.ts

@@ -355,7 +355,6 @@ export class NilePopup extends NileElement {
     //
     // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.
     //
-    // More info: https://github.com/shoelace-style/shoelace/issues/1135
     //
     const getOffsetParent =
       this.strategy === 'absolute'

package/src/nile-select/index.ts

@@ -0,0 +1 @@
+export { NileSelect } from './nile-select';