@aquera/nile-elements 0.0.1-beta.2 → 0.0.1-beta.4

package/src/nile-tag/index.ts

@@ -0,0 +1 @@
+export { NileTag } from './nile-tag';

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

@@ -0,0 +1,127 @@
+/**
+ * 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';
+
+/**
+ * Tag CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    border: solid 1px;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .tag__remove::part(base) {
+    color: inherit;
+    padding: 0;
+  }
+
+  /*
+   * Variant modifiers
+   */
+
+  .tag--primary {
+    background-color: hsl(204 100% 97.1%);
+    border-color: hsl(200.6 94.4% 86.1%);
+    color: hsl(201 90% 27.5%);
+  }
+
+  .tag--primary:active > nile-icon-button {
+    color: hsl(200.4 98% 39.4%);
+  }
+
+  .tag--success {
+    background-color: hsl(138.5 76.5% 96.7%);
+    border-color: hsl(141 78.9% 85.1%);
+    color: hsl(142.8 64.2% 24.1%);
+  }
+
+  .tag--success:active > nile-icon-button {
+    color: hsl(142.1 76.2% 36.3%);
+  }
+
+  .tag--neutral {
+    background-color: #e5e9eb;
+    border-color: #e5e9eb;
+    color: hsl(240 3.7% 15.9%);
+  }
+
+  .tag--neutral:active > nile-icon-button {
+    color: hsl(240 5.2% 33.9%);
+  }
+
+  .tag--warning {
+    background-color: hsl(48 100% 96.1%);
+    border-color: hsl(48 96.6% 76.7%);
+    color: hsl(26 90.5% 37.1%);
+  }
+
+  .tag--warning:active > nile-icon-button {
+    color: hsl(32.1 94.6% 43.7%);
+  }
+
+  .tag--danger {
+    background-color: hsl(0 85.7% 97.3%);
+    border-color: hsl(0 96.3% 89.4%);
+    color: hsl(0 70% 35.3%);
+  }
+
+  .tag--danger:active > nile-icon-button {
+    color: hsl(0 72.2% 50.6%);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .tag--small {
+    font-size: 0.75rem;
+    height: calc(1.875rem * 0.8);
+    line-height: calc(1.875rem - 1px * 2);
+    border-radius: 0.25rem;
+    padding: 0 0.5rem;
+  }
+
+  .tag--medium {
+    font-size: 0.875rem;
+    height: calc(2.5rem * 0.8);
+    line-height: calc(2.5rem - 1px * 2);
+    border-radius: 0.25rem;
+    padding: 0 0.75rem;
+  }
+
+  .tag--large {
+    font-size: 1rem;
+    height: calc(3.125rem * 0.8);
+    line-height: calc(3.125rem - 1px * 2);
+    border-radius: 0.25rem;
+    padding: 0 1rem;
+  }
+
+  .tag__remove {
+    margin-inline-start: 0.5rem;
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .tag--pill {
+    border-radius: 9999px;
+  }
+`;
+
+export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -0,0 +1,122 @@
+/**
+ * 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,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { styles } from './nile-tag.css';
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tag
+ *
+ */
+
+/**
+ * @summary Tags are used as labels to organize things or to indicate a selection.
+ * @status stable
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The tag's content.
+ *
+ * @event nile-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The tag's content.
+ * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */
+
+@customElement('nile-tag')
+export class NileTag extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  /** The tag's theme variant. */
+  @property({ reflect: true }) variant:
+    | 'primary'
+    | 'success'
+    | 'neutral'
+    | 'warning'
+    | 'danger'
+    | 'text' = 'neutral';
+
+  /** The tag's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws a pill-style tag with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /** Makes the tag removable and shows a remove button. */
+  @property({ type: Boolean }) removable = false;
+
+  private handleRemoveClick() {
+    this.emit('nile-remove');
+  }
+
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+          tag: true,
+
+          // Types
+          'tag--primary': this.variant === 'primary',
+          'tag--success': this.variant === 'success',
+          'tag--neutral': this.variant === 'neutral',
+          'tag--warning': this.variant === 'warning',
+          'tag--danger': this.variant === 'danger',
+          'tag--text': this.variant === 'text',
+
+          // Sizes
+          'tag--small': this.size === 'small',
+          'tag--medium': this.size === 'medium',
+          'tag--large': this.size === 'large',
+
+          // Modifiers
+          'tag--pill': this.pill,
+          'tag--removable': this.removable,
+        })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable
+          ? html`
+              <nile-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="close"
+                library="system"
+                label="remove"
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></nile-icon-button>
+            `
+          : ''}
+      </span>
+    `;
+  }
+}
+
+export default NileTag;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-tag': NileTag;
+  }
+}

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

