Anchor ViewComponents

Pages

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="contents" data-controller="popover">
  <button name="button" type="button" class="flex items-center rounded-sm text-sm border py-1 pl-3 pr-2 bg-white" data-popover-target="button" data-testid="filter-description-location" popovertarget="location-popover">
    <span class="font-semibold uppercase mr-2">Location:</span>
    <span>All</span>
    <!-- Source: Iconoir, added via `bin/add_icon` -->
    <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 inline w-4 h-4 text-secondary ml-1" aria-hidden="true">
      <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>
  <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block min-w-[200px] max-w-[400px] max-h-[352px] p-0" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="location-popover" id="location-popover">
    <form id="location-form" class="flex flex-col gap-4 p-4 pb-1" accept-charset="UTF-8" method="get">
      <input value="%7B%7D" autocomplete="off" type="hidden" name="_display" id="_display" />
      <label class="sr-only" data-testid="label-location" for="location">Location</label>
      <div class="flex flex-col space-y-2 text-base">
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-0" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="0" name="location[]" id="location_0" />
          <div class="col-start-2"><label for="location_0">Location 0</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-1" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="1" name="location[]" id="location_1" />
          <div class="col-start-2"><label for="location_1">Location 1</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-2" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="2" name="location[]" id="location_2" />
          <div class="col-start-2"><label for="location_2">Location 2</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-3" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="3" name="location[]" id="location_3" />
          <div class="col-start-2"><label for="location_3">Location 3</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-4" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="4" name="location[]" id="location_4" />
          <div class="col-start-2"><label for="location_4">Location 4</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-5" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="5" name="location[]" id="location_5" />
          <div class="col-start-2"><label for="location_5">Location 5</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-6" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="6" name="location[]" id="location_6" />
          <div class="col-start-2"><label for="location_6">Location 6</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-7" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="7" name="location[]" id="location_7" />
          <div class="col-start-2"><label for="location_7">Location 7</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-8" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="8" name="location[]" id="location_8" />
          <div class="col-start-2"><label for="location_8">Location 8</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-9" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="9" name="location[]" id="location_9" />
          <div class="col-start-2"><label for="location_9">Location 9</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-10" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="10" name="location[]" id="location_10" />
          <div class="col-start-2"><label for="location_10">Location 10</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-11" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="11" name="location[]" id="location_11" />
          <div class="col-start-2"><label for="location_11">Location 11</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-12" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="12" name="location[]" id="location_12" />
          <div class="col-start-2"><label for="location_12">Location 12</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-13" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="13" name="location[]" id="location_13" />
          <div class="col-start-2"><label for="location_13">Location 13</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-14" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="14" name="location[]" id="location_14" />
          <div class="col-start-2"><label for="location_14">Location 14</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-15" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="15" name="location[]" id="location_15" />
          <div class="col-start-2"><label for="location_15">Location 15</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-16" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="16" name="location[]" id="location_16" />
          <div class="col-start-2"><label for="location_16">Location 16</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-17" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="17" name="location[]" id="location_17" />
          <div class="col-start-2"><label for="location_17">Location 17</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-18" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="18" name="location[]" id="location_18" />
          <div class="col-start-2"><label for="location_18">Location 18</label></div>
        </div>
        <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
          <input aria="false" data-testid="checkbox-location-19" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="19" name="location[]" id="location_19" />
          <div class="col-start-2"><label for="location_19">Location 19</label></div>
        </div>
      </div>
    </form>
  
    <div class="flex p-4 pt-3 sticky bottom-0 bg-white">
      <button type="submit" class="btn-small btn btn-primary" data-testid="apply-button" form="location-form">
        Apply
      </button>
      <a href="?_display=%257B%257D" class="btn-small btn btn-text" data-testid="clear-button">
        Clear
      </a>
    </div>
  </div>
</div>
1
2
3
4
5
6
anchor_filter(
  param_key: :location,
  type: :checkbox,
  label: "Location",
  options: Array.new(20).map.with_index { |_, i| ["Location #{i}", i] }
)

No notes provided.

No params configured.