@aquera/nile-elements 0.0.6-9 → 0.0.7-1

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;
-  }
-}