Contents

/* eslint-disable custom-elements/expose-class-on-global */
import {controller, targets} from '@github/catalyst'

@controller
export class YatthoMultiInputElement extends HTMLElement {
  @targets fields: HTMLInputElement[]

  activateField(name: string) {
    const fieldWithName = this.findField(name)
    if (!fieldWithName) return

    for (const field of this.fields) {
      if (field === fieldWithName) continue

      field.setAttribute('disabled', 'disabled')
      field.setAttribute('hidden', 'hidden')

      field.parentElement?.setAttribute('hidden', 'hidden')
    }

    fieldWithName.removeAttribute('disabled')
    fieldWithName.removeAttribute('hidden')
    fieldWithName.parentElement?.removeAttribute('hidden')
  }

  private findField(name: string): HTMLElement | null {
    for (const field of this.fields) {
      if (field.getAttribute('data-name') === name) {
        return field
      }
    }

    return null
  }
}

declare global {
  interface Window {
    YatthoMultiInputElement: typeof YatthoMultiInputElement
  }
}

if (!window.customElements.get('yattho-multi-input')) {
  Object.assign(window, { YatthoMultiInputElement })
  window.customElements.define('yattho-multi-input', YatthoMultiInputElement)
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
yattho_view_components-0.1.1	lib/yattho/forms/yattho_multi_input.ts
yattho_view_components-0.0.1	lib/yattho/forms/yattho_multi_input.ts