@aquera/nile-elements 0.0.80 → 0.0.82

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

@@ -1,19 +1,17 @@
 /**
-* 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.
-*/
+ * 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';
+import { css } from 'lit-element';
 
 /**
  * Popup CSS
  */
 export const styles = css`
-
-
-:host {
+  :host {
     --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;
 
@@ -22,7 +20,9 @@ export const styles = css`
      * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
      */
     --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
-    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+    --arrow-padding-offset: calc(
+      var(--arrow-size-diagonal) - var(--arrow-size)
+    );
 
     display: contents;
   }
@@ -50,6 +50,10 @@ export const styles = css`
     rotate: 45deg;
     background: var(--arrow-color);
     z-index: -1;
+    /* Added border and box-shadow to arrow */
+    border: solid 1px hsl(240 5.9% 90%);
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
 `;
 

package/src/nile-progress-bar/nile-progress-bar.test.ts

@@ -0,0 +1,55 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-progress-bar'; // Make sure to import the component to be tested
+import { NileProgressBar } from './nile-progress-bar';
+
+describe('NileProgressBar', () => {
+  it('should have a default value of 0', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar></nile-progress-bar>`);
+    expect(el.value).to.equal(0);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('0%');
+  });
+
+  it('should set and display the provided value', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="50"></nile-progress-bar>`);
+    expect(el.value).to.equal(50);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('50%');
+  });
+
+  it('should handle boundary value 0%', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="0"></nile-progress-bar>`);
+    expect(el.value).to.equal(0);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('0%');
+  });
+
+  it('should handle boundary value 100%', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="100"></nile-progress-bar>`);
+    expect(el.value).to.equal(100);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('100%');
+  });
+
+  it('should handle values greater than 100', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="150"></nile-progress-bar>`);
+    expect(el.value).to.equal(150);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('150%');
+  });
+
+  it('should handle negative values', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="-50"></nile-progress-bar>`);
+    expect(el.value).to.equal(-50);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('');
+  });
+
+  it('should update the value dynamically', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="20"></nile-progress-bar>`);
+    el.value = 80;
+    await el.updateComplete;
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('80%');
+  });
+});

package/src/nile-radio/nile-radio.test.ts

@@ -0,0 +1,81 @@
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
+import './nile-radio';
+import { NileRadio } from './nile-radio';
+
+describe('NileRadio', () => {
+  it('should have the correct default properties', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.checked).to.be.false;
+    expect(el.disabled).to.be.false;
+    expect(el.size).to.equal('medium');
+  });
+
+  it('should reflect the disabled attribute', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    expect(el.disabled).to.be.true;
+    expect(el.hasAttribute('aria-disabled')).to.be.true;
+  });
+
+  it('should update aria-checked when checked changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-checked')).to.equal('true');
+  });
+
+  it('should toggle checked state on click when not disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not toggle checked state on click when disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.false;
+  });
+
+  it('should emit nile-blur event on blur', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const blurEvent = new Promise(resolve => el.addEventListener('nile-blur', resolve));
+    el.dispatchEvent(new Event('blur'));
+    const event = await blurEvent;
+    expect(event).to.exist;
+  });
+
+  it('should emit nile-focus event on focus', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const focusEvent = new Promise(resolve => el.addEventListener('nile-focus', resolve));
+    el.dispatchEvent(new Event('focus'));
+    const event = await focusEvent;
+    expect(event).to.exist;
+  });
+
+  it('should apply the correct classes based on state', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    el.disabled = true;
+    el.size = 'medium';
+    await el.updateComplete;
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base!.classList.contains('radio--checked')).to.be.true;
+    expect(base!.classList.contains('radio--disabled')).to.be.true;
+    expect(base!.classList.contains('radio--medium')).to.be.true;
+  });
+
+  it('should update aria-disabled when disabled changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.disabled = true;
+    await elementUpdated(el);
+    expect(el.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('should set initial attributes correctly', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.getAttribute('role')).to.equal('radio');
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    expect(el.getAttribute('aria-disabled')).to.equal('false');
+  });
+});

package/src/nile-select/nile-select.ts

@@ -149,6 +149,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
+  @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
+
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
   @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
@@ -1248,7 +1250,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                       size="small"
                       clearable
                       .value=${this.searchValue}
-                      placeholder="Search..."
+                      placeholder="${this.internalSearchPlaceHolder}"
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"

package/src/nile-slide-toggle/nile-slide-toggle.test.ts

@@ -0,0 +1,61 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-slide-toggle';
+import { NileSlideToggle } from './nile-slide-toggle';
+
+describe('NileSlideToggle', () => {
+    it('should default to unchecked', async () => {
+      const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+      expect(el.isChecked).to.be.false;
+    });
+
+    it('should toggle isChecked property when clicked', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(el.isChecked).to.be.true;
+        input.click();
+        expect(el.isChecked).to.be.false;
+    });
+
+    it('should display the label and sublabel', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle label="Test Label" sublabel="Test Sublabel"></nile-slide-toggle>`);
+        const label = el.shadowRoot!.querySelector('.nile-slide-toggle__label span')!;
+        const sublabel = el.shadowRoot!.querySelector('.nile-slide-toggle__sublabel')!;
+        expect(label.textContent).to.equal('Test Label');
+        expect(sublabel.textContent).to.equal('Test Sublabel');
+    });
+
+    it('should apply disabled class when disabled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle disabled></nile-slide-toggle>`);
+        const toggleContainer = el.shadowRoot!.querySelector('.nile-slide-toggle')!;
+        expect(toggleContainer.classList.contains('nile-slide--disabled')).to.be.true;
+    });
+
+    it('should emit a change event with correct detail when toggled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        let changeDetail = null;
+        el.addEventListener('change', (e: Event) => {
+          changeDetail = (e as CustomEvent).detail;
+        });
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: true });
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: false });
+    });
+
+    it('should show help text when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle help-text="Help text here"></nile-slide-toggle>`);
+        const helpText = el.shadowRoot!.querySelector('nile-form-help-text');
+        expect(helpText).to.exist;
+        expect(helpText?.textContent).to.equal('Help text here');
+    });
+
+    it('should show error message when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle error-message="Error message here"></nile-slide-toggle>`);
+        const errorMessage = el.shadowRoot!.querySelector('nile-form-error-message');
+        expect(errorMessage).to.exist;
+        expect(errorMessage?.textContent).to.equal('Error message here');
+    });
+})

