@aquera/nile-elements 0.0.1-beta.1

package/src/nile-menu/index.ts

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * An nile-menu element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('nile-menu')
+export class NileMenu extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .nds-menu {
+      display: flex;
+      padding: 6px 6px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-bottom: 12px;
+      align-items: center;
+      text-decoration: none;
+    }
+
+    .nds-menu:hover {
+      background: rgba(0, 94, 166, 0.1);
+    }
+    .nds-menu__link {
+      font-family: var(--nile-font-family-sans-serif);
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 14px;
+      letter-spacing: 0.2px;
+      color: #131415;
+      text-decoration: none;
+      margin-left: 12px;
+    }
+    .nds-menu--active {
+      background: rgba(0, 94, 166, 0.1);
+    }
+
+    .nds-menu__icon {
+      margin-bottom: 0;
+      height: 14px;
+    }
+
+    .nds-menu--short {
+      width: auto;
+      /* min-width: 30px; */
+    }
+    .nds-menu--short > .nds-menu__link {
+      display:none;
+    }
+  `;
+
+  /**
+   * Button Lab
+   */
+  @property()
+  name = 'Heading 1';
+
+  /**
+   * Button Lab
+   */
+  @property()
+  icon: string = "";
+
+  /**
+   * Button Lab
+   */
+  @property()
+  isActive: boolean = false;
+
+  /**
+   * Displays shorter version
+   */
+  @property()
+  short: boolean = false;
+
+
+  get buttonClassMap() {
+    return {
+      'nds-menu--active': this.isActive,
+      'nds-menu--short': this.short
+    };
+  }
+
+  /**
+   * Button Lab
+   */
+  @property()
+  href = "/";
+
+  override render() {
+    const { name, icon, href } = this;
+    const hrefPath = `/${href}`;
+    return html`
+      <a class="nds-menu ${classMap(this.buttonClassMap)}">
+        <span class="nds-menu__icon">
+          <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
+        </span>
+        <span class="nds-menu__link">${this.name}</span>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-menu': NileMenu;
+  }
+}

package/src/nile-popup/index.ts

@@ -0,0 +1 @@
+export { NilePopup } from './nile-popup';

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

