@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

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

@@ -1,202 +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,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit';
-import { customElement, property } 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;
-
-  /** Draws the item in a checked state. */
-  @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 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': 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"
-                  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 NileMenuItem;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-menu-item': NileMenuItem;
-  }
-}

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

@@ -1,122 +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';
-
-/**
- * Option_2 CSS
- */
-export const styles = css`
-  :host {
-    display: block;
-    user-select: none;
-    -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(:focus) {
-    outline: none;
-  }
-
-  .option {
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
-    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-primary-900));
-    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
-    transition: 150ms fill;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    cursor: pointer;
-    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
-  }
-
-  .option--single-select {
-    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
-  }
-
-  .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
-  }
-
-  .option--current,
-  .option--current.option--disabled {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
-    opacity: 1;
-    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
-  }
-
-  .option--disabled {
-    outline: none;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .option__label {
-    flex: 1 1 auto;
-    display: inline-block;
-    line-height: 1.4;
-    word-break: break-all;
-  }
-
-  .option .option__check {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-    padding-inline-end: var(--nile-spacing-xs);
-  }
-
-  .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: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
-  }
-
-  .option__suffix::slotted(*) {
-    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
-  }
-
-  :host(:not([aria-selected='true'])) .option .option__suffix{
-    display: var(--nile-display-block, var(--ng-display-none));
-  }
-
-  .option--checkbox{
-    pointer-events: none;
-    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    width:auto;
-    display:var(--nile-display-inline-block, var(--ng-display-none));
-  }
-
-
-  @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

@@ -1,207 +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, CSSResultArray, TemplateResult } from 'lit';
-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, PropertyValues } from 'lit';
-import NileElement from '../internal/nile-element';
-import '../nile-checkbox';
-
-/**
- * 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() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
-  @property({ type: Boolean, reflect: true, attribute: true }) hidden = false; // the option is hidden
-  @state() isMultipleSelect = false;
-
-  /**
-   * 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 = '';
-
-  @property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;
-
-  /** Draws the option in a disabled state, preventing selection. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Indicates whether the option is selected. */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  /* used to pass group name to the option, so that grouped options can be shown */
-  @property({ type: String, reflect: true, attribute: true }) groupName: string = '';
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
-
-    this.checkIfMultipleSelect();
-  }
-
-  checkIfMultipleSelect() {
-    // Find the closest parent 'nile-select' element
-    const parentSelect = this.closest('nile-select');
-    
-    // Check if the parent has the 'multiple' attribute
-    if (parentSelect && parentSelect.hasAttribute('multiple')) {
-      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {
-        this.isMultipleSelect = true;
-      } else if (parentSelect.getAttribute('multiple') === 'true') {
-        this.isMultipleSelect = true;
-      } else {
-        this.isMultipleSelect = false;
-      }
-    } else {
-      this.isMultipleSelect = this.showCheckbox;
-    }
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    this.checkIfMultipleSelect();
-  }
-
-  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 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() {
-    // Search for a label element inside the component
-    const labelElement = this.querySelector('label');
-
-    // If a label element is found, return its text content
-    if (labelElement) {
-      return labelElement.textContent?.trim() ?? '';
-    }
-
-    // If no label element is found, return the existing behavior
-    return (this.textContent ?? '').trim();
-  }
-
-  render() {
-    return html`
-      ${!this.hidden
-        ? html` <div
-            part="base"
-            class=${classMap({
-              option: true,
-              'option--single-select': !this.isMultipleSelect,
-              'option--current': this.selected && !this.isMultipleSelect,
-              'option--disabled': this.disabled,
-              'option--selected': this.selected && !this.isMultipleSelect,
-              'option--hover': this.hasHover,
-            })}
-            @mouseenter=${this.handleMouseEnter}
-            @mouseleave=${this.handleMouseLeave}
-          >
-
-          ${this.isMultipleSelect ? html`<nile-checkbox part="checkbox" class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
-
-            <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-option-group/index.ts

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

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

@@ -1,60 +0,0 @@
-/**
-* Copyright Aquera Inc 2025
-*
-* 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';
-
-/**
- * OptionHeader CSS
- */
-export const styles = css`
-	.option-group-header {
-		height: 40px;
-		display: flex;
-		align-items: center;
-		padding: 0px 12px;
-		background-color: var(--nile-colors-dark-200);
-		color: var(--nile-colors-dark-900);
-		font-feature-settings: 'liga' off, 'clig' off;
-		font-family: 'colfax-medium';
-		font-size: 12px;
-		font-weight: 500;
-		width: 100%;
-		box-sizing: border-box;
-		justify-content: space-between;
-	}
-
-	.content-container {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-	}
-
-	.gap-18px {
-		gap: 14px;
-	}
-
-	.option-group-prefix,
-  .option-group-suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .option-group-prefix::slotted(*) {
-    margin-inline-end: 0.5rem;
-  }
-
-  .option-group-suffix::slotted(*) {
-    margin-inline-start: 0.5rem;
-  }
-
-  :host(.nile-group-hidden)::part(option-group-header) {
-	display: none !important;
-  }
-`;
-
-export default [styles];

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

@@ -1,25 +0,0 @@
-export interface IconData {
-  name: string;
-  size?: string;
-  color?: string;
-  method?: string;
-}
-
-export interface ImageData {
-  src?: string;
-  height?: string;
-  width?: string;
-}
-
-export interface PrefixSuffixData {
-  icon?: IconData;
-  prefixText?: string;
-  suffixText?: string;
-  image?: ImageData;
-}
-
-export interface OptionGroupData {
-  prefix?: PrefixSuffixData;
-  suffix?: PrefixSuffixData;
-  textContent?: string;
-}

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

@@ -1,84 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * 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-option-group.css';
-import NileElement from '../internal/nile-element';
-import { OptionGroupData } from './nile-option-group.interface';
-
-@customElement('nile-option-group')
-export class NileOptionGroup extends NileElement {
-
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	@property({type: String, reflect: true, attribute: true}) name: string = "";
-	@property({ type: Object, reflect: true, attribute: true}) data: OptionGroupData | null = null;
-
-	private checkForImageOrIcon() {
-		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
-	}
-
-	private normalizeImageDimension(value?: string | number): string {
-		if (value === undefined || value === null || value === "") {
-			return "20";
-		}
-		
-		const dimension = Number(value);
-		if (isNaN(dimension) || dimension <= 0) {
-			return "20";
-		}	
-		return dimension > 40 ? "25" : dimension.toString();
-	}	
-
-	public render(): TemplateResult {
-		return html`
-			<div part="option-group-header" class="option-group-header">
-				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
-					<!-- prefix content -->
-					${
-						this.data?.prefix?.icon?.name
-						? html`<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method || "fill"}"></nile-icon>`
-						: this.data?.prefix?.prefixText
-							? html`<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`
-							: this.data?.prefix?.image?.src
-								? html`<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
-								: html`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`
-					}
-
-					<!-- main content -->
-					${
-						this.data?.textContent
-						? html`<span part="content-text">${this.data?.textContent}</span>`
-						: html`<slot part="content"></slot>`
-					}
-				</div>
-
-				<!-- suffix content -->
-				${
-					this.data?.suffix?.icon?.name
-					? html`<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method || "fill"}"></nile-icon>`
-					: this.data?.suffix?.suffixText
-						? html`<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`
-						: this.data?.suffix?.image?.src
-							? html`<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
-							: html`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`
-				}
-			</div>
-			`;
-	}
-}
-
-export default NileOptionGroup;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-option-group': NileOptionGroup;
-  }
-}