@aquera/nile-elements 0.0.1-beta.1

package/src/internal/slot.ts

@@ -0,0 +1,103 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+/** A reactive controller that determines when slots exist. */
+export class HasSlotController implements ReactiveController {
+  host: ReactiveControllerHost & Element;
+  slotNames: string[] = [];
+
+  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+
+  private hasDefaultSlot() {
+    return [...this.host.childNodes].some(node => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {
+        return true;
+      }
+
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        const tagName = el.tagName.toLowerCase();
+
+        // Ignore visually hidden elements since they aren't rendered
+        if (tagName === 'nile-visually-hidden') {
+          return false;
+        }
+
+        // If it doesn't have a slot attribute, it's part of the default slot
+        if (!el.hasAttribute('slot')) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }
+
+  private hasNamedSlot(name: string) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+
+  test(slotName: string) {
+    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+
+  hostConnected() {
+    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
+  }
+
+  hostDisconnected() {
+    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
+  }
+
+  handleSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+
+    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+      this.host.requestUpdate();
+    }
+  }
+}
+
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export function getInnerHTML(slot: HTMLSlotElement): string {
+  const nodes = slot.assignedNodes({ flatten: true });
+  let html = '';
+
+  [...nodes].forEach(node => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      html += (node as HTMLElement).outerHTML;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      html += node.textContent;
+    }
+  });
+
+  return html;
+}
+
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export function getTextContent(slot: HTMLSlotElement | undefined | null): string {
+  if (!slot) {
+    return '';
+  }
+  const nodes = slot.assignedNodes({ flatten: true });
+  let text = '';
+
+  [...nodes].forEach(node => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
+    }
+  });
+
+  return text;
+}

package/src/internal/watch.ts

@@ -0,0 +1,59 @@
+import type { LitElement } from 'lit';
+
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+
+type NonUndefined<A> = A extends undefined ? never : A;
+
+type UpdateHandlerFunctionKeys<T extends object> = {
+  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+
+interface WatchOptions {
+  /**
+   * If true, will only start watching after the initial update/render
+   */
+  waitUntilFirstUpdate?: boolean;
+}
+
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export function watch(propertyName: string | string[], options?: WatchOptions) {
+  const resolvedOptions: Required<WatchOptions> = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {
+    // @ts-expect-error - update is a protected property
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+
+    // @ts-expect-error - update is a protected property
+    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {
+      watchedProperties.forEach(property => {
+        const key = property as keyof ElemClass;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);
+            }
+          }
+        }
+      });
+
+      update.call(this, changedProps);
+    };
+  };
+}

package/src/nile-badge/index.ts

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * An nile-badge element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('nile-badge')
+export class NileBadge extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+    .nds-badge {
+      width: 24px;
+      height: 24px;
+      border-radius: 9rem;
+      font-size: 14px;
+      justify-content: space-around;
+      font-weight: bold;
+      display: flex;
+      background-color: rgb(221, 221, 221);
+      flex-wrap: nowrap;
+      align-items: center;
+      color: var(--nile-colors-dark-900);
+    }
+
+    .nds-badge:hover {
+      background: rgba(0, 94, 166, 0.1);
+    }
+    
+    .nds-badge__link {
+      font-family: var(--nile-font-family-sans-serif);
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: 0.2px;
+      text-decoration: none;
+      font-size: 12px;
+    }
+
+    .nds-badge__link:hover {
+      color: var(--nile-colors-dark-900);
+    }
+    
+    .nds-badge--active {
+      background-color: var(--nile-colors-primary-700);
+      color: var(--nile-colors-neutral-100);
+    }
+
+    .nds-badge--active:hover {
+      background-color: var(---nile-colors-primary-700);
+    }
+
+    .nds-badge__icon {
+      margin-bottom: 0;
+      height: 14px;
+    }
+  `;
+
+  /**
+   * Button Lab
+   */
+  @property()
+  name = 0;
+
+  /**
+   * Button Lab
+   */
+  @property()
+  icon: string = '';
+
+  /**
+   * Button Lab
+   */
+  @property()
+  active: boolean = false;
+
+  get buttonClassMap() {
+    return {
+      'nds-badge--active': this.active,
+    };
+  }
+
+  /**
+   * Button Lab
+   */
+  @property()
+  href = '/';
+
+  _hasSlotContent(slotName: string) {
+    const slot = this.querySelector(`slot[name=${slotName}]`);
+    console.log(slot, 'slot');
+  }
+
+  override render() {
+    const { name, icon, href } = this;
+    const hrefPath = `/${href}`;
+    return html`
+      <a class="nds-badge ${classMap(this.buttonClassMap)}">
+        <span class="nds-badge__link">${this.name}</span>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-badge': NileBadge;
+  }
+}
+
+// <span class="nds-badge__icon">
+// <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
+// </span>

package/src/nile-button/index.ts

@@ -0,0 +1 @@
+export { NileButton }  from './nile-button';

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