@@ -49,13 +49,12 @@ export const styles = css`
   .tooltip__body {
     display: block;
     width: max-content;
-    max-width: undefined;
+    max-width: var(--max-width);
     border-radius: 0.25rem;
     background-color: hsl(240 3.7% 15.9%);
-    font-family: inherit;
     font-size: 0.875rem;
     font-weight: 400;
-    line-height: 1.4;
+    line-height: 1;
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;

package/src/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/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/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.d.ts

@@ -1,17 +0,0 @@
-export { NileButton } from './nile-button';
-export { NileHeading } from './nile-heading';
-export { NileIcon } from './nile-icon';
-export { NileInput } from './nile-input';
-export { NileSidebar } from './nile-sidebar';
-export { NileMenu } from './nile-menu';
-export { NileBadge } from './nile-badge';
-export { NileDrawer } from './nile-drawer';
-export { NileCheckbox } from './nile-checkbox';
-export { NileRadio } from './nile-radio';
-export { NileRadioGroup } from './nile-radio-group';
-export { NilePopup } from './nile-popup';
-export { NileTooltip } from './nile-tooltip';
-export { NileSlideToggle } from './nile-slide-toggle';
-export { NileLoader } from './nile-loader';
-export { NileProgressBar } from './nile-progress-bar';
-export { NileSpinner } from './nile-spinner';

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.js

@@ -1,18 +0,0 @@
-export { NileButton } from './nile-button';
-export { NileHeading } from './nile-heading';
-export { NileIcon } from './nile-icon';
-export { NileInput } from './nile-input';
-export { NileSidebar } from './nile-sidebar';
-export { NileMenu } from './nile-menu';
-export { NileBadge } from './nile-badge';
-export { NileDrawer } from './nile-drawer';
-export { NileCheckbox } from './nile-checkbox';
-export { NileRadio } from './nile-radio';
-export { NileRadioGroup } from './nile-radio-group';
-export { NilePopup } from './nile-popup';
-export { NileTooltip } from './nile-tooltip';
-export { NileSlideToggle } from './nile-slide-toggle';
-export { NileLoader } from './nile-loader';
-export { NileProgressBar } from './nile-progress-bar';
-export { NileSpinner } from './nile-spinner';
-//# sourceMappingURL=index.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/form.d.ts

@@ -1,73 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { NileFormControl } from '../internal/nile-element';
-import type { NileButton } from '../nile-button';
-export declare const formCollections: WeakMap<HTMLFormElement, Set<NileFormControl>>;
-export interface FormControlControllerOptions {
-    /** A function that returns the form containing the form control. */
-    form: (input: NileFormControl) => HTMLFormElement | null;
-    /** A function that returns the form control's name, which will be submitted with the form data. */
-    name: (input: NileFormControl) => string;
-    /** A function that returns the form control's current value. */
-    value: (input: NileFormControl) => unknown | unknown[];
-    /** A function that returns the form control's default value. */
-    defaultValue: (input: NileFormControl) => unknown | unknown[];
-    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
-    disabled: (input: NileFormControl) => boolean;
-    /**
-     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
-     * prevent submission and trigger the browser's constraint violation warning.
-     */
-    reportValidity: (input: NileFormControl) => boolean;
-    /** A function that sets the form control's value */
-    setValue: (input: NileFormControl, value: unknown) => void;
-    /**
-     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
-     * states such as user-valid and user-invalid.user interacted validity states. */
-    assumeInteractionOn: string[];
-}
-/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
-export declare class FormControlController implements ReactiveController {
-    host: NileFormControl & ReactiveControllerHost;
-    form?: HTMLFormElement | null;
-    options: FormControlControllerOptions;
-    constructor(host: ReactiveControllerHost & NileFormControl, options?: Partial<FormControlControllerOptions>);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    hostUpdated(): void;
-    private attachForm;
-    private detachForm;
-    private handleFormData;
-    private handleFormSubmit;
-    private handleFormReset;
-    private handleInteraction;
-    private reportFormValidity;
-    private setUserInteracted;
-    private doAction;
-    /** Returns the associated `<form>` element, if one exists. */
-    getForm(): HTMLFormElement | null;
-    /** Resets the form, restoring all the control to their default value */
-    reset(submitter?: HTMLInputElement | NileButton): void;
-    /** Submits the form, triggering validation and form data injection. */
-    submit(submitter?: HTMLInputElement | NileButton): void;
-    /**
-     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
-     * the host element immediately, i.e. before Lit updates the component in the next update.
-     */
-    setValidity(isValid: boolean): void;
-    /**
-     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
-     * that affects constraint validation changes so the component receives the correct validity states.
-     */
-    updateValidity(): void;
-    /**
-     * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
-     * If the `sl-invalid` event will be cancelled then the original `invalid`
-     * event (which may have been passed as argument) will also be cancelled.
-     * If no original `invalid` event has been passed then the `sl-invalid`
-     * event will be cancelled before being dispatched.
-     */
-    emitInvalidEvent(originalInvalidEvent?: Event): void;
-}
-export declare const validValidityState: ValidityState;
-export declare const valueMissingValidityState: ValidityState;
-export declare const customErrorValidityState: ValidityState;