@aquera/nile-elements 0.0.1-beta.1

package/src/nile-radio/index.ts

@@ -0,0 +1 @@
+export { NileRadio } from './nile-radio';

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

@@ -0,0 +1,123 @@
+/**
+* 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';
+
+/**
+ * Radio CSS
+ */
+export const styles = css`
+
+
+  :host {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    display: inline-flex;
+    align-items: top;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--nile-colors-dark-900);
+    vertical-align: middle;
+    cursor: pointer;
+    margin: 10px 0;
+  }
+
+  .radio--medium {
+    --toggle-size: 14px;
+    font-size: 14px;
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--nile-colors-primary-600);
+  }
+
+  .radio__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);
+    border-radius: 50%;
+    background-color: var(--nile-colors-white-base);
+    color: transparent;
+    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;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border: 1px solid var(--nile-colors-primary-600);
+    background: var(--nile-colors-primary-100);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    color: var(--nile-colors-primary-600);
+    border: 1px solid var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-white-base);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+    border: 1px solid var(--nile-colors-primary-900);
+    background-color: var(--nile-colors-white-base);
+  }
+
+  /* Checked + hover */
+  .radio__checked-icon:hover {
+    background-color: var(--nile-colors-primary-900);
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) .radio__control {
+    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline-offset: 1px;
+  }
+
+  /* Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border-color: 1px solid var(--nile-colors-neutral-500);
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  .radio__label {
+    display: inline-block;
+    color: var(--nile-colors-dark-900);
+    line-height: var(--nile-type-scale-3);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    font-size: var(--nile-type-scale-3);
+    margin-top: 2px;
+  }
+`;

package/src/nile-radio/nile-radio.ts