@@ -0,0 +1,422 @@
+/**
+ * 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';
+
+/**
+ * Button CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+    cursor: pointer;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    border-style: solid;
+    border-width: 1px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: var(--nile-font-size-base);
+    line-height: var(--nile-font-size-base);
+    text-align: center;
+    letter-spacing: 0.2px;
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: var(--nile-spacing-one-half-x);
+    transition: var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default) border,
+      var(--nile-transition-duration-default) box-shadow;
+    cursor: inherit;
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
+  }
+
+  .button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .button--disabled * {
+    pointer-events: none;
+  }
+
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(nile-icon) {
+    vertical-align: -2px;
+  }
+
+  .button--standard.button--secondary {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-500);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary.button--disabled {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary.button--disabled:hover,
+  .button--standard.button--secondary.button--disabled:active {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
+    box-shadow: none;
+  }
+
+  /* Primary */
+  .button--standard.button--primary {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-700);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary.button--disabled {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-neutral-700);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--primary.button--disabled:hover,
+  .button--standard.button--primary.button--disabled:active {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: none;
+  }
+
+  /* Tertiary */
+  .button--standard.button--tertiary {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
+  }
+
+  .button--standard.button--tertiary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-500);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--tertiary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-700);
+  }
+  .button--standard.button--tertiary.button--disabled {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .button--standard.button--tertiary.button--disabled:hover,
+  .button--standard.button--tertiary.button--disabled:active {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: none;
+  }
+
+  /* caution */
+  .button--standard.button--caution {
+    background-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500);
+    color: var(--nile-colors-white-base);
+  }
+  .button--standard.button--caution:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-700);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--caution:active:not(.button--disabled) {
+    background-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-500);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--tertiary.button--disabled {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-neutral-400);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .button--standard.button--tertiary.button--disabled:hover,
+  .button--standard.button--tertiary.button--disabled:active {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-neutral-400);
+    box-shadow: none;
+  }
+
+  /*
+ * Size modifiers
+ */
+
+  .button--small {
+    height: auto;
+    min-height: 24px;
+    font-size: 0.875rem;
+    line-height: calc(24px - var(--nile-spacing-one-half-x) * 2);
+    border-radius: var(--nile-radius-base-standard);
+  }
+
+  .button--medium {
+    height: auto;
+    min-height: 38px;
+    font-size: 0.875rem;
+    line-height: calc(38px - var(--nile-spacing-one-half-x) * 2);
+    font-size: var(--nile-font-size-base);
+    border-radius: var(--nile-radius-base-standard);
+  }
+
+  .button--large {
+    height: auto;
+    min-height: 40px;
+    font-size: 1rem;
+    line-height: calc(40px - var(--nile-spacing-one-half-x) * 2);
+    border-radius: 6px;
+  }
+
+  /*
+ * Pill modifier
+ */
+
+  .button--pill.button--small {
+    border-radius: 24px;
+  }
+
+  .button--pill.button--medium {
+    border-radius: 32px;
+  }
+
+  .button--pill.button--large {
+    border-radius: 40px;
+  }
+
+  /*
+ * Circle modifier
+ */
+
+  .button--circle {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .button--circle.button--small {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+
+  .button--circle.button--medium {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+  }
+
+  .button--circle.button--large {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .button--circle .button__prefix,
+  .button--circle .button__suffix,
+  .button--circle .button__caret {
+    display: none;
+  }
+
+  /* Caret modifier */
+
+  .button--caret .button__suffix {
+    display: none;
+  }
+
+  .button--caret .button__caret {
+    height: auto;
+  }
+
+  /*
+ * Loading modifier
+ */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button--loading .button__prefix,
+  .button--loading .button__label,
+  .button--loading .button__suffix,
+  .button--loading .button__caret {
+    visibility: hidden;
+  }
+
+  .button--loading nile-spinner {
+    --indicator-color: currentColor;
+    position: absolute;
+    font-size: 1em;
+    height: 1em;
+    width: 1em;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
+  /*
+ * Badges
+ */
+
+  .button ::slotted(nile-badge) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+
+  .button--rtl ::slotted(nile-badge) {
+    right: auto;
+    left: 0;
+    translate: -50% -50%;
+  }
+
+  /*
+ * Button spacing
+ */
+
+  .button--has-label.button--small .button__label {
+    padding: 0 var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0 var(--nile-spacing-2-x);
+  }
+
+  .button--has-label.button--large .button__label {
+    padding: 0 var(--nile-spacing-3-x);
+  }
+
+  .button--has-prefix.button--small {
+    padding-inline-start: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-prefix.button--small .button__label {
+    padding-inline-start: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--large {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--large .button__label {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--small,
+  .button--caret.button--small {
+    padding-inline-end: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-suffix.button--small .button__label,
+  .button--caret.button--small .button__label {
+    padding-inline-end: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-suffix.button--medium,
+  .button--caret.button--medium {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--large,
+  .button--caret.button--large {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--large .button__label,
+  .button--caret.button--large .button__label {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+`;