@@ -0,0 +1,54 @@
+/**
+* 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';
+
+/**
+ * Popup CSS
+ */
+export const styles = css`
+
+:host {
+    --arrow-color: var(--sl-color-neutral-1000);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 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));
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,459 @@
+/**
+ * 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 { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { offsetParent } from 'composed-offset-position';
+import NileElement from '../internal/nile-element';
+import {styles} from './nile-popup.css';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popup
+ *
+ */
+@customElement('nile-popup')
+export class NilePopup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private anchorEl: Element | null;
+  private cleanup: ReturnType<typeof autoUpdate> | undefined;
+
+  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
+  @query('.popup') popup: HTMLElement;
+  @query('.popup__arrow') private arrowEl: HTMLElement;
+
+  /**
+   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
+   * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
+   */
+  @property() anchor: Element | string;
+
+  /**
+   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+   * down and the popup will be hidden.
+   */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /**
+   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+   * panel inside of the viewport.
+   */
+  @property({ reflect: true }) placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /**
+   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
+   * clipped, using a `fixed` position strategy can often workaround it.
+   */
+  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';
+
+  /** The distance in pixels from which to offset the panel away from its anchor. */
+  @property({ type: Number }) distance = 0;
+
+  /** The distance in pixels from which to offset the panel along its anchor. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+   * `::part(arrow)` in your stylesheet.
+   */
+  @property({ type: Boolean }) arrow = false;
+
+  /**
+   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+   * align the arrow to the start, end, or center of the popover instead.
+   */
+  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';
+
+  /**
+   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+   * this will prevent it from overflowing the corners.
+   */
+  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;
+
+  /**
+   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+   * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+   */
+  @property({ type: Boolean }) flip = false;
+
+  /**
+   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+   * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+   * fallback strategy will be used instead.
+   * */
+  @property({
+    attribute: 'flip-fallback-placements',
+    converter: {
+      fromAttribute: (value: string) => {
+        return value
+          .split(' ')
+          .map(p => p.trim())
+          .filter(p => p !== '');
+      },
+      toAttribute: (value: []) => {
+        return value.join(' ');
+      }
+    }
+  })
+  flipFallbackPlacements = '';
+
+  /**
+   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+   * the popup should be positioned using the best available fit based on available space or as it was initially
+   * preferred.
+   */
+  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';
+
+  /**
+   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
+   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+   * change the boundary by passing a reference to one or more elements to this property.
+   */
+  @property({ type: Object }) flipBoundary: Element | Element[];
+
+  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;
+
+  /** Moves the popup along the axis to keep it in view when clipped. */
+  @property({ type: Boolean }) shift = false;
+
+  /**
+   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
+   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+   * change the boundary by passing a reference to one or more elements to this property.
+   */
+  @property({ type: Object }) shiftBoundary: Element | Element[];
+
+  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
+  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;
+
+  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
+  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';
+
+  /** Syncs the popup's width or height to that of the anchor element. */
+  @property() sync: 'width' | 'height' | 'both';
+
+  /**
+   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
+   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+   * change the boundary by passing a reference to one or more elements to this property.
+   */
+  @property({ type: Object }) autoSizeBoundary: Element | Element[];
+
+  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
+  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    // Start the positioner after the first update
+    await this.updateComplete;
+    this.start();
+  }
+
+  disconnectedCallback() {
+    this.stop();
+  }
+
+  async updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    // Start or stop the positioner when active changes
+    if (changedProps.has('active')) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+
+    // Update the anchor when anchor changes
+    if (changedProps.has('anchor')) {
+      this.handleAnchorChange();
+    }
+
+    // All other properties will trigger a reposition when active
+    if (this.active) {
+      await this.updateComplete;
+      this.reposition();
+    }
+  }
+
+  private async handleAnchorChange() {
+    await this.stop();
+
+    if (this.anchor && typeof this.anchor === 'string') {
+      // Locate the anchor by id
+      const root = this.getRootNode() as Document | ShadowRoot;
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof Element) {
+      // Use the anchor's reference
+      this.anchorEl = this.anchor;
+    } else {
+      // Look for a slotted anchor
+      this.anchorEl = this.querySelector<HTMLElement>('[slot="anchor"]');
+    }
+
+    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`
+    // and positioning can't be calculated on them
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;
+    }
+
+    if (!this.anchorEl) {
+      throw new Error(
+        'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'
+      );
+    }
+
+    this.start();
+  }
+
+  private start() {
+    // We can't start the positioner without an anchor
+    if (!this.anchorEl) {
+      return;
+    }
+
+    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
+      this.reposition();
+    });
+  }
+
+  private async stop(): Promise<void> {
+    return new Promise(resolve => {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = undefined;
+        this.removeAttribute('data-current-placement');
+        this.style.removeProperty('--auto-size-available-width');
+        this.style.removeProperty('--auto-size-available-height');
+        requestAnimationFrame(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  /** Forces the popup to recalculate and reposition itself. */
+  reposition() {
+    // Nothing to do if the popup is inactive or the anchor doesn't exist
+    if (!this.active || !this.anchorEl) {
+      return;
+    }
+
+    //
+    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware
+    //
+    const middleware = [
+      // The offset middleware goes first
+      offset({ mainAxis: this.distance, crossAxis: this.skidding })
+    ];
+
+    // First we sync width/height
+    if (this.sync) {
+      middleware.push(
+        size({
+          apply: ({ rects }) => {
+            const syncWidth = this.sync === 'width' || this.sync === 'both';
+            const syncHeight = this.sync === 'height' || this.sync === 'both';
+            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';
+            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';
+          }
+        })
+      );
+    } else {
+      // Cleanup styles if we're not matching width/height
+      this.popup.style.width = '';
+      this.popup.style.height = '';
+    }
+
+    // Then we flip
+    if (this.flip) {
+      middleware.push(
+        flip({
+          boundary: this.flipBoundary,
+          // @ts-expect-error - We're converting a string attribute to an array here
+          fallbackPlacements: this.flipFallbackPlacements,
+          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
+          padding: this.flipPadding
+        })
+      );
+    }
+
+    // Then we shift
+    if (this.shift) {
+      middleware.push(
+        shift({
+          boundary: this.shiftBoundary,
+          padding: this.shiftPadding
+        })
+      );
+    }
+
+    // Now we adjust the size as needed
+    if (this.autoSize) {
+      middleware.push(
+        size({
+          boundary: this.autoSizeBoundary,
+          padding: this.autoSizePadding,
+          apply: ({ availableWidth, availableHeight }) => {
+            if (this.autoSize === 'vertical' || this.autoSize === 'both') {
+              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);
+            } else {
+              this.style.removeProperty('--auto-size-available-height');
+            }
+
+            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {
+              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
+            } else {
+              this.style.removeProperty('--auto-size-available-width');
+            }
+          }
+        })
+      );
+    } else {
+      // Cleanup styles if we're no longer using auto-size
+      this.style.removeProperty('--auto-size-available-width');
+      this.style.removeProperty('--auto-size-available-height');
+    }
+
+    // Finally, we add an arrow
+    if (this.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this.arrowPadding
+        })
+      );
+    }
+
+    //
+    // 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'
+        ? (element: Element) => platform.getOffsetParent(element, offsetParent)
+        : platform.getOffsetParent;
+
+    computePosition(this.anchorEl, this.popup, {
+      placement: this.placement,
+      middleware,
+      strategy: this.strategy,
+      platform: {
+        ...platform,
+        getOffsetParent
+      }
+    }).then(({ x, y, middlewareData, placement }) => {
+      //
+      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of
+      // that, we'll use the same approach that Floating UI uses.
+      //
+      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31
+      //
+      const isRtl = getComputedStyle(this).direction === 'rtl';
+      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;
+
+      this.setAttribute('data-current-placement', placement);
+
+      Object.assign(this.popup.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+
+      if (this.arrow) {
+        const arrowX = middlewareData.arrow!.x;
+        const arrowY = middlewareData.arrow!.y;
+        let top = '';
+        let right = '';
+        let bottom = '';
+        let left = '';
+
+        if (this.arrowPlacement === 'start') {
+          // Start
+          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+          right = isRtl ? value : '';
+          left = isRtl ? '' : value;
+        } else if (this.arrowPlacement === 'end') {
+          // End
+          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+          right = isRtl ? '' : value;
+          left = isRtl ? value : '';
+          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+        } else if (this.arrowPlacement === 'center') {
+          // Center
+          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
+          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
+        } else {
+          // Anchor (default)
+          left = typeof arrowX === 'number' ? `${arrowX}px` : '';
+          top = typeof arrowY === 'number' ? `${arrowY}px` : '';
+        }
+
+        Object.assign(this.arrowEl.style, {
+          top,
+          right,
+          bottom,
+          left,
+          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'
+        });
+      }
+    });
+
+    this.emit('reposition');
+  }
+
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+      <div
+        part="popup"
+        class=${classMap({
+          popup: true,
+          'popup--active': this.active,
+          'popup--fixed': this.strategy === 'fixed',
+          'popup--has-arrow': this.arrow
+        })}
+      >
+        <slot></slot>
+        ${this.arrow ? html`<div part="arrow" class="popup__arrow" role="presentation"></div>` : ''}
+      </div>
+    `;
+  }
+}
+
+export default NilePopup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-popup': NilePopup;
+  }
+}

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

@@ -0,0 +1 @@
+export { NileProgressBar } from './nile-progress-bar';

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

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+export default css`
+  .nile-progress-bar__container {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .nile-progress-bar__progress-bar {
+    width: 100%;
+    counter-reset: step;
+    padding: 0;
+    margin: 0 auto;
+    list-style: none;
+    display: flex;
+    height: 2px;
+    justify-content: space-between;
+  }
+
+  .nile-progress-bar__progress-bar li {
+    position: relative;
+    width: 100%;
+    height: 2px;
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .nile-progress-bar__progress-bar li.changeColor::after {
+    background-color: var(--nile-colors-primary-600);
+  }
+
+  .nile-progress-bar__progress-bar li span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--nile-colors-primary-600);
+    height: 2px;
+    transition: all 1s linear;
+  }
+
+  .nile-progress-bar__reset {
+    background-color: var(--nile-colors-neutral-400);
+    position: absolute;
+    z-index: 1;
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { LitElement, html, css, property, customElement, CSSResultGroup } from 'lit-element';
+import styles from './nile-progress-bar.css';
+
+@customElement('nile-progress-bar')
+export class NileProgressBar extends LitElement {
+  static override styles: CSSResultGroup = styles;
+
+  @property({ type: Number }) value = 0;
+
+  override render() {
+    return html`
+      <div class="nile-progress-bar__container">
+        ${this.value === 0 ? html`<ul class="nile-progress-bar__progress-bar nile-progress-bar__reset"></ul>` : html``}
+        <ul class="nile-progress-bar__progress-bar">
+          <li><span style="width: ${this.value}%"></span></li>
+        </ul>
+      </div>
+    `;
+  }
+}