@@ -0,0 +1,150 @@
+/**
+ * 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-radio.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { state } from 'lit/decorators.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-radio
+ *
+ *
+* @dependency nile-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event blur - Emitted when the control loses focus.
+ * @event focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */
+@customElement('nile-radio')
+export class NileRadio extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @state() checked = false;
+  @state() protected hasFocus = false;
+
+  /** The radio's value. When selected, the radio group will receive this value. */
+  @property() value: string = '';
+
+  /** The radio's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Disables the radio. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+
+    this.setInitialAttributes();
+    this.addEventListeners();
+  }
+
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+
+  private addEventListeners() {
+    this.addEventListener('blur', this.handleBlur);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('focus', this.handleFocus);
+  }
+
+  private removeEventListeners() {
+    this.removeEventListener('blur', this.handleBlur);
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('focus', this.handleFocus);
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent('nile-blur', {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  private handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new CustomEvent('nile-focus', {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  private setInitialAttributes() {
+    this.setAttribute('role', 'radio');
+    this.setAttribute('tabindex', '-1');
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('checked')
+  handleCheckedChange() {
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', this.checked ? '0' : '-1');
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+          radio: true,
+          'radio--checked': this.checked,
+          'radio--disabled': this.disabled,
+          'radio--focused': this.hasFocus,
+          'radio--medium': this.size === 'medium',
+        })}
+      >
+        <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
+          ${this.checked
+            ? html` <span class="radio__checked-icon"></span> `
+            : ''}
+        </span>
+
+        <slot part="label" class="radio__label"></slot>
+      </span>
+    `;
+  }
+}
+
+export default NileRadio;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-radio': NileRadio;
+  }
+}

package/src/nile-radio-group/index.ts

@@ -0,0 +1 @@
+export { NileRadioGroup } from './nile-radio-group';

package/src/nile-radio-group/nile-radio-group.css.ts

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+
+export default css`
+
+  :host {
+    display: block;
+  }
+
+  .form-control--inline-radio ::slotted(nile-radio) {
+    display: inline-block;
+    margin-right: 1.3rem !important;
+  }
+
+  .form-control {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;

package/src/nile-radio-group/nile-radio-group.ts

@@ -0,0 +1,277 @@
+
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import styles from './nile-radio-group.css';
+import type { CSSResultGroup } from 'lit';
+import type NileRadio from '../nile-radio/nile-radio';
+
+/**
+ * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
+ *
+ * @dependency nile-button-group
+ *
+ * @slot - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ *
+ * @event change - Emitted when the radio group's selected value changes.
+ * @event input - Emitted when the radio group receives user input.
+ * @event invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @csspart button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */
+@customElement('nile-radio-group')
+export class NileRadioGroup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private customValidityMessage = '';
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() private hasButtonGroup = false;
+  @state() private errorMessage = '';
+  @state() defaultValue = '';
+
+  /**
+   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+   * instead.
+   */
+  @property() label = '';
+
+  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  /** The name of the radio group, submitted as a name/value pair with form data. */
+  @property() name = 'option';
+
+  /** The current value of the radio group, submitted as a name/value pair with form data. */
+  @property({ reflect: true }) value = '';
+
+  /**
+   * 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 = '';
+
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+
+  /** Used to show radio in inline or not */
+  @property({ type: Boolean, reflect: true }) labelInline = false;
+
+  /** Used to disabled or not */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+
+  private getAllRadios() {
+    return [...this.querySelectorAll<NileRadio>('nile-radio')];
+  }
+
+  private handleRadioClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest<NileRadio>('nile-radio')!;
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+
+    if (target.disabled || this.disabled) {
+      return;
+    }
+
+    this.value = target.value;
+    radios.forEach(radio => (radio.checked = radio === target));
+
+    if (this.value !== oldValue) {
+      this.emit('change',{value: this.value });
+      this.emit('input');
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.getAllRadios().forEach(radio => {
+      radio.disabled = this.disabled;
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
+      return;
+    }
+
+    const radios = this.getAllRadios().filter(radio => !radio.disabled);
+    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];
+    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = radios.indexOf(checkedRadio) + incr;
+
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+
+    this.getAllRadios().forEach(radio => {
+      radio.checked = false;
+
+      if (!this.hasButtonGroup) {
+        radio.tabIndex = -1;
+      }
+    });
+
+    this.value = radios[index].value;
+    radios[index].checked = true;
+
+    if (!this.hasButtonGroup) {
+      radios[index].tabIndex = 0;
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot!.querySelector('button')!.focus();
+    }
+
+    if (this.value !== oldValue) {
+      this.emit('change');
+      this.emit('input');
+    }
+
+    event.preventDefault();
+  }
+
+  private handleLabelClick() {
+    const radios = this.getAllRadios();
+    const checked = radios.find(radio => radio.checked);
+    const radioToFocus = checked || radios[0];
+
+    // Move focus to the checked radio (or the first one if none are checked) when clicking the label
+    if (radioToFocus) {
+      radioToFocus.focus();
+    }
+  }
+
+  private handleSlotChange() {
+    const radios = this.getAllRadios();
+
+    radios.forEach(radio => (radio.checked = radio.value === this.value));
+
+    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');
+
+    if (!radios.some(radio => radio.checked)) {
+      if (this.hasButtonGroup) {
+        const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;
+        buttonRadio.tabIndex = 0;
+      } else {
+        radios[0].tabIndex = 0;
+      }
+    }
+
+    if (this.hasButtonGroup) {
+      const buttonGroup = this.shadowRoot?.querySelector('nile-button-group');
+    }
+  }
+
+  private updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach(radio => (radio.checked = radio.value === this.value));
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    const defaultSlot = html`
+      <slot
+        @click=${this.handleRadioClick}
+        @keydown=${this.handleKeyDown}
+        @slotchange=${this.handleSlotChange}
+        role="presentation"
+      ></slot>
+    `;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--radio-group': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText
+        })}
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div class="visually-hidden">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <label class="radio-group__validation">
+              <input
+                type="text"
+                class="radio-group__validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+              />
+            </label>
+          </div>
+
+          ${this.hasButtonGroup
+            ? html`
+            ${defaultSlot}
+              `
+            :  html`
+            <div class="${this.labelInline ? `form-control--inline-radio`:``}"> ${defaultSlot}</div> `}
+        </div>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? 'false' : 'true'}
+        >
+          ${this.helpText}
+        </slot>
+      </fieldset>
+    `;
+  }
+}
+
+export default NileRadioGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-radio-group': NileRadioGroup;
+  }
+}