package/src/nile-split-panel/index.ts

@@ -0,0 +1 @@
+export { NileSplitPanel } from './nile-split-panel';

package/src/nile-split-panel/nile-split-panel.css.ts

@@ -0,0 +1,101 @@
+/**
+* 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';
+
+/**
+ * SplitPanel CSS
+ */
+export const styles = css`
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    box-sizing: border-box;
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-split-panel/nile-split-panel.ts

@@ -0,0 +1,285 @@
+/**
+ * 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-split-panel.css';
+import NileElement from '../internal/nile-element';
+
+
+import { clamp } from '../internal/math';
+import { customElement, property, query } from 'lit/decorators.js';
+import { drag } from '../internal/drag';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+@customElement('nile-split-panel')
+export class NileSplitPanel extends NileElement {
+
+	static styles: CSSResultGroup = styles;
+
+  private cachedPositionInPixels: number;
+  private resizeObserver: ResizeObserver;
+  private size: number;
+
+  @query('.divider') divider: HTMLElement;
+
+  /**
+   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+   * container's initial size.
+   */
+  @property({ type: Number, reflect: true }) position = 50;
+
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;
+
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  @property({ type: Boolean, reflect: true }) vertical = false;
+
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+   * host element is resized.
+   */
+  @property() primary?: 'start' | 'end';
+
+  /**
+   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+   * `"100px 50%"`.
+   */
+  @property() snap?: string;
+
+  /** How close the divider must be to a snap point until snapping occurs. */
+  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));
+    this.updateComplete.then(() => this.resizeObserver.observe(this));
+
+    this.detectSize();
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  private detectSize() {
+    const { width, height } = this.getBoundingClientRect();
+    this.size = this.vertical ? height : width;
+  }
+
+  private percentageToPixels(value: number) {
+    return this.size * (value / 100);
+  }
+
+  private pixelsToPercentage(value: number) {
+    return (value / this.size) * 100;
+  }
+
+  private handleDrag(event: PointerEvent) {
+    const isRtl = false;
+
+    if (this.disabled) {
+      return;
+    }
+
+    // Prevent text selection when dragging
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    drag(this, {
+      onMove: (x, y) => {
+        let newPositionInPixels = this.vertical ? y : x;
+
+        // Flip for end panels
+        if (this.primary === 'end') {
+          newPositionInPixels = this.size - newPositionInPixels;
+        }
+
+        // Check snap points
+        if (this.snap) {
+          const snaps = this.snap.split(' ');
+
+          snaps.forEach(value => {
+            let snapPoint: number;
+
+            if (value.endsWith('%')) {
+              snapPoint = this.size * (parseFloat(value) / 100);
+            } else {
+              snapPoint = parseFloat(value);
+            }
+
+            if (isRtl && !this.vertical) {
+              snapPoint = this.size - snapPoint;
+            }
+
+            if (
+              newPositionInPixels >= snapPoint - this.snapThreshold &&
+              newPositionInPixels <= snapPoint + this.snapThreshold
+            ) {
+              newPositionInPixels = snapPoint;
+            }
+          });
+        }
+
+        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+      },
+      initialEvent: event
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      let newPosition = this.position;
+      const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+
+      event.preventDefault();
+
+      if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+        newPosition -= incr;
+      }
+
+      if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+        newPosition += incr;
+      }
+
+      if (event.key === 'Home') {
+        newPosition = this.primary === 'end' ? 100 : 0;
+      }
+
+      if (event.key === 'End') {
+        newPosition = this.primary === 'end' ? 0 : 100;
+      }
+
+      this.position = clamp(newPosition, 0, 100);
+    }
+  }
+
+  private handleResize(entries: ResizeObserverEntry[]) {
+    const { width, height } = entries[0].contentRect;
+    this.size = this.vertical ? height : width;
+
+    // Resize when a primary panel is set
+    if (this.primary) {
+      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+    }
+  }
+
+  @watch('position')
+  handlePositionChange() {
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.positionInPixels = this.percentageToPixels(this.position);
+    this.emit('nile-reposition');
+  }
+
+  @watch('positionInPixels')
+  handlePositionInPixelsChange() {
+    this.position = this.pixelsToPercentage(this.positionInPixels);
+  }
+
+  @watch('vertical')
+  handleVerticalChange() {
+    this.detectSize();
+  }
+
+  render() {
+    const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+    const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
+    const isRtl = false;
+    const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+    const secondary = 'auto';
+
+    if (this.primary === 'end') {
+      if (isRtl && !this.vertical) {
+        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+      } else {
+        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+      }
+    } else {
+      if (isRtl && !this.vertical) {
+        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+      } else {
+        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+      }
+    }
+
+    // Unset the alt grid template property
+    this.style[gridTemplateAlt] = '';
+
+    return html`
+      <slot name="start" part="panel start" class="start"></slot>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? undefined : '0')}
+        role="separator"
+        aria-valuenow=${this.position}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="resize"
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <slot name="divider"></slot>
+      </div>
+
+      <slot name="end" part="panel end" class="end"></slot>
+    `;
+  }
+}
+
+export default NileSplitPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-split-panel': NileSplitPanel;
+  }
+}