@aquera/nile-elements 0.0.6-1 → 0.0.6-11

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

@@ -1,151 +0,0 @@
-/**
- * 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, query, state } from 'lit/decorators.js';
-import { styles } from './nile-radio-button.css';
-import NileElement from '../internal/nile-element';
-import { HasSlotController } from '../slot';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { watch } from '../internal/watch';
-
-/**
- * Nile icon component.
- *
- * @tag nile-radio-button
- *
- */
-@customElement('nile-radio-button')
-export class NileRadioButton extends NileElement {
-  /**
-   * The styles for RadioButton
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    '[default]',
-    'prefix',
-    'suffix'
-  );
-
-  @query('.button') input: HTMLInputElement;
-  @query('.hidden-input') hiddenInput: HTMLInputElement;
-
-  @state() protected hasFocus = false;
-
-  /**
-   * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
-   * it easier to style in button groups.
-   */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** The radio's value. When selected, the radio group will receive this value. */
-  @property() value: string;
-
-  /** Disables the radio button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-   * this attribute can typically be omitted.
-   */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** Draws a pill-style radio button with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'presentation');
-  }
-
-  private handleBlur() {
-    this.hasFocus = false;
-    this.emit('nile-blur');
-  }
-
-  private handleClick(e: MouseEvent) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    this.checked = true;
-  }
-
-  private handleFocus() {
-    this.hasFocus = true;
-    this.emit('nile-focus');
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
-  /** Sets focus on the radio button. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the radio button. */
-  blur() {
-    this.input.blur();
-  }
-
-  render() {
-    return html`
-      <div part="base" role="presentation">
-        <button
-          part="${`button${this.checked ? ' button--checked' : ''}`}"
-          role="radio"
-          aria-checked="${this.checked}"
-          class=${classMap({
-            button: true,
-            'button--default': true,
-            'button--checked': this.checked,
-            'button--disabled': this.disabled,
-            'button--focused': this.hasFocus,
-            'button--has-label': this.hasSlotController.test('[default]'),
-            'button--has-prefix': this.hasSlotController.test('prefix'),
-            'button--has-suffix': this.hasSlotController.test('suffix'),
-          })}
-          aria-disabled=${this.disabled}
-          type="button"
-          value=${ifDefined(this.value)}
-          tabindex="${this.checked ? '0' : '-1'}"
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @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>
-        </button>
-      </div>
-    `;
-  }
-}
-
-export default NileRadioButton;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-radio-button': NileRadioButton;
-  }
-}

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

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

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

@@ -1,72 +0,0 @@
-/**
- * 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';
-
-/**
- * RadioButtonGroup CSS
- */
-export const styles = css`
-  :host {
-    display: block;
-  }
-
-  .form-control {
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .form-control__label {
-    padding: 0;
-    font-size: 14px;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-
-  .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;
-  }
-
-  .form-control-input {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: inherit;
-    margin-bottom: 12px;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-`;
-
-export default [styles];

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

@@ -1,337 +0,0 @@
-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-button-group.css';
-import type { CSSResultGroup } from 'lit';
-import type NileRadioButton from '../nile-radio-button/nile-radio-button';
-
-/**
- * @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-button-group')
-export class NileRadioButtonGroup 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() defaultValue = '';
-
-  /**
-   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-   * instead.
-   */
-  @property() label = '';
-
-  /** 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;
-
-  @property({ attribute: 'help-text' }) helpText = '';
-
-  @property({ attribute: 'error-message' }) errorMessage = '';
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.defaultValue = this.value;
-    this.handleInitialDisabledState();
-  }
-
-  private getAllRadios() {
-    return [...this.querySelectorAll<NileRadioButton>('nile-radio-button')];
-  }
-
-  private handleRadioClick(event: MouseEvent) {
-    const target = (event.target as HTMLElement).closest<NileRadioButton>(
-      'nile-radio-button'
-    )!;
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
-
-    if (target.disabled) {
-      return;
-    }
-
-    this.value = target.value;
-    radios.forEach(radio => (radio.checked = radio === target));
-
-    if (this.value !== oldValue) {
-      this.emit('nile-change', { value: this.value });
-      this.emit('input');
-    }
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.getAllRadios().forEach(radio => {
-      radio.disabled = this.disabled;
-    });
-  }
-
-  private handleInitialDisabledState() {
-    this.getAllRadios().forEach(radio => {
-      radio.disabled = radio.hasAttribute('disabled')
-        ? 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');
-    }
-
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true }),
-    ] as HTMLElement[];
-
-    // console.log(slottedElements);
-
-    slottedElements.forEach(el => {
-      const index = slottedElements.indexOf(el);
-      const button = this.findButton(el);
-
-      if (button !== null) {
-        button.classList.toggle('nile-radio-button--first', index === 0);
-        button.classList.toggle(
-          'nile-radio-button--inner',
-          index > 0 && index < slottedElements.length - 1
-        );
-        button.classList.toggle(
-          'nile-radio-button--last',
-          index === slottedElements.length - 1
-        );
-      }
-    });
-  }
-
-  private findButton(el: HTMLElement) {
-    const selector = 'nile-radio-button';
-
-    return el.closest(selector) ?? el.querySelector(selector);
-  }
-
-  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 : false;
-    const hasErrorMessage = this.errorMessage ? true : false;
-
-    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">
-            <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>
-
-        ${hasHelpText
-          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
-          : ``}
-        ${hasErrorMessage
-          ? html`
-              <nile-form-error-message
-                >${this.errorMessage}</nile-form-error-message
-              >
-            `
-          : ``}
-      </fieldset>
-    `;
-  }
-}
-
-export default NileRadioButtonGroup;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-radio-button-group': NileRadioButtonGroup;
-  }
-}