@aquera/nile-elements 0.0.1-beta.1

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

@@ -0,0 +1,343 @@
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { FormControlController, validValidityState } from '../internal/form';
+import { HasSlotController } from '../internal/slot';
+import { html, literal } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+import { styles } from './nile-button.css';
+import type { CSSResultGroup } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import NileElement from '../internal/nile-element';
+
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-blur - Emitted when the button loses focus.
+ * @event nile-focus - Emitted when the button gains focus.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<nile-icon>` element.
+ */
+
+@customElement('nile-button')
+export class NileButton extends NileElement implements NileFormControl {
+  static styles: CSSResultGroup = styles;
+
+  private readonly formControlController = new FormControlController(this, {
+    form: input => {
+      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query
+      // the form from the same root using its id
+      if (input.hasAttribute('form')) {
+        const doc = input.getRootNode() as Document | ShadowRoot;
+        const formId = input.getAttribute('form')!;
+        return doc.getElementById(formId) as HTMLFormElement;
+      }
+
+      // Fall back to the closest containing form
+      return input.closest('form');
+    },
+    assumeInteractionOn: ['click']
+  });
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+
+  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
+
+  @state() private hasFocus = false;
+  @state() invalid = false;
+  @property() title = ''; // make reactive to pass through
+
+  /** The button's theme variant. */
+  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'  = 'primary';
+
+  /** The button's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
+  @property({ type: Boolean, reflect: true }) caret = false;
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the button in a loading state. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  /** Draws an outlined button. */
+  @property({ type: Boolean, reflect: true }) outline = false;
+
+  /** Draws a pill-style button with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /**
+   * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the
+   * default slot.
+   */
+  @property({ type: Boolean, reflect: true }) circle = false;
+
+  /**
+   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
+   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
+   */
+  @property() type: 'button' | 'submit' | 'reset' = 'button';
+
+  /**
+   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+   * This attribute is ignored when `href` is present.
+   */
+  @property() name = '';
+
+  /**
+   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+   * button is the submitter. This attribute is ignored when `href` is present.
+   */
+  @property() value = '';
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href = '';
+
+  /** Tells the browser where to open the link. Only used when `href` is present. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
+
+  /**
+   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+   * setting the attribute to an empty string or a value of your choice, respectively.
+   */
+  @property() rel = 'noreferrer noopener';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
+  @property() download?: string;
+
+  /**
+   * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+   * value of this attribute must be an id of a form in the same document or shadow root as the button.
+   */
+  @property() form: string;
+
+  /** Used to override the form owner's `action` attribute. */
+  @property({ attribute: 'formaction' }) formAction: string;
+
+  /** Used to override the form owner's `enctype` attribute.  */
+  @property({ attribute: 'formenctype' })
+  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+
+  /** Used to override the form owner's `method` attribute.  */
+  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
+
+  /** Used to override the form owner's `novalidate` attribute. */
+  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
+
+  /** Used to override the form owner's `target` attribute. */
+  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).validity;
+    }
+
+    return validValidityState;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).validationMessage;
+    }
+
+    return '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener('click', this.handleHostClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+  }
+
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+  private handleClick() {
+    if (this.type === 'submit') {
+      this.formControlController.submit(this);
+    }
+
+    if (this.type === 'reset') {
+      this.formControlController.reset(this);
+    }
+  }
+
+  private handleHostClick(event: MouseEvent) {
+    // Prevent the click event from being emitted when the button is disabled or loading
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private isButton() {
+    return this.href ? false : true;
+  }
+
+  private isLink() {
+    return this.href ? true : false;
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.isButton()) {
+      // Disabled form controls are always valid
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Sets focus on the button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).checkValidity();
+    }
+
+    return true;
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).reportValidity();
+    }
+
+    return true;
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message: string) {
+    if (this.isButton()) {
+      (this.button as HTMLButtonElement).setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+
+    /* eslint-disable lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions */
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+          button: true,
+          'button--primary': this.variant === 'primary',
+          'button--secondary': this.variant === 'secondary',
+          'button--tertiary': this.variant === 'tertiary',
+          'button--caution': this.variant === 'caution',
+          'button--small': this.size === 'small',
+          'button--medium': this.size === 'medium',
+          'button--large': this.size === 'large',
+          'button--caret': this.caret,
+          'button--circle': this.circle,
+          'button--disabled': this.disabled,
+          'button--focused': this.hasFocus,
+          'button--loading': this.loading,
+          'button--standard': !this.outline,
+          'button--outline': this.outline,
+          'button--pill': this.pill,
+          'button--has-label': this.hasSlotController.test('[default]'),
+          'button--has-prefix': this.hasSlotController.test('prefix'),
+          'button--has-suffix': this.hasSlotController.test('suffix')
+        })}
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : this.type)}
+        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        name=${ifDefined(isLink ? undefined : this.name)}
+        value=${ifDefined(isLink ? undefined : this.value)}
+        href=${ifDefined(isLink ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink ? this.rel : undefined)}
+        role=${ifDefined(isLink ? undefined : 'button')}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+        <slot name="prefix" part="prefix" class="button__prefix"></slot>
+        <slot part="label" class="button__label"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        ${
+          this.caret ? html` <nile-icon part="caret" class="button__caret" name="caret"></nile-icon> ` : ''
+        }
+        ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}
+      </${tag}>
+    `;
+  }
+}
+
+export default NileButton;
+
+declare global {
+ interface HTMLElementTagNameMap {
+    'nile-button': NileButton;
+  }
+}

