@aquera/nile-elements 0.0.79 → 0.0.81

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;
+  }
+}

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

@@ -0,0 +1,174 @@
+// import { fixture, expect, html } from "@open-wc/testing"
+// import './nile-stepper';
+// import { NileStepper } from "./nile-stepper";
+// import { NileStepperItem } from "../nile-stepper-item";
+// import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
+// describe('NileStepper', () => {
+//     it('should have default properties in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);
+//         expect(stepper.isVertical).to.be.false;
+//         expect(stepper.contentBelow).to.be.false;
+//         expect(stepper.currentStep).to.equal(0);
+//         expect(stepper.completedStep).to.equal(0);
+//         expect(stepper.size).to.equal('md');
+//         expect(stepper.icon).to.equal('tick');
+//     });
+
+//     it('should reflect properties to attributes in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical contentBelow current-step="1" completed-step="2" size="lg" icon="check"></nile-stepper>
+//     `);
+//         expect(stepper.getAttribute('vertical')).to.equal('');
+//         expect(stepper.getAttribute('contentBelow')).to.equal('');
+//         expect(stepper.getAttribute('current-step')).to.equal('1');
+//         expect(stepper.getAttribute('completed-step')).to.equal('2');
+//         expect(stepper.getAttribute('size')).to.equal('lg');
+//         expect(stepper.getAttribute('icon')).to.equal('check');
+//     });
+
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//         </nile-stepper>
+//         `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+
+//     it('should update NileStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+
+//     it('should render stepper with content below items correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper content-below>
+//         <nile-stepper-item title="Step 1" subtitle="Subtitle 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2" subtitle="Subtitle 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].contentBelow).to.be.true;
+//         expect(items[1].contentBelow).to.be.true;
+//     });
+
+//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE
+//     // it('should render stepper items with correct icons', async () => {
+//     //     const stepper = await fixture<NileStepper>(html`
+//     //     <nile-stepper icon="star">
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     </nile-stepper>
+//     // `);
+//     //     const items = stepper.querySelectorAll('nile-stepper-item');
+//     //     expect(items[0].icon).to.equal('star');
+//     //     expect(items[1].icon).to.equal('star');
+//     // });
+
+//     it('should emit events when currentStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="1" completed-step="4">
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         let currentChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-current-change', (event) => {
+//             currentChangeEvent = event as CustomEvent;
+//         });
+//         stepper.currentStep = 2;
+//         await stepper.updateComplete;
+//         expect(currentChangeEvent).to.exist;
+//         expect(currentChangeEvent!.detail.value).to.equal(2);
+//         expect(items[1].isCurrent).to.equal(true);
+//         expect(items[0].isComplete).to.equal(true);
+//     });
+
+//     it('should emit events when completedStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper completed-step="1"></nile-stepper>
+//     `);
+//         let completedChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-completed-change', (event) => {
+//             completedChangeEvent = event as CustomEvent;
+//         });
+//         stepper.completedStep = 2;
+//         await stepper.updateComplete;
+//         expect(completedChangeEvent).to.exist;
+//         expect(completedChangeEvent!.detail.value).to.equal(2);
+//     });
+
+//     it('should render slot content inside stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="2">
+//         <nile-stepper-item title="Step 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//         expect(items[1].isCurrent).to.equal(true);
+//     });
+// })
+
+// describe('NileVerticalStepperItem', () => {
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+
+//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+
+//     it('should render slot content inside vertical stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item title="Step 1"></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item title="Step 2"></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//     });
+// })

package/src/nile-stepper/nile-stepper.ts

@@ -115,7 +115,7 @@ export class NileStepper extends NileElement {
 				'nile-stepper':true,
 				'nile-stepper--horizontal':!this.isVertical,
 				'nile-stepper--vertical':this.isVertical
-			})}> 
+			})}>
 				<slot
 					@slotchange=${this.updateItems}
 				></slot>
@@ -132,4 +132,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'nile-stepper': NileStepper;
 	}
-}
+}