Cfa Ui Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script>
  function tinToggle() {
    return {
      show: false,
      selectionStart: null,
      selectionEnd: null,
      announcement: '',
      visibleText: "TIN visible",
      hiddenText: "TIN hidden for security",
      init() {
        this.$watch('show', (value) => {
          this.preserveCursor()
          this.announcement = value ? this.visibleText : this.hiddenText
          this.restoreCursor()
        })
      },
      preserveCursor() {
        this.selectionStart = this.$refs.input.selectionStart
        this.selectionEnd = this.$refs.input.selectionEnd
      },
      restoreCursor() {
        this.$nextTick(() => {
          this.$refs.input.focus()
          if (this.selectionStart !== null && this.selectionEnd !== null) {
            this.$refs.input.setSelectionRange(this.selectionStart, this.selectionEnd)
          }
        })
      }
    }
  }
</script>
<div class="cfa-stack-med">
  <div x-data="tinToggle()">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_ssn">Translation missing: en.ssn</label>
      <p id="form_component_preview_test_model_ssn_help" class="help_text">
        Translation missing: en.ssn_help
      </p>
      <input type="text" inputmode="numeric" autocomplete="off" class="w-full max-w-sm" placeholder="000-00-0000" x-ref="input" x-mask="999-99-9999" x-bind:style="show ? '' : '-webkit-text-security: disc;'" data-tin-input="" aria-required="true" aria-describedby="form_component_preview_test_model_ssn_help" name="form_component_preview_test_model[ssn]" id="form_component_preview_test_model_ssn" />
    </div>
    <div class="mt-cfa-sm">
      <input type="checkbox" name="form_component_preview_test_model_ssn_show" id="form_component_preview_test_model_ssn_show" value="1" class="accent-text-default" autocomplete="off" x-model="show" />
      <label for="form_component_preview_test_model_ssn_show">Show</label>
    </div>
    <div
        class="sr-only"
        role="alert"
        aria-atomic="true"
        x-text="announcement"
      ></div>
  </div>
  <div x-data="tinToggle()">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_ssn_confirmation">Confirm Translation missing: en.ssn</label>
      <input type="text" inputmode="numeric" autocomplete="off" class="w-full max-w-sm" placeholder="000-00-0000" x-ref="input" x-mask="999-99-9999" x-bind:style="show ? '' : '-webkit-text-security: disc;'" data-tin-input="" aria-required="true" name="form_component_preview_test_model[ssn_confirmation]" id="form_component_preview_test_model_ssn_confirmation" />
    </div>
    <div class="mt-cfa-sm">
      <input type="checkbox" name="form_component_preview_test_model_ssn_confirmation_show" id="form_component_preview_test_model_ssn_confirmation_show" value="1" class="accent-text-default" autocomplete="off" x-model="show" />
      <label for="form_component_preview_test_model_ssn_confirmation_show">Show</label>
    </div>
    <div
        class="sr-only"
        role="alert"
        aria-atomic="true"
        x-text="announcement"
      ></div>
  </div>
</div>
1
2
3
4
5
6
7
8
render(TinComponent.new(
  form:,
  method: :ssn,
  label: I18n.t(:ssn),
  help_text: I18n.t(:ssn_help),
  confirmation_method: :ssn_confirmation,
  confirmation_label: "Confirm #{I18n.t(:ssn)}"
))

TIN paired with a confirmation field (first entry, nothing saved yet).

No params configured.