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

package/src/nile-grid-body/nile-grid-body.css.ts

@@ -0,0 +1,24 @@
+/**
+ * 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';
+
+/**
+ * GridBody CSS
+ */
+export const styles = css`
+  :host {
+    display: grid;
+    overflow-y: auto;
+    overflow-x: visible;
+    box-sizing: border-box;
+    background-color: var(--nile-colors-white-base);
+    height: 100%;
+  }
+`;
+
+export default [styles];

package/src/nile-grid-body/nile-grid-body.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-grid-body.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile grid-body component.
+ *
+ * @tag nile-grid-body
+ *
+ */
+@customElement('nile-grid-body')
+export class NileGridBody extends NileElement {
+  /**
+   * The styles for nile-grid-body
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'rowgroup');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div style="display: contents;">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridBody;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-body': NileGridBody;
+  }
+}

package/src/nile-grid-cell-item/nile-grid-cell-item.css.ts

@@ -0,0 +1,49 @@
+/**
+ * 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';
+
+/**
+ * Grid Cell Item CSS
+ */
+export const styles = css`
+  :host {
+    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
+    box-sizing: border-box;
+    min-width: 0;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--padding);
+    height: auto;
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+
+  ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: min-content;
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    z-index: 1;
+    width: 2px;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+`;
+
+export default [styles];

package/src/nile-grid-cell-item/nile-grid-cell-item.ts

@@ -0,0 +1,98 @@
+/**
+ * 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-grid-cell-item.css';
+import NileElement from '../internal/nile-element';
+import {
+  initCellResize,
+  cellResizeMove,
+  cellResizeDone,
+} from './nile-grid-cell-item.utils';
+
+/**
+ * Nile grid-cell component.
+ *
+ * @tag nile-grid-cell-item
+ *
+ */
+@customElement('nile-grid-cell-item')
+export class NileGridCellItem extends NileElement {
+  /**
+   * The styles for nile-grid-cell-item
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
+  @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
+  @property({ type: String, reflect: true, attribute: true }) align?:
+    | 'start'
+    | 'center'
+    | 'end';
+  @property({ type: String, reflect: true, attribute: true }) valign?:
+    | 'top'
+    | 'middle'
+    | 'bottom';
+  @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) textOverflowType: 'ellipsis' | 'clip' = 'ellipsis';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'cell');
+  }
+
+  private onHandlePointerDown = (ev: PointerEvent) => {
+    const el = this as HTMLElement;
+
+    const downXRef = { value: 0 };
+    const startWRef = { value: 0 };
+
+    const result = initCellResize(el, ev, downXRef, startWRef);
+    if (!result) return;
+
+    const { target, col } = result;
+
+    const move = (e: PointerEvent) =>
+      cellResizeMove(el, col, startWRef.value, downXRef.value, e);
+    const done = () => cellResizeDone(el, ev, target, move);
+
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', done, { once: true });
+    target.addEventListener('pointercancel', done, { once: true });
+  };
+
+  public render(): TemplateResult {
+    return html`
+      <div style="display: contents;">
+        <slot></slot>
+        ${this.resizable
+          ? html`
+              <div
+                aria-hidden="true"
+                class="resize-handle"
+                @pointerdown=${this.onHandlePointerDown}
+              ></div>
+            `
+          : null}
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridCellItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-cell-item': NileGridCellItem;
+  }
+}

package/src/nile-grid-head/nile-grid-head.css.ts

@@ -0,0 +1,21 @@
+/**
+ * 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';
+
+/**
+ * GridHead CSS
+ */
+export const styles = css`
+  :host([sticky]) {
+    position: sticky;
+    z-index: 2;
+    top: 0;
+  }
+`;
+
+export default [styles];

package/src/nile-grid-head/nile-grid-head.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-grid-head.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile grid-head component.
+ *
+ * @tag nile-grid-head
+ *
+ */
+@customElement('nile-grid-head')
+export class NileGridHead extends NileElement {
+  /**
+   * The styles for nile-grid-head
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  public render(): TemplateResult {
+    return html`
+      <div style="display: contents;">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridHead;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-head': NileGridHead;
+  }
+}

package/src/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -0,0 +1,48 @@
+/**
+ * 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';
+
+/**
+ * NileGridHeadItem CSS
+ */
+export const styles = css`
+  :host {
+    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
+    position: relative;
+    box-sizing: border-box;
+    user-select: none;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--padding);
+    background-color: var(--nile-colors-neutral-100);
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    z-index: 1;
+    width: 2px;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+`;
+
+export default [styles];

package/src/nile-grid-head-item/nile-grid-head-item.ts

@@ -0,0 +1,111 @@
+/**
+ * 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-grid-head-item.css';
+import NileElement from '../internal/nile-element';
+import {
+  initHeadResize,
+  headResizeMove,
+  headResizeDone,
+} from './nile-grid-head-item.utils';
+
+/**
+ * Nile grid-head-item component.
+ *
+ * @tag nile-grid-head-item
+ *
+ */
+@customElement('nile-grid-head-item')
+export class NileGridHeadItem extends NileElement {
+  /**
+   * The styles for nile-grid-head-item
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
+  @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
+  @property({ type: String, reflect: true, attribute: true }) scope:
+    | 'col'
+    | 'row' = 'col';
+  @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) sticky = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute(
+      'role',
+      this.scope === 'row' ? 'rowheader' : 'columnheader'
+    );
+  }
+
+  private onHandlePointerDown = (ev: PointerEvent) => {
+    const el = this as HTMLElement;
+
+    const downXRef = { value: 0 };
+    const startWRef = { value: 0 };
+
+    const result = initHeadResize(el, ev, downXRef, startWRef);
+    if (!result) return;
+
+    const { target, col } = result;
+
+    const move = (e: PointerEvent) =>
+      headResizeMove(el, col, startWRef.value, downXRef.value, e);
+
+    const done = () => headResizeDone(el, ev, target, move);
+
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', done, { once: true });
+    target.addEventListener('pointercancel', done, { once: true });
+  };
+
+  protected updated(changed: Map<string, unknown>) {
+    if (changed.has('scope')) {
+      this.setAttribute(
+        'role',
+        this.scope === 'row' ? 'rowheader' : 'columnheader'
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeAttribute('role');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div style="display: contents;">
+        <slot></slot>
+        ${this.resizable
+          ? html`
+              <div
+                aria-hidden="false"
+                class="resize-handle"
+                @pointerdown=${this.onHandlePointerDown}
+              ></div>
+            `
+          : null}
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridHeadItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-head-item': NileGridHeadItem;
+  }
+}

package/src/nile-grid-head-item/nile-grid-head-item.utils.ts

@@ -0,0 +1,66 @@
+export function initHeadResize(
+  el: HTMLElement,
+  ev: PointerEvent,
+  downXRef: { value: number },
+  startWRef: { value: number }
+) {
+  ev.preventDefault();
+  ev.stopPropagation();
+
+  const cStart = Number(el.dataset.cStart);
+  if (!cStart) return null;
+
+  const span = Number(el.getAttribute('colspan')) || 1;
+  const col = Math.max(0, cStart + span - 1 - 1);
+
+  downXRef.value = ev.clientX;
+  startWRef.value = el.getBoundingClientRect().width;
+
+  const target = ev.currentTarget as HTMLElement;
+  target.setPointerCapture(ev.pointerId);
+
+  el.dispatchEvent(
+    new CustomEvent('nile-resize', {
+      detail: { col, widthPx: startWRef.value },
+      bubbles: true,
+      composed: true,
+    })
+  );
+
+  el.dispatchEvent(
+    new CustomEvent('nile-resize-start', { bubbles: true, composed: true })
+  );
+
+  return { target, col };
+}
+
+export function headResizeMove(
+  el: HTMLElement,
+  col: number,
+  startW: number,
+  downX: number,
+  e: PointerEvent
+) {
+  const widthPx = Math.max(40, Math.round(startW + (e.clientX - downX)));
+  el.dispatchEvent(
+    new CustomEvent('nile-resize', {
+      detail: { col, widthPx },
+      bubbles: true,
+      composed: true,
+    })
+  );
+}
+
+export function headResizeDone(
+  el: HTMLElement,
+  ev: PointerEvent,
+  target: HTMLElement,
+  move: (e: PointerEvent) => void
+) {
+  target.releasePointerCapture(ev.pointerId);
+  target.removeEventListener('pointermove', move);
+
+  el.dispatchEvent(
+    new CustomEvent('nile-resize-end', { bubbles: true, composed: true })
+  );
+}

package/src/nile-grid-row/nile-grid-row.css.ts

@@ -0,0 +1,29 @@
+/**
+ * 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';
+
+/**
+ * GridRow CSS
+ */
+export const styles = css`
+  :host {
+    display: contents;
+  }
+
+  ::slotted(nile-grid-header) {
+    background-color: var(--nile-colors-neutral-100);
+  }
+
+  .row-layer {
+    background-color: var(--row-bg, transparent);
+    z-index: 0;
+    pointer-events: auto;
+  }
+`;
+
+export default [styles];

package/src/nile-grid-row/nile-grid-row.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-grid-row.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile grid-row component.
+ *
+ * @tag nile-grid-row
+ *
+ */
+@customElement('nile-grid-row')
+export class NileGridRow extends NileElement {
+  /**
+   * The styles for nile-grid-row
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'row');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div part="row-layer" class="row-layer" data-row-bg></div>
+
+      <div style="display: contents;">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridRow;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-row': NileGridRow;
+  }
+}

package/src/nile-icon/icons/svg/index.ts

@@ -272,6 +272,8 @@ export { default as mapupdate } from './mapupdate';
 export { default as markerpin01 } from './marker-pin-01';
 export { default as maximize } from './maximize';
 export { default as menu } from './menu';
+export { default as menu_close } from './menu_close';
+export { default as menu_open } from './menu_open';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
 export { default as monitor01 } from './monitor-01';

package/src/nile-icon/icons/svg/menu_close.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgMTJWMTEuMkg0LjQzMjc1VjEySDEzWk0xLjUzMDgxIDEwLjI3N0w0LjYzMTY5IDdMMS41MzA4MSAzLjczODRMMSA0LjMwNDZMMy41NzAyNSA3TDEgOS43MTA4TDEuNTMwODEgMTAuMjc3Wk0xMyA3LjRWNi42SDYuNTY3MjVWNy40SDEzWk0xMyAyLjhWMkg0LjQzMjc1VjIuOEgxM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/menu_open.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSAxMlYxMS4ySDkuNTY3MjVWMTJIMVpNMTIuNDY5MiAxMC4yNzdMOS4zNjgzMSA3TDEyLjQ2OTIgMy43Mzg0TDEzIDQuMzA0NkwxMC40Mjk4IDdMMTMgOS43MTA4TDEyLjQ2OTIgMTAuMjc3Wk0xIDcuNFY2LjZINy40MzI3NVY3LjRIMVpNMSAyLjhWMkg5LjU2NzI1VjIuOEgxWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-inline-sidebar/index.ts

@@ -0,0 +1 @@
+export { NileInlineSidebar } from './nile-inline-sidebar';