package/src/nile-checkbox/index.ts

@@ -0,0 +1 @@
+export { NileCheckbox } from './nile-checkbox';

package/src/nile-checkbox/nile-checkbox.css.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 { css } from 'lit-element';
+
+/**
+ * Checkbox CSS
+ */
+export const styles = css`
+   :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: top;
+    font-weight: 400;
+    color: var(--nile-colors-dark-900);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-3);
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-type-scale-3);
+    height: var(--nile-type-scale-3);
+    border: solid 1px var(--nile-colors-neutral-700);
+    background-color: var(--nile-colors-white-base);
+    border-radius: 4px;
+    transition: var(--nile-transition-duration-default border-color), var(--nile-transition-duration-default) background-color,
+    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default box-shadow);
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+
+  /* svg {
+      display:none !important;
+  } */
+
+  /* Hover */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    background: var(--nile-colors-primary-100);
+    border: 1px solid var(--nile-colors-primary-600);
+    border-radius: 4px;
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline-offset: 1px;
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-primary-600);
+  }
+
+  /* Checked/indeterminate + hover */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+    background: var(--nile-colors-primary-900);
+    border: 1px solid var(--nile-colors-primary-900);
+  }
+
+  /* Checked/indeterminate + focus */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline-offset: 1px;
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    display: inline-block;
+    color: var(--nile-type-scale-3);
+    line-height: 14px;
+    font-size: 14px;
+    margin-inline-start: 0.5em;
+    user-select: none;
+    margin-top: 2px;
+  }
+
+  :host([required]) .checkbox__label::after {
+    content: '*';
+    margin-inline-start: -2px
+  }
+
+  :host {
+    --nile-svg-stroke: white;
+    --nile-svg-stroke-width: 2px;
+  }
+`;
+
+export default [styles];

package/src/nile-checkbox/nile-checkbox.ts

@@ -0,0 +1,237 @@
+/**
+ * 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 { customElement } from 'lit/decorators.js';
+import { styles } from './nile-checkbox.css';
+
+import { classMap } from 'lit/directives/class-map.js';
+import { query, state } from 'lit/decorators.js';
+import { defaultValue } from '../internal/default-value';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Checkboxes allow the user to toggle an option on or off.
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The checkbox's label.
+ *
+ * @event nile-blur - Emitted when the checkbox loses focus.
+ * @event nile-change - Emitted when the checked state changes.
+ * @event nile-focus - Emitted when the checkbox gains focus.
+ * @event nile-input - Emitted when the checkbox receives input.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The square container that wraps the checkbox's checked state.
+ * @csspart control--checked - Matches the control part when the checkbox is checked.
+ * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
+ * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.
+ * @csspart label - The container that wraps the checkbox's label.
+ */
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-checkbox
+ *
+ */
+@customElement('nile-checkbox')
+export class NileCheckbox extends NileElement {
+  constructor() {
+    super();
+  }
+
+  static styles: CSSResultGroup = styles;
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  @state() private hasFocus = false;
+
+  @property() title = ''; // make reactive to pass through
+
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  @property() value: boolean;
+
+  /** The checkbox's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Disables the checkbox. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the checkbox in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** Label, declared this property for backward compatibility of old component  */
+  @property({ type: Boolean, reflect: true }) label = '';
+
+  /**
+   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+   * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
+   */
+  @property({ type: Boolean, reflect: true }) indeterminate = false;
+
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue('checked') defaultChecked = false;
+
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = '';
+
+  /** Makes the checkbox a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  private handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.dispatchEvent(
+      new CustomEvent('valueChange', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          checked: this.checked,
+        },
+      })
+    );
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('blur');
+  }
+
+  private handleInput() {
+    this.emit('input');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('focus');
+  }
+
+  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })
+  handleStateChange() {
+    this.input.checked = this.checked; // force a sync update
+    this.input.indeterminate = this.indeterminate; // force a sync update
+  }
+
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+
+  /** Sets focus on the checkbox. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the checkbox. */
+  blur() {
+    this.input.blur();
+  }
+
+
+  render() {
+    return html`
+      <label
+        part="base"
+        class=${classMap({
+          checkbox: true,
+          'checkbox--checked': this.checked,
+          'checkbox--disabled': this.disabled,
+          'checkbox--focused': this.hasFocus,
+          'checkbox--indeterminate': this.indeterminate,
+          'checkbox--medium': this.size === 'medium',
+        })}
+      >
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          title=${
+            this
+              .title /* An empty title prevents browser validation tooltips from appearing on hover */
+          }
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+
+        <span
+          part="control${this.checked ? ' control--checked' : ''}${this
+            .indeterminate
+            ? ' control--indeterminate'
+            : ''}"
+          class="checkbox__control"
+        >
+          ${this.checked
+            ? html`
+                <nile-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  color="white"
+                  library="system"
+                  name="tick"
+                  size="12"
+                ></nile-icon>
+              `
+            : ''}
+          ${!this.checked && this.indeterminate
+            ? html`
+                <nile-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  color="white"
+                  name="minus"
+                  size="12"
+                ></nile-icon>
+              `
+            : ''}
+        </span>
+
+        <div part="label" class="checkbox__label">
+          ${typeof this.label === 'boolean' ? '' : this.label}
+          <slot></slot>
+        </div>
+      </label>
+    `;
+  }
+}
+
+export default NileCheckbox;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-checkbox': NileCheckbox;
+  